⚡ 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

Fork the repository

Clone your fork

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

Create a feature branch
```
git checkout -b feature/amazing-feature
```
Commit your changes
```
git commit -m "Add: amazing feature"
```
Push to your fork
```
git push origin feature/amazing-feature
```
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

🔐 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?

📖 Check the Troubleshooting section
🔍 Search GitHub Issues
💬 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! 🚀

⚡ Full-Stack Project Setup Guide

Modern Full-Stack Web Application Template

📑 Overview

✨ Features

🎨 User Interface

🔐 Authentication & Services

🧭 Navigation & Routing

🗄️ Backend Architecture

📦 Package Management

🛠️ Tech Stack

📋 Prerequisites

🚀 Quick Start

1️⃣ Clone Repository

2️⃣ Backend Setup

3️⃣ Frontend Setup

4️⃣ Access Application

📁 Project Structure

⚙️ Configuration

Backend Environment Variables

Frontend Environment Variables

📜 Available Scripts

Backend Commands

Frontend Commands

📡 API Documentation

Base URL

🏥 Health Check

👥 Users API

Get All Users

Create User

Response Formats

✅ Success Response

❌ Error Response

📄 Paginated Response

HTTP Status Codes

🐛 Troubleshooting

🤝 Contributing

Steps to Contribute

Contribution Guidelines

📚 Documentation & Resources

Official Documentation

Learning Resources

🔐 Security

📄 License

👤 Author

🌟 Show Your Support

📞 Support

🎯 Quick Reference

About

Languages