08PROJECT

Audiophile

Full-stack e-commerce storefront for a premium audio equipment brand.

RoleSolo — design & development
StackNext.js, TypeScript, Tailwind CSS
Audiophile hero screenshot

About the project

An e-commerce storefront implementation built with Next.js App Router, based on the Frontend Mentor Audiophile challenge. The site covers three product categories — headphones, speakers, and earphones — each with dedicated listing and individual product pages.

Features include a quantity-adjustable cart with persistent state, product gallery views, and a related products recommendation system per product page. Routing is fully dynamic via Next.js, with each product resolved from a slug-based URL structure.

Key Highlights

  • Dynamic slug-based routing for all product pages
  • Persistent cart with quantity controls
  • Three product categories with individual listing pages
  • Product gallery and related product recommendations
  • Responsive layout across mobile, tablet, and desktop

Tech stack

Next.jsTypeScriptTailwind CSS
© charlz · 2026