Logo
Fold React Navigation
Overview
Features
Prerequisites
Installation
Build & Deployment
Project Structure
Home Page Variants
E‑commerce Features
Design System
Technology Stack
Responsive & Dark Mode
Performance
API Structure
Security & SEO
License

Fold React

A modern, responsive e‑commerce platform built with Next.js 15, React 19, and TypeScript.

Next.js 15
React 19
TypeScript
Visit Theme

Features

  • 7 unique home page layouts
  • Product management with categories, reviews, specs
  • Full shopping cart & checkout flow
  • User authentication + password recovery
  • Responsive design, Dark Mode, and TypeScript throughout
  • API integration with React Query and Redux Toolkit
  • Animations (AOS & Framer Motion)

Prerequisites

Install Node.js 18.0+ and a package manager: npm, yarn, pnpm or bun.

Installation

Clone the repository

git clone <repository-url>
cd fold-react

Install dependencies

npm install
# or
yarn install
# or
pnpm install
# or
bun install

Start dev server

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open in browser

Navigate to http://localhost:3000

Build & Deployment

Development build

npm run dev

Production build

npm run build
npm start

Linting

npm run lint

Project Structure

fold-react/
├── app/
│   ├── (auth)/
│   │   ├── layout.tsx
│   │   ├── signin/
│   │   └── signup/
│   ├── about/
│   │   ├── about-2/
│   │   └── page.tsx
│   ├── api/
│   └── page.tsx
├── components/
├── constants/
├── data/
├── hooks/
├── lib/
├── public/
├── service/
├── store/
├── types/
├── utils/
├── views/
├── next.config.ts
├── package.json
└── README.md

Home Page Variants

Home Page 1 (Main)

Route: / — Hero, collections, trending & popular products, discounts.

Home Page 2

Route: /home/home-2 — Best categories, popular products, news articles.

Home Page 3

Deals, special products, shop by room.

Home Page 4–7

Variants including beauty, flash sales, collections, top sellers and testimonials.

E‑commerce Features

Product Management: multiple product cards, detail layouts, reviews, wishlist, search.

Shopping Cart: add/remove/update quantities, persistent cart, multi-step checkout.

User Auth: sign up/in, profiles, password recovery.

Design System

Cards, forms, navigation, grid layouts, animations and Tailwind-based styling. Dark mode built-in with system preference and manual toggle.

Technology Stack

Frontend

  • Next.js 15 (App Router)
  • React 19
  • TypeScript
  • Tailwind CSS, Framer Motion, AOS

State & Data

  • Redux Toolkit (+ Persist)
  • React Query

Responsive & Dark Mode

Breakpoints: mobile < 768px, tablet 768–1024px, desktop > 1024px. Dark mode respects system preference and stores user selection.

Performance

  • Next.js optimizations (code splitting, image optimization)
  • React Query caching & lazy loading
  • Bundle optimizations (tree shaking / minify)

API Structure

Key endpoints

/api/home-1/... /api/home-2/... /api/home-3/... /api/product/... /api/post/...

Typical data flow: Next.js API routes → service layer → React Query → UI components

Security & SEO

  • Type safety with TypeScript
  • Form validation with Yup
  • Proper error handling and secure API routes
  • SEO: meta tags, structured data, Core Web Vitals optimizations

License

This project is licensed under the MIT License.

Fold React Documentation | Fold