Full-featured eCommerce platform built with MongoDB, React, and a NestJS (Express) backend in TypeScript. Features include product catalog, shopping cart, user authentication, admin panel, order management, PayPal integration, and dark/light theme support.
- Product Catalog - Browse products with search, pagination, and top products carousel
- Product Reviews & Ratings - Customer reviews and 5-star rating system
- Shopping Cart - Add/remove items, quantity management, persistent cart
- User Authentication - Register, login, logout with JWT tokens
- User Profile - Manage personal information and view order history
- Checkout Process - Multi-step checkout with shipping and payment
- PayPal Integration - Secure payment processing
- Order Tracking - View order status and details
- Theme Support - Dark/light mode toggle
- Admin Dashboard - Comprehensive admin panel
- Product Management - Create, edit, delete products with image upload
- User Management - View, edit, delete user accounts
- Order Management - View all orders, mark as delivered
- Inventory Control - Stock management and product categorization
- TypeScript - Full TypeScript implementation for type safety
- Responsive Design - Mobile-first responsive UI with Bootstrap
- State Management - Redux Toolkit for efficient state management
- API Integration - RESTful API with proper error handling
- File Upload - Multer integration for product images
- Security - JWT authentication, password hashing, input validation
- SEO Optimized - React Helmet for meta tags and SEO
- React 18.3 - Modern React with hooks and functional components
- TypeScript 5.2 - Type-safe JavaScript development
- Redux Toolkit 1.9 - State management with RTK Query
- React Router 6.10 - Client-side routing
- Bootstrap 5.2 - Responsive UI framework
- React Bootstrap 2.7 - Bootstrap components for React
- Vite - Fast build tool and development server
- PayPal React SDK - PayPal payment integration
- React Helmet Async - SEO and meta tag management
- React Toastify - Toast notifications
- Moment.js - Date formatting and manipulation
- Node.js - JavaScript runtime environment
- NestJS (Express) - Structured API framework
- TypeScript 5.5 - Type-safe server development
- MongoDB + Mongoose 7 - NoSQL database & ODM
- JWT - JSON Web Token authentication (HttpOnly cookie)
- bcryptjs - Password hashing
- Multer - File upload handling
- Morgan - HTTP request logger
- Cookie Parser - Cookie parsing middleware
- Nodemon - Development server auto-restart
- Concurrently - Run multiple commands simultaneously
- ESLint - Code linting and formatting
- Prettier - Code formatting
- ts-node / ts-node-dev - TypeScript execution for Node.js
- Node.js (v16 or higher)
- MongoDB (local installation or MongoDB Atlas)
- npm or yarn package manager
-
Clone the repository
git clone <repository-url> cd proshop
-
Install dependencies
npm install
-
Environment Configuration Create a
.envfile in the root directory (also used by Nest backend):NODE_ENV=development PORT=3000 MONGODB_URL=mongodb://localhost:27017/proshop MONGO_URI=mongodb://localhost:27017/proshop MONGO_DB=proshop JWT_SECRET=your_jwt_secret_key PAYPAL_CLIENT_ID=your_paypal_client_id
-
Database Setup
# Import sample data (optional) npm run data:import # Destroy sample data (if needed) npm run data:destroy
# Client (Vite)
npm run client
# Server (Nest)
npm run server:dev# Build client + server
npm run build # builds server and client
# Start production server (serves /api and client dist)
npm run server:startThe application will be available at:
- Frontend: http://localhost:5173 (development via Vite) or http://localhost:3000 (production served by Nest)
- Backend API: http://localhost:3000/api
proshop/
├── backend/ # Legacy Express backend (kept for reference; Nest replaces it)
│ ├── controllers/ # Route controllers
│ ├── data/ # Sample data and seeder
│ ├── dtos/ # Data Transfer Objects
│ ├── middlewares/ # Custom middleware
│ ├── models/ # Mongoose models
│ ├── routes/ # API routes
│ ├── start/ # App configuration
│ ├── types/ # TypeScript type definitions
│ └── server.ts # Entry point
├── server/ # NestJS backend (current API)
│ ├── src/
│ │ ├── auth/ # Auth guards/decorators
│ │ ├── common/ # Filters
│ │ ├── config/ # Config controller (e.g., PayPal)
│ │ ├── order/ # Orders module
│ │ ├── product/ # Products module
│ │ ├── upload/ # Upload controller/module
│ │ └── user/ # Users module
│ ├── tsconfig*.json
│ └── dist/ # Compiled output
├── client/ # Frontend React application
│ ├── public/ # Static assets
│ ├── src/
│ │ ├── api/ # API service layer
│ │ ├── app/ # Redux slices
│ │ ├── components/ # Reusable components
│ │ ├── layout/ # Layout components
│ │ ├── pages/ # Page components
│ │ ├── store/ # Redux store configuration
│ │ ├── theme/ # Theme management
│ │ ├── types/ # TypeScript interfaces
│ │ └── utils/ # Utility functions
│ └── vite.config.ts # Vite configuration
├── uploads/ # File upload directory
└── package.json # Root package configuration
POST /api/users/register- User registrationPOST /api/users/auth- User loginPOST /api/users/logout- User logout
GET /api/products- Get all products (with pagination & search)GET /api/products/top- Get top-rated productsGET /api/products/:id- Get single productPOST /api/products/:id/review- Create product review (Protected)POST /api/products- Create product (Admin)PATCH /api/products/:id- Update product (Admin)DELETE /api/products/:id- Delete product (Admin)
GET /api/orders/myorders- Get current user's orders (Protected)POST /api/orders- Create order (Protected)GET /api/orders/:id- Get order by id (Protected)PATCH /api/orders/:id/pay- Mark order as paid (Protected)GET /api/orders- Get all orders (Admin)PATCH /api/orders/:id/deliver- Mark order as delivered (Admin)
POST /api/upload- Upload product image (Admin, form-data fieldimage)
GET /api/config/paypal- PayPal client id
POST /api/orders- Create new order (Protected)GET /api/orders/myorders- Get user orders (Protected)GET /api/orders/:id- Get order by ID (Protected)PATCH /api/orders/:id/pay- Update order to paid (Protected)GET /api/orders- Get all orders (Admin)PATCH /api/orders/:id/deliver- Mark order as delivered (Admin)
GET /api/users/profile- Get user profile (Protected)PATCH /api/users/profile- Update user profile (Protected)GET /api/users- Get all users (Admin)GET /api/users/:id- Get user by ID (Admin)PATCH /api/users/:id- Update user (Admin)DELETE /api/users/:id- Delete user (Admin)
POST /api/upload- Upload product image (Admin)
The application includes a sophisticated theme system supporting both light and dark modes with persistent user preferences.
Redux Toolkit with RTK Query provides efficient state management and API caching, reducing unnecessary network requests.
JWT-based authentication with role-based access control. Admin users have additional privileges for managing products, users, and orders.
Secure PayPal integration for payment processing with order status tracking.
Multer-based file upload system for product images with proper validation and storage management.
The application is configured for deployment on Liara (Iranian cloud platform) with disk mounting for file uploads. Configuration is available in liara.json.
npm run buildThis will:
- Install client dependencies
- Compile TypeScript backend code
- Build optimized client bundle
- Prepare for production deployment
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Hossein Rezaei
Built with ❤️ using the MERN stack and TypeScript