Personal Health Dashboard

What this app does

This is a personal health dashboard that brings together the metrics that matter most—heart rate, sleep quality, nutrition, hydration, and activity—into one glanceable view. Instead of switching between multiple fitness apps and wearables, a user opens this app each morning to see how they slept, where their energy stands, and what their recovery looks like. It's designed for anyone tracking their health seriously: athletes managing training load, people optimizing their wellness routine, or users integrating data from wearable devices to make informed decisions about their day.

Screens and user flow

The DashboardScreen is your entry point—a bento grid layout packed with compact, colorful widgets. You see your heart rate at a glance, a sleep quality score topped with a moon icon, your daily caloric burn against intake, a hydration level tracker, a recovery battery percentage, activity rings, and a step counter. Each card uses vivid pastel accents (salmon, periwinkle, yellow) on a deep charcoal background, making data feel both modern and scannable.

Tap any widget and you drill into its detail view. The HeartRateDetailScreen expands your heart rate story: a full-day BPM graph, zones for resting versus active intensity, heart rate variability trends, and a weekly comparison. The SleepDetailScreen breaks down your sleep architecture—REM, deep, and light sleep stages shown as stacked bars, a nightly score history graph, and insights about how sleep correlates with recovery. The NutritionDetailScreen gives you the full macro picture: your caloric intake plotted against burn, a meal log timeline, hydration history, and daily goal progress bars.

From any detail screen, you can navigate back to the dashboard or move between sibling views. The ProfileScreen sits at the bottom level and is your control center: you set personal health stats, configure fitness goals, manage notification preferences, connect wearable devices, and export a weekly summary of your health data. The navigation pattern keeps you oriented—tabs at the bottom let you jump to any major section, and drilling into details happens within those tabs.

Who it's for

Startup founders validating a health-tech product idea will see a fully functional prototype with realistic health data displays, interaction patterns, and visual hierarchy—ready to test with users or pitch to investors. Designers can use this as a reference for how to present dense health data in a modern, accessible layout, or remix the color scheme and typography for their own health or fitness app concept. Product managers scoping a wearable integrations or analytics feature can walk through the flow and estimate engineering effort. Developers building a React Native health app can fork this code as a starting point—all the layout components, data visualization patterns, and navigation logic are already there and customizable.

Built with RNBlocks

This entire five-screen app was generated from a single text description using RNBlocks. The platform created all screens with consistent design tokens (the charcoal base, pastel accents, bold typography), working navigation between them, and complete React Native code—no design files or manual coding required. Remix this flow to make it yours: swap in your own health metrics, adjust the color palette, or extend it with additional detail screens for metrics like stress or VO2 max.