Trail — Premium Outdoor Gear Platform

An immersive e-commerce experience for outdoor adventurers — built with React 19, TanStack Router & Tailwind CSS v4.

Comment

Inspiration

The outdoor gear market is massive — but most e-commerce platforms serving adventurers are cluttered, slow, and uninspiring. We wanted to build something that feels like the adventure lifestyle it sells: bold, fast, and beautifully crafted.

We were inspired by premium fashion and lifestyle brands that use immersive design to tell a story, and asked: why can't outdoor gear shopping feel this good?

What We Built

Trail is a modern outdoor gear e-commerce web application featuring:

  • 🏔️ Full-screen animated homepage with Ken Burns hero, staggered text reveals, and scroll-triggered animations
  • 🛍️ Shop page with real-time search, category filters (Backpacks / Equipment / Shoes), and price sorting
  • 🛒 Working cart drawer — add, remove, adjust quantity, live total — persists across page refreshes via localStorage
  • ❤️ Wishlist — heart toggle on every product card, saved to localStorage
  • 📱 Fully responsive — mobile hamburger menu, responsive grids
  • ✨ Micro-animations — marquee, spin badge, fade-up reveals, hover scale effects
  • 📧 Newsletter subscribe form with success state

How We Built It

We used a modern full-stack-ready frontend architecture:

  • React 19 for UI components
  • TanStack Router (file-based routing) for multi-page navigation
  • Tailwind CSS v4 for utility-first styling with custom CSS keyframe animations
  • React Context API + localStorage for cart and wishlist state — no backend required
  • Vite 8 as the build tool with SSR support via Nitro
  • Vercel for deployment (Nitro cloudflare/vercel preset)

The cart drawer is globally accessible across all routes using a singleton pattern — avoiding prop drilling across route boundaries.

Challenges We Faced

  1. Circular import prevention — the cart drawer needed to be openable from any page. Solved by extracting a singleton cartDrawerState module
  2. TanStack Router SSR config — the Lovable/Vite config required careful integration with auto-generated route trees
  3. Pure CSS animations — achieving smooth Ken Burns zoom, infinite marquee, and spin animations without any JavaScript animation libraries
  4. localStorage sync — keeping cart and wishlist state in sync using useEffect watchers

What We Learned

  • How to structure a production-ready React app with file-based routing
  • The power of Tailwind CSS v4's new @utility and @keyframes syntax
  • How TanStack Start enables SSR-ready apps without a traditional backend
  • That an impressive, fully functional e-commerce experience truly does NOT require a database

Future Plans

  • User authentication and accounts
  • Real backend API (Supabase)
  • Payment gateway (Stripe)
  • Product detail pages with image galleries
  • AI-powered product recommendations

Built With

Share this project:

Updates

Submission history