🍽️ Recipe Planner

Recipe Planner is a full-stack web application that lets you create, explore, and manage recipes, plan your weekly meals, generate shopping lists, and more — all in one place.

---

🌟 Features

• 👨‍🍳 Create & Share Recipes
  Add custom recipes with images, ingredients, steps, and tags.

• 🎯 Filter & Search
  Search recipes by name, filter by difficulty and tags.

• 📅 Meal Planner
  Plan your meals for the week and quickly add recipes.

• 🛒 Shopping List
  Generate dynamic shopping lists from your meal plans.

• ⭐ Ratings & Comments
  Rate recipes and leave comments for others.

• 🎨 Sleek UI
  Modern, responsive design with dark mode-inspired visuals.

• 👑 Role-based Access
  Admins can manage tags and user roles.

---

🛠️ Tech Stack

• Frontend: React, Vite, TailwindCSS
• Backend: Node.js, Express.js
• Database: MongoDB with Mongoose
• Image Storage: Cloudinary
• Authentication: JWT (JSON Web Token)

---

📸 Preview

📹 DEMO VIDEO

(https://youtu.be/JbIop7EctKc)

---

📂 Project Structure

project-root/
├── backend/
│ ├── models/ # Mongoose Schemas
│ ├── routes/ # API routes
│ ├── controllers/ # Route handlers
│ ├── scripts/seed.js # Seeder script
│ └── server.js # Express server
│
├── frontend/
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── pages/ # Page components
│ │ └── styles/ # Styles
│ └── vite.config.js # Vite config
│
└── start.sh / start.bat # One-click dev starter

---

⚙️ Setup & Installation

1. Clone the repository

git clone https://github.com/your-username/recipe-planner.git
cd recipe-planner

2. Install dependencies

Backend:

cd backend
npm install

Frontend:

cd ../frontend
npm install

3. Configure Environment

Create .env files in backend/ and frontend/:

Backend .env

env

MONGO_URI=your_mongodb_uri
JWT_SECRET=your_jwt_secret
CLOUDINARY_URL=your_cloudinary_url
PORT=5000

Frontend .env

env

VITE_API_BASE_URL=http://localhost:5000/api

4. Seed Database

cd backend
node scripts/seed.js

5. Run in Development

Start backend:

npm run dev

Start frontend:

cd ../frontend
npm run dev

6. One-Click Start (Cross-platform)

Run everything with one command:

On Mac/Linux:

./start.sh

On Windows: Double-click start.bat

🧾 Commands

Command	Description
npm run dev	Start backend in dev mode (nodemon)
npm run start	Start backend in production
npm run seed	Run seeder script
npm run dev (frontend)	Start Vite dev server
npm run build (frontend)	Build frontend for production

🔒 Security & Deployment

Never commit your .env files.

For production, use environment variables via your hosting (Render, Heroku, Railway, etc.).

For images, store assets in Cloudinary instead of local storage.

Use a reverse proxy (NGINX) or serve frontend via Express in production.

🤝 Contributing

1. Fork this repo

2. Create a branch: git checkout -b feature/your-feature

3. Commit changes: git commit -m 'Add feature'

4. Push to branch: git push origin feature/your-feature

5. Open a Pull Request

📜 License

This project is licensed under the MIT License.

Made with ❤️ by Krishanu Roy