🛒 Full-Stack Ecommerce Platform

A modern, full-stack ecommerce application built with React, Node.js, and MongoDB. This platform includes a customer-facing store, admin dashboard, and robust backend API with payment integration.

🌟 Features

🛍️ Customer Features

• Product Browsing: Browse products with categories and search functionality
• Shopping Cart: Add/remove items with real-time updates
• User Authentication: Secure login/registration system
• Order Management: Track order history and status
• Payment Integration: Support for Razorpay and Stripe payments
• Responsive Design: Mobile-friendly interface with Tailwind CSS

👨‍💼 Admin Features

• Product Management: Add, edit, and delete products
• Order Management: View and manage customer orders
• Image Upload: Cloudinary integration for product images
• Dashboard: Comprehensive admin panel

🔧 Technical Features

• RESTful API: Well-structured backend with Express.js
• Database: MongoDB with Mongoose ODM
• Authentication: JWT-based authentication
• File Upload: Multer for handling file uploads
• Cloud Storage: Cloudinary for image management
• Payment Gateway: Multiple payment options

🏗️ Project Structure

Full-stack-ecommerce/
├── 📁 Backend/                 # Node.js API Server
│   ├── 📁 config/             # Database and service configurations
│   ├── 📁 controllers/        # Business logic controllers
│   ├── 📁 middleware/         # Authentication and validation
│   ├── 📁 models/            # MongoDB schemas
│   ├── 📁 routes/            # API routes
│   └── 📄 server.js          # Main server file
├── 📁 Frontend/               # Customer-facing React app
│   ├── 📁 src/
│   │   ├── 📁 components/    # Reusable UI components
│   │   ├── 📁 pages/         # Page components
│   │   ├── 📁 context/       # React context for state management
│   │   └── 📁 assets/        # Images and static files
│   └── 📄 package.json
├── 📁 admin/                  # Admin dashboard React app
│   ├── 📁 src/
│   │   ├── 📁 components/    # Admin-specific components
│   │   └── 📁 pages/         # Admin pages
│   └── 📄 package.json
└── 📄 README.md

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• MongoDB Atlas account or local MongoDB
• Cloudinary account (for image storage)
• Razorpay/Stripe account (for payments) - Optional: Code is ready but keys not configured

Installation

1. Clone the repository

   git clone https://github.com/yourusername/Full-stack-ecommerce.git
   cd Full-stack-ecommerce

2. Backend Setup

   cd Backend
   npm install

   Create a .env file in the Backend directory:

   MONGODB_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret_key
   CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
   CLOUDINARY_API_KEY=your_cloudinary_api_key
   CLOUDINARY_API_SECRET=your_cloudinary_api_secret
   RAZORPAY_KEY_ID=your_razorpay_key_id
   RAZORPAY_KEY_SECRET=your_razorpay_key_secret
   STRIPE_SECRET_KEY=your_stripe_secret_key

3. Frontend Setup

   cd ../Frontend
   npm install

   Create a .env file in the Frontend directory:

   VITE_BACKEND_URL=http://localhost:4000

4. Admin Setup

   cd ../admin
   npm install

   Create a .env file in the admin directory:

   VITE_BACKEND_URL=http://localhost:4000

Running the Application

1. Start the Backend Server

   cd Backend
   npm run server

   Server will run on http://localhost:4000

2. Start the Frontend (Customer App)

   cd Frontend
   npm run dev

   App will run on http://localhost:5173

3. Start the Admin Dashboard

   cd admin
   npm run dev

   Admin panel will run on http://localhost:5174

🛠️ Tech Stack

Frontend

• React 19 - UI library
• Vite - Build tool and dev server
• Tailwind CSS - Styling framework
• React Router DOM - Client-side routing
• Axios - HTTP client
• React Toastify - Notifications

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• MongoDB - Database
• Mongoose - ODM for MongoDB
• JWT - Authentication
• Bcrypt - Password hashing
• Multer - File upload handling
• Cloudinary - Image storage
• Razorpay & Stripe - Payment gateways (Code implemented, keys not configured)

📱 API Endpoints

Authentication

• POST /api/user/register - User registration
• POST /api/user/login - User login

Products

• GET /api/product - Get all products
• GET /api/product/:id - Get product by ID
• POST /api/product - Add new product (Admin)
• PUT /api/product/:id - Update product (Admin)
• DELETE /api/product/:id - Delete product (Admin)

Cart

• GET /api/cart/:userId - Get user's cart
• POST /api/cart/add - Add item to cart
• PUT /api/cart/update - Update cart item
• DELETE /api/cart/remove - Remove item from cart

Orders

• GET /api/order/:userId - Get user's orders
• POST /api/order/place - Place new order
• PUT /api/order/:id - Update order status (Admin)

🎨 Key Features Implementation

🔐 Authentication System

• JWT-based authentication
• Password hashing with bcrypt
• Protected routes for admin functions

💳 Payment Integration

• Multiple payment gateways (Razorpay & Stripe)
• Note: Payment gateway code is implemented but API keys are not configured
• To enable payments, add your Razorpay/Stripe keys to the .env file
• Secure payment processing
• Order confirmation system

📸 Image Management

• Cloudinary integration for image storage
• Multiple image upload support
• Automatic image optimization

🛒 Shopping Cart

• Real-time cart updates
• Persistent cart storage
• Quantity management

🧪 Testing

Manual Testing

The application includes comprehensive test scenarios for:

• User authentication flows
• Product management operations
• Cart functionality
• Order processing
• Payment integration
• Admin dashboard features

Test Data

Initial test data includes:

• Sample products with various categories
• Test user accounts
• Sample orders for testing

🚀 Deployment

Backend Deployment

1. Deploy to platforms like Heroku, Railway, or DigitalOcean
2. Set up MongoDB Atlas for production database
3. Configure environment variables
4. Set up Cloudinary for image storage

Frontend Deployment

1. Build the production version: npm run build
2. Deploy to Vercel, Netlify, or similar platforms
3. Configure environment variables for production

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin feature-name
5. Submit a pull request

📝 License

This project is licensed under the ISC License.

👥 Authors

• wpc41205 - Initial work -(https://github.com/wpc41205)

🙏 Acknowledgments

• React team for the amazing framework
• MongoDB for the database solution
• Cloudinary for image management
• Payment gateway providers (Razorpay & Stripe)

📞 Support

If you have any questions or need help, please:

• Open an issue on GitHub
• Contact: loomaflex44@gmail.com

---

⭐ Star this repository if you found it helpful!