The E-commerce Starter Kit uses Next.js App Router with route groups to separate the storefront, authentication, customer accounts, and admin dashboard.
Directory Overview
ecommerce-starter-kit/
├── app/
│ ├── (storefront)/ # Public shopping pages
│ │ ├── layout.tsx # StoreHeader + StoreFooter
│ │ ├── page.tsx # Homepage
│ │ ├── products/
│ │ │ ├── page.tsx # Product listing
│ │ │ └── [slug]/page.tsx # Product detail
│ │ ├── categories/
│ │ │ └── [slug]/page.tsx # Category page
│ │ ├── cart/page.tsx
│ │ ├── checkout/
│ │ │ ├── page.tsx # Cart review
│ │ │ ├── shipping/page.tsx
│ │ │ └── payment/page.tsx
│ │ ├── order-confirmation/page.tsx
│ │ ├── wishlist/page.tsx
│ │ ├── compare/page.tsx
│ │ ├── search/page.tsx
│ │ ├── about/page.tsx
│ │ ├── contact/page.tsx
│ │ ├── faqs/page.tsx
│ │ ├── shipping/page.tsx # Shipping info
│ │ ├── returns/page.tsx
│ │ ├── size-guide/page.tsx
│ │ ├── privacy/page.tsx
│ │ ├── terms/page.tsx
│ │ ├── careers/page.tsx
│ │ └── press/page.tsx
│ ├── (auth)/ # Authentication
│ │ ├── layout.tsx # Centered card layout
│ │ ├── login/page.tsx
│ │ ├── register/page.tsx
│ │ └── forgot-password/page.tsx
│ ├── (account)/ # Customer account
│ │ ├── layout.tsx # AccountHeader + AccountSidebar
│ │ └── account/
│ │ ├── page.tsx # Profile overview
│ │ ├── orders/
│ │ │ ├── page.tsx # Order history
│ │ │ └── [id]/page.tsx # Order detail
│ │ └── settings/page.tsx
│ ├── (admin)/ # Admin dashboard
│ │ ├── layout.tsx # AdminHeader + AdminSidebar
│ │ └── admin/
│ │ ├── page.tsx # Dashboard overview
│ │ ├── products/
│ │ │ ├── page.tsx # Product list
│ │ │ └── new/page.tsx # Add product
│ │ ├── orders/
│ │ │ ├── page.tsx # Order list
│ │ │ └── [id]/page.tsx # Order detail
│ │ ├── customers/
│ │ │ ├── page.tsx # Customer list
│ │ │ └── [id]/page.tsx
│ │ ├── analytics/page.tsx
│ │ ├── discounts/page.tsx
│ │ └── settings/page.tsx
│ ├── globals.css # Design tokens
│ ├── layout.tsx # Root layout
│ └── not-found.tsx # 404 page
├── components/
│ ├── ui/ # shadcn/ui primitives (35 components)
│ ├── storefront/ # Storefront composites (17 components)
│ ├── admin/ # Admin composites (9 components)
│ ├── layout/ # Layout components (10 components)
│ └── a11y/ # Accessibility components
├── data/
│ └── seed.ts # Mock data for all pages
├── types/
│ └── index.ts # TypeScript interfaces
├── hooks/
│ └── use-mobile.ts # Mobile viewport detection
├── lib/
│ └── utils.ts # cn() utility
└── public/
└── images/ # Product images
Route Groups
| Group |
Layout |
Purpose |
(storefront) |
StoreHeader + StoreFooter |
Public shopping pages |
(auth) |
Centered card |
Login, register, forgot password |
(account) |
AccountHeader + AccountSidebar |
Customer account pages |
(admin) |
AdminHeader + AdminSidebar |
Store management |
Component Organization
Primitives (components/ui/)
35 shadcn/ui components: Button, Input, Card, Table, Tabs, Dialog, Sheet, Carousel, Badge, Select, Accordion, and more.
Storefront Composites (components/storefront/)
| Component |
Used In |
hero-banner |
Homepage |
product-card |
Products, search, categories |
product-grid |
Products, categories, search |
product-gallery |
Product detail |
product-tabs |
Product detail (description, reviews, specs) |
product-filters |
Products sidebar |
variant-selector |
Product detail |
quantity-selector |
Product detail, cart |
cart-line-item |
Cart, checkout |
order-summary |
Cart, checkout |
category-grid |
Homepage |
search-bar |
Search page |
comparison-table |
Compare page |
featured-carousel |
Homepage |
testimonial-card |
Homepage |
testimonial-carousel |
Homepage |
newsletter-form |
Footer |
Admin Composites (components/admin/)
| Component |
Used In |
stat-card |
Dashboard |
stats-grid |
Dashboard |
data-table |
Products, orders, customers |
revenue-chart |
Dashboard |
analytics-chart |
Analytics |
conversion-funnel |
Analytics |
product-form |
Add/edit product |
discount-form |
Discounts |
order-notes |
Order detail |
Layout Components (components/layout/)
| Component |
Purpose |
store-header |
Storefront navigation with cart icon |
store-footer |
Links, newsletter, social |
admin-header |
Admin top bar |
admin-sidebar |
Admin navigation |
account-header |
Account top bar |
account-sidebar |
Account navigation |
breadcrumbs |
Page breadcrumbs |
checkout-steps |
Checkout progress indicator |
theme-toggle |
Light/dark mode switch |
skip-link |
Accessibility skip navigation |
Key Files
| File |
Purpose |
data/seed.ts |
All mock data (products, orders, customers, reviews) |
types/index.ts |
TypeScript interfaces for all domain objects |
lib/utils.ts |
cn() class name utility |
hooks/use-mobile.ts |
Mobile viewport detection |
app/globals.css |
Design tokens (oklch colors, spacing, typography) |