CineTech

An electronics storefront built with Next.js 16, React 19, and Feature-Sliced Design.

Stack

Layer	Technology
Framework	Next.js 16.2 (App Router)
UI	React 19, Tailwind CSS v4, ShadCN base-nova
Components	@base-ui/react 1.4
Language	TypeScript 5, strict mode
Architecture	Feature-Sliced Design (FSD)

Features

Catalog

• Browse all products on the home page
• Filter by category or type — pages are statically generated at build time (generateStaticParams)
• Full product detail page with image, rating, sizes, stock level, and discount badge

Cart

• Persistent cart stored in localStorage
• Live item count badge on the cart button
• Add / remove items; cart syncs across tabs via a custom cart-updated event
• Simulated checkout with a generated order ID

Performance & Caching

• Next.js 16 component-level caching: "use cache" + cacheLife("hours") on all API calls
• cacheComponents: true in next.config.ts — React component output is cached separately from data
• generateStaticParams pre-renders category and type pages at build time
• priority image loading on product detail page
• Skeleton loading states on all three dynamic route segments

Code quality

• FSD layers enforced: shared → entities → features → widgets → views → app
• Server Components by default; "use client" only where interactivity is needed
• Server Action (placeOrder) with useTransition for non-blocking checkout UI
• SSR-safe localStorage access (typeof window === "undefined" guard)
• No any, strict TypeScript throughout

Project structure

app/
├── src/
│   ├── shared/              # UI kit, API clients, types, utilities
│   │   ├── api/             # fetchProducts, fetchProduct — cached data layer
│   │   ├── lib/             # extractProductAttributes, cn
│   │   ├── types/           # Product, CartItem interfaces
│   │   └── ui/              # Button, Card, Badge, Sheet, Skeleton …
│   ├── entities/
│   │   └── product-card/    # Presentational card — accepts action slot
│   ├── features/
│   │   └── cart/            # addToCart, getCart, removeFromCart, placeOrder
│   ├── widgets/
│   │   ├── header/          # Sticky header — receives Cart as children
│   │   └── cart/            # Sheet drawer with cart state
│   └── views/
│       └── home-view/       # Categories, types, and product grid
├── categories/[category]/   # Statically generated category pages
├── types/[type]/            # Statically generated type pages
├── products/[id]/           # Dynamic product detail page
├── error.tsx                # Error boundary
├── not-found.tsx            # 404 page
└── layout.tsx               # Root layout — fonts, metadata, header

Getting started

# 1. Clone and install
git clone https://github.com/your-username/cine-shop.git
cd cine-shop
npm install

# 2. Set up environment
cp .env.example .env.local
# Edit .env.local and set API_ENDPOINT

# 3. Run dev server
npm run dev

Open http://localhost:3000.

Environment variables

Variable	Description
API_ENDPOINT	Base URL of the products API (no trailing slash)

See .env.example for a reference value.

Scripts

npm run dev      # Start development server
npm run build    # Production build
npm run start    # Start production server
npm run lint     # Run ESLint