Case study
Myo Toe Bike Shop
Product architecture · UI engineering · Data modeling · Deployment
A premium e-commerce platform for high-quality cycling gear, specifically tailored for the Myanmar cycling community with multi-language support.
System architecture
The system I built
I designed how these layers connect — interface, business rules, data, and delivery — not only the screens on top.
01
Storefront
Next.js shop, EN/MY, cart
02
Admin
Catalog and order tools
03
Auth + data
Supabase Auth, Postgres, realtime
04
Delivery
GitHub Pages / production
How the layers connect
Labeled arrows show which parts talk to each other, and how.
Delivery
Environment config
Supabase keys and secrets
Production host
GitHub Pages / live site
Customer shop
Web shop
Next.js storefront
Localization
Burmese and English
Cart state
Zustand on the client
Data client
How the shop reads catalog and orders
Staff admin
Admin catalog
Staff product tools
Order tools
Staff order workflows
Auth
Supabase Auth
Customer and staff access
Supabase data
PostgreSQL
Products, orders, and users
Realtime
Admin changes reach the live shop
Problem
A cycling retailer needed a storefront that could serve Burmese and English shoppers, keep product and order data in sync for staff, and stay usable when prices and logistics changed.
My contribution
- Designed the application around catalog, cart, auth, and admin workflows instead of isolated pages
- Built the Next.js storefront and reusable UI for product browsing, localization, and checkout-adjacent flows
- Modeled product, order, and admin data in Supabase and wired authentication to those access patterns
- Used client state for cart and UI session concerns without pushing everything into the server
- Implemented admin-facing order and catalog tools so staff could update the live shop
- Configured environment secrets and shipped a public production demo
Engineering challenges
- Supporting Burmese and English without fracturing layouts or product copy
- Keeping admin catalog and order updates reflected on the customer-facing shop
- Handling price and logistics changes without making the storefront feel broken
- Balancing a rich visual shop with a maintainable component and data layer
Why I made this decision
- Why Next.js?
- App routing and server-capable rendering fit a catalog that needed both a public storefront and authenticated admin tools.
- Why Supabase?
- Auth, relational tables, and realtime-friendly updates covered the shop's access patterns without a custom backend from scratch.
- Why Zustand?
- Cart and UI state stayed local and lightweight instead of introducing a heavier global store for a focused commerce surface.
Delivery
- Git
- Development
- Local testing
- Environment config
- GitHub Pages
- Production
Result
Live bilingual storefront with catalog and admin tools
Auth-backed staff workflows for products and orders
98
Recorded Lighthouse performance score