LUNE — Concept Home & Lifestyle Store
LUNE is a concept slow-living home shop—textiles, ceramics, everyday objects—built as a real React storefront: catalog through checkout, policies, and a signed-in account area, deployed on GitHub Pages.
What “done” meant
I wanted one project that reads like a real shop: clear hierarchy, familiar e‑commerce patterns, and flows people already know from buying online—without hiding behind a page builder.
- Discovery → purchase — Home, shop grid, product detail, cart, shipping, payment, and confirmation.
- Trust content — About, FAQ, contact (Formsubmit), shipping, returns, privacy, and terms.
- Signed-in area — Orders, returns, wishlist, addresses, profile, and password (protected routes).
- Polish — Search overlay, cart drawer on desktop, toasts, announcement bar, motion on route changes, empty and error states.
Editorial calm, not loud retail
I didn’t open React first and “decorate” a template. The story started in Figma because I needed to decide how this brand should feel before I committed to components: a warm paper field, serif for editorial headlines, monospace in small caps for wayfinding, and almost no loud retail chrome—closer to a quiet home and lifestyle catalog than a flash-sale site. Those choices weren’t arbitrary; they match the product story (textiles, ceramics, everyday objects) and the pace I want a shopper to move at.
In LUNE E‑Commerce I mapped the same journeys I knew I’d have to ship: shop → product → cart → shipping → payment → confirmation, plus account and policy pages. The prototype was my contract with myself: if a step didn’t make sense in Figma, I wasn’t going to paper over it in code. When it did make sense, I treated each major frame as a future route and layout shell—so the live app’s stepper (“1 Shipping · 2 Payment · 3 Confirm”), the shipping method group, the order summary aside, and guest vs signed-in states all descend from that flow, not from a generic checkout starter.
Spacing, type sizes, and neutrals became design tokens in the React app (CSS variables and modules) so the implementation stays tied to what I locked in visually—same hierarchy, same restraint—instead of drifting once I was in Vite.
Below is the embedded prototype: five screens in the flow. Use the arrow controls under the preview (same as Figma Present). For full fidelity, open the file in Figma.
Design process
Before writing routes, I locked the story in Figma: brand tone, shop → checkout journeys, and the frames that became my checklist in code. The diagram is the condensed path from first layout passes to the tokens and type scales I carried into CSS Modules—so the shipped UI stays accountable to the file, not to whatever looked fine in the moment.
Scroll inside the display to view the full diagram
Process ↗Figma-first — IA, frames, then tokens for React
Why it’s here: Interviewers often ask how design becomes code; this is the map I use to explain LUNE without hand-waving.
What shipped
The Figma file answered “what should this flow feel like?” The repo answers “does it actually work?” Checkout is a concrete example: guest email and address fields, shipping method as a clear fieldset, continuation into payment, and draft state in context so nothing disappears between steps—that structure is the same story as the prototype, just expressed as CheckoutShipping.jsx, CheckoutPayment.jsx, and shared checkout context instead of static frames.
The app is published from the gh-pages branch. GitHub Actions runs on every push to main; I can also deploy from my machine with npm run deploy. Vite uses base: /lune-store/, and the build copies index.html to 404.html so client-side routes still work if someone refreshes on a deep link.
You can use the live site at jpdm07.github.io/lune-store the same way a shopper would—shop, cart, checkout, account, and policies.
Build & ship process
Implementation followed the prototype’s contracts: component shells for each major route, shared checkout state, optional Supabase with a safe localStorage demo mode, and a GitHub Pages pipeline that respects base: /lune-store/ plus an index.html → 404.html copy so refreshes on deep links don’t blank out.
Scroll inside the display to view the full diagram
Process ↗React/Vite → verify → Pages + SPA routing
Pair with the screenshot below: the flow is how I got there; the monitor mock is what shoppers actually see on the deployed homepage.
Live ↗Deployed homepage—hero, navigation, and entry into the shop
How it’s structured
React Router handles public routes, checkout, auth, and nested account pages. Context providers hold cart, wishlist, checkout draft, orders, returns, addresses, auth, and toasts so each screen stays mostly layout and copy.
Supabase is optional. If the env vars aren’t set, the app runs in demo mode with data in localStorage—enough for someone to click through without spinning up a backend.
“Shipping a SPA to GitHub Pages means respecting the base path everywhere—assets, router basename, and a 404 fallback. Skipping any one of those shows up as a blank screen the moment someone shares a deep link.”
What this demonstrates
LUNE is one story end to end: IA, UI craft, interaction states, and front-end architecture in a single repo. It sits next to my hand-built portfolio site as proof I can ship structured React work when the product calls for it.