🏷️ Recipe Application

This Recipe web application allows users to explore and discover various recipes. It provides a user-friendly interface for searching for recipes by name and navigating through a paginated list of recipes. In addition to these features, the application includes user authentication, responsiveness and add-to-favorite functionality, making it convenient for users to save and access their favorite recipes.

---

Frontend Deployed URL 👉 (https://ajay-recipe-app.netlify.app)

Backend Deployed URL 👉 (https://impossible-skirt-cod.cyclic.app/)

🏷️ Tech Stack Used:-

Frontend

React	Axios	JavaScript	Tailwind CSS

Backend

Node	Express	MongoDB	Mongoose	JWT

Features Available

Frontend Development:

1. Vite+React.js for the front end.
2. Design a user interface for searching recipes using keywords.
3. Display search results with relevant recipe information (title, image, summary).
4. Create a recipe details page showing ingredients, instructions, and nutritional information.
5. Allow users to save their favorite recipes and view their saved recipes.
6. Ensure responsive design and cross-browser compatibility.

Backend Development:

1. Used Express.js MVC framework.
2. Implement RESTful API endpoints for recipe search and user preferences.
3. Integrate with a third-party API (e.g., Spoonacular) to fetch recipe data based on user searches.
4. Implement user registration and authentication using JWT.
5. Store user preferences, such as saved recipes, in a database (MongoDB).

Additional Requirements:

1. Utilize Git for version control and maintain a well-structured repository.
2. Write clean, maintainable, documented code following best practices and industry standards.
3. Implement error handling with meaningful error messages for users.
4. Include loading indicators during API calls and other asynchronous operations.
5. Optionally, implement pagination or infinite scrolling for search results.
6. Enhance the user experience with features like sorting, filtering, and categorizing recipes (optional).

Image Preview

🏷️ Home Page

🏷️ Login Page

🏷️ Registration Page

🏷️ View Recipe Details Page

🏷️ Favorite Recipes Page

Project Overview

The project is to develop an interactive recipe application as a full-stack developer, focusing on both backend and frontend aspects. This application aims to enable users to search for recipes, view recipe details, and save their favorite recipes. Below is an overview of the key components and functionality of the project:

Frontend Development:

1. Frontend Framework: React.js for frontend development to create a dynamic and interactive user interface.
2. Recipe Search: Design a user-friendly interface for users to search for recipes using keywords or filters, enhancing the user's experience.
3. Recipe Display: Display search results with essential recipe information like title, image, and summary, making it easy for users to browse through the options.
4. Recipe Details: Implement a recipe details page that provides in-depth information, including ingredients, instructions, and nutritional details, giving users comprehensive insights into the recipes.
5. Favorites and Saved Recipes: Allow users to save their favorite recipes and view their saved recipes, promoting user engagement and personalization.
6. Responsiveness: Ensure responsive design to adapt to various screen sizes and cross-browser compatibility for a seamless user experience.

Backend Development:

1. Node.js Server: Create a server Express.js MVC framework to handle the backend logic.
2. API Endpoints: Implement RESTful API endpoints to handle recipe search and user preferences, allowing users to interact with the application.
3. Third-party API Integration: Integrate with a third-party API like Spoonacular to fetch recipe data based on user searches, enriching the application with a wide range of recipes.
4. User Authentication: Implement user registration and authentication using OAT to secure user accounts and ensure data privacy.
5. Database Storage: Store user preferences, such as saved recipes, in a database of your choice, which could be MongoDB. This ensures that user-specific data is persistently stored.

Additional Functionality:

1. Version Control: Utilize Git for version control to keep track of code changes and facilitate collaboration.
2. Code Quality: Write clean, maintainable, well-documented code following industry best practices and standards.
3. Error Handling: Implement error handling with meaningful error messages to guide users in case of issues.
4. Loading Indicators: Include loading indicators during API calls and other asynchronous operations to enhance user feedback.
5. Optional Features: Consider implementing optional features like pagination, infinite scrolling, sorting, filtering, and categorizing recipes to enhance the user experience further.

💝 Thank you for visiting . Happy Exploring 💝