PROJECT CASE STUDY / BUILT SOLO

Grafica — MERN E-commerce Case Study

A full-stack MERN store for clothing, accessories, and personalized gifts. Shoppers can search and filter collections, choose product variants, and carry a guest cart into their account. The application includes checkout and order history, plus admin tools for managing products, orders, and users.

By Mohamed Saleh · Full-stack development

Grafica Store home page screenshot

What I built

  • Search, category filters, sorting, and size/color variants.
  • Guest shopping cart with merging into the signed-in account.
  • Address collection, checkout flow, order confirmation, and order history.
  • Admin product editing, image uploads, user management, and order management.

Behind the build

The challenge

Support a varied product catalog and keep shopping selections connected as a visitor moves from a guest cart to an account.

My approach

I built the React storefront with Redux Toolkit and an Express/MongoDB back end. I added product filtering and sorting, cart items with size and color choices, and a flow that merges the guest cart into the signed-in account.

The result

A store with a filterable catalog, guest and account carts, order pages, and an admin area for store management.

Technology stack

  • JavaScript
  • React
  • Vite
  • Tailwind CSS
  • Redux Toolkit
  • React Router
  • Node.js
  • Express
  • MongoDB
  • Mongoose
  • JWT
  • bcryptjs
  • Cloudinary
  • Multer
  • Axios
  • Formik
  • EmailJS
  • Framer Motion
  • Swiper
  • AOS
  • Sonner
  • React Icons

Explore the project