📌 React Recipe App

A modern recipe discovery app with protected routes and third-party API integration.

🖥️ Demo | 📂 Repository

Navigation

• ✨ Overview
• 📖 Description
• 🚀 Features
• 🗂️ Project Skeleton
• 🛠️ Built With
• ⚡ How To Use
• 📌 About This Project
• 🙏 Acknowledgements
• 📬 Contact

✨ Overview

---

• React Recipe App enables users to discover recipes and explore nutritional details using the Edamam API.
• The app features an authentication flow with protected pages and dynamic routing for a seamless user experience.

📖 Description

This project is a modern recipe search application built with React.

Users can search for recipes via the Edamam Recipe API, view detailed nutritional information, and navigate between protected and public pages using React Router v6.

The application demonstrates:

• API integration and data fetching with Axios
• Client-side routing with protected routes (PrivateRouter)
• Session-based authentication flow
• Responsive UI design using Styled Components

🚀 Features

• 🌐 API Integration with https://api.edamam.com/api/recipes/v2
• ⚛️ React Router v6 ile client-side routing
• 🔐 PrivateRouter ile korumalı sayfalar
• 🌐 Edamam Recipe Search API entegrasyonu
• 💅 Styled Components ile modern, responsive tasarım
• 💾 Session Storage ile kullanıcı oturum yönetimi
• 📱 Mobil uyumlu navbar ve hamburger menü
• 🚀 Deployed on Netlify

🗂️ Project Skeleton

src/
 │
 |----readme.md   
 │
 ├─ assets/
 │     ├─ coding.svg
 │     ├─ diet.svg
 │     └─ default-image.png
 │
 ├─ components/
 │   ├─ cards/
 │   │    ├─ Cards.jsx
 │   │    └─ Cards.style.jsx
 │   │
 │   ├─ globalStyles/
 │   │    ├─ Flex.jsx
 │   │    ├─ Global.styles.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.jsx
 │   │
 │   ├─ home/
 │   │    ├─ Home.jsx
 │   │    └─ Home.style.jsx
 │   │
 │   ├─ login/
 │   │    ├─ Login.jsx
 │   │    └─ Login.style.jsx
 │   │
 │   └─ register/
 │        └─ Registerjsx
 │
 ├─ router/
 │    ├─ AppRouter.jsx
 │    └─ PrivateRouter.jsx
 │   
 ├─ App.js
 └─ index.js

🛠️ Built With

• ⚛️ React
• 🧭 React Router v6
• 💅 Styled Components
• 📦 Axios
• 🍴 Edamam Recipe API
• GitHub Pages
• Netlify

---

⚡ How To Use

To clone and run this application, you'll need Git, Node.js, and a package manager (yarn or npm) installed on your computer.

# Clone this repository
$ git clone https://github.com/Umit8098/React-Project-Recipe-App.git

# Navigate into the project folder
$ cd React-Project-Recipe-App

# Install dependencies
$ yarn  
$ yarn start

# or using npm
$ npm install
$ npm start

• Then open http://localhost:3000 to view it in your browser.

📌 About This Project

This project was developed to strengthen core React skills such as routing, API integration, and component-based architecture.

It focuses on:

• Implementing protected routes using React Router
• Managing authentication state with Session Storage
• Consuming a third-party REST API
• Building reusable and styled components
• Deploying a production-ready frontend application

The project reflects real-world frontend patterns commonly used in modern React applications.

🙏 Acknowledgements

• 🎓Clarusway – for the training resources
• 📘React Documentation
• 🧭React Router Docs
• 💅 Styled Components
• 🍴 Edamam Recipe API

📬 Contact

• GitHub @Umit8098

• Linkedin @umit-arat