# live-updating activity heatmap — artlu.ai real-time activity card on the homepage. 14-week shipping heatmap with hover tooltips, day counter, streak math, and firestore live updates. Type: project entry Published: 2026-04-22 [Original page]() [Browse this group]() Parent project: artlu.ai Recorded status: launched Updated: 2026-05-20T19:37:39.331Z Technologies: React, CSS, CSS variables, Firestore Tags: artlu, dev tool ## Details **What is the activity card?** The live stats + heatmap panel on the artlu.ai homepage. Shows day X/100, shipped count, remaining, active days, current/best streak, and a 14-week heatmap where each cell is a day colored by how many projects shipped. **What it does** - stats column: day, shipped, to go, active — same row height, mono weight 400 labels + weight 600 values - streaks header: current / best, both green - 14-week heatmap: l1–l4 intensity based on 1–4+ projects per day - hover any cell → tooltip with the date and a bulleted list of project names that shipped that day - updates live — new projects land on the heatmap without a page reload - day counter rolls over at local midnight without touching the page - today's week is always the rightmost column of the grid **How it works** `subscribeToPublicProjects` in `db.js` wraps firestore's `onSnapshot` instead of `getDocs` — the public view swapped a one-shot fetch for a live subscription, so a new project write re-paints the grid. a `setTimeout` inside a `useEffect` fires 1s after local midnight and bumps a state counter to force a re-render — no polling, no interval. the grid anchors its end on the saturday of today's week and walks back 14 weeks to land on a sunday, which fixed an earlier bug where the window ended on a prior saturday and hid today. **Built with** React, Firebase Firestore (onSnapshot), inline styles with CSS variables for theme tokens, native title tooltips on the real card + a custom div tooltip in the artifact mockup. An interactive demo is embedded on the original page. Status and dates describe the published record, not a recent test of an external service. Missing details are not inferred. Public links do not imply an open-source licence or permission to reuse material. [Directory]()