Recipe Hub is a full-stack web application that allows food enthusiasts to explore, share, and manage recipes. This repository contains the frontend for the application, which is built using Angular 18 and styled with Tailwind CSS and Angular Material.
The frontend connects to the backend built with Spring Boot 3 and a MySQL database.
For the backend, check out the Recipe Hub Backend repository.
- Angular 18: Frontend framework
- Tailwind CSS: Utility-first CSS framework for styling
- Angular Material: UI component library for building responsive layouts and components
- JWT Authentication: To manage secure access to the application
- Font Awesome: For icons in the UI
- Recipe Display: Users can view recipes created by them or other users.
- Recipe Management: Authenticated users can create, update, and delete recipes.
- Recipe Detail Dialog: Users can click on a recipe to view detailed information in a modal dialog. This includes the recipe's title, image, description, ingredients, and step-by-step instructions.
- Like Recipes: Users can like recipes to show appreciation.
- User Authentication: Users can register, log in, and authenticate using JWT.
- Responsive UI: The application is fully responsive and designed for both desktop and mobile devices.
Authentication Form :
HomePage :
Recipe Detailed Dialog :
Create Recipe :
Edit Recipe :
You can try the live version of the Recipe Hub through the link below:
Live Demo
The project is deployed on Cloudflare Pages (frontend), with a backend deployed on Railway. Note that authentication will be required to fully interact with the application.
To run the frontend locally, ensure you have the following tools installed:
- Node.js (version 18 or higher)
- Angular CLI (version 15 or higher)
- npm (Node Package Manager)
Clone the repository to your local machine:
git clone https://github.com/Anurag-code107/RecipeHub-Frontend.git
cd RecipeHub-FrontendInstall the required dependencies using npm:
npm installTo start the frontend application in development mode, run the following command:
ng serveThe frontend will be accessible at:
http://localhost:4200/
- The frontend interacts with the backend API for user registration, login, and authentication.
- Upon successful login, the backend will return a JWT token, which will be used for accessing protected routes.
- The token is stored in the browser's local storage and added to the headers of requests to the backend.
The frontend communicates with the backend API to perform actions such as:
- Get All Recipes: Fetches a list of all available recipes.
- Create/Update/Delete Recipes: Allows authenticated users to manage their recipes.
- Like Recipes: Allows users to like recipes, triggering updates to the backend.
We welcome contributions to this project! Please fork the repository and submit a pull request with your changes.
This project is licensed under the Apache License 2.0.
If you encounter any issues or have any questions, feel free to open an issue in the GitHub repository issues page or contact us directly at anuragnegi2704@gmail.com.