Skip to content

E-commernce Website

A fully responsive e-commerce platform with seamless user experience, featuring dynamic product listings, secure payment integration, and a modern design

E-commernce Website cover

Project Brief

Queen Shop is a full-stack e-commerce application designed to provide a seamless shopping experience. It demonstrates a robust backend, a dynamic frontend, secure payment processing, and scalable cloud deployment—covering the workflow from product browsing to order fulfillment.

Repositories

Approach

  • Planning & Goals
    • Outlined the MVP scope around a complete commerce flow: browse → product details → cart → checkout → order confirmation
    • Focused on functionality first with room for reviews, wishlists, coupons
    • Separated buyer vs admin requirements to guide architecture
  • System Design & Architecture
    • Frontend: React + Tailwind CSS
    • Backend: Node.js + Express (/products, /cart, /orders, /auth)
    • Database: MongoDB
    • Payments: Stripe (client secret + optional webhook)
    • Media: Cloudinary (responsive transforms, CDN)
    • Deploy: AWS EC2 (+ Route 53, optional S3), SSL via Nginx
  • Implementation Workflow
    • Modeled product, user, order schemas; added seed scripts
    • Built/validated APIs first (Postman), then UI flow (catalog → product → cart → checkout → success)
    • Integrated Cloudinary in admin; stored public URLs on product docs
    • Implemented Stripe Elements + server client-secret; webhook optional
  • Testing & Quality Assurance
    • Smoke-tested critical API paths (auth, cart, order)
    • Walkthroughs for add-to-cart, checkout, order history
    • Performance checks (Cloudinary compression, Lighthouse)
    • Stripe dashboard for error visibility
  • DevOps & Deployment
    • GitHub flow: feature branches + PRs
    • CI: lint/build on push (GitHub Actions)
    • Backend on EC2 with PM2 (or Docker); static frontend via EC2/CDN
    • Route 53 domain + SSL via Nginx reverse proxy
  • Project Duration (Estimate)
    • Part-time: 6–8 weeks for MVP (FE+BE+payments)
    • Plus 2–3 weeks for testing, deployment, refinements

Features

  • User Authentication: register/login with protected routes
  • Product Catalog: category filtering, search, and product detail pages
  • Shopping Cart: add/update/remove items with price totals
  • Checkout: Stripe-powered secure payments (client secret flow)
  • Order History: view past orders and statuses
  • Admin Basics: add/edit products, Cloudinary image uploads
  • Responsive UI: Tailwind-guided layouts for mobile → desktop
  • Notifications: basic toasts for actions & error states

Tools & Technologies

ReactReduxTailwind CSSViteNode.jsExpress.jsMongoDBStripeCloudinaryAWS EC2(Optional) AWS S3(Optional) Route 53GitGitHub