Build a Personal Dashboard / Start Page With Claude

Replace your new-tab page with a dashboard you designed: weather, links, tasks, countdowns, and any API you care about — the most customizable app you'll ever use, because you use it 50 times a day.

DifficultyBeginner

Time60–90 min, then forever tinkering

You'll needClaude (free tier works) · A browser

You'll buildA widget-grid start page: live clock and weather, your link groups, a quick task list, daily countdown(s), and a rotating quote — set as your new-tab page so you see it constantly.

The page you see most in your life is your browser's new tab, and right now a corporation designs it. This build flips that — and it's the perfect skills-consolidation project: layout, localStorage, and a live API, all stakes-free, all immediately useful. It's also endlessly extendable, which makes it the app you'll keep improving as you learn.

Step 1 — Generate the dashboard

Build a personal start page as a single HTML file, no libraries. A responsive widget grid containing: (1) large clock with date and a time-aware greeting using my name; (2) current weather + 3-day forecast from the Open-Meteo API (no key needed) for latitude [X] longitude [Y], with a code comment marking where to change location; (3) my link groups — Work: [...], Daily: [...], Building: [...] — as tidy labeled columns; (4) a quick task list with add/check/delete, persisted in localStorage; (5) a countdown widget to [date — semester end / launch day]; (6) a daily rotating quote from an embedded list of 30 quotes about [building things]. Dark, calm design, subtle depth, readable at a glance. Complete file.

Step 2 — Make it your new tab

Host the file (any option on our hosting guide, free tiers included) or keep it local. Then: most browsers let you set a homepage URL natively, and a 'custom new tab' extension (or the new-tab redirect setting in some browsers) points new tabs at your page. From this moment, every stray Cmd+T is a glance at your own software — which is exactly why you'll keep polishing it.

Step 3 — Tune it like furniture

You'll notice friction within a day because you see it constantly: the weather widget is too big, the links you use most aren't first, the greeting is corny. Each annoyance is one sentence to Claude. This tight loop — notice, describe, fix, reload — is the same iteration skill every other tutorial uses, practiced on the lowest-stakes canvas possible.

Step 4 — Add a widget from any API

The dashboard is a natural home for the API-dashboard pattern (full tutorial on this site): one widget = one fetch + one render. Proven additions: air quality (Open-Meteo has it), sunrise/sunset, a tiny month calendar, word of the day, your site's visitor count, stock or crypto tickers, prayer times, tide tables. The prompt formula: 'add a widget showing [thing] from [API], here's a sample of its JSON: [paste].'

Worth knowingKeep every widget independent: one API being down should gray out one box, not blank the page. Tell Claude exactly that — 'each widget handles its own errors and shows a quiet failed state' — and your dashboard survives the internet's bad days.

Step 5 — The family/team fork

Same build, different audience: a kitchen-tablet family board (calendar, chores, dinner plan), a small-office lobby screen (announcements, KPIs), a dorm-room shared board. Fullscreen a browser on a spare tablet and you've shipped a 'smart display' for the cost of nothing. When multiple people need to edit it, that's your cue for the Supabase tutorial — shared data is its whole job.

Keep going

Need somewhere to put it live? See where to host AI-built sites. Compare tool costs on the pricing tracker (or stick to the free options), then pick your next build.