Installation
Last updated on 2026-03-20
This guide walks you through setting up the E-commerce Starter Kit from scratch.
System Requirements
- Node.js 18.17 or later
- pnpm (recommended), npm, or yarn
- Git for cloning the repository
Step 1 — Clone the Repository
Use the private repository URL from your purchase confirmation email:
git clone <your-repo-url> ecommerce-starter-kit
cd ecommerce-starter-kit
Step 2 — Install Dependencies
pnpm install
This installs Next.js 16, React 19, Tailwind CSS v4, shadcn/ui components, Recharts, and all utility libraries.
Key Dependencies
| Package | Purpose |
|---|---|
next 16.x |
React framework |
react 19.x |
UI library |
tailwindcss 4.x |
CSS framework with oklch tokens |
@radix-ui/* |
Accessible UI primitives |
recharts |
Admin dashboard charts |
embla-carousel-react |
Product carousels |
lucide-react |
Icons |
next-themes |
Dark mode |
sonner |
Toast notifications |
date-fns |
Date utilities |
Step 3 — Start the Dev Server
pnpm dev
Visit http://localhost:3000 to see the storefront homepage.
Step 4 — Verify the Setup
Navigate through key pages:
/— Homepage with hero, categories, featured products/products— Product listing with filters/products/classic-leather-jacket— Product detail page/cart— Shopping cart/login— Authentication/account— Customer account/admin— Admin dashboard
Available Scripts
| Command | Description |
|---|---|
pnpm dev |
Start dev server |
pnpm build |
Create production build |
pnpm start |
Run production server |
pnpm lint |
Run ESLint checks |
Integrating into an Existing Project
- Copy
components/into your project (ui, storefront, admin, layout directories) - Copy
data/seed.tsandtypes/index.ts - Copy design tokens from
app/globals.css - Install the required dependencies from
package.json - Wire up seed data to your actual database or API
Note: All pages use seed data from
data/seed.ts. Replace with your own data source (API, database, CMS) when integrating.
Troubleshooting
Port 3000 already in use:
pnpm dev --port 3001
TypeScript errors after installation:
npx tsc --noEmit
Check that tsconfig.json path aliases match your project structure.