EYPES

Project: Recipe App

Description

This project aims to create a Recipe App using ReactJS. It's a part of the EYPES course.

Problem Statement

The team is tasked with adding a new project to their portfolios, so they have started working on the Recipe App.

Project Skeleton

Recipe App (folder)
|
|----readme.md         # Given to the students (Definition of the project)
├── public
│     └── index.html
├── src
│    ├── components
│    │       ├── card
│    │       │     ├── Card.jsx
│    │       │     └── Card.style.jsx
│    │       ├── globalStyles
│    │       │     ├── Flex.style.jsx
│    │       │     ├── theme.js
│    │       │     └── GlobalStyles.jsx
│    │       ├── header
│    │       │     ├── Header.jsx
│    │       │     └── Header.style.jsx
│    │       └── nav
│    │             ├── Navbar.jsx
│    │             └── Navbar.style.jsx
│    ├── pages
│    │       ├── about
│    │       │     ├── About.jsx
│    │       │     └── About.style.jsx
│    │       ├── details
│    │       │     ├── Details.jsx
│    │       │     └── Details.style.jsx
│    │       ├── login
│    │       │     ├── Login.jsx
│    │       │     └── Login.style.jsx
│    │       └── home
│    │             ├── Home.jsx
│    │             └── Home.style.jsx
│    ├── router
│    │       ├── AppRouter.jsx
│    │       └── PrivateRouter.jsx
│    ├── assets
│    │       └── [images]
│    ├── App.js
│    ├── index.js
│    └── index.css
├── .env
├── package.json
└── yarn.lock

Objective

• Build a Recipe App using ReactJS.
• Improve coding skills within HTML, CSS, JS, and ReactJS.
• Use git commands (push, pull, commit, add, etc.) and Github as Version Control System.

Steps to Solution

• Step 1: Create React App using yarn create react-app recipe-app or npx create-react-app recipe-app.

• Step 2: Signup at Edamam and get an API key.

• Step 3: Use the API key and Axios for fetching data from https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}&mealType=${meal}.

• Step 4: Code the project with styled components.

• Step 5: Get a random login background image from picsum.photos.

• Step 6: Add project GIF to your project and README.md file.

Notes

• You can add additional functionalities to your app.

☺ Happy Coding ✍