TL;DR
Built a performant e-commerce demo that demonstrates secure checkout, mobile-first UX, and an admin view — ideal as an MVP for small businesses.
Tech Stack
Problem
Small merchants needed a simple, secure storefront and basic admin reporting without a complex backend or exposing full admin privileges.
Constraints
Target mobile-first UX, PCI-safe checkout demo (Stripe test mode), and an admin view that is read-only to avoid accidental data changes.
My Role
Full-Stack Developer — implemented product browsing, cart/checkout flow, secure auth, and the admin reporting view.
Architecture
Hybrid approach: static rendering for catalog pages, server-side checkout endpoints to handle payments and order creation. Images served via optimized img with srcset and lazy loading to reduce LCP.
Approach
- Prioritized core funnel: browse → add to cart → checkout → order confirmation
- Kept admin features minimal (read-only) to avoid complexity for MVP
- Used lazy-loading images and SSR for initial page speed
Responsibilities
- Designed and implemented responsive product listing and checkout flow
- Integrated Stripe (test mode) to demonstrate end-to-end payments
- Implemented secure authentication and read-only admin dashboard
- Performance-tuned pages for mobile-first speed
Technical Solution
- Next.js for SSR and fast static rendering of product pages
- Stripe for secure, PCI-compliant payment flows (test integration shown)
- MongoDB to store product and order data; secure API endpoints for checkout
- Tailwind for responsive, consistent UI
Outcome
MVP-ready store demonstrating the core e-commerce funnel with strong mobile performance and secure payments.
Proof Points
- Stripe integration for secure payment flows.
- Read-only admin reduces risk for non-technical store owners.
Lessons Learned
- Optimize the critical funnel (catalog → checkout) first — everything else can be iterative.
- SSR + image optimization produce the best first-load experience for product pages.
More Screenshots
