Platform
• Product / UX / UI / Frontend (React + TypeScript)
Role
• Web + PWA (offline-ready)
Overview
"Circuit Collection" is a minimalist Formula 1 2026-season poster gallery Web application. It presents SVG circuit track layouts rendered as stroked elements on dark, theme-able cards. Each track has a special color, and the gallery has many features. It has themes, multiple card formats, export capabilities, a 3D globe map view, live F1 standings data, weather information, compare mode, slideshow, and eleven hidden Easter eggs.
The application is built as a single-page React app (no routing needed) with a focus on pixel-perfect rendering, smooth animations, and a premium Dark aesthetic inspired by F1 broadcast graphics.
The problem
Most circuit diagrams you find online are just static images with varying styles. I wanted to create a space where the circuits felt like a cohesive collection. They should look good, like posters, but also useful for real use. They should show what's coming up, where things are, and what's happening right now.
Goals
• Make circuit layouts feel premium and consistent across the whole season
• Enable fast exploration: search, filter, favorites, quick navigation
• Provide meaningful season context: next race, timeline, standings, weather
• Support sharing and making: SVG/PNG export and batch download
• Keep UX smooth at scale: large grid performance and responsive layout
Users and use cases
• Fans who want a satisfying way to browse circuits like a gallery
• Creators who want poster exports (SVG/PNG) for wallpapers, prints, sharing
• Curious explorers who want map-based discovery and "what's next"
UX decisions (key choices and rationale)
1) Two exploration modes: Grid + Map
• Grid supports "poster browsing" (fast scanning, collecting, favoriting).
• Map supports geographic curiosity: "Where are the races?"
This intentionally serves two mindsets: visual collecting vs spatial exploration.
2) Fullscreen detail modal (not a page jump)
A circuit opens into a fullscreen modal so the user stays anchored in the collection, while still getting an immersive view with left/right navigation, swipe, and arrow keys.
3) "Next race" as a first-class UI concept
The app detects the upcoming race and threads it through the UX:
• Highlighted card and timeline emphasis
• Countdown and weather
• Quick-jump affordances
This reduces "what do I click?" friction and adds season relevance.
4) Power features without UI clutter
I kept the interface minimal but made speed available:
• Ctrl/Cmd+K to focus search
• Keyboard navigation and shortcuts help ("?")
• Context menu actions (open/compare/export/copy SVG)
5) Lightweight progress motivation
Tracking viewed circuits adds a subtle completion loop for exploration without forcing gamification.
Design decisions (visual system)
Poster-first aesthetic
Dark, restrained UI so the track artwork is always the hero - less chrome, more "collector poster."
SVG craft for "premium linework"
Each circuit uses layered strokes (glow → core → highlight) and optional ripple/echo effects to create depth while preserving clarity at any scale.
Consistent UI tokens
Whole-pixel typography and shared button components keep the experience crisp and cohesive across lots of controls, states, and layouts.
Theme system as a feature
43+ built-in themes plus a custom theme builder lets users make the collection feel personal (not just "skin-deep" styling).
Feature set
Core features
• 49 circuits (2026 season and classic/historic set) with metadata
• Card formats: portrait/square/landscape + A3/phone/desktop
• Search + filters (country chips, favorites, and logic)
• Detail modal with navigation and sharing/export entry points
• Export: PNG (2x), full SVG, minimal SVG, copy SVG, batch Zip
• Season context: timeline, next race, countdown, weather, and standings
• Persistence: favorites, viewed, preferences, themes via localStorage
• PWA + offline caching via service worker strategy
Nice features
• 3D flip “trading card” back with stats
• Compare mode (side-by-side stats)
• Slideshow mode (fullscreen playback)
• Mobile shake-to-shuffle and shuffle cascade animation
• Easter eggs (Konami, Matrix/DRS/Rain, Lights Out sequence, for example)
Technical decisions that protect UX
• IntersectionObserver lazy rendering (LazyCard) to keep the grid smooth and responsive
• 150ms debounced search for responsive filtering
• URL state sharing (theme/format/search/track) for deep links without heavy routing
• Service worker caching tiers for fast repeat loads and offline resilience
What this project shows
• End-to-end UX thinking: browse → discover → focus → export/share
• Strong design systems: themes, formats, consistent components
• Craft + polish: SVG rendering quality, motion details, keyboard UX
• Performance awareness: smooth interaction at collection scale
The site is current and can be updated or modified with additional functions and features.
See the live project on an external siteScroll down this page to explore webpage Showcase. You can click on the thumbnail to open the Gallery mode view.
