Run & Lift Dashboard

Overview

Run & Lift Dashboard is a personal fitness control center designed to bring running mileage, strength sessions, and daily workout plans into one focused view. The goal was to create a modern, responsive dashboard experience that mirrors what you might see in apps like Garmin Connect or Apple Fitness, but built entirely as a frontend project to showcase layout design, component structure, and data visualization.

Goals & constraints

The project needed to feel like a real product interface while staying simple enough to maintain. It had to support different types of fitness data, display metrics clearly, and adapt across screen sizes without clutter. Since all data is currently mocked, the architecture also had to be ready for future API connections without major refactoring.

I also wanted to simulate realistic app behavior: loading states, filterable views, and settings that change the feel of the dashboard, even if they aren't persisted yet. That meant designing the UI as if it were backed by an API, even though everything is local for now.

Tech stack & implementation

This project was built with Next.js (App Router) and TypeScript for a structured, type-safe foundation. Tailwind CSS was used to rapidly iterate on layout, spacing, and typography. Components were organized into a dedicated dashboard folder, including reusable pieces likeCard,Metric, and IntensityPill to maintain a consistent design system.

Framer Motion adds subtle entrance animations to each card, creating a smoother and more polished dashboard feel. Recharts powers the interactive daily mileage bar chart and a pace-zone donut chart, letting the user see how their weekly miles are distributed by intensity. All mock data is modeled in a strongly typed runLiftData.ts module so real backend data can be integrated later with minimal changes.

A fake API delay is wired into the main shell component to show skeleton placeholders before the real dashboard appears. On top of that, I added All / Runs / Strength view filters and a "Settings" card with local-only toggles to demonstrate how I structure stateful controls inside a dashboard without overcomplicating the data layer.

Design decisions

The dashboard uses a dark, high-contrast theme with emerald and violet accents to establish a modern fitness aesthetic. Cards feature subtle glassmorphism and soft shadows for depth. Key information—weekly miles, pace, strength volume, and today’s plan—is surfaced in clear, scannable sections. Responsive layout choices ensure the dashboard remains clean on mobile while taking advantage of two-column grid layouts on larger screens.

The filter bar lets users quickly switch between "All", running-focused, and strength-focused views, which is a pattern I see often in production dashboards. The settings card is intentionally non-destructive; it exists to demonstrate interactive controls and layout, and could easily be wired into real user preferences in a future version.

Outcome

The Run & Lift Dashboard delivered a polished, interactive UI that feels like a standalone fitness product. It demonstrates how to combine motion, data visualization, reusable components, filters, loading states, and local settings into a cohesive experience. This project helped me strengthen my front-end architecture, animation workflow, and dashboard design skills—while creating something useful for tracking my own training.