/projects · Project showcase
Built an end-to-end ecommerce experience for handcrafted furniture with a premium visual narrative, pairing cinematic merchandising with production-grade commerce flows, protected admin tooling, and operational workflows that non-technical teams can actually use.
— Project highlights
A quick look at the parts of the product that best show the balance of design direction, frontend craft, commerce logic, and admin tooling.
— Feature gallery
The storefront pairs editorial storytelling with a practical buying flow, from the cinematic landing experience through product discovery, configuration, cart review, and checkout proof.
S01
Homepage opening hero that establishes premium brand storytelling.
S02
Mid-scroll hero state showing animated reveal behavior.
S03
Featured product spotlight section used for dynamic merchandising.
S04
Public product listing showing browsing and discovery experience.
S05
Configurable product detail flow for custom purchasing.
S06
Cart experience state captured for purchase-flow narrative.
S07
Checkout completion evidence for the Stripe purchase path.
Protected operational surfaces give internal teams the control they need without exposing those workflows publicly on the portfolio site.
S08
Admin dashboard highlighting stock visibility and operational shortcuts.
S09
Product management table with category filters and featured product controls.
S10
Product edit workspace with quick stock update and full form controls.
S11
Bulk image upload tab for fast media ingestion into the catalog pipeline.
S12
CSV import workflow for batch product onboarding and validation.
S13
Single Clerk login surface used for both user and admin sign-in paths.
— How it came together
Admin and protected flows are presented here as screenshots and implementation notes only. They remain intentionally private, and admin access depends on manual ADMIN role assignment in the Clerk and app user mapping.
The storefront is built on Next.js App Router with TypeScript and Tailwind CSS, giving the marketing and commerce surfaces a shared design system while preserving route-level composition and metadata control.
The homepage leans on a cinematic scroll-based hero with progressive text reveals and a reduced-motion fallback, so the visual narrative stays premium without sacrificing accessibility or perceived performance.
Product detail pages support configurable purchases instead of a flat catalog-only flow, which makes the buying journey feel tailored to custom furniture rather than commodity ecommerce.
Stripe checkout initiation and order confirmation are guarded with server-side validation and post-payment safety checks so pricing, cart state, and confirmation logic stay trustworthy under real purchase flows.
Clerk authentication and role-based route protection separate customer and admin experiences, while admin capability still requires explicit ADMIN assignment in the Clerk and app user mapping.
Operational tooling covers product management, stock control, bulk image upload, and CSV import workflows so catalog updates can be handled by non-technical teammates.
The implementation also includes metadata patterns, robots rules, and sitemap generation to establish a solid SEO baseline for a product-led storefront.
— Build notes
Challenge
Heavy cinematic hero can degrade perceived performance.
Solution
Staged loading, frame preloading strategy, motion fallbacks, and a static poster fallback keep the landing experience polished without forcing every visitor through the heaviest path.
Challenge
Checkout correctness and safety.
Solution
Server-side cart validation, Stripe session constraints, and post-payment confirmation safeguards make the transaction flow more resilient.
Challenge
Operational scalability for catalog changes.
Solution
Bulk image and CSV import workflows with validation and error feedback make repeated product updates practical for the operations team.
This showcase highlights the strongest parts of the build. The live product shows how the storefront, checkout, and protected admin surfaces come together end to end.