MERNStore - MERN Stack E-Commerce Application

A full-stack e-commerce application built with the MERN stack (MongoDB, Express.js, React, Node.js) featuring product management, CRUD operations, and a responsive UI.

Features

• 🛍️ Product Management: Create, read, update, and delete products
• 🎨 Modern UI: Built with React and Chakra UI for a responsive design
• 🌙 Dark Mode: Automatic dark/light mode based on system preference
• 📱 Responsive Design: Works on mobile, tablet, and desktop
• 🔥 Real-time Updates: Instant UI updates without page refresh
• 🛡️ Error Handling: Comprehensive error handling and user feedback

Tech Stack

Frontend

• React 18 - JavaScript library for building user interfaces
• Vite - Fast build tool and development server
• Chakra UI - Simple, modular & accessible component library
• React Router - Declarative routing for React
• Zustand - Small, fast and scalable bearbones state-management solution

Backend

• Node.js - JavaScript runtime environment
• Express.js - Web application framework for Node.js
• MongoDB - NoSQL database for storing product data
• Mongoose - MongoDB object modeling tool
• Dotenv - Environment variable management

Prerequisites

• Node.js (v14 or higher)
• MongoDB (local or cloud instance)
• npm or yarn package manager

Getting Started

1. Clone the Repository

git clone https://github.com/yourusername/MERNStore.git
cd MERNStore

2. Environment Setup

Create environment files for both development and production:

# Development environment
cp .env.development.example .env.development

# Production environment
cp .env.production.example .env.production

Update the environment variables in both files:

• MONGODB_URI: Your MongoDB connection string
• PORT: Server port (default: 5000 for production, 5001 for development)

3. Install Dependencies

# Install backend dependencies
npm install

# Install frontend dependencies
cd frontend
npm install
cd ..

4. Run Development Server

# Start backend server (port 5001)
npm run dev

# In a new terminal, start frontend development server (port 5173)
npm run dev-frontend

5. Build for Production

# Build the frontend
npm run build

# Start production server
npm start

Project Structure

MERNStore/
├── backend/
│   ├── config/          # Database configuration
│   ├── controllers/     # Request handlers
│   ├── models/          # Database models
│   ├── routes/          # API routes
│   └── server.js        # Entry point
├── frontend/
│   ├── src/
│   │   ├── components/  # Reusable UI components
│   │   ├── pages/       # Page components
│   │   ├── store/       # Global state management
│   │   ├── App.jsx      # Main app component
│   │   └── main.jsx     # Entry point
│   └── vite.config.js   # Vite configuration
├── .env.development     # Development environment variables
├── .env.production      # Production environment variables
└── package.json         # Root package configuration

API Endpoints

Method	Endpoint	Description
GET	/api/products	Get all products
POST	/api/products	Create a new product
PUT	/api/products/:id	Update a product
DELETE	/api/products/:id	Delete a product

Deployment

Environment Variables

For production deployment, set these environment variables:

NODE_ENV=production
PORT=5000
MONGODB_URI=your_production_mongodb_uri
FRONTEND_URL=your_frontend_url (for CORS)

Hosting Options

Render/Heroku

1. Set environment variables in your dashboard
2. Set build command: npm run build
3. Set start command: npm start

Vercel (Frontend) + Render/Heroku (Backend)

1. Deploy frontend to Vercel with frontend/ as the root directory
2. Deploy backend separately with environment variables configured

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Chakra UI for the beautiful component library
• Vite for the lightning-fast build tool
• MongoDB Atlas for the cloud database