🍽️ RecipeX — React Recipe Web App

A modern and responsive recipe web application built with React and Vite, showcasing real-world usage of core React concepts such as state management, side effects, routing, and reusable component architecture with modular SCSS styling.

🔗 **Live Demo: Click here

---

🚀 Tech Stack

Technology	Purpose
React (Vite)	UI framework and fast development
JavaScript (ES6+)	Application logic
React Router DOM	Client-side routing
SCSS (Modular)	Scalable and maintainable styling
Responsive Design	Mobile-first layout

---

📂 Project Structure

Path	Description
public/	Static assets
src/	React source code
src/App.jsx	Root component
src/main.jsx	Application entry
index.html	HTML template
vite.config.js	Vite configuration
package.json	Dependencies and scripts
README.md	Documentation

---

⚛️ React Concepts Used

Concept / Hook	Usage	Purpose
useState	Search, Favorites, Filters	UI and recipe state management
useEffect	Recipe Fetching	API calls and side effects
Props	All Components	Component communication
React Router	App.jsx	Page navigation
Conditional Rendering	Loader, RecipeList	Dynamic UI updates
Reusable Components	RecipeCard, Navbar	Clean architecture

---

🧠 Core Functionalities

Feature	Description
Browse Recipes	View recipe listings
Recipe Details	Dedicated detail pages
Search & Filters	Find recipes quickly
Favorites	Save selected recipes
Responsive UI	Works on all devices
SCSS Modules	Organized styling system

---

🔮 Future Enhancements

Feature	Planned Improvement
API Integration	Spoonacular / Edamam
Authentication	User accounts
Meal Planner	Weekly planning
Theme Toggle	Dark / Light mode
Nutrition Info	Calories & macros

---

🎯 Purpose

Goal	Value
Portfolio Project	Show real React usage
Internship Ready	Clean architecture
Placement Prep	Demonstrates hooks, routing, state
Best Practices	Modular structure and styling

---

📜 License

MIT License — Free for learning and portfolio use.