Soap Store MVP
A focused e-commerce MVP built to validate a small-business storefront, emphasizing product discovery and a clean checkout flow.
Core Stack
Framework
- Next.js 16
- Router: App Router
Language
- TypeScript
Frontend
- React 19
- Tailwind CSS v4 + CSS Modules
- React Context
Backend
- Runtime: Node.js
- API: Next.js Route Handlers (BFF pattern)
Database
- Dev: SQLite (Prisma)
- Prod: PostgreSQL (Prisma)
Payments
- Stripe
- Stripe Elements
- Webhooks
Tooling
- Linting: ESLint
Context
Overview
This MVP tackles the gap between over-templated storefronts and over-engineered systems by building a premium, intentional experience that converts quickly while staying technically sound enough to scale.
Problem
Most small e-commerce sites fall into one of two traps:
- Over-templated: generic Shopify layouts with no differentiation or brand identity.
- Over-engineered: complex systems without validated user needs and poor UX despite a strong backend.
Approach
I implemented a Backend-for-Frontend (BFF) pattern using Next.js to keep the system modular and to make it possible to extract backend logic later without rewriting core functionality.
- /app/api → thin HTTP layer
- /server/services → business logic
- /server/repositories → database access
- /shared/contracts → typed request/response schemas
- Frontend: Next.js (App Router), TypeScript, Tailwind
- Backend: Node (via Next.js API routes)
- Database: PostgreSQL
- Payments: Stripe
I chose Stripe plus a custom backend over Shopify to gain full control over data and flows and to deepen system design understanding, at the cost of increased implementation complexity.
Key Decisions
Challenges & Tradeoffs
- Control vs speed: Shopify would accelerate launch, but a custom stack provides flexibility and learning.
- Architecture vs simplicity: avoided colocating logic in API routes by introducing service/repository layers.
- UX vs engineering bias: required deliberate focus on user experience over backend correctness.
Design
Data Modeling
Designed core entities for products, orders, and payments with order snapshots to preserve historical accuracy and auditability (who, what, when).
Checkout System Design
Server-side Stripe integration with PaymentIntent flow and clear separation between UI and payment logic; idempotency identified as critical to prevent duplicate charges.
UX & Product Direction
Homepage structured around clear hero messaging, best sellers, brand story, category navigation, and a focused call-to-action inspired by premium brands.
Results
This project is less about building a store and more about designing a system that balances user trust, business logic, and technical scalability.
- Complete end-to-end checkout validation.
- Implement inventory consistency safeguards.
- Add analytics to measure drop-off points.
- Introduce basic admin tooling for order visibility.
Reflection
- A working backend ≠ a successful product.
- E-commerce is primarily a trust and UX problem.
- Early architectural decisions significantly impact future velocity.
- Overengineering is as dangerous as under-designing.