Custom Crave Meal Planner 🍽️

This is how the project looks like:

About This Project:

⚛️ Tech Stack: React.js, Node.js, Express.js, MongoDB, Tailwind CSS

🔧 Backend

• 🗄️ MongoDB Setup
• 🔐 Authentication with JWT
• 🔒 Protecting Our Routes
• 🥗 Meal Plan Generation
• 🍽️ Custom Recipe Management
• 🤖 Chatbot Support
• 👤 User Profile & Preferences
• 📊 Calorie & Nutrition Calculation
• 📝 Feedback Collection

🌐 Frontend

• 📋 Signup Page UI
• 🔓 Login Page UI
• 📤 Implementing Signup
• 🔑 Implementing Login
• 📱 Responsive UI
• 🤖 Chatbot Interface
• 🥗 Meal Plan & Recipe Pages
• 💙 Awesome Landing Page
• 🌐 Deployment
• 🚀 And Many More Cool Features

System requirements

Note

Before you start, make sure you have the following installed:

• Node.js 20.12.0 or later installed.
• React.js 18.3.1 or later.
• Operating systems: macOS, Windows, or Linux.
• VSCode or another text editor of your choice.

Code organization and folder structure

(Root)
├───backend
│     ├───config
│     ├───controllers
│     ├───middleware
│     ├───models
│     ├───routes
│     ├───utils
│     ├───(app.js)
│     ├───(package.json)
│     └───(package-lock.json)
│
├───frontend
│     ├───public
│     │    └─[[...assets, videos]]
│     ├───src
│     │     ├───components
│     │     ├───config
│     │     ├───context
│     │     ├───layouts
│     │     ├───pages
│     │     │     └───custom
│     │     ├───routes
│     │     ├───store
│     │     ├───assets
│     │     └───(index.css)
│     │
│     ├───(index.html)
│     ├───(eslint.config.js)
│     ├───(tailwind.config.js)
│     ├───(package.json)
│     └───(package-lock.json)
│
├───preview
│     └───[[...screenshots]]
│
├───(README.md)

public directory

This folder serves static assets, like images and video files.

components directory

This folder contains React components which are independent and reusable.

config directory

This folder contains configuration files (e.g., Firebase config).

context directory

This folder contains React context providers for global state management.

layouts directory

This folder contains layout components for consistent page structure.

pages directory

This folder contains all the main pages and subpages of the application, including custom meal and nutrition pages.

store directory

This folder contains state management files for Zustand library.

utils directory (backend)

This folder contains utility functions for backend operations (e.g., calorie calculation).

models directory (backend)

This folder contains Mongoose models for MongoDB collections (users, recipes, meal plans, feedback, etc).

controllers directory (backend)

This folder contains route handler logic for API endpoints.

routes directory (backend)

This folder contains Express route definitions for API endpoints.

middleware directory (backend)

This folder contains Express middleware (e.g., authentication).

index.css file

This is the main CSS file of the application. You can use this file to add CSS rules to all the routes in your application - such as CSS reset rules, site-wide styles for HTML elements like links, and more.

🚀 Quick Start Guide

To spin up this project locally, follow these steps

Clone

Use the git clone CLI to clone the template directly to your machine

Run project on local

npm run build
npm start

Project Dev Steps

1. Environment Setup

   Create a .env file on the root of the backend project PUT THIS INSIDE

# Node server
SERVER_PORT=8000
NODE_ENV=development

# Client config
CLIENT_HOST=localhost
CLIENT_PORT=5173
CLIENT_URL=http://localhost:5173

# JWT secret
JWT_SECRET=your_jwt_secret

# Database integration
MONGO_URI=your_mongodb_uri

# Firebase (if used)
FIREBASE_API_KEY=your_firebase_api_key
FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
FIREBASE_PROJECT_ID=your_firebase_project_id
FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
FIREBASE_APP_ID=your_firebase_app_id

2. Project Folders & Files Structure

3. Update package.json file from root directory

// For mac and linux users
 "scripts": {
    "dev": "NODE_ENV=development&& concurrently \"cd backend && npm run dev\" \"cd frontend && npm run dev\" ",
    "start": "NODE_ENV=production&& node backend/app.js",
    "build": "npm install && npm install --prefix backend && npm install --prefix frontend && npm run build --prefix frontend",
    "format": "prettier --print-width=120 --write ."
  }
// For windows users
 "scripts": {
    "dev": "SET NODE_ENV=development&& concurrently \"cd backend && npm run dev\" \"cd frontend && npm run dev\" ",
    "start": "SET NODE_ENV=production&& node backend/app.js",
    "build": "npm install && npm install --prefix backend && npm install --prefix frontend && npm run build --prefix frontend",
    "format": "prettier --print-width=120 --write ."
  }

4. Setup Eslint & Prettier

5. Run project in development

npm install
npm run dev

Tip

Run this command to format code before running git commit command.

npm run format

I'll see you in the next one!

Back to top