Problem
Many small online stores struggle with slow pages, fragmented cart experiences, and poor localization, which causes drop-offs before checkout.
Solution
I built a modular storefront using Next.js App Router and TypeScript, with localized routes/content, and SEO optimization for indexable category/product pages.
Features
Tech Stack
Technical Decisions
Next.js App Router
Chosen for fast route-based rendering, better SEO defaults, and scalable folder-based architecture.
Zustand for state
Used for a lightweight, predictable global cart/filter state without boilerplate-heavy setup.
Zod validation
Introduced to guarantee input shape and prevent invalid payloads at the UI layer.
Challenges & Solutions
Keeping cart state synchronized across pages and refreshes
Centralized state in a dedicated store and persisted minimal cart data to ensure consistent hydration.
Supporting localization without duplicating UI logic
Used locale-aware routing and translation dictionaries, while sharing the same reusable components.
Maintaining performance with rich product cards and filtering
Optimized images and component rendering paths, and structured filtering logic for predictable updates.
Screenshots
Future Improvements
- Stripe integration for production payments
- Wishlist and saved carts across devices
- Admin analytics dashboard for conversion tracking