Treat the customer journey as one system
The interface follows the core shopping path: discover products, manage a cart, authenticate when needed, and complete checkout without losing context.
Case study / Live
E-Commerce Platform
from idea to system.
A complete storefront that connects product discovery, cart and checkout, authentication, and protected admin workflows into one coherent full-stack product.
Problem
Many storefront demos polish the browsing experience while leaving session state, payments, and administration loosely connected. The goal was a storefront that feels like one product across the customer path and the operational work behind it.
Constraints
- Separate frontend and backend deployments with a clear API boundary
- Transactional paths needed validation, auth, and payment handling without overbuilding
- Admin capabilities had to stay protected without complicating the shopper flow
Responsibilities
What I owned.
- Product interface design for discovery, cart, checkout, and admin views
- Express and Node.js API design, request validation, and JWT authentication
- MongoDB data modeling for catalog, cart/session, and order-related persistence
- Stripe checkout integration and core-path test coverage
Architecture
How it was structured.
A React and TypeScript client talks to an Express API. The API owns business logic, JWT auth, and validation. MongoDB persists catalog and session-related data. Stripe handles checkout. Frontend and backend deploy as separate services.
System shape
Architecture at a glance.
A React client talks to an Express API. Auth, data, and payments stay on clear boundaries—with frontend and backend deployed separately.
Hover or focus a node to inspect how the storefront pieces connect. The diagram remains readable without interaction.
What shaped the build
Key decisions.
Keep responsibilities clear across the stack
A React and TypeScript frontend is paired with an Express and Node.js API, while MongoDB handles persistence. That separation keeps the interface, business logic, and data concerns easier to evolve.
Build the sensitive paths deliberately
JWT authentication, protected admin routes, request validation, Stripe checkout, and core-path tests support the safeguards expected of a transactional application.
Difficult technical challenge
Keeping cart, auth, and checkout coherent
Session state, authentication timing, and payment handoff had to stay aligned so shoppers did not lose cart context while admin routes remained protected. The API boundary and explicit auth checks made those transitions easier to reason about than folding everything into the client.
Result
The result is a deployed full-stack application that goes beyond a polished storefront: it accounts for the API, database, payments, administration, and the details that make the flow dependable.
RoleFull-stack design & development
StackReact · TypeScript · Express · Node.js · MongoDB · Stripe · JWT
Retrospective
Lessons learned.
Clear service boundaries paid off—especially around auth and checkout. If revisited, I would invest earlier in shared contract tests between the client and API to catch session-edge cases before they surface in the UI.
Selected work