Design-to-Code, an AI-Powered Personal Product Experiment

Background

Why I built this

Formula 1 information is everywhere, but the experience of accessing it is often painful. Official apps push subscriptions. Third-party apps pile on ads and sign-up walls. I wanted to explore what a focused, zero-friction sports companion could look like if it answered only the most essential questions — nothing more, nothing less.

The project was also a deliberate test of a modern design-to-code workflow: could I go from Figma screens to a real, installable Android app without a dedicated engineering team?

The app answers three core questions

Design Goals

Four guiding principles

Core Experience

Three screens, one purpose

Navigation is handled through a fixed bottom tab bar. Home gives the season at a glance, Schedule surfaces the full calendar with embedded results, and Standings tracks the championship in real time.

01

Home

The home screen delivers immediate season context the moment the app opens: next race info, current championship leader, and a quick-access card for the latest result. No login, no loading state, no friction.

02

Schedule & Results

The schedule screen opens with a horizontal slider of past race results, letting fans quickly scroll through recent rounds without leaving the view. Below that, upcoming races are listed with the race name, circuit, and date, each tagged to make the next events immediately scannable.

03

Standings

The standings screen opens on the driver championship table, with the top three given stronger visual treatment and compact rows for the rest of the grid. Swiping left or using the segment controller switches to constructor standings, listing each team with their current position and points total. Both views update live from the Jolpica API on every app load.

04

Detailed Screens

Driver detail and team overview screens provide deeper context for fans who want to go beyond the headline numbers: race-by-race performance, constructor standings, and key session data, all within the same zero-auth experience.

Visual Design

Visual design direction

The visual system was intentionally restrained to keep the app fast, focused, and content-led. The interface uses a mostly monochrome palette with F1 red as the primary accent, creating a strong connection to the sport without overwhelming the UI.

Process

Design-to-code workflow

This project was intentionally built as a design-led prototype. Instead of stopping at static screens, I translated the Figma design into a working React implementation. Design tokens (colour, typography, spacing, radius, and border treatment) were defined up front and carried directly into the coded interface. This helped preserve visual consistency and reduced the gap between design intent and development output. The Figma-first workflow allowed me to validate both the interface and the implementation approach at the same time.

Technical Approach

How it was built

RaceView was built using React 18 and Vite, then wrapped into a native Android app using Capacitor. Live F1 season data is pulled from the Jolpica F1 API, which provides schedule, race results, and driver standings without requiring authentication. The prototype validates a lightweight app architecture that avoids the need for a backend, paid API subscription, or Play Store distribution during the development phase.

Key Decisions

Decisions & trade-offs

Outcomes

What was delivered

Reflection

What this demonstrates

RaceView showcases my ability to move beyond static design into product thinking and functional prototyping. It demonstrates how I approach a personal product idea, from problem framing through UX structure, visual design, technical implementation, and future iteration planning, and how a modern design-to-code workflow can close the gap between design intent and shipped product.

Next steps