📌 React Recipe App

🖥️ Demo | 📂 Repository

Table of Contents

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

---

✨ Overview

---

---

• React Recipe App, kullanıcıların Edamam API aracılığıyla yemek tariflerini arayabileceği, detaylı besin değerlerini görüntüleyebileceği modern bir tarif uygulamasıdır.
• Kullanıcı girişi (login), özel sayfa koruması (Private Router) ve dinamik yönlendirme özellikleriyle birlikte geliştirilmiştir.

---

📖 Description

• Bu proje, React Router, Styled Components ve Axios kullanılarak oluşturulmuş bir tarif arama uygulamasıdır.
• Kullanıcılar arama çubuğuna istedikleri yemeği yazarak Edamam API’sinden veri çekebilir, her tarifin detay sayfasında besin değerlerini ve içeriklerini görüntüleyebilirler.
• Bazı sayfalar (örneğin About ve Detail) yalnızca giriş yaptıktan sonra erişilebilir.

---

🚀 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 GitHub Pages
• 🚀 Netlify üzerinde canlı deploy

---

🗂️ 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

🔸 Bu proje, Clarusway Frontend Developer eğitimi kapsamında React Router ve API kullanımı konularını pekiştirmek amacıyla geliştirilmiştir. 🔸 Amaç, kullanıcı giriş kontrolü (PrivateRoute), API entegrasyonu ve responsive tasarımın aynı projede nasıl kullanılabileceğini göstermektir. 🔸 Proje Netlify üzerinde deploy edilmiştir.

---

🙏 Acknowledgements

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

---

📬 Contact

• GitHub @Umit8098

• Linkedin @umit-arat