Crown Clothing
Full-featured e-commerce storefront rebuilt in Next.js — product browsing, cart management, and a polished shopping experience.
Next.jsTypeScriptJavaScriptTailwind
Role
Frontend Developer
Team
Solo
Duration
1 week
Category
E-Commerce / Learning
Links
Impact
Type
Learning / portfolio project
Problem
Classic e-commerce UX patterns (product grid, cart drawer, checkout flow) are deceptively complex to build correctly with state management and routing handled well.
Solution
Rebuilt a full clothing storefront in Next.js with proper App Router structure, cart state management, and a clean product/collection browsing experience.
Objectives
- Master Next.js App Router patterns in a real-world e-commerce context
- Build reusable cart and product state management
- Produce a portfolio-quality storefront UI
Key Features
- Product catalog with collection-based browsing
- Cart state management with item add/remove/update
- Responsive product grid and detail views
- Clean checkout flow layout
Architecture
- Next.js App Router with client/server component split
- React state for cart with context or reducer pattern
- Tailwind utility styling
Challenges
- Deciding the right client/server component split for cart interactions
Learnings
- Next.js App Router mental model for data-fetching vs. interactive components
- How cart state propagation differs from page-level state