Personal engineering portfolio
A commerce project centered on interface, data flow, and clear boundaries.
Stack: Next.js, React, Spring Boot, PostgreSQL, TanStack Query
I built this project to show how interface work, data flow, and backend boundaries fit together in a storefront. You can browse products, search in plain English, and add items to cart. In this phase, the work leans toward the UI, but it is backed by real APIs and decisions I can explain.
Design choices
A few choices that shaped the project
Next.js · React SPA
Two frontends, one API contract
The storefront is built in Next.js, with a separate React SPA using the same backend APIs. Keeping both clients aligned against one contract helped surface inconsistencies early. If something only worked cleanly in one frontend, it usually meant the API needed to change.
Compare the React SPA ↗LLM parsing · SQL retrieval
Search that feels natural
Search starts with plain English, then turns the query into structured data before checking the catalog. The model handles the interpretation, and the database handles the matching, so results stay predictable.
BFF · cache fallback
Backend tailored for the UI
The storefront has its own backend to shape data for the UI. It fetches product data in parallel, assembles the response, and keeps a short-lived cache fallback so the page can still render when a dependency slows down.
Try the search
Search in plain English
Try something like "running shoes under $120". The search is designed to accept everyday language while still staying grounded in the catalog.
From the catalog
Featured products
These are live products from the backend, not static homepage fixtures.
Keep browsing
More products
A wider slice of the catalog, so the homepage feels like the start of browsing rather than a dead end.
