Personal Dashboard
The app I run my week from. Calendar, tasks, surf forecast, learning roadmap, social pipeline, health, work and investments on one screen, built around a Sunday ritual that closes the week. This is the real frontend with a fake backend: everything you see is made up, and nothing you click leaves your browser.
Built for a laptop screen. On a phone, open it full screen and scroll sideways.
Things to try
- Tick a task. In the real app that writes back to Google Tasks.
- Hover the wave icons. The outlined column is the week's best surf day.
- Hit ✦ Generate brief, then scroll down and close the week. Try ✦ Draft with AI.
- Learning: click a topic to open its phases and chapter counters.
- Social Media: drag a card on Kanban, open a post, generate an image or a carousel.
- Keyboard: ← → change weeks, t jumps to today, 1–6 switch tabs.
The story behind it: why I built it and what happened next.
Under the Hood
This isn’t a mockup. It’s the same React frontend I run on localhost, built in a special demo mode. In the real app every click goes to a small Node server that reads SQLite, a few markdown files, Google Calendar and Tasks, Open-Meteo’s weather and marine forecasts, three RSS feeds and the Anthropic API. In this build, one function intercepts those requests before they leave the browser and answers them from an in-memory copy of a fictional week.
That’s why the demo actually works rather than just looking right. Ticking a task, dragging a post card or closing the week changes that in-memory state, and the next screen reads it back. Reload the page and it all resets. The AI buttons return canned answers after a pause the length of a real call, and the “generated” images are gradient placeholders. The real ones come from Google’s Nano Banana models and cost money per click.
Every date is computed from your own clock, so the board always shows this week. The names, numbers, companies and headlines are all made up. None of it is my data.
Go deeper
Markdown is the source of truth where a human writes. The learning roadmap, social posts, books and projects are plain markdown files I can edit in any editor. The parser is lossless: an unedited file round-trips byte for byte, so the app never reformats something I wrote by hand. Everything machine-shaped (time entries, forecasts, health days) lives in SQLite.
A closed week is immutable. Closing freezes tasks, events, forecasts, learning progress and the review into a snapshot, writes one log line per topic and commits the whole data folder to git. Reopening is an explicit button, not something that happens by accident.
Never show a number you can’t justify. A property with no valuation shows no yearly change at all, rather than 0%, because 0% would claim someone measured it. A price lookup that’s more than 6% off the broker’s own price gets rejected as the wrong security. That rule came from a data provider that quietly priced an S&P 500 fund at $60. Where a source genuinely can’t know something, the UI says unknown instead of guessing.
The demo build is a Vite mode, not a fork. One flag swaps the router to hash URLs and installs the fake backend. The fixtures are typed against the same API types the real client uses, so if the real app changes shape, the demo stops compiling instead of quietly breaking.