Store · TypeScript
Weftline: Next.js Fashion Store
A complete clothing store for women and men, built with Next.js 16, React 19, TypeScript and Tailwind CSS 4. It runs on a built-in sample catalog and connects to your own backend through one adapter. It comes with filters, size and fit help, a bag drawer, checkout, customer accounts and 23 themes to start from, and scores 98–100 on desktop Lighthouse.
- 28 pages
- Next.js 16
What’s inside
Key Features
12- Bring your own backend: one adapter and a contract test
- Filters for size, colour, fit, fabric and price with live counts
- Fit summary from reviews and a size guide
- Notify me when a sold-out size is back
- Bag drawer with free-shipping progress
- Demo checkout with delivery dates
- Customer accounts: orders, addresses, free repairs
- Reviews with star and fit details
- 23 themes and 42 fonts in the Style drawer
- Light and dark mode
- WCAG 2.2 AA, tested with axe
- AI-ready: AGENTS.md, UI guide and skills
Optimizations
8- Catalog pages prerendered with Partial Prerendering
- Menus, drawers, dropdowns and dialogs load only when used
- next/image with AVIF and WebP, sized per screen; only the main photo is preloaded
- Self-hosted Archivo through next/font
- React Compiler on
- Scroll motion in CSS scroll-driven animations, no animation library
- Reduced-motion support
- Product JSON-LD, sitemap, robots and share image
Pages
28- Home
- Collection
- Product
- Search
- Bag
- Checkout
- Order Confirmation
- Saved
- Sign In
- Create Account
- Reset Password
- Account Overview
- Orders
- Order Detail
- Addresses
- About
- Shipping
- Returns & Exchanges
- Free Repairs
- Size Guide
- Care Guide
- FAQ
- Contact
- Privacy Policy
- Terms of Sale
- Accessibility
- 404
- Error
Performance
- Lighthouse performance, desktop
- 98–100
- Lighthouse performance, phone
- 82–95
- Accessibility, best practices and SEO
- 100
- Largest paint, desktop
- 0.5–0.7 s
- Layout shift (CLS)
- 0
Versions
- Next JS
- 16.4.3
- React JS
- 19.3.1
- Tailwind CSS
- 4.3
- Typescript
- 7.0
Details
- Font
- Archivo
- TypeScript
- Yes
- Database
- No (sample data; connect your own backend)
