That's my cat's name in case you were wondering. It's a personal real-time dashboard designed to be fully responsive across all devices, styled as an LED dot-matrix departure board. Displays live London transport data, local weather, and upcoming calendar events all in one place.
Built to minimize information overload with a focused, personal dashboard that streamlines daily routines.
Shows current conditions for a user-selected location: temperature, probability of rain, and a rotating casual phrase that regularly updates.
Long-press (or tap ⋮) to enter edit mode:
- Title: Tap to edit the dashboard title (e.g., "EICHIKO'S HOME")
- Location: Tap to search and change the weather location using OpenWeatherMap Geocoding API
- Changes persist to localStorage and survive page refresh
Collapsible panel (collapsed by default) showing live service status for all TFL lines and National Rail routes relevant to London. TFL lines are shown on the left; London National Rail operators on the right. Each line displays a coloured dot using official TFL brand colours.
User-configurable panels showing live arrivals for selected bus stops. Each row displays the bus route number, destination, and minutes until arrival. Buses arriving imminently show a blinking "DUE" indicator.
User-selected train station panels showing live departures. Each panel displays the destination, scheduled departure time, platform, and operator for upcoming trains. Supports multiple stations displayed side by side.
All bus and train panels are fully user-managed at runtime, no config files needed:
- Add panels via an in-page modal, tap + ADD STOP at the bottom of the transport section
- Remove panels with a single tap in edit mode
- Drag to reorder panels freely using flexible grip handles (powered by
svelte-dnd-action), only active in edit mode so normal touch scrolling is unaffected - Edit mode toggled via a ⋮ button; shows remove controls and drag handles without cluttering the default view
- Panel layout adapts to a 2-column grid on tablet and stacks to a single column on mobile
- Tap + ADD STOP → select the BUS tab
- Type at least 2 characters to search TFL stops by name (live search via TFL API)
- Select a stop from the results, if the stop has multiple directions (e.g. both sides of the road), a direction picker appears showing each stop letter and its towards destination
- Pick the correct direction to add the panel
- Tap + ADD STOP → select the TRAIN tab
- Type a station name or its 3-letter CRS code (e.g.
LBGfor London Bridge) - Select the station from the results
- Choose a specific platform to filter departures, or select ALL to show all platforms
Upcoming events from Google Calendar, fetched via a private ICS feed (no OAuth required). Shows up to 10 events with the day/time, event title, and an expandable row revealing location and description. Events are independently expandable by tapping. Refreshes every 30 seconds.
A dedicated F1 tab showing the full 2026 Formula 1 race calendar fetched live from the Jolpica F1 API. Each race card displays the circuit, date range, and a per-day session grid (Friday/Saturday/Sunday) with session names and UTC start/end times. Sprint weekends are visually distinguished. Races are automatically marked as OVER, UP NEXT, or a future round based on the current date.
Within the F1 tab, three sub-tabs provide live championship standings:
- SCHEDULE — Race calendar (as above)
- STANDINGS — Driver championship points, wins, and team
- CONSTRUCTORS — Constructor championship points and wins
The dashboard uses a tab bar in the shared layout to switch between the Home transport view and the F1 schedule. The header, weather bar, and clock persist across all tabs.
A canvas-rendered pixel art cat lives in the header between the title and the clock. It walks left and right across the space, occasionally stops to sit, blinks, and wags its tail. Drawn in the amber LED theme colour with no external assets — pure canvas pixel art at 4 px per art-pixel.
- Tap the ⋮ button (top right) to enter edit mode
- Edit mode allows editing the title and location
- Tap DONE to exit edit mode
| Layer | Technology |
|---|---|
| Framework | SvelteKit (Svelte 5, runes-based reactivity) |
| Language | TypeScript |
| Styling | Tailwind CSS v4 via @tailwindcss/vite |
| Fonts | LED Dot-Matrix (CDN), Share Tech Mono |
| Server routes | SvelteKit +server.ts (proxy routes keep API keys off the client) |
| Deployment | Cloudflare Workers via @sveltejs/adapter-cloudflare |
| Calendar parsing | node-ical |
| Source | What it provides |
|---|---|
| TFL Unified API | Line status, bus arrivals (requires free API key for higher rate limits) |
| OpenWeatherMap API | Current weather + precipitation forecast |
| OpenWeatherMap Geocoding API | Location search (forward geocoding) |
| Huxley 2 | National Rail train departures (community-hosted JSON proxy, no API key needed) |
| Google Calendar ICS feed | Personal calendar events via the secret iCal URL (read-only, no OAuth) |
| Jolpica F1 API | F1 2026 race calendar, driver & constructor standings (open source Ergast replacement, no key needed) |
Set in .env locally, or in the Cloudflare Workers dashboard (Settings → Variables and Secrets) for production:
TFL_APP_KEY= # from https://api-portal.tfl.gov.uk (optional, higher rate limits)
OPENWEATHER_API_KEY= # from https://openweathermap.org/api (required)
GOOGLE_CALENDAR_ICS_URL= # from Google Calendar → Settings → Integrate calendar → "Secret address in iCal format"
ALLOWED_HOST= # optional: custom domain (e.g. eichiko.yourdomain.com). *.workers.dev allowed automatically.
All variables are server-side only, never exposed to the browser.
# Install dependencies
npm install
# Start dev server (http://localhost:5173)
npm run dev
# Type-check
npm run check
# Production build
npm run build
# Preview production build
npm run preview- All API keys are server-side only (via SvelteKit server routes)
- Rate limiting on weather geocoding endpoint (60 requests/minute)
- Input validation on search queries (max 100 characters)
- CORS headers block unauthorized requests