🍽️ Culinary Canvas | Modern Recipe Sharing Platform

Culinary Canvas
Your ultimate recipe sharing platform

---

📑 Table of Contents

1. Introduction
2. Project Overview
3. Key Features
4. Tech Stack & Architecture
5. Data Storage & Code Implementation
6. Installation & Usage
7. API Documentation
8. Future Enhancements
9. Challenges Overcome
10. License
11. Credits

---

📝 Introduction

Culinary Canvas is a comprehensive, full-stack web application designed for discovering, creating, and sharing culinary recipes. Leveraging modern web technologies, this platform offers an intuitive interface for food enthusiasts and professional chefs to interact, share, and get inspired.

---

🎯 Project Overview

Culinary Canvas provides users with:

• Recipe Discovery: Browse, filter, and search for recipes based on cuisine, category, and cooking time.
• Recipe Creation & Management: Effortlessly create, edit, and delete detailed recipes complete with ingredient lists and step-by-step instructions.
• Community Engagement: Rate, review, and comment on recipes to build a vibrant global culinary community.
• Responsive Experience: A mobile-first design that ensures optimal viewing on any device.

---

🔧 Key Features

• User Authentication:

  • Secure sign-up, login, and JWT-based authentication
  • Protected user routes and optional Google authentication

• Recipe Management:

  • Detailed recipe creation (title, description, ingredients, instructions, image upload)
  • Automatic image optimization and client-side previews

• Interactive Discovery:

  • Dynamic filtering and search by cuisine, category, and cooking time
  • Sorting options based on popularity, rating, or recency

• Social Interactions:

  • 5-star rating system, reviews, and personalized user profiles

• Responsive Design:

  • Mobile-first and device-independent layout

---

💻 Tech Stack & Architecture

Frontend

• React (v18+): Building a modular, component-driven UI
• React Router: Seamless navigation between pages
• Material-UI: Modern component library for responsive design
• Axios: Efficient HTTP client for API requests
• Context API: Global state management

Backend

• Node.js & Express: Scalable server-side framework
• JWT (JSON Web Tokens): Secure user authentication
• MongoDB Atlas: Cloud-hosted NoSQL database
• Mongoose: ODM to interact with MongoDB

Tools & Deployment

• ESLint & Prettier: Code quality and formatting
• Nodemon: Automatic server reload on code changes
• Git & GitHub: Version control and CI/CD integration
• Vercel: Cloud deployment for both frontend and backend

---

💾 Data Storage & Code Implementation

User Data

User information is managed by a Mongoose schema ensuring data integrity:

const userSchema = new mongoose.Schema({
  username: { type: String, required: true, unique: true },
  email:    { type: String, required: true, unique: true },
  password: { type: String, required: true },
  createdAt:{ type: Date, default: Date.now }
});

Recipe Data

Recipes use an extensive schema to capture all details:

const recipeSchema = new mongoose.Schema({
  numericId: { type: Number, unique: true },
  title: { type: String, required: true, trim: true },
  description: { type: String, required: true },
  ingredients: [{ type: String, required: true }],
  instructions: [{ type: String, required: true }],
  cookingTime: { type: Number, required: true, min: 1 },
  category: { type: String, required: true, enum: ['breakfast', 'lunch', 'dinner', 'dessert', 'snack'] },
  cuisine: { type: String, required: true, enum: ['indian', 'chinese', 'italian', 'mexican', 'american', 'other'] },
  image: { type: String, required: true },
  author: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },
  ratings: [{
    user: { type: mongoose.Schema.Types.ObjectId, ref: 'User' },
    rating: { type: Number, min: 1, max: 5 },
    review: String,
    createdAt: { type: Date, default: Date.now }
  }],
  averageRating: { type: Number, default: 0 },
  totalReviews: { type: Number, default: 0 },
  createdAt: { type: Date, default: Date.now }
});

Authentication & Image Processing

• JWT Generation:

  const generateToken = (user) => jwt.sign({ id: user._id }, process.env.JWT_SECRET, { expiresIn: '7d' });

• Image Handling (Base64 Conversion):

  const convertImageToBase64 = (file) =>
    new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
    });

---

🚀 Installation & Usage

Prerequisites

• Node.js (v14+)
• MongoDB Atlas account
• npm or yarn

Setup Instructions

1. Clone the Repository:

   git clone https://github.com/yourusername/recipe-app.git
   cd recipe-app

2. Configure Environment Variables:

   Create .env files in the root/server and client directories.

   Server .env:

   PORT=5002
   MONGODB_URI=mongodb+srv://<username>:<password>@<cluster>.mongodb.net/recipe-app
   JWT_SECRET=your_jwt_secret_key
   

   Client .env:

   REACT_APP_API_URL=http://localhost:5002/api
   NODE_ENV=development
   

3. Install Dependencies:

   # For the backend
   cd server
   npm install
   
   # For the frontend
   cd ../client
   npm install

4. Run the Application: Open two terminal windows:

   # Start backend
   cd server && npm start
   
   # Start frontend
   cd client && npm start

5. Access the Application:

   • Frontend: http://localhost:3000
   • Backend API: http://localhost:5002/api

---

📚 API Documentation

Authentication Endpoints

• POST /api/auth/register – Register a new user
• POST /api/auth/login – User login
• GET /api/auth/user – Retrieve current user info

Recipe Endpoints

• GET /api/recipes – Retrieve all recipes (supporting filters)
• GET /api/recipes/:id – Retrieve a specific recipe
• POST /api/recipes – Create a new recipe
• PUT /api/recipes/:id – Update an existing recipe
• DELETE /api/recipes/:id – Delete a recipe

Review Endpoints

• POST /api/reviews/:recipeId – Add a review
• PUT /api/reviews/:reviewId – Update a review
• DELETE /api/reviews/:reviewId – Delete a review

---

🔮 Future Enhancements

• Meal Planning & Shopping Lists: Weekly planners with auto-generated grocery lists.
• Recipe Collections: Enable users to curate themed collections.
• Social Media Integration: Direct sharing to various platforms.
• Dark Mode: Toggle for improved viewing in low-light conditions.
• Ingredient Scaling: Dynamic adjustment of recipe quantities.
• Nutritional Details: Incorporate detailed nutritional information.

---

🧩 Challenges Overcome

• Image Upload Optimization: Developed progressive compression for faster load times.
• Reliable Server Communication: Added retry mechanisms to mitigate API timeouts.
• Unified Configuration: Implemented dynamic port assignment and consolidated environment configuration.
• Secure Authentication Flow: Crafted a robust JWT system ensuring data security.

---

📄 License

This project is licensed under the MIT License.

---

👏 Credits

Developed by:
Lokesh

GitHub: yourusername
LinkedIn: yourusername

---

This README serves as a mini project report providing a detailed overview of the Culinary Canvas application, its architecture, tech stack, and complete code implementations for data storage and processing.

---

This version avoids external screenshots and uses badges and text-based headings instead of relying on externally hosted images. Feel free to adjust any text or links as needed for your project.