Store · TypeScript
Tinct: Next.js Beauty & Skincare Store
A complete skincare and makeup store built with Next.js 16, React 19, TypeScript and Tailwind CSS 4. Every shade is shown on three skin tones, with subscribe and save, refills, build-your-own sets and a scroll-driven home page. It runs on a built-in sample catalog, connects to your own backend through one adapter, scores 99–100 on desktop Lighthouse and comes with 24 themes to start from.
- 31 pages
- Next.js 16
What’s inside
Key Features
18- Bring your own backend: one adapter and a contract test
- Every shade shown on light, medium and deep skin
- Shade numbers, depth chips and a shade per item in sets
- Formulas, sizes, refills and case finishes as variants
- Subscribe and save: skip, change or cancel from the account
- Key ingredients with the full INCI list
- Filters for skin type, concern, finish and price with live counts
- Reviews by skin type
- Search palette with live results (⌘K)
- Bag drawer with free samples, free-shipping meter and undo
- Demo checkout with delivery dates
- Empties back refill programme
- Scroll-driven, reel-style home page
- 24 themes and 42 fonts in the Style drawer
- Light and dark mode
- Rebrand from one config file
- WCAG 2.2 AA, tested with axe
- AI-ready: AGENTS.md, UI guide and skills
Optimizations
9- 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 fonts through next/font
- React Compiler on
- Scroll motion in CSS scroll-driven animations, no animation library
- Pinned sections on wide screens; swipe rows and stacked stories on phones
- Readable with JavaScript off; reduced-motion support
- Product JSON-LD, sitemap, robots and share image
Pages
31- Home
- Collection
- Product
- Search
- Bag
- Checkout
- Order Confirmation
- Saved
- Sign In
- Create Account
- Reset Password
- Account Overview
- Orders
- Order Detail
- Subscriptions
- Addresses
- About
- Journal Story
- Shipping
- Returns
- Refills & Empties Back
- Subscribe & Save
- Shade Guide
- Ingredients
- FAQ
- Contact
- Privacy Policy
- Terms of Sale
- Accessibility
- 404
- Error
Performance
- Lighthouse performance, desktop
- 99–100
- Lighthouse performance, phone
- 85–95
- Accessibility, best practices and SEO
- 100
- Largest paint, desktop
- 0.5–0.6 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
- Funnel Display and Funnel Sans
- TypeScript
- Yes
- Database
- No (sample data; connect your own backend)
