Recipe App

About the Project

This project I created with React is a web application where users can discover various recipes for breakfast, lunch, dinner, snack and teatime.

Features
Technologies Used
Usage
Project Skeleton
Screenshots

Live Demo

Recipe App

Features

Logging in with email and password information
Pagination for smooth transitions between pages.
Easy recipe search using the filtering feature.

Technologies Used

React
Axios for API requests
React-Router-Dom
Edamam API for recipe data
Icons from React Icons
Styling with Styled Components

Usage

When you hover over the email and password fields in the login section, the login email address and password are visible.
Access detailed information and reviews for each recipe.
Use the search function to find specific recipes.

Project Skeleton

Recipe App (folder)
|
|----readme.md         
SOLUTION
├── public
│    └── index.html
├── src
│    ├── assets
│    │     └── [images]
│    ├── components
│    │     ├── cards
│    │     │    ├── Cards.jsx    
│    │     │    └── Cards.style.jsx 
│    │     ├── globalStyles
│    │     │    ├── Flex.jsx    
│    │     │    ├── Global.style.jsx    
│    │     │    └── theme.js
│    │     ├── header 
│    │     │    ├── Header.jsx    
│    │     │    └── Header.style.jsx    
│    │     └── nav 
│    │          ├── Navbar.jsx    
│    │          └── Navbar.style.jsx  
│    ├── pages
│    │     ├── about
│    │     │    ├── About.jsx    
│    │     │    └── About.style.jsx 
│    │     ├── detail
│    │     │    ├── Detail.jsx        
│    │     │    └── Detail.style.jsx
│    │     ├── home 
│    │     │    ├── Home.jsx    
│    │     │    └── Home.style.jsx    
│    │     ├── login 
│    │     │    ├── Login.jsx    
│    │     │    └── Login.style.jsx    
│    │     └── register    
│    │          └── Register.jsx  
│    ├── router
│    │     ├── AppRouter.jsx
│    │     └── PrivateRouter.jsx
│    ├── App.js
│    └── index.js
├── package.json
└── yarn.lock