Video summary

I Built a Dashboard That Tracks My Whole Life with Claude (Complete 10-Min Build)

Main summary

Key takeaways

Technology

Build Overview (Purpose + Approach)

  • The creator builds a personalized “whole life” dashboard from scratch to track:
    • Day goals and a to-do system
    • Health routines and workouts
    • Finances and long-term plans
  • A key theme is delivering the dashboard as a quick deployment tutorial, using:
    • VS Code + Cloud Code / Claude integration
    • GitHub fork
    • Vercel deployment
    • Supabase (Postgres) for backend data
    • Mobile access via “Add to Home Screen” and iterative UI fixes for phone layout

Dashboard Features Covered (What the Product Tracks)

1) Day Tracker + To-Do System

  • A day tracker timeline runs from 8:00 a.m. to 12:00 a.m. (configurable).
  • A to-do list supports tasks that can be:
    • Added (e.g., homework, “make a TikTok”)
    • Prioritized
    • Checked off
    • Moved forward (e.g., push remaining tasks to tomorrow)
  • Completing tasks triggers a day streak visual indicator (e.g., green highlight/UI element).

2) Health Tracker: Supplements

  • Supplements are assisted by an AI-backed catalog (“knows almost every supplement”).
  • When adding items (examples):
    • creatine → typical dosage suggested (e.g., ~5 g)
    • L-theanine 200 mg
    • magnesium glycinate 400 mg
  • The schedule can include time-of-day (morning/lunch/night).
  • If a supplement is missed past a cutoff (example: past 10:00 a.m.), the item flashes red to indicate it was missed.

3) Water Tracker

  • Built after “took a while,” including:
    • Settings for units (lb/kg), age, sex, weight
    • Workout time per week
    • Stimulant/caffeine details
  • Calculates recommended daily hydration (example result: ~9 water bottles/day) and shows bottle size in ml/ounces.
  • Tracks consumption over the last 14 days.
  • UI behavior: water widget is placed at the top for quicker access.

4) Fitness: Fat/Muscle-Gain Style Tracking (Conceptual)

  • Mentions a fat tracker / muscle gain tracker using:
    • Daily bodyweight changes
    • Performance metrics (example: bench press increasing)
  • Uses calculations to suggest whether weight gain is most likely muscle.
  • Supports progress photos:
    • Upload from phone library
    • Compare photos (example mentions “same day” comparison)

5) Gym / Workout Planner with Progressive Overload

  • Includes a gym schedule (example: push / pull / legs / rest).
  • Supports multi-gym (e.g., home gym + editable names).
  • Exercise configuration includes:
    • Set tracking (example mentions 2 sets)
    • Rep-range guidance (example: 6–8 reps for progressive overload)
    • Auto-feedback such as:
      • “You hit 8 reps, time to add 2 KG. Expect 6–7 next session.”
  • After finishing, workouts appear in past workouts for later viewing.
  • States that workout tracking syncs to phone.

6) Net Worth + Investments (Financial Overview)

  • Net worth section supports multiple accounts/assets (e.g., stock accounts, Bitcoin, cash).
  • Displays:
    • Pie chart and graphs showing allocation changes
    • Currency switching
    • Visual updates when adding/removing assets

7) Subscriptions (Recurring Bills)

  • Tracks subscriptions with:
    • Cost per month (example: $200/month)
    • Charge day (example: charges on the 23rd)
    • Auto-deduct feature
  • Visual warning logic:
    • Turns red after 5 days if payment hasn’t auto-deducted (example logic shown)

8) Orders + Wish List / Long-Term Goals

  • Tracks purchases (examples: iPhone $1,000, laptop $5,000) with timing like “will come in 5 days.”
  • Can deduct orders from selected accounts automatically.
  • Wish list supports “what you want” tracking, for example:
    • BMW $500k
    • Another BMW $200k
  • Each item is expressed as a percentage of net worth (examples: 76.92%, 384.62%) to motivate planning and show realism.

Tutorial / Deployment Steps (Product How-To)

  1. Install/open VS Code.
  2. Install Cloud Code in VS Code; sign in with Claude AI subscription/Pro (paid tier required for the described flow).
  3. Fork the project repository on GitHub:
    • Creator suggests forking from a description link (auto-generated name like “row” mentioned).
  4. Clone the fork locally using the terminal (Git may be required).
  5. Deploy to Vercel:
    • Import the repo
    • Deploy with default settings
  6. Set up Supabase:
    • Sign in via GitHub
    • Run provided SQL scripts in the Supabase SQL editor
  7. Insert API keys into the VS Code project:
    • Replace placeholders (publishable key, URL)
  8. Push updates so the dashboard appears on the web.
  9. Mobile setup:
    • Open the dashboard URL on the phone
    • Share → Add to Home Screen for app-like access
  10. UI fixes:
    • Multiple “copy/paste prompt” fixes to improve phone layout (tabs, finance placement, etc.)
    • “Gym fix” scripts:
      • One fix in VS Code
      • Another via Supabase SQL
  11. Backtesting:
    • Confirm progress photos and UI updates work correctly on phone after re-deploy.

Key Notes About Troubleshooting / Limitations

  • The creator notes phone UI issues required multiple fixes (tabs layout, finance placement, etc.).
  • Phone connection performance is described as “terrible” (network/latency issue).
  • One final step is labeled “completely optional” (goal-tab UI cleanup).

Main Speakers / Sources

  • Primary speaker: The video creator (builder of the dashboard; speaks in first person: “I built…”, “we’re going to…”, etc.).
  • Tooling / platform sources mentioned: Claude/Cloud Code, VS Code, GitHub, Vercel, Supabase, and SQL scripts / repo prompts from the creator’s linked GitHub resources.

Original video