🍜 Full-Stack Recipe Application Development 🍜

Create an interactive recipe application as a full-stack developer with skills in Node.js and React.js. The objective is to build a responsive user interface, implement data retrieval from a third-party API (MongoDB), and manage user preferences. Backend development involves creating a Node.js server, implementing RESTful API endpoints for recipe search and user preferences, user registration/authentication, and storing preferences in a database (MongoDB). Frontend development includes designing a user interface for recipe search, displaying results and recipe details, saving favourites, and ensuring cross-browser compatibility. Git is used for version control, and the assignment is evaluated based on requirements, code quality, UI design, server functionality, user authentication, version control, deployment, and user experience. Plagiarism is prohibited, and best practices should be followed. Link

Frontend Deployed URL 👉 Click here

Backend API 👉 Click here

Technologies Used

Frontend

Backend

Tools

Deployment

Features

Backend Development:

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

Frontend Development:

React.js for the frontend.
Design a user interface for searching recipes using keywords or filters.
Display search results with relevant recipe information (title, image, summary).
Create a recipe details page showing ingredients, instructions, and nutritional information.
Allow users to save their favourite recipes and view their saved recipes.
Ensure responsive design and cross-browser compatibility.

Additional Requirements:

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

Registration and authentication using OAT

Display search results with relevant recipe information (title, image, summary)

Recipe details page showing ingredients, instructions, and nutritional information

Favourite recipes and view their saved recipes

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 favourite recipes. Below is an overview of the key components and functionality of the project:

Backend Development:

Node.js Server: Create a server Express.js MVC framework to handle the backend logic.
API Endpoints: Implement RESTful API endpoints to handle recipe search and user preferences, allowing users to interact with the application.
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.
User Authentication: Implement user registration and authentication using OAT to secure user accounts and ensure data privacy.
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.

Frontend Development:

Frontend Framework: React.js for frontend development to create a dynamic and interactive user interface.
Recipe Search: Design a user-friendly interface for users to search for recipes using keywords or filters, enhancing the user's experience.
Recipe Display: Display search results with essential recipe information like title, image, and summary, making it easy for users to browse through the options.
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.
Favorites and Saved Recipes: Allow users to save their favourite recipes and view their saved recipes, promoting user engagement and personalization.
Responsiveness: Ensure responsive design to adapt to various screen sizes and cross-browser compatibility for a seamless user experience.

Additional Functionality:

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

Getting Started

Clone the repository to your local machine.
Set up the backend API using Express and Mongoose (provide instructions if necessary).
Navigate to the project directory.
Run npm install to install the required dependencies.
Run npm start to start the development server.

This is an individual project that I developed as a solo full-stack web developer within a span of 4 days.

Contribution Guidelines

We welcome contributions to the Full-Stack Recipe Application Development project. If you have ideas for new features or find any bugs, please open an issue in the repository. Pull requests are also encouraged.

Show Your Support

If you find this project interesting or valuable, please consider giving it a ⭐️.

AyushiVashisth / webledger-assignment