Commerce
2021
Software Engineer
Fitness E-commerce App
A full-stack fitness commerce app with payments, bookings, and user workflows built with React, Spring Boot, and Firebase.
Problem
The work started here.
Fitness customers needed a single product experience for browsing services, booking sessions, making payments, and managing user flows.
Research
- Mapped the customer journey from product discovery to booking and payment.
- Identified user account flows needed for sign-up, booking history, and access.
- Reviewed payment and booking states that needed clear feedback.
Planning
- Split the product into storefront, booking, payment, and user account modules.
- Defined backend endpoints for catalog, booking, and user workflow operations.
- Used Firebase for hosting and supporting product infrastructure needs.
Architecture Highlights
- React and TypeScript powered the customer-facing frontend.
- Spring Boot handled backend workflows and service boundaries.
- Firebase supported deployment and product infrastructure.
System Design
- Booking states guide users from selection through confirmation.
- Payment flows are separated from booking logic so each can be maintained independently.
- User workflows connect account state with bookings and commerce actions.
Challenges
- Payments, bookings, and user state had to stay synchronized.
- The product needed to feel straightforward across several related workflows.
- Full-stack delivery required clear contracts between frontend and backend pieces.
Solutions
- Built clear task flows for booking and payment completion.
- Kept backend responsibilities organized around commerce and user workflow domains.
- Used TypeScript to tighten frontend state and integration assumptions.
Performance
- Delivered a working full-stack product across frontend, backend, and hosting.
- Supported customer workflows from browsing through payment and booking.
- Improved maintainability by separating commerce, booking, and account concerns.
Tech Stack
React
TypeScript
Spring Boot
Firebase
Payments
Booking
Code Snippet
await booking.create({
userId,
packageId,
paymentReference,
});Gallery & Animations
The final product uses subtle hover tilt, reveal choreography, and responsive image transitions to make the case study feel alive without turning the page into a heavy demo reel.
Lessons Learned
- Commerce UX depends on state clarity more than visual density.
- Booking systems need explicit confirmation and recovery states.
- Full-stack product work benefits from simple, well-named boundaries.