RECIPIE APP USING REACT

Introduction
Welcome to the Recipe App—a revolutionary
digital cookbook designed to elevate your
culinary adventures. Built using the dynamic
capabilities of React.js, the Recipe App
combines innovation with a user-centric
design, offering a seamless platform for
discovering, creating, and enjoying recipes.
Whether you’re a seasoned chef or a home
cook, the Recipe App provides a curated
experience, transforming how you explore the
art of cooking. With its intuitive interface,
detailed recipes, and integrated tools for
nutritional insights, this app ensures that
every cooking session is a delightful journey.

Scenario-Based Introduction
Imagine it’s a busy weekday evening, and
you’ve just returned home after a long day.
You’re craving a quick and healthy meal but
can’t think of what to cook. You open the
Recipe App, which greets you with a clean,
visually appealing interface, showcasing a
variety of recipes tailored to your preferences.
With a few swipes, you select a recipe for a
20-minute chicken stir-fry. The app provides
you with a precise list of ingredients already
adjusted to your household size. As you cook,
the step-by-step instructions guide you
seamlessly, while built-in timers and tips
ensure you avoid common pitfalls.

Target Audience
The Recipe App is designed to cater to a
diverse group of users, each with unique
culinary needs and preferences:
1. Home Cooks
Individuals who enjoy preparing meals at
home and are always on the lookout for
new and exciting recipes to try.
 2. Food Enthusiasts
Passionate cooks and culinary explorers
who love experimenting with new cuisines,
techniques, and flavors to expand their
repertoire.
Project Goals and Objectives
The Recipe App is designed with the following
key goals and objectives to ensure an
intuitive, efficient, and enjoyable user
experience:
1. Simplify Cooking
Provide a user-friendly platform that
makes it easy for individuals to find,
customize, and follow recipes without
stress. The app’s simple design helps
users quickly navigate and prepare meals
with minimal effort.
2. Enhance Culinary Skills
Offer a rich collection of recipes with
detailed instructions, cooking tips, and
step-by-step visuals that empower users
to explore new cooking techniques and
expand their skill sets in the kitchen.
 3. Promote Healthy Eating
Integrate nutritional data for every recipe,
allowing users to make informed choices
about their meals. The app helps users
track calories, macronutrients, and
ingredients to align with their health
goals.
Key Features
The Recipe App offers a variety of
features designed to enhance the user
experience:
1. Recipe Search
Users can easily search for recipes
based on ingredients, cuisine, or
dietary restrictions. The search
function is optimized for speed and
accuracy, making it simple to find the
perfect dish.
2. Nutritional Information
Every recipe includes detailed
 nutritional data, including calories,
macronutrients (proteins, fats, carbs),
and ingredient-specific information,
enabling users to make healthier meal
choices.
3. Step-by-Step Instructions
Clear, easy-to-follow instructions for
each recipe help users through the
cooking process, ensuring they
achieve great results every time.
4. Meal Planner
Users can plan their weekly meals by
saving recipes and organizing them
into a meal schedule, ensuring they
have everything they need to make
planned dishes.
Pre-Requisites :
Here are the key prerequisites for developing
a frontend application using React.js: Node.js
and npm: Node.js is a powerful JavaScript
runtime environment that allows you to run
JavaScript code on the local environment. It
provides a scalable and efficient platform for
building network applications. Install Node.js
and npm on your development machine, as
they are required to run JavaScript on the
server-side.
● Download: https://nodejs.org/en/download/
● link:
https://nodejs.org/en/download/package-
manager
React.js:
React.js is a popular JavaScript library for
building user interfaces. It enables developers
to create interactive and reusable UI
components, making it easier to build
dynamic and responsive web applications.
Install React.js, a JavaScript library for building
user interfaces.
● Create a new React app: npm create
vite@latest Enter and then type project-name
and select preferred frameworks and then
enter
● Navigate to the project directory: cd
project-name npm install
● Running the React App: With the React app
created, you can now start the development
server and see your React application in
action.
Start the development :
serve npm run dev
This command launches the development
server, and you can access your React app at
http://localhost:5173 in your web browser.
HTML, CSS, and JavaScript:
Basic knowledge of HTML for creating the
structure of your app, CSS for styling, and
JavaScript for client-side interactivity is
essential.

Version Control:
Use Git for version control, enabling
collaboration and tracking changes
throughout the development process.
Platforms like GitHub or Bitbucket can host
your repository.
• Git: Download and installation instructions
can be found at:
https://git-scm.com/download
Development Environment: Choose a code
editor or Integrated Development
Environment (IDE) that suits your preferences,
such as Visual Studio Code, Sublime Text, or
WebStorm.
• Visual Studio Code: Download from
https://code.visualstudio.com/download
• Sublime Text: Download from
https://www.sublimetext.com/download
•WebStorm: Download from
https://www.jetbrains.com/webstorm/downloa
d

Project Structure :
Home, login, recipe, searched These files are
part of the main.jsx, which serves as the root
component for the React app. The component
handles the overall layout and includes the
router outlet for loading different components
based on the current route.
Project flow :
Milestone 1:
Project Setup and Configuration: 1. Install
required tools and software:
● Installation of required tools: 1. Open the
project folder to install necessary tools In this
project, we use: o
 React Js
 React Icons
 Material-ui
 React-codemirror2
● For further reference, use the following
resources o https://react.dev/learn/installation
https://react-bootstrap-v4.netlify.app/getting-
started/introduction/
Milestone 2:
Web Development:

The code sets up and starts a React

App.jsx :
The code defines the main component of the
recipe app, responsible for setting up the
overall structure. It imports necessary
components like the Login component and
styles the app using the App.css stylesheet.
The App function renders the Login
component within the app-container.
Index.css :
The code defines the main component of the
recipe app, responsible for setting up the
overall structure. It imports necessary
components like the Login component and
styles the app using the App.css stylesheet.
The App function renders the Login
component within the app-container.
Cusine.css :
The code styles the layout of cuisine items
and their placeholder skeletons, using a grid
layout and specific spacing.
Cusine.jsx :
The code defines a Cuisine component that
fetches recipes based on a cuisine type from
the Spoonacular API. It displays a loading
skeleton while fetching and renders
RecipeCard components for each
recipe once fetched.
Home.jsx :
The code defines a Home component that
imports the Veggie and Popular components.
It renders these components within a
container div to display them
on the home page.
Login.jsx :
 Handles user input for email and
password.
 Updates state with input values.
 Includes commented-out code for
potential authentication and navigation.
Pages.jsx :
 Fetches recipe details from the
Spoonacular API based on the recipe name
in the URL.
 Displays recipe information including
summary, instructions, and ingredients.
 Allows switching between different
sections (summary, instructions,
ingredients) using buttons.

Searched.jsx :
 Fetches recipes from the Spoonacular API
based on a search query.
 Displays a list of recipe cards with basic
information (image, title, rating).
  Shows a loading indicator while the
recipes are being fetched.
 Handles errors that might occur during the
API request.

Output :

The login page :

PROJECT DEMO LINK :

https://drive.google.com/file/
d/1QYiJTm_Jl-
19XxQg32y8w0KrciopwHXp/
view?usp=drive_link