Back to Projects

Ecommerce-ui

A modern, responsive e‑commerce frontend built with Next.js App Router. It showcases product listing, detail pages with variants, a persistent shopping cart, and a simple multi‑step checkout UI using mock data.

Tech Stack:
NextJS
Typescript
TailwindCSS
Source Code Live Demo

Overview

This project is a learning/demo storefront that focuses on clean UI and frontend architecture:

  • Browse products by category and search/filter.
  • View product details with size and color variants.
  • Add items to a persistent cart (saved in localStorage).
  • Step-by-step checkout flow: Cart → Shipping → Payment.
  • Form validation with React Hook Form + Zod.

A production backend and real payment integration are planned for the future; for now, data is loaded from local files under `client/raw-data` and images in `client/public`.

Tech stack

  • Next.js 16 (App Router).
  • React 19 + TypeScript.
  • Tailwind CSS v4.
  • Zustand v5 (cart state + persistence).
  • React Hook Form + Zod (forms/validation).
  • Lucide Icons, React Toastify

Features

  • Product catalog with variant images per color.
  • Category filter and search UI.
  • Accessible, responsive layout with Tailwind.
  • Add/remove items; quantity aggregation by variant (size+color).
  • Derived totals, shipping and discount placeholders.
  • Client-side persistence and hydration handling