🧭 React E-Commerce Frontend — Project Rulebook

⚙️ 1. Project Setup Guidelines

Use:

• React (latest stable version)
• Vite or CRA (prefer Vite for faster builds)
• TypeScript (recommended) or JS (if project started in JS)
• TailwindCSS + shadcn/ui (for design system)
• React Router DOM (for navigation)
• Axios or Fetch API for network calls
• React Query (for async data fetching + caching)
• Context API or Zustand/Recoil (for app-level state)
• ESLint + Prettier for code formatting & linting

🗂️ 2. Folder Structure (Scalable + Industry-standard)

ecomm-frontend/
├── public/
│   └── favicon.ico
│
├── src/
	│   ├── assets/                # images, icons, fonts
│   ├── components/            # reusable UI components (buttons, modals, cards)
│   │   ├── ui/                # atomic components
│   │   ├── layouts/           # shared layouts (Navbar, Footer)
│   │   └── index.ts           # export barrel file
│   │
│   ├── features/              # domain-specific modules
│   │   ├── products/
│   │   │   ├── components/
│   │   │   ├── pages/
│   │   │   ├── hooks/
│   │   │   ├── api/
│   │   │   └── index.ts
│   │   ├── cart/
│   │   ├── auth/
│   │   └── orders/
│   │
│   ├── pages/                 # route-level components
│   │   ├── Home.tsx
│   │   ├── ProductList.tsx
│   │   ├── ProductDetail.tsx
│   │   ├── Cart.tsx
│   │   └── Checkout.tsx
│   │
│   ├── hooks/                 # custom global hooks
│   ├── context/               # Context Providers (AuthContext, ThemeContext)
│   ├── utils/                 # helper functions (formatDate, priceFormatter)
│   ├── services/              # axios configs, API clients
│   ├── constants/             # app-wide constants (API URLs, keys)
│   ├── types/                 # TypeScript types & interfaces
│   ├── router/                # central routing setup
│   ├── store/                 # Zustand/Recoil/Redux store (if used)
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
│
├── .env
├── .eslintrc.js
├── .prettierrc
├── package.json
├── tsconfig.json
└── README.md

✏️ 3. Naming Conventions