A modern, full-stack eCommerce platform built with React + Vite (frontend) and Node.js + Express (backend), featuring responsive product browsing, shopping cart management, and secure order processing with MongoDB database.
This is a complete e-commerce solution with:
- Frontend: Modern React app with Tailwind CSS
- Backend: Node.js REST API with MongoDB
- Database: MongoDB for data persistence
- Architecture: Full separation of concerns (client/server)
- Product catalog with detailed pages
- Category filtering and search
- Shopping cart with add/remove items
- Order placement and processing
- Stock management and validation
- Product QR code generation
- Responsive design (mobile-first)
- Toast notifications
- Error handling & loading states
- Express.js REST API
- MongoDB with Mongoose
- Product CRUD operations
- Inventory management
- Order processing with stock validation
- Data synchronization from external APIs
- Cron job scheduling
- Authentication (TODO)
- Payment gateway (TODO)
- React 19 with Vite
- Tailwind CSS responsive UI
- Context API state management
- Dynamic product browsing
- Shopping cart functionality
- Product search & filtering
- Lazy image loading
- Error boundaries & suspense
- User authentication (TODO)
- Payment integration (TODO)
ecommerce_app/
├── server/ # Backend (Node.js + Express + MongoDB)
│ ├── models/
│ │ ├── Product.js # Product schema
│ │ └── SyncLog.js # Sync tracking
│ ├── routes/
│ │ ├── products.js # Product endpoints
│ │ ├── orders.js # Order processing
│ │ └── auth.js # Auth (placeholder)
│ ├── utils/
│ │ ├── seedData.js # Database seeding
│ │ ├── syncProducts.js # API sync
│ │ └── scheduler.js # Cron jobs
│ ├── server.js # Express app
│ └── package.json
│
├── client/ # Frontend (React + Vite + Tailwind)
│ ├── src/
│ │ ├── components/
│ │ │ ├── common/ # Reusable components
│ │ │ └── layout/ # Layout components
│ │ ├── pages/ # Page components
│ │ ├── context/ # State management
│ │ ├── routes/ # Route config
│ │ ├── services/ # API calls
│ │ ├── hooks/ # Custom hooks
│ │ ├── utils/ # Utilities
│ │ ├── assets/ # Static files
│ │ ├── App.jsx
│ │ └── main.jsx
│ ├── public/
│ ├── index.html
│ ├── vite.config.js
│ ├── tailwind.config.js
│ └── package.json
│
└── README.md # Main documentation (this file)
| Technology | Version | Purpose |
|---|---|---|
| React | 19.1.1 | UI library |
| Vite | 7.1.7 | Build tool |
| Tailwind CSS | 4.1.13 | Styling |
| React Router | 7.9.3 | Routing |
| Axios | Latest | HTTP client |
| react-toastify | 11.0.5 | Notifications |
| react-icons | 5.5.0 | Icons |
| qrcode | 1.5.4 | QR generation |
| Technology | Version | Purpose |
|---|---|---|
| Express.js | 4.18.2 | Web framework |
| Node.js | 14+ | Runtime |
| MongoDB | 7.0.0 | Database |
| Mongoose | 8.0.0 | ODM |
| bcryptjs | 2.4.3 | Password hashing |
| JWT | 9.0.2 | Authentication |
| node-cron | 4.2.1 | Task scheduling |
| CORS | 2.8.5 | Cross-origin |
| Tool | Purpose |
|---|---|
| ESLint | Code linting |
| nodemon | Server auto-reload |
| Vite | Fast dev server |
- Node.js v14+ and npm
- MongoDB (local or cloud instance)
- Git
git clone <repository-url>
cd ecommerce_appcd server
npm install
# Create .env file
echo "MONGODB_URI=mongodb://localhost:27017/ecommerce" > .env
echo "PORT=5000" >> .envcd ../client
npm installcd server
npm run dev # Development with nodemon
# OR
npm start # ProductionServer runs on: http://localhost:5000
cd client
npm run dev # Development with hot reloadFrontend runs on: http://localhost:5173
cd server
npm run seed # Seed initial products
npm run sync # Sync from external APIGET /api/products - Get all products
GET /api/products/:id - Get product by ID
POST /api/orders - Place order (process purchase)
POST /api/auth/login - User login
POST /api/auth/register - User registration
For detailed documentation, refer to:
- Server README - Backend architecture & API details
- Client README - Frontend components & features
- Enhanced product image gallery with inline quantity controls
- Dynamic QR code generation for products
- Fixed frontend data fetching and loading issues
- Fixed backend API response format for frontend compatibility
┌─────────────────┐
│ React App │
├─────────────────┤
│ Components │
│ Context API │
│ React Router │
└────────┬────────┘
│ Axios
↓
┌─────────────────┐
│ Express API │
├─────────────────┤
│ Routes │
│ Controllers │
│ Middleware │
└────────┬────────┘
│ Mongoose
↓
┌─────────────────┐
│ MongoDB │
├─────────────────┤
│ Products │
│ Orders │
│ SyncLogs │
└─────────────────┘
- Comprehensive product information
- Stock management (inventory source of truth)
- Reviews and ratings
- Sync tracking from external APIs
- Tracks all data synchronization events
- Timestamps and status
- Historical record of syncs
- Customer information
- Order items and pricing
- Payment status
- Delivery tracking
- User authentication
- Profile information
- Order history
- Product catalog
- Shopping cart
- Order placement
- Responsive UI
- User authentication
- Payment gateway integration
- Order tracking
- Admin dashboard
- User reviews and ratings
- Wishlist functionality
- Advanced filtering
- Email notifications
- Implement user authentication
- Add payment gateway (Razorpay/Stripe)
- Create User model
- Add admin routes
- Input validation middleware
- Error handling middleware
- Implement login/register pages
- Payment checkout flow
- User account management
- Wishlist functionality
- Order tracking page
- Dark mode support
- CORS enabled
- Environment variables for sensitive data
- JWT authentication (TODO)
- Input validation (TODO)
- Password hashing ready (bcryptjs)
- HTTPS in production
- Lazy image loading
- Code splitting with React Router
- Suspense boundaries for async
- Tailwind CSS optimization
- Vite fast build tool
- MongoDB indexing
- Create a new branch:
git checkout -b feature/your-feature - Make your changes
- Commit:
git commit -m "Add your feature" - Push:
git push origin feature/your-feature - Create a Pull Request
Latest commits:
86203d2 - Merge pull request #10 from akhilachiju/ui-enhancements
9620fa8 - Enhance product image gallery with inline quantity controls
cd2caa4 - Add dynamic QR code generation for products
422a093 - Fix frontend data fetching and loading issues
8b2f748 - Fix backend API response format for frontend compatibility
For issues, questions, or suggestions:
- Check existing issues on GitHub
- Create a new issue with detailed description
- Include error logs and environment info
This project is private. All rights reserved.
- Setup: Follow the Quick Start guide above
- Explore: Check server and client READMEs for details
- Develop: Start working on Phase 2 features (Auth & Payment)
- Test: Use Postman for API testing, browser DevTools for frontend
- Deploy: When ready, deploy to production environments
Last Updated: January 24, 2026 Branch: main Status: Active Development