Jude’s Stars

CATEGORIES

Go Deeper

Here’s the full story of how Jude’s Stars came to life: Jude’s Stars — The Build Story The Idea It started with a simple observation. Jude had a star chart on his bedroom wall — a piece of paper, some stickers, the kind of thing parents have been doing for generations. It worked, but it sat in his bedroom where only he could see it, and the excitement of adding a star lasted about three seconds before it was forgotten. The question was: what if that moment of earning a star felt genuinely enormous? What if instead of a quiet sticker on a chart, it triggered an explosion of colour, sound and celebration that made Jude feel like the most important person in the universe? And what if that chart lived on a big touchscreen tablet in the kitchen — the heart of the family home — where everyone could see his progress and celebrate with him? That was the spark. Take something physical and passive, and turn it into something digital, explosive and alive. The Design Philosophy The core principle was simple: massive over-reaction to every single achievement. A 3-5 year old doesn’t respond to subtle rewards. They respond to fireworks. To explosions. To the screen lighting up and screaming back at them “YES! YOU DID IT!” The bigger, louder and more ridiculous the celebration, the more Jude would want to earn the next star. Every tap of that button needed to feel like winning the World Cup. This shaped every single decision in the build — the animations, the confetti, the full-screen takeover celebrations, the bouncing text, the glowing paths. Nothing was allowed to be understated. If it could be 10% more exciting, it was. The Architecture Built as a single self-contained React web app — no app store, no installation, no complicated setup. Just one index.html file that runs in any browser on any device. This was a deliberate choice: it meant the whole thing could live on a large kitchen tablet, bookmarked and added to the home screen like a native app, always one tap away. Data persists in localStorage so Jude’s stars, badges and reward tokens are always saved — even if the tablet is switched off, his progress is exactly where he left it. The Map — 10 Stars at a Time Rather than one overwhelming chart showing 100 stars, the decision was made to break the journey into worlds of exactly 10 stars each. This was psychologically important — 10 feels achievable to a small child. You can count to 10. You can see the end from the beginning. Each world has its own winding adventure path — 10 numbered nodes connected by a glowing trail. A player character sits above the current node and physically travels along the path with each star earned, animated with a smooth bounce. The next stop is always labelled “NEXT! ✨” so Jude always knows exactly where he’s heading. When all 10 nodes are filled, the path glows completely gold and the Level Complete sequence fires. The Worlds — Built Around Jude The ten worlds weren’t chosen randomly. They were built around the specific things Jude loves — the things that make his eyes light up: 🦕 Dino World — jungle greens, roaring dinosaurs, volcanoes in the background, bones on the path nodes 🚀 Space Mission — deep space blues, planets floating past, shooting comets, a rocket travelling the stars 🦈 Ocean Deep — dark ocean depths, colourful dangerous fish, octopuses and sharks lurking in the background 🦸 Super City — purple night skyline, lightning bolts, superheroes and explosions ⚽ Football Stadium — match-day green, trophies, golden boots, the roar of the crowd implied in every node 🐠 Danger Fish Reef — neon pinks, beautifully dangerous creatures, coral and colour everywhere 🔥 Volcano Island — deep reds and oranges, dragons, fire, epic danger ❄️ Ice Kingdom — arctic blues, polar bears, snowmen, diamond-cold beauty 🌟 Magic Forest — unicorns, fairies, rainbows, pure enchantment 👑 LEGEND — pure gold everything, 100 stars, the ultimate achievement Each world has its own colour palette, glowing path colour, background decorations, player emoji and ambient animations. Walking into a new world genuinely feels like arriving somewhere new. The Celebrations — Deliberately Over The Top When Jude taps “I earned a star!” three things happen simultaneously: First, confetti explodes across the entire screen — dozens of coloured shapes raining down from the top. Second, a full-screen celebration overlay slams in with a bouncing emoji, his star count in giant glowing gold text, and a teaser of how close he is to the next badge. Third, his player character physically moves along the path to the next node, which pops into existence with a satisfying spring animation. When he completes all 10 stars in a world, the celebration goes up another level entirely — a Level Complete sequence with his new badge revealed, the badge name in massive glowing text, confetti at double intensity, and a preview of the next world unlocking. It’s designed to feel like completing a video game level. Because for a 4-year-old, that’s exactly what it should feel like. The Reward Shop — Real World Prizes At the end of every world, Jude earns a reward token he can spend in the shop. The rewards were chosen specifically for things a 4-5 year old would go absolutely wild for: 🎳 Bowling · 🍬 Sweet Shop · 🏊 Swimming · 📖 Magazine · 🎮 Extra Screen Time · 🍕 Pizza Night · 🎬 Movie Night · 🦁 Zoo Trip · 🎨 Craft Time · 🍦 Ice Cream · 🏖️ Beach Day · 🎠 Soft Play The shop is PIN-protected — Jude can see it exists but can’t access it without a grown-up. This preserves the magic and ensures rewards are given intentionally. The Parent Admin Layer Behind the PIN lives a full parent control panel — invisible to Jude, essential for parents: A live dashboard shows total stars, current world, badges earned and reward tokens at a glance. The star manager lets parents add or remove individual stars with a confirmation step — critical for the inevitable moment Jude accidentally taps the button six times or earns a disputed star. Test mode takes a complete backup of Jude’s real data, resets everything to zero, lets you experience the full journey, then restores everything exactly as it was. A full reset with a two-step confirmation is there for fresh starts. The Deployment The entire app lives in a single index.html file hosted on Netlify, deployed automatically from GitHub. The URL — judes-stars.netlify.app — is bookmarked on the kitchen tablet and added to the home screen as a full-screen app. No browser chrome, no address bar. Just Jude’s world, edge to edge, ready to explode with celebration the moment he’s done something worth celebrating. Any future update — a new world, a new reward, a new feature — takes 30 seconds to deploy. Paste new code into GitHub, Netlify publishes it automatically. Jude gets an update without ever knowing it happened. The Result A physical star chart on a bedroom wall became a living, breathing, world-travelling adventure that sits in the heart of the family home. Every good behaviour, every completed task, every moment worth celebrating sends Jude on a journey through dinosaurs and space and deep oceans and superheroes — one star at a time. It’s not a reward chart. It’s his universe. And he’s the hero of it. 🚀⭐​​​​​​​​​​​​​​​​

Stack Used

Claude Code building a react app