🍽️ Recipe Sharing App - MERN Stack

A full-stack recipe sharing application built with MongoDB, Express.js, React, and Node.js (MERN). Users can create, share, explore recipes online with features like ratings, comments, favorites, user profiles, and more.

✨ Features

Core Features

✅ User Authentication: Register and login with JWT tokens
🍳 Recipe Management: Create, edit, delete, and view recipes
🔍 Search & Filter: Find recipes by category, cuisine, difficulty, and text search
❤️ Likes: Like/unlike recipes
⭐ Ratings & Reviews: Rate recipes and write detailed reviews
💬 Comments: Add and interact with comments on recipes
📚 Favorites: Save recipes to personal favorites list
👤 User Profiles: View user profiles with recipe collection and favorites
👥 Follow System: Follow/unfollow other users
🖼️ Image Support: Upload recipe images
📱 Responsive Design: Works on desktop and mobile devices

🛠️ Tech Stack

Backend

Node.js: JavaScript runtime
Express.js: Web framework
MongoDB: NoSQL database
Mongoose: MongoDB object modeling
JWT: Authentication tokens
bcryptjs: Password hashing
CORS: Cross-origin resource sharing
Multer: File upload handling

Frontend

React: UI library
React Router: Client-side routing
Axios: HTTP client
CSS3: Styling with gradients and animations

📋 Project Structure

Recipe Sharing App/
├── backend/
│   ├── models/
│   │   ├── User.js
│   │   ├── Recipe.js
│   │   ├── Comment.js
│   │   └── Rating.js
│   ├── routes/
│   │   ├── recipes.js
│   │   ├── comments.js
│   │   ├── ratings.js
│   │   └── users.js
│   ├── middleware/
│   │   └── auth.js
│   ├── server.js
│   ├── package.json
│   └── .env
└── frontend/
    ├── src/
    │   ├── Component/
    │   │   ├── Navbar.jsx
    │   │   └── Navbar.css
    │   ├── Pages/
    │   │   ├── Home.jsx
    │   │   ├── Login.jsx
    │   │   ├── Register.jsx
    │   │   ├── RecipeList.jsx
    │   │   ├── RecipeDetail.jsx
    │   │   ├── AddRecipe.jsx
    │   │   ├── UserProfile.jsx
    │   │   └── [CSS files]
    │   ├── App.js
    │   ├── App.css
    │   └── index.js
    └── package.json

🚀 Getting Started

Backend Setup

Install dependencies:

cd backend
npm install

Create .env file in backend directory:

MONGO_URI=mongodb://localhost:27017/recipe-app
JWT_SECRET=your_secret_key_here
PORT=3000

Start MongoDB:

mongod

Run backend server:

npm start
# or for development with auto-reload
npm run dev

Backend will run on http://localhost:3000

Frontend Setup

Install dependencies:

cd frontend
npm install

Start React app:

npm start

Frontend will run on http://localhost:3001

📡 API Endpoints

Authentication

POST /register - Register new user
POST /login - Login user

Recipes

GET /api/recipes - Get all recipes with filters
GET /api/recipes/:id - Get single recipe
POST /api/recipes - Create new recipe (auth required)
PUT /api/recipes/:id - Update recipe (auth required)
DELETE /api/recipes/:id - Delete recipe (auth required)
POST /api/recipes/:id/like - Like recipe (auth required)
POST /api/recipes/:id/favorite - Add to favorites (auth required)
GET /api/recipes/author/:userId - Get user's recipes

Comments

GET /api/comments/recipe/:recipeId - Get recipe comments
POST /api/comments - Create comment (auth required)
PUT /api/comments/:id - Update comment (auth required)
DELETE /api/comments/:id - Delete comment (auth required)
POST /api/comments/:id/like - Like comment (auth required)

Ratings

GET /api/ratings/recipe/:recipeId - Get recipe ratings
POST /api/ratings - Create/update rating (auth required)
DELETE /api/ratings/:id - Delete rating (auth required)

Users

GET /api/users/:userId - Get user profile
PUT /api/users/:userId - Update profile (auth required)
POST /api/users/:userId/follow - Follow user (auth required)
GET /api/users/:userId/favorites - Get user's favorites
POST /api/users/:userId/change-password - Change password (auth required)

🎨 UI Components

NavigationBar

Logo and branding
Links to Home, Recipes, Create Recipe
User authentication status
Dropdown menu for logged-in users

Recipe List

Grid view of all recipes
Search functionality
Filter by category, cuisine, difficulty
Sort by latest, popular, rating

Recipe Detail

Full recipe information
Ingredients list with quantities
Step-by-step instructions
Comments section
Ratings and reviews
Like and favorite buttons

Add Recipe

Form to create new recipes
Add multiple ingredients
Add cooking steps
Upload recipe image
Set recipe metadata (prep time, servings, etc.)

User Profile

User information and bio
Recipe collection
Favorites list
Followers/Following count
Follow/Unfollow buttons
Edit profile (own profile only)

🔐 Authentication

JWT tokens stored in localStorage
Token expires in 7 days
Protected routes require authentication
Password hashed with bcryptjs (10 rounds)

📝 Database Schema

User

{
  username: String (unique, required),
  email: String (unique, required),
  password: String (hashed),
  bio: String,
  profileImage: String,
  followers: [ObjectId],
  following: [ObjectId],
  favoriteRecipes: [ObjectId],
  createdAt: Date,
  updatedAt: Date
}

Recipe

{
  title: String (required),
  description: String (required),
  author: ObjectId (required),
  category: String,
  cuisine: String,
  servings: Number,
  prepTime: Number,
  cookTime: Number,
  difficulty: String,
  ingredients: [{name, quantity, unit}],
  steps: [{stepNumber, description}],
  image: String,
  likes: Number,
  likedBy: [ObjectId],
  favorites: Number,
  favoritedBy: [ObjectId],
  averageRating: Number,
  ratingCount: Number,
  comments: [ObjectId],
  createdAt: Date,
  updatedAt: Date
}

Comment

{
  text: String (required),
  author: ObjectId (required),
  authorName: String,
  recipe: ObjectId (required),
  likes: Number,
  likedBy: [ObjectId],
  createdAt: Date,
  updatedAt: Date
}

Rating

{
  rating: Number (1-5, required),
  review: String,
  author: ObjectId (required),
  authorName: String,
  recipe: ObjectId (required),
  helpful: Number,
  createdAt: Date,
  updatedAt: Date
}

🎯 How to Use

For Users

Register: Create a new account
Login: Access your account
Browse Recipes: View recipes from other users
Create Recipe: Share your own recipes
Interact: Like, comment, rate, and save recipes
Follow Users: Follow cooking enthusiasts
Profile: Manage your profile and favorite recipes

For Developers

Clone the repository
Install dependencies in both backend and frontend
Setup MongoDB
Configure environment variables
Start the backend server
Start the frontend development server
Access the app at http://localhost:3001

🔧 Environment Variables

Backend (.env)

MONGO_URI=mongodb://localhost:27017/recipe-app
JWT_SECRET=your_very_secret_key_here
PORT=3000

📦 Installation Commands

# Clone repository
git clone <repository-url>
cd recipe-app

# Backend setup
cd backend
npm install
npm start

# Frontend setup (new terminal)
cd frontend
npm install
npm start

🚀 Deployment

Backend (Heroku)

cd backend
heroku create your-app-name
git push heroku main

Frontend (Netlify)

cd frontend
npm run build
# Deploy the build folder to Netlify

🐛 Troubleshooting

MongoDB Connection Error

Ensure MongoDB is running: mongod
Check MONGO_URI in .env file

CORS Error

Verify frontend URL in backend CORS config
Ensure backend is running on correct port

Authentication Errors

Check localStorage for token
Verify JWT_SECRET is consistent
Clear browser cache and login again

💡 Future Enhancements

📝 License

MIT License - Feel free to use this project for personal or commercial use.

👨‍💻 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Support

For support, email support@recipeapp.com or open an issue on GitHub.

Happy Cooking! 👨‍🍳👩‍🍳

Name		Name	Last commit message	Last commit date
backend		backend
frontend		frontend
FEATURES_CHECKLIST.md		FEATURES_CHECKLIST.md
QUICKSTART.md		QUICKSTART.md
README.md		README.md
Recipe EBOOK PPT [Autosaved].pptx		Recipe EBOOK PPT [Autosaved].pptx
SETUP_GUIDE.md		SETUP_GUIDE.md
shaluppt.pptx		shaluppt.pptx
ssss.pptx		ssss.pptx
start-project.bat		start-project.bat
start-project.ps1		start-project.ps1

Latest commit

History

Folders and files

Repository files navigation