⚡ Full-Stack Project Setup Guide

Modern Full-Stack Web Application Template

A production-ready starter template with React + Vite + Tailwind CSS frontend and Express.js + MongoDB backend using MVC architecture

Location: D:\All website project\Full-Stack_Project_Setup_Guide

Features • Quick Start • Documentation • API • Contributing

---

📑 Overview

This is a modern full-stack web application template, built with cutting-edge technologies. It provides a clean, maintainable architecture for building scalable web applications with best practices baked in.

Perfect for developers who want to quickly start a new project without the hassle of initial setup.

---

✨ Features

🎨 User Interface

• ⚛️ React 19 - Latest React with improved performance
• ⚡ Vite - Lightning-fast build tool and dev server
• 🎨 Tailwind CSS 4 - Utility-first CSS framework
• 🌼 DaisyUI - Beautiful component library
• 🎭 Framer Motion - Smooth animations
• 🎯 React Icons - Comprehensive icon library
• 💫 SweetAlert2 - Beautiful, responsive alerts

🔐 Authentication & Services

• 🔥 Firebase - Authentication and backend services
• 🔒 JWT Ready - Token-based authentication (planned)

🧭 Navigation & Routing

• 📱 React Router 7 - Client-side routing
• 🔄 Smooth Transitions - Page transition animations

🗄️ Backend Architecture

• 🟢 Node.js - JavaScript runtime
• ⚡ Express.js 5 - Minimal web framework
• 🍃 MongoDB - NoSQL database
• 🏗️ MVC Pattern - Clean, organized code structure
• 🔄 Nodemon - Auto-restart development server
• 🌐 CORS - Cross-Origin Resource Sharing enabled
• 📝 Request Logging - Built-in request logger
• ⚠️ Error Handling - Global error handler

📦 Package Management

• 📦 pnpm - Fast, disk space efficient package manager

---

🛠️ Tech Stack

Frontend	Backend	Database	Tools

---

📋 Prerequisites

Before you begin, ensure you have the following installed:

Software	Version	Download
Node.js	v18+	Download
pnpm	v9+	npm install -g pnpm
MongoDB	v6+	Download
Git	Latest	Download

---

🚀 Quick Start

1️⃣ Clone Repository

git clone https://github.com/MRaysa/Full-Stack_Project_Setup_Guide.git
cd Full-Stack_Project_Setup_Guide

2️⃣ Backend Setup

# Navigate to server directory
cd server-site

# Install dependencies
pnpm install

# Create environment file
cp .env.example .env

# Configure your .env file (see Backend Configuration below)

# Start development server
pnpm run dev

Expected Output:

🚀 Server Started Successfully!
⚡ Server is running on http://localhost:3000
🍃 MongoDB Connected Successfully

3️⃣ Frontend Setup

# Open a NEW terminal
cd client-cite

# Install dependencies
pnpm install

# Start development server
pnpm run dev

Expected Output:

VITE v6.3.5  ready in XXX ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose

4️⃣ Access Application

Service	URL
Frontend	http://localhost:5173
Backend API	http://localhost:3000
Health Check	http://localhost:3000/api/health

---

📁 Project Structure

Full-Stack_Project_Setup_Guide/
│
├── 📂 client-cite/                 # Frontend Application
│   ├── 📂 public/                  # Static assets
│   ├── 📂 src/
│   │   ├── 📂 components/         # Reusable React components
│   │   ├── 📂 pages/              # Page components
│   │   ├── 📄 App.jsx             # Main App component
│   │   └── 📄 main.jsx            # Entry point
│   ├── 📄 .gitignore
│   ├── 📄 package.json
│   ├── 📄 vite.config.js          # Vite configuration
│   └── 📄 tailwind.config.js      # Tailwind configuration
│
├── 📂 server-site/                 # Backend Application (MVC)
│   ├── 📂 config/
│   │   └── 📄 database.js         # MongoDB connection
│   ├── 📂 controllers/
│   │   └── 📄 userController.js   # Business logic
│   ├── 📂 models/
│   │   └── 📄 User.js             # Database models
│   ├── 📂 routes/
│   │   ├── 📄 index.js            # Main router
│   │   └── 📄 userRoutes.js       # User routes
│   ├── 📂 middleware/
│   │   ├── 📄 errorHandler.js     # Error handling
│   │   ├── 📄 notFound.js         # 404 handler
│   │   └── 📄 logger.js           # Request logger
│   ├── 📄 .env.example            # Environment template
│   ├── 📄 .gitignore
│   ├── 📄 server.js               # Entry point
│   ├── 📄 package.json
│   └── 📄 README.md               # Backend docs
│
└── 📄 README.md                    # This file

---

⚙️ Configuration

Backend Environment Variables

Create a .env file in server-site/ directory:

# Server Configuration
PORT=3000
NODE_ENV=development

# Database Configuration
MONGODB_URI=mongodb://localhost:27017
DB_NAME=your_database_name

# JWT Configuration
JWT_SECRET=your_super_secret_jwt_key_change_this
JWT_EXPIRE=7d

# CORS Configuration
CLIENT_URL=http://localhost:5173

# Email Configuration (Optional)
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=your_email@gmail.com
EMAIL_PASS=your_app_password

Frontend Environment Variables

Create a .env file in client-cite/ directory:

# API Configuration
VITE_API_URL=http://localhost:3000/api

# Firebase Configuration
VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

---

📜 Available Scripts

Backend Commands

pnpm install          # Install dependencies
pnpm run dev          # Start development server with auto-reload
pnpm start            # Start production server

Frontend Commands

pnpm install          # Install dependencies
pnpm run dev          # Start development server
pnpm run build        # Build for production
pnpm run preview      # Preview production build
pnpm run lint         # Run ESLint

---

📡 API Documentation

Base URL

http://localhost:3000/api

🏥 Health Check

GET /api/health

Response:

{
  "success": true,
  "message": "API is running",
  "timestamp": "2025-01-11T10:30:00.000Z"
}

---

👥 Users API

Method	Endpoint	Description
	/api/users	Get all users (paginated)
	/api/users/:id	Get user by ID
	/api/users	Create new user
	/api/users/:id	Update user
	/api/users/:id	Delete user

Get All Users

GET /api/users?page=1&limit=10

Query Parameters:

• page - Page number (default: 1)
• limit - Items per page (default: 10)

Response:

{
  "success": true,
  "count": 10,
  "total": 100,
  "page": 1,
  "pages": 10,
  "data": [
    {
      "_id": "507f1f77bcf86cd799439011",
      "name": "John Doe",
      "email": "john@example.com",
      "phone": "+1234567890",
      "role": "user",
      "createdAt": "2025-01-11T10:00:00.000Z"
    }
  ]
}

Create User

POST /api/users
Content-Type: application/json

Request Body:

{
  "name": "John Doe",
  "email": "john@example.com",
  "password": "securePassword123",
  "phone": "+1234567890",
  "role": "user"
}

Response:

{
  "success": true,
  "message": "User created successfully",
  "data": {
    "_id": "507f1f77bcf86cd799439011",
    "name": "John Doe",
    "email": "john@example.com",
    "phone": "+1234567890",
    "role": "user"
  }
}

Response Formats

✅ Success Response

{
  "success": true,
  "message": "Operation successful",
  "data": { }
}

❌ Error Response

{
  "success": false,
  "message": "Error message",
  "error": "Detailed error (development only)"
}

📄 Paginated Response

{
  "success": true,
  "count": 10,
  "total": 100,
  "page": 1,
  "pages": 10,
  "data": []
}

HTTP Status Codes

Code	Status	Description
	Success	Request succeeded
	Created	Resource created
	Bad Request	Invalid request
	Not Found	Resource not found
	Server Error	Internal error

---

🐛 Troubleshooting

🔴 Port Already in Use

Error: Port 3000 is already in use

Solution:

# Windows
netstat -ano | findstr :3000
taskkill /PID <PID> /F

# Mac/Linux
lsof -i :3000
kill -9 <PID>

# Or change PORT in .env
PORT=3001

🔴 MongoDB Connection Error

Error: MongoNetworkError: failed to connect to server

Solutions:

• ✅ Ensure MongoDB is running
• ✅ Verify MONGODB_URI in .env
• ✅ Check firewall settings
• ✅ For Atlas: Check IP whitelist

🔴 Module Not Found

Error: Cannot find module 'express'

Solution:

rm -rf node_modules pnpm-lock.yaml
pnpm install

🔴 CORS Errors

Error: Access blocked by CORS policy

Solution:

• ✅ Ensure CLIENT_URL in .env matches frontend
• ✅ Default: CLIENT_URL=http://localhost:5173
• ✅ Restart server after changes

🔴 pnpm Command Not Found

Solution:

npm install -g pnpm
pnpm --version

---

🤝 Contributing

Contributions are welcome! Here's how you can help:

Steps to Contribute

1. Fork the repository
2. Clone your fork

   git clone https://github.com/YOUR_USERNAME/Full-Stack_Project_Setup_Guide.git

3. Create a feature branch

   git checkout -b feature/amazing-feature

4. Commit your changes

   git commit -m "Add: amazing feature"

5. Push to your fork

   git push origin feature/amazing-feature

6. Open a Pull Request

Contribution Guidelines

• ✅ Follow existing code structure
• ✅ Use MVC pattern for backend
• ✅ Write meaningful commit messages
• ✅ Test before submitting
• ✅ Update documentation
• ✅ Keep PRs focused

---

📚 Documentation & Resources

Official Documentation

• Express.js - Web framework
• MongoDB - Database
• React - UI library
• Vite - Build tool
• Tailwind CSS - CSS framework
• DaisyUI - Components
• pnpm - Package manager

Learning Resources

• REST API Best Practices
• MVC Architecture
• React Hooks Guide

---

🔐 Security

• ✅ Never commit .env files
• ✅ Use strong JWT secrets in production
• ✅ Validate all user inputs
• ✅ Use HTTPS in production
• ✅ Keep dependencies updated
• ✅ Use environment variables for secrets

---

📄 License

ISC License - Feel free to use this template for your projects!

---

👤 Author

MRaysa

---

🌟 Show Your Support

If you found this project helpful:

⭐ Star this repository • 🐛 Report issues • 🤝 Contribute

---

📞 Support

Need help?

1. 📖 Check the Troubleshooting section
2. 🔍 Search GitHub Issues
3. 💬 Create a new issue

---

🎯 Quick Reference

# Clone and setup
git clone https://github.com/MRaysa/Full-Stack_Project_Setup_Guide.git
cd Full-Stack_Project_Setup_Guide

# Backend
cd server-site && pnpm install && cp .env.example .env && pnpm run dev

# Frontend (new terminal)
cd client-cite && pnpm install && pnpm run dev

---

Made with ❤️ by MRaysa

Happy Coding! 🚀