A fully responsive e-commerce clothing store built with Next.js 14 and TypeScript. This project demonstrates modern frontend architecture and best practices for building scalable web applications.

• Product Catalog - Browse products with dynamic filtering and sorting
• Category Navigation - Filter products by categories
• Advanced Filtering - Filter by price range, size, and color
• Shopping Cart - Add/remove items with quantity control
• Responsive Design - Optimized for all devices from mobile to desktop
• Performance Optimized - Fast loading with Next.js App Router and Server Components
• State Management - Global state with Redux Toolkit and persisted cart

• Frontend Framework: Next.js 14 with App Router
• Language: TypeScript
• State Management: Redux Toolkit
• Styling: TailwindCSS
• UI Components:
  • Embla Carousel for image sliders
  • React Range for price range filters
• Deployment: Vercel

1. Clone the repository

git clone https://github.com/yliubyva/nextjs-ecommerce.git
cd nextjs-ecommerce

2. Install dependencies

npm install
# or
yarn install

3. Run the development server

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

src/
  ├── app/                # Next.js App Router, handling pages and routes
  ├── data/               # Mock data like products.ts
  ├── features/           # Feature-based modules
  │   ├── products/       # Product-related components and logic
  │   └── cart/           # Cart-related components and logic
  ├── shared/             # Shared UI components
  │   └── ui/             # UI components (atoms, molecules, organisms)
  ├── lib/                # Holds global configurations, like the Redux store

• Wishlist functionality
• Product reviews and ratings
• Checkout page
• Integration with backend API (e.g., mock server or real DB)
• Unit and integration tests with Jest and React Testing Library

Check out the live demo: https://shopco-5wxk.vercel.app/

Developed by Yana Liubyva