Forever: Full-Stack E-Commerce Platform

Overview

Forever is a comprehensive e-commerce platform designed for clothing stores, built from scratch using the MERN (MongoDB, Express, React, Node.js) stack. The platform features separate interfaces for customers and administrators, multiple payment gateway integrations (Stripe, Razorpay, COD), real-time cart management, and a complete order tracking system. The application demonstrates production-ready full-stack development with proper authentication, secure payment processing, and scalable architecture.

What Users Can Do

• Browse Products: Explore clothing items with category filters (Men/Women/Kids), subcategory filters (Topwear/Bottomwear/Winterwear), search functionality, and price sorting
• Product Details: View detailed product pages with multiple images, descriptions, available sizes, and pricing
• Shopping Cart: Add products to cart with size selection, update quantities, remove items, with automatic backend synchronization
• Multiple Payment Options: Choose from Stripe, Razorpay, or Cash on Delivery (COD) for flexible checkout
• Order Tracking: View complete order history and track order status through multiple stages (Order Placed → Packing → Shipped → Out for Delivery → Delivered)
• Admin Dashboard: Manage products, upload images to Cloudinary, view all customer orders, and update order statuses
• Secure Authentication: Register and login with JWT-based authentication, with separate admin access
• Cart Persistence: Cart data automatically syncs with backend and persists across sessions when logged in

Why I Built This

I built Forever to solve several key problems in building a complete e-commerce solution:

• Complete E-Commerce Experience: Needed a full-stack platform covering all essential features - product management, cart, payments, and order tracking
• Multiple Payment Options: Different customers prefer different payment methods - Stripe for international, Razorpay for Indian market, and COD for trust-building
• Cart State Management: Managing cart state across frontend and backend while maintaining real-time synchronization and persistence
• Admin Operations: Store owners need efficient tools to manage products and orders without complex interfaces
• Scalable Image Storage: Product images need cloud storage for performance and scalability, not local server storage
• Production-Ready Security: Implementing proper authentication, authorization, and secure payment processing
• Real-World Application: Building something that demonstrates full-stack capabilities with real business logic

Tech Stack

Frontend

• React - UI library for building interactive interfaces
• React Router DOM - Client-side routing
• Tailwind CSS - Utility-first CSS framework
• Axios - HTTP client for API requests
• React Toastify - Toast notifications

Backend & Services

• Node.js - JavaScript runtime
• Express.js - Web application framework
• MongoDB - NoSQL database
• Mongoose - MongoDB object modeling
• JWT (jsonwebtoken) - Authentication tokens
• bcrypt - Password hashing
• Cloudinary - Cloud image management and CDN
• Stripe - International payment processing
• Razorpay - Indian payment gateway

Development Tools

• Validator - Input validation
• Vercel - Frontend and admin panel hosting

Key Features

1. User Authentication System

• JWT-based stateless authentication
• Secure password hashing with bcrypt (10 salt rounds)
• Separate authentication for users and admins
• Token stored in localStorage for session persistence
• Protected routes with middleware verification

2. Product Management

• Product Schema: Name, description, price, multiple images, category, subcategory, sizes array, bestseller flag
• Image Handling: Upload up to 4 images per product, stored in Cloudinary with secure URLs
• Product Filtering: Filter by category (Men/Women/Kids), subcategory (Topwear/Bottomwear/Winterwear)
• Product Search: Real-time search functionality across product names
• Price Sorting: Sort products by price (Low to High / High to Low)
• Bestseller Section: Featured products marked as bestsellers

3. Shopping Cart System

• Nested Data Structure: {productId: {size: quantity}} for managing multiple products with different sizes
• Real-time Updates: Cart updates immediately in UI and syncs with backend
• Cart Persistence: Cart data stored in user document in MongoDB
• Quantity Management: Increase/decrease quantities or remove items
• Cart Calculation: Automatic total calculation including delivery charges
• Guest Cart: Users can add items before login, cart syncs on authentication

4. Multiple Payment Gateways

Cash on Delivery (COD)

• Immediate order placement without payment verification
• Order created with payment: false status
• Cart cleared after order placement

Stripe Integration

• Stripe Checkout Session creation with line items
• Redirect flow to Stripe payment page
• Payment verification on return callback
• Order updated with payment status after successful payment
• Handles payment failures and cancellations

Razorpay Integration

• Razorpay order creation with amount in paise
• Modal-based payment flow using Razorpay JavaScript SDK
• Payment verification via Razorpay API
• Supports UPI, cards, net banking, and wallets
• Order status updated after payment confirmation

5. Order Management

• Order Schema: userId, items array, amount, address object, status, paymentMethod, payment boolean, date
• Order Status Tracking: Multi-stage status updates (Order Placed → Packing → Shipped → Out for Delivery → Delivered)
• Order History: Users can view all past orders with complete details
• Admin Order View: Admins can see all orders from all users
• Status Updates: Admins can update order status through dropdown interface

6. Admin Panel

• Separate React Application: Dedicated admin interface
• Product CRUD Operations: Add products with image uploads, view all products, delete products
• Order Management Dashboard: View all orders, customer details, delivery addresses, and update statuses
• Secure Access: Admin credentials stored in environment variables
• Admin Authentication: Separate JWT token generation for admin access

7. Image Management

• Cloudinary Integration: All product images uploaded to Cloudinary
• Multiple Image Support: Up to 4 images per product
• Optimized Storage: Images stored in cloud with CDN delivery
• Secure URLs: Cloudinary provides secure, optimized image URLs
• Multer Middleware: Handles multipart/form-data for file uploads

After Launch & Impact

• Built a complete full-stack e-commerce application with MERN stack
• Successfully integrated multiple payment gateways (Stripe, Razorpay, COD)
• Implemented secure JWT-based authentication and role-based authorization
• Created scalable RESTful API architecture with proper middleware
• Learned cloud image storage with Cloudinary and complex state management with React Context API
• Deployed full-stack application to production

Challenges Overcome

1. Cart State Synchronization: Implemented dual-state management (local + backend) with automatic synchronization using nested object structure.

2. Multiple Payment Gateway Integration: Created separate controller functions for Stripe and Razorpay with proper verification flows handling success, failure, and cancellation scenarios.

3. Image Upload and Storage: Integrated Multer and Cloudinary with parallel image uploads using Promise.all for better performance.

4. Nested Cart Data Structure: Designed efficient nested object structure {productId: {size: quantity}} with helper functions for cart operations.

5. Admin vs User Authentication: Implemented separate authentication system using environment variables for admin credentials and separate JWT tokens.

6. Order Status Management: Created multi-stage order status system with admin update functionality and proper status transitions.

7. Real-time Cart Updates: Implemented immediate UI updates with backend synchronization and cart persistence across sessions.

8. Payment Verification Flow: Created robust verification endpoints for both payment gateways handling edge cases.