CookBook is a full-featured recipe application built with React + Vite, offering a complete modern cooking experience. It behaves like a real full-stack app by combining a JSON Server backend for user-created recipes and authentication with the TheMealDB API for public recipe data. Users can create, edit, delete, and browse recipes, save their favorites, manage their profile, and explore MealDB recipes all within a clean, intuitive, fully responsive UI.
Live Demo: CookBook
Watch the project explanation + live demo here:
[Watch Full Video → Demo Video / Code Walkthrough
Email: demo@cookbook.app
Password: demo123
You may also register a new account. All user data, saved recipes, and user-created recipes are stored in JSON Server (db.json).
- Login & Register forms
- Protected routes (redirects to /login if not authenticated)
- Persistent session using JSON Server user records
- Logout functionality
- Add new recipes (stored in JSON Server)
- Edit and delete your own recipes
- View detailed recipe pages
- Track all user-created recipes under My Recipes
- Save/unsave recipes per user
- Stored in JSON Server under savedRecipes
- Dedicated Saved Recipes page
- Search by recipe title
- Filter by:
- Category (Breakfast, Dinner, Dessert…)
- Difficulty (Easy, Medium, Hard)
- Combine search + filters
- Includes MealDB API recipes + user-created recipes
- Clean and modern Tailwind CSS UI
- Fully responsive (mobile-first design)
- Smooth toast notifications using React Hot Toast
- Intuitive navigation and polished layout
| Technology | Purpose |
|---|---|
| React + Vite | Frontend framework & fast development setup |
| React Router v6 | Client-side routing |
| Context API | Global state (auth + recipe data) |
| Tailwind CSS | Styling & responsive design |
| JSON Server | Fake backend (users, recipes, saved items) |
| TheMealDB API | Public recipe data (read-only) |
| React Hot Toast | Toast notifications |
Cookbook/
├── public/ # Images, icons, static assets
├── src/
│ ├── assets/ # SVGs, images
│ ├── components/ # Reusable UI components
│ ├── context/ # Auth & Recipe context providers
│ ├── pages/ # All app pages (Home, Login, Recipes, etc.)
│ ├── styles/ # Custom CSS files
│ ├── utils/ # API helpers
│ ├── App.jsx # Main app component
│ └── main.jsx # React entry point
├── db.json # Fake API / local database
├── package.json # Project dependencies
├── tailwind.config.js # Tailwind CSS config
├── vite.config.js # Vite config
└── README.md # Documentation
git clone https://github.com/yourusername/cookbook.git
cd cookbook
npm install
npm run server
npm run dev
These pages are only accessible when logged in.
Unauthenticated users are automatically redirected to /login.
| Route | Description |
|---|---|
/add |
Add a new recipe (stored in JSON Server) |
/edit/:id |
Edit an existing recipe |
/my-recipes |
View recipes created by the logged-in user |
/saved |
View recipes saved by the user |
/profile |
View and edit your profile |
/→ Intro / Landing page/home→ Home page/recipes→ All recipes (MealDB + user recipes)/recipes/:id→ Recipe detail/login/register
All user-generated data is stored in db.json using JSON Server.
This acts as the project's backend, replacing LocalStorage.
users → Registered users (email, password, profile info)
recipes → User-created recipes (full CRUD)
savedRecipes → Saved/favorited recipe IDs per user
profiles → Optional profile data (name, photo, etc.)
Public recipe data is fetched from:
https://www.themealdb.com/api/json/v1/1/
| Intro Page | Home Page |
|---|---|
 |
 |
| All Recipes | Saved Recipes |
|---|---|
 |
 |
| Edit Recipe | Add Recipe |
|---|---|
 |
 |
| Login | Register |
|---|---|
 |
 |
- Real backend with Node.js / Express + MongoDB (or Firebase)
- Image upload for recipes (Cloudinary or Firebase Storage)
- Recipe ratings & comments system
- User reviews and discussions
- Dark mode toggle
- Shopping list generator from ingredients
- Print recipe functionality
- Progressive Web App (PWA) support
- Ingredient unit converter (grams ↔ cups ↔ tablespoons)
Contributions are very welcome!
Feel free to:
- Open issues for bugs or feature requests
- Submit pull requests with improvements
- Suggest new features or recipe ideas
This project is open-source and licensed under the MIT License.
© 2025
Happy Cooking!
Made with passion