# BlinkIt Clone - E-commerce Platform A complete e-commerce platform with user authentication, admin panel, cart functionality, and payment integration. ## Features - **User Authentication**: Register/Login with role-based access - **Admin Panel**: Add, edit, delete products - **Product Catalog**: Browse products with images and descriptions - **Shopping Cart**: Add items, view totals, manage quantities - **Payment Integration**: Razorpay payment gateway - **Order Management**: Place orders with delivery partner assignment - **Responsive Design**: Modern UI with mobile-friendly layout ## Tech Stack - **Backend**: Node.js, Express.js, MongoDB - **Frontend**: HTML, CSS, JavaScript - **Payment**: Razorpay - **Authentication**: JWT tokens ## Setup Instructions ### Prerequisites - Node.js (v14 or higher) - MongoDB Atlas account - Razorpay account (for payment testing) ### Backend Setup 1. Navigate to the Backend directory: ```bash cd Backend ``` 2. Install dependencies: ```bash npm install ``` 3. Update MongoDB connection string in `server.js` with your MongoDB Atlas URI 4. (Optional) Set Razorpay environment variables: ```bash RAZORPAY_KEY_ID=your_razorpay_key_id RAZORPAY_KEY_SECRET=your_razorpay_secret ``` 5. Seed the database with sample data: ```bash node seed.js ``` 6. Start the server: ```bash npm start ``` The backend will run on `http://localhost:3000` ### Frontend Setup 1. Open `Frontend/index.html` in your browser 2. Or serve the Frontend directory using a local server ## Usage ### Default Login Credentials **Admin User:** - Email: `admin@blinkit.com` - Password: `admin123` **Regular User:** - Email: `user@blinkit.com` - Password: `user123` ### User Flow 1. **Login/Register**: Start at `index.html` 2. **Browse Products**: View product catalog at `products.html` 3. **Add to Cart**: Click "Add to Cart" on any product 4. **Checkout**: Choose COD or Razorpay payment 5. **Order Confirmation**: Receive order confirmation with delivery partner assignment ### Admin Flow 1. **Login as Admin**: Use admin credentials 2. **Access Admin Panel**: Automatically redirected to `admin.html` 3. **Manage Products**: Add, edit, delete products 4. **View Orders**: Monitor customer orders ## API Endpoints ### Authentication - `POST /api/users/register` - User registration - `POST /api/users/login` - User login ### Products - `GET /api/products` - Get all products - `POST /api/products` - Add new product (admin) - `PUT /api/products/:id` - Update product (admin) - `DELETE /api/products/:id` - Delete product (admin) ### Cart - `GET /api/cart/:userId` - Get user cart - `POST /api/cart/:userId/add` - Add item to cart - `DELETE /api/cart/:userId/remove/:productId` - Remove item from cart - `GET /api/cart/:userId/totals` - Get cart totals ### Orders - `POST /api/orders` - Place new order - `GET /api/orders/user/:userId` - Get user orders - `PUT /api/orders/:id/status` - Update order status ## Key Features Explained ### Delivery Partner Assignment - Random delivery partner assigned within 1-10 seconds after order placement - Partners: Swiggy Genie, Dunzo, Shadowfax, Delhivery, BlinkIt Partner A, BlinkIt Partner B - Assignment happens asynchronously and is saved to the order ### Payment Integration - **COD**: Cash on delivery option - **Razorpay**: Online payment gateway - Payment verification webhook included - Order status updates after successful payment ### Cart Management - Persistent cart storage in user document - Real-time total calculation - Quantity management - Cart clearing after successful order ## File Structure ``` BlinkIt/ ├── Backend/ │ ├── models/ │ │ ├── User.js │ │ ├── Products.js │ │ ├── Cart.js │ │ └── Order.js │ ├── routes/ │ │ ├── user.js │ │ ├── product.js │ │ ├── cart.js │ │ └── order.js │ ├── server.js │ ├── seed.js │ └── package.json └── Frontend/ ├── index.html (Login/Register) ├── products.html (Product Catalog) └── admin.html (Admin Panel) ``` ## Customization ### Adding New Products 1. Login as admin 2. Use the admin panel to add products 3. Include image URL, description, price, and stock ### Modifying Delivery Partners Edit the `DELIVERY_PARTNERS` array in `Backend/routes/order.js` ### Styling Modify CSS in the respective HTML files to match your brand ## Troubleshooting ### Common Issues 1. **MongoDB Connection Error**: Check your connection string in `server.js` 2. **Razorpay Payment Fails**: Verify your Razorpay keys 3. **CORS Errors**: Ensure the backend is running on the correct port 4. **Authentication Issues**: Clear browser localStorage and re-login ### Development Tips - Use browser developer tools to debug frontend issues - Check server logs for backend errors - Test payment with Razorpay test keys first - Monitor MongoDB Atlas for database issues ## Security Notes - JWT secret should be stored in environment variables - Razorpay keys should be kept secure - Input validation should be enhanced for production - HTTPS should be used in production ## License This project is for educational purposes. Please respect the terms of service for any third-party services used. # FreshCart