E-commerce · Personal build
Stride
A shoe-brand e-commerce concept (running, trail, and lifestyle sneakers) with a full shopping experience built entirely by hand: catalog, cart, checkout, accounts, and a Build Your Own shoe configurator.
The challenge
Prove that a genuinely full e-commerce experience, not just a product grid, could be built with plain HTML, Tailwind, and hand-written JavaScript, with no framework and no backend to lean on.
The approach
Every page is a complete, standalone HTML file with no build step required to run it. State (cart, accounts, orders) is handled entirely client-side in hand-written JavaScript, structured to behave like a real storefront rather than a static mockup.
Design
A lifestyle-brand aesthetic across category, product, and configurator pages, with product photography and video slots mapped out in a dedicated media reference guide so assets drop in with predictable, consistent naming.
Development
Plain HTML + Tailwind CSS (via CDN, no build step) + hand-written JavaScript. Includes a full catalog, cart and checkout flow, customer accounts, and a Build Your Own configurator, all running client-side.
What I solved
- A working cart and checkout flow with no backend, entirely client-side state management.
- A Build Your Own shoe configurator alongside the standard catalog and product pages.
- A documented media system (a shot-by-shot reference guide) so every image and video slot has a clear spec for what belongs in it.
Result
It's live at justixxprime.github.io/stride. I built this one mostly to prove something to myself, that I didn't need React to build a real cart and checkout flow. Turns out plain JavaScript gets you further than people assume.
Everything in the box
A full e-commerce feature set, all hand-built with no framework:
Shopping experience
- Build Your Own configurator, a mega menu on Shop, product comparison, Quick View, a size guide with a size quiz, and a click-to-zoom lightbox
- Recently viewed products, stock urgency and "N people viewing this," and an order tracking timeline (Placed → Processing → Shipped → Delivered)
Accounts & motion
- Log in / sign up pages with a "Welcome back" homepage greeting once logged in
- Dark/Light/System 3-way theme toggle, a custom cursor, page transitions, a scroll progress bar, and confetti on order confirmation
Content pages
- A lookbook with full-bleed editorial panels, a journal with three editorial posts, and a "how it's built" walkthrough page
Technical details
- Schema.org structured data on product pages, lazy-loaded below-the-fold images site-wide, and a 404 easter egg
- Cart and wishlist state persisted through localStorage, rebuilt live from a single shared pattern across every page
Under the hood
- Contact and gift card requests through Web3Forms, the same no-backend pattern used across my other static builds, since a shoe brand doesn't need a database just to take a message.
- A fully hand-rolled cart and checkout, no framework state library, just a single, shared read/write/render pattern for both the cart and wishlist so every page stays in sync from plain localStorage alone.
Screens
