A full-stack e-commerce application built with the MERN stack (MongoDB, Express.js, React, Node.js) featuring a modern, minimal design with smooth animations and mobile-responsive UI.
🌐 Live Demo: ecart.gammerce.in
1-2 minute walkthrough demonstrating the complete application functionality
- User registration with Google Auth & OTP verification
- Secure login with JWT tokens
- Protected routes for authenticated users
- Browse products with category filtering
- Featured products showcase on homepage
- Integrated quantity selector in "Add to Cart" button
- Real-time cart updates without page refresh
- Add/remove products with instant UI updates
- Simple checkout form with customer details
- Order confirmation with unique Order ID
- Order success/failure pages
- Order history page for users
- Mobile Responsive: Optimized for all screen sizes
- Accessibility: Clear navigation and user-friendly forms
- React 18+ - UI library
- Tailwind CSS - Utility-first styling
- Vite - Build tool and dev server
- Node.js - Runtime environment
- Express.js - Web framework
- MongoDB - NoSQL database
E-Cart/
├── backend/
│ ├── controllers/
│ ├── models/
│ ├── routes/
│ ├── middlewares/
│ ├── utils/
│ ├── data/
│ ├── server.js # Entry point
│ └── package.json
│
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ ├── pages/
│ │ ├── hooks/
│ │ ├── context/
│ │ ├── routes/
│ │ ├── App.jsx
│ │ ├── main.jsx # Entry point
│ │ └── index.css
│ ├── package.json
│ └── vite.config.js
git clone https://github.com/Abdul-Rakib/Ecart.git
cd Ecart# Navigate to backend directory
cd backend
# Install dependencies
npm install
# Create .env file
touch .envAdd the following environment variables to .env:
EXAMPLES
PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
TWILIO_ACCOUNT_SID=your_twilio_account_sid
TWILIO_AUTH_TOKEN=your_twilio_auth_token
TWILIO_PHONE_NUMBER=your_twilio_phone_number
NODE_ENV=development# Start the backend server
npm start
# Server runs on http://localhost:5000# Navigate to frontend directory (from root)
cd ../frontend
# Install dependencies
npm install
# Create .env file
touch .envAdd the following environment variables to .env:
VITE_API_URL=http://localhost:5000# Start the development server
npm run dev
# App runs on http://localhost:5173To populate the database with sample products:
# From backend directory
node data/seedProducts.jsPOST /api/auth/send-otp- Send OTP to phonePOST /api/auth/verify-otp- Verify OTPPOST /api/auth/register- Register new userPOST /api/auth/login- User loginGET /api/auth/verify- Verify JWT token
GET /api/products- Get all productsGET /api/products/:id- Get product by ID
GET /api/cart- Get user cartPOST /api/cart- Add item to cartPUT /api/cart/:itemId- Update cart item quantityDELETE /api/cart/:itemId- Remove item from cartDELETE /api/cart- Clear cart
POST /api/cart/checkout- Place orderGET /api/cart/orders/all- Get user ordersGET /api/cart/orders/:orderId- Get order by ID
GET /api/user/profile- Get user profilePUT /api/user/profile- Update user profile
- Clean white cards with subtle borders
- Reduced padding and margins for compact layout
- Smaller, readable font sizes
- Subtle hover effects without transform animations
- Responsive grid layouts (1/2/4 columns)
- Fixed bottom checkout bar on mobile
- Collapsible order details
- Touch-friendly button sizes
- Stacked forms on small screens
- Smooth fade-in/fade-out (0.3-0.4s ease)
- No bouncy or "shocky" effects
- Subtle hover transitions
- Infinite scrolling feature banners
- JWT-based authentication
- OTP verification for registration
- Input validation on frontend and backend
- CORS configuration
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.
Abdul Rakib
- GitHub: @Abdul-Rakib
- Live Demo: ecart.gammerce.in
⭐ If you found this project helpful, please give it a star!