A modern e-commerce site for luxury watches built with Next.js, Tailwind CSS, and shadcn/ui.
- Responsive design optimized for all devices
- Product listing with filtering and sorting
- Detailed product pages
- Shopping cart functionality
- Category browsing
- Clean, modern UI using shadcn/ui components
- Framework: Next.js
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Icons: Lucide React
- Node.js 18+
- npm or yarn
- Clone the repository:
git clone <repository-url>
cd watch-store- Install dependencies:
npm install
# or
yarn install- Start the development server:
npm run dev
# or
yarn dev- Open http://localhost:3000 with your browser to see the result.
watch-store/
├── public/ # Static assets
│ └── images/ # Product images
├── src/
│ ├── app/ # Next.js app router pages
│ ├── components/ # React components
│ │ ├── ui/ # shadcn/ui components
│ │ ├── site-header.tsx
│ │ ├── site-footer.tsx
│ │ └── product-card.tsx
│ ├── data/ # Mock data
│ │ └── products.ts
│ └── lib/ # Utility functions
└── package.json
/- Home page with featured products and categories/products- All products with filtering/products/[id]- Individual product page/collections/[category]- Category pages/cart- Shopping cart
To add a new shadcn/ui component:
npx shadcn add [component-name]