SETUP_GUIDE.md

CookBook — Complete Setup Guide (Zero to Running)

---

WHAT YOU HAVE (44 files)

cookbook/
├── README.md
├── backend/
│   ├── .env                          ← DB URI, JWT secret, port
│   ├── package.json
│   ├── server.js                     ← Entry point
│   ├── config/
│   │   └── db.js
│   ├── controllers/
│   │   ├── auth.controller.js        ← register, login, getMe
│   │   ├── recipe.controller.js      ← CRUD + search + pagination
│   │   ├── favorite.controller.js    ← save/unsave/list
│   │   └── user.controller.js        ← profile, change password
│   ├── middleware/
│   │   └── auth.middleware.js        ← JWT protect middleware
│   ├── models/
│   │   ├── User.js
│   │   ├── Recipe.js
│   │   └── Favorite.js
│   └── routes/
│       ├── auth.routes.js
│       ├── recipe.routes.js
│       ├── favorite.routes.js
│       └── user.routes.js
│
└── frontend/
    ├── index.html
    ├── package.json
    ├── vite.config.js
    ├── tailwind.config.js
    ├── postcss.config.js
    └── src/
        ├── main.jsx
        ├── App.jsx
        ├── index.css
        ├── context/
        │   └── AuthContext.jsx       ← Global login state
        ├── services/
        │   ├── api.js                ← Axios instance with JWT
        │   └── recipeService.js      ← All API calls
        ├── routes/
        │   └── PrivateRoute.jsx      ← Protects auth-only pages
        ├── components/
        │   ├── Navbar.jsx
        │   ├── RecipeCard.jsx
        │   ├── RecipeForm.jsx        ← Shared by Create + Edit
        │   ├── SearchBar.jsx
        │   └── Spinner.jsx
        └── pages/
            ├── Home.jsx              ← Search, filter, browse
            ├── Login.jsx
            ├── Register.jsx
            ├── RecipeDetail.jsx      ← Full recipe + ingredient checklist
            ├── CreateRecipe.jsx
            ├── EditRecipe.jsx
            ├── Favorites.jsx
            ├── MyRecipes.jsx
            ├── Profile.jsx           ← Edit profile + change password
            └── NotFound.jsx

---

STEP 1 — INSTALL NODE.JS (if not installed)

1. Go to https://nodejs.org
2. Download the LTS version (green button)
3. Install it (click Next through the installer)
4. Open a terminal and verify:

node -v
npm -v

You should see version numbers. If you do, move on.

---

STEP 2 — INSTALL MONGODB (Local)

Option A — Local MongoDB (Recommended for development)

1. Go to https://www.mongodb.com/try/download/community
2. Select: Version = current, Platform = Windows/Mac, Package = MSI
3. Download and install (use "Complete" setup)
4. During install, check "Install MongoDB as a Service" — this means it starts automatically
5. Also install MongoDB Compass when prompted (it's the GUI, very useful)

To verify MongoDB is running, open terminal and type:

mongosh

If you see a > prompt, MongoDB is running. Type exit to quit.

Option B — MongoDB Atlas (Cloud, no install needed)

1. Go to https://www.mongodb.com/atlas
2. Create a free account
3. Create a free cluster (M0 Sandbox — free forever)
4. Click "Connect" → "Drivers" → copy the connection string
5. It looks like: mongodb+srv://username:password@cluster0.xxxxx.mongodb.net/
6. Replace the MONGO_URI in your .env with this string + add cookbook at the end: mongodb+srv://username:password@cluster0.xxxxx.mongodb.net/cookbook

---

STEP 3 — INSTALL VS CODE (if not installed)

1. Go to https://code.visualstudio.com
2. Download and install
3. Recommended extensions to install inside VS Code:
   • ES7+ React/Redux/React-Native snippets
   • Tailwind CSS IntelliSense
   • Prettier - Code formatter
   • Thunder Client (for API testing, alternative to Postman)

---

STEP 4 — SET UP THE PROJECT

4.1 — Copy the project folder

Take the cookbook folder you downloaded and place it somewhere clean, for example:

C:\Users\YourName\Projects\cookbook       (Windows)
/Users/YourName/Projects/cookbook         (Mac)

Open VS Code → File → Open Folder → select the cookbook folder.

You should see both backend/ and frontend/ folders in the sidebar.

---

4.2 — Set up the Backend

Open the integrated terminal in VS Code: press Ctrl + ` (backtick) or go to Terminal → New Terminal.

cd backend
npm install

This installs: express, mongoose, jsonwebtoken, bcryptjs, cors, dotenv, nodemon, express-validator.

Wait for it to finish. You'll see a node_modules folder appear inside backend/.

Edit the .env file (open backend/.env):

PORT=5000
MONGO_URI=mongodb://localhost:27017/cookbook
JWT_SECRET=mySuperSecretKey2024CookBook
JWT_EXPIRES_IN=7d
NODE_ENV=development

• If using local MongoDB: keep MONGO_URI as is
• If using Atlas: replace MONGO_URI with your Atlas connection string
• Change JWT_SECRET to any long random string (keep it secret)

---

4.3 — Set up the Frontend

Open a second terminal in VS Code (click the + icon in the terminal panel):

cd frontend
npm install

This installs: react, react-dom, react-router-dom, axios, react-icons, react-toastify, tailwindcss, vite, etc.

Wait for it to finish.

---

STEP 5 — RUN THE PROJECT

You need two terminals running at the same time.

Terminal 1 — Backend:

cd backend
npm run dev

You should see:

✅ MongoDB connected
🚀 Server running on port 5000

If you see an error about MongoDB connection, make sure MongoDB service is running (see Step 2).

Terminal 2 — Frontend:

cd frontend
npm run dev

You should see:

  VITE v5.x.x  ready in xxx ms

  ➜  Local:   http://localhost:5173/

---

STEP 6 — OPEN THE APP

Open your browser and go to:

http://localhost:5173

You'll see the CookBook homepage with a search bar and recipe cards.

---

STEP 7 — TEST THE APP

Register an account:

1. Click "Get Started" in the navbar
2. Fill in name, email, password (min 6 chars)
3. You'll be redirected to the home page, logged in

Create a recipe:

1. Click "+ New Recipe" in the navbar
2. Fill in all fields — title, cuisine, cooking time, ingredients, steps
3. Click "Publish Recipe"
4. You'll be redirected to the recipe detail page

Save a recipe:

1. Browse the home page
2. Click the heart icon on any recipe card OR open a recipe and click "Save Recipe"

View saved recipes:

1. Click "Saved" in the navbar

Edit/Delete your recipe:

1. Go to "My Recipes" in the navbar
2. Use the eye/edit/delete icons on each row

Profile:

1. Click your name in the navbar → Profile
2. Update your bio or change your password

---

STEP 8 — TESTING THE API WITH POSTMAN (Optional but good practice)

Install Postman: https://www.postman.com/downloads/

Register:

• Method: POST
• URL: http://localhost:5000/api/auth/register
• Body → raw → JSON:

{
  "name": "Test User",
  "email": "test@example.com",
  "password": "123456"
}

Login:

• Method: POST
• URL: http://localhost:5000/api/auth/login
• Body → raw → JSON:

{
  "email": "test@example.com",
  "password": "123456"
}

Copy the token from the response.

For protected routes (any route that needs auth):

• Go to Headers tab
• Add: Authorization → Bearer YOUR_TOKEN_HERE

Create a recipe:

• Method: POST
• URL: http://localhost:5000/api/recipes
• Header: Authorization: Bearer YOUR_TOKEN
• Body → raw → JSON:

{
  "title": "Butter Chicken",
  "cuisine": "Indian",
  "difficulty": "Medium",
  "cookingTime": 45,
  "servings": 4,
  "description": "Creamy and delicious",
  "ingredients": [
    { "name": "Chicken", "quantity": "500g" },
    { "name": "Butter", "quantity": "2 tbsp" }
  ],
  "steps": [
    { "stepNumber": 1, "instruction": "Marinate the chicken" },
    { "stepNumber": 2, "instruction": "Cook in sauce" }
  ],
  "tags": ["chicken", "indian", "creamy"]
}

---

COMMON ERRORS & FIXES

"MongoDB connection error" or "ECONNREFUSED"

MongoDB is not running. Fix:

• Windows: Press Win+R → type services.msc → find "MongoDB" → right click → Start
• Mac: Run brew services start mongodb-community in terminal
• Or use MongoDB Atlas instead (cloud, always on)

"Cannot find module" errors

You forgot to run npm install. Go into that folder and run it again.

Frontend shows blank page or errors in console

Open browser console (F12) and check the error. Usually it's:

• Backend not running → start npm run dev in backend folder
• Wrong API URL → check vite.config.js proxy is pointing to port 5000

"Port already in use"

Another process is using port 5000 or 5173. Either kill it or change the PORT in .env.

CSS not loading / Tailwind not working

Run this inside the frontend folder:

npm install tailwindcss postcss autoprefixer

JWT token errors (401 Unauthorized)

• You're not logged in, or your token expired
• Log out and log in again
• Make sure JWT_SECRET in .env hasn't changed

---

ALL API ROUTES REFERENCE

POST   /api/auth/register          Register new user
POST   /api/auth/login             Login, returns JWT token
GET    /api/auth/me                Get current user (auth required)

GET    /api/recipes                Get all recipes
                                   Query params:
                                   ?search=chicken
                                   ?cuisine=Indian
                                   ?difficulty=Easy
                                   ?maxTime=30
                                   ?page=1&limit=9

GET    /api/recipes/my-recipes     Get logged-in user's recipes (auth)
GET    /api/recipes/:id            Get single recipe by ID
POST   /api/recipes                Create recipe (auth)
PUT    /api/recipes/:id            Update recipe (auth + owner only)
DELETE /api/recipes/:id            Delete recipe (auth + owner only)

GET    /api/favorites              Get saved recipes (auth)
POST   /api/favorites/:recipeId    Save a recipe (auth)
DELETE /api/favorites/:recipeId    Unsave a recipe (auth)

GET    /api/users/profile          Get profile (auth)
PUT    /api/users/profile          Update name/bio (auth)
PUT    /api/users/change-password  Change password (auth)

---

MONGODB COMPASS (GUI to see your data)

1. Open MongoDB Compass
2. Connect to: mongodb://localhost:27017
3. You'll see a cookbook database appear after you register/create recipes
4. Click it to see: users, recipes, favorites collections
5. You can view, edit, delete documents directly from here — great for debugging

---

QUICK RECAP — WHAT TO RUN EVERY TIME

1. Make sure MongoDB is running (local) or Atlas is connected
2. Open VS Code in the cookbook folder
3. Terminal 1: cd backend && npm run dev
4. Terminal 2: cd frontend && npm run dev
5. Open browser: http://localhost:5173

That's it. Both terminals must be running at the same time.