🛍️ ShopMe — A Full-Stack E-commerce Experience for Fashion

Summary

I designed and built ShopMe, a full-stack e-commerce application tailored for a fashion storefront.
It delivers a smooth browsing experience, a simple checkout flow, role-based authentication, and an admin dashboard for product and order management.

The project balances clean UI with pragmatic backend engineering, integrating image hosting and transactional email to make the experience feel complete end-to-end.

My Role

• Full-stack developer and owner of the project from design to deployment

• Defined the architecture, implemented frontend and backend, integrated the database, and set up deployments

Motivation

I wanted to create a production-like e-commerce experience that goes beyond static UI — supporting real CRUD, authentication, image uploads, email notifications, and admin workflows.
The goal was to demonstrate system design thinking and the ability to ship a coherent, well-structured product.

Tech Stack

Frontend: React + Vite, React Router, Tailwind CSS, AOS for animations, react-slick for carousels, Context API for cart state
Backend: Node.js, Express, Mongoose
Database: MongoDB Atlas
Auth/Security: JWT (separate roles for admin and customer), CORS with allow-list, server-side validation
Media: Multer + Cloudinary for product image uploads and hosting
Email: Resend/Nodemailer for order confirmations and status updates
Deployment: Frontend on Vercel; Backend on Railway
Configuration: Environment-driven (e.g., VITE_BACKEND_URL on the frontend, CLIENT_URL and JWT_SECRET on the backend)

Architecture and Structure

Monorepo-style Layout

• Frontend: React app (Vite) with pages — AdminLogin, AdminDashboard, Profile, Login/Register
  Includes a rich component library (Navbar, Products, TopProducts, Banner, Subscribe, Testimonials, Popup) and a CartContext that powers the cart and checkout flows.

• Backend: Express service with modular routes (products, top-products, orders, adminAuth, customerAuth), Mongoose models (Product, Order, User, Admin), and middleware for role-based auth and file uploads.

Backend Entrypoint — server.js

• Centralizes middleware (JSON parsing with validation, static /uploads, CORS)

• Routes under /api/*

• Health check at /health

• Exports the Express app for compatibility with serverless/host platforms

Data Modeling

• Product: numeric id (separate from Mongo _id), title, price, color, rating, aosDelay, img (Cloudinary URL)

• Order: items snapshot (id/title/price/quantity/img), totalPrice, customer info, status with lifecycle enums, indexes by email and createdAt

• User/Admin: encrypted password via bcrypt (with role encoded in JWT)

Key Features

Product Discovery and Merchandising

• Product list and “Top Products” with animated, responsive UI

• Dynamic image handling — local or Cloudinary-hosted URLs

Cart and Checkout

• Fully functional cart with add/decrement/remove/clear

• Modal-based checkout capturing customer info

• Order placement posts a persisted order and triggers a confirmation email

Authentication and Authorization

• Customer register/login with JWT

• Admin login with JWT; Admin dashboard requires token

• Role-based middleware on the backend for admin routes (product CRUD, order management) and user routes (view own orders by userId or email)

Admin Dashboard

• Product CRUD (with image upload to Cloudinary)

• Top product management

• Orders view with status transitions (pending → confirmed → shipped → delivered/cancelled)

• Email notifications on status updates

Profile and Order History

• Authenticated profile page showing user info and past orders via protected endpoints

Notable Implementation Details and Decisions

• Role-based JWT in Middleware
  protectAdmin and protectUser enforce both identity and role at the route level

• Image Pipeline via Multer + Cloudinary
  Files upload to a temp uploads/ directory, then get pushed to Cloudinary; local temp files are cleaned up to save disk space

• Email Notifications for Lifecycle Moments
  Order confirmation on placement and status-change emails for transparency and a “finished” feel

• CORS with Explicit Allow-list
  Uses CLIENT_URL to control origins (with dev defaults for localhost)

• Environment-driven Configuration
  Frontend points to VITE_BACKEND_URL; backend reads secrets via dotenv — keeping deploys flexible across environments

Challenges I Solved

• Cross-origin and Environment Drift
  Standardized environment variables (VITE_BACKEND_URL, CLIENT_URL) and tuned CORS handling so the frontend works both locally and in deployment

• Admin vs. Customer Paths and Security
  Cleanly separated routes and enforced role checks server-side; ensured tokens carry role info and are respected in middleware

• File Uploads and Remote Hosting
  Balanced local temp storage (for Multer) with Cloudinary-hosted URLs; handled deletion and error cases to avoid orphaned files

• Order Integrity and Email Reliability
  Validated payloads strictly; prevented invalid item structures; made email sending non-blocking to avoid disrupting order creation

Impact and Results

• Fast, Responsive UI: Vite + Tailwind keep the frontend snappy and iteration quick

• Realistic Admin Operations: End-to-end product management and order handling showcase production patterns

• Maintainable Codebase: Clear separation of concerns (routes, models, middleware), with consistent conventions between admin and customer flows

What I’d Improve Next

• Payments: Integrate Stripe or Razorpay to replace the current COD-like flow

• Observability: Centralized request logging and metrics; structured logs instead of console

• Performance: Add pagination and server-side filtering/sorting for large catalogs

• Security: Implement rate limiting, helmet headers, and stricter input validation using a validation library

• Testing: Add unit and integration tests for routes, and component tests for critical UI flows

• DX/CI: Add linting, formatting, and CI checks; consider Docker-based local setup

How This Project Reflects My Approach

• I favor shipping real workflows that mirror production concerns (auth, media, email, admin).

• I invest in clarity — both in UX and code organization — so the project is easy to extend.

• I’m pragmatic about tools: using Cloudinary and Resend/Nodemailer allowed me to deliver a complete experience quickly without reinventing infrastructure.