Inspiration
Your GPA is a snapshot. Your resume is a highlight reel. But neither tells the story that actually matters — the late-night debugging sessions, the moment a hard concept finally clicks, the project that almost broke you before it made you.
We kept watching students feel like impostors because the only measure of their progress was grades, and grades don't capture growth. We wanted to build something that did — a tool that treats setbacks as data, not defeat, and makes the full arc of a learning journey visible.
"Shoot for the moon. Even if you miss, you'll land among the stars."
What it does
Moonshot is a living, visual growth dashboard for students. You log your journey — wins, breakthroughs, and dips alike — and Moonshot renders it as an honest arc: a bezier curve that rises with your progress and visibly dips when things go wrong.
Every event on the arc feeds into three live systems:
- Skill donut charts that fill over time as you grow across technical areas (Python, ML, Finance, etc.)
- A journey ledger that preserves each moment with a headline, a next step, and a lesson
- Moo, your companion cow, who reacts to every event — celebrating wins with a bounce animation and showing up with quiet support when the arc dips
Goal-achieving events appear as stars on the timeline. Setbacks appear as red dots and drop the arc — because honest arcs are more beautiful than fake ones.
How we built it
Pure vanilla HTML, CSS, and JavaScript. No frameworks, no build tools, no dependencies.
- SVG arc drawn entirely in JS using cubic bezier curves, scaled to a fixed viewBox and aligned with calendar-month tick labels that account for SVG letterboxing at different screen widths
- Procedural star field rendered on a canvas element with randomized positions, sizes, and twinkle timing
- Animated donut charts built from SVG stroke-dashoffset, updated incrementally each time a new event is selected
- Companion system — Moo switches from a baby to an adult at level 6, grows in pixel size with each level, tilts 90° with a blue hue-rotate filter on dip events, and bounces on wins via a CSS keyframe triggered by forcing a DOM reflow
- Entry form for adding new events live, with full arc and companion re-render on submit
Challenges we ran into
Making dips feel right required resisting the instinct to hide negative momentum. The arc needed to drop visibly, Moo needed to visibly react, and the detail card needed to reframe the setback — not paper over it. Getting that emotional honesty to feel supportive rather than harsh took several iterations.
Zero-dependency constraint meant every animation, every chart, every interactive element had to be hand-rolled. It was the right call, but there were moments where reaching for a charting library was tempting.
Accomplishments that we're proud of
- A fully polished, zero-dependency dashboard that looks like it was built with a full design system
- Moo — the emotional design of a companion who visibly responds to your journey, grows alongside you, and never panics at a dip
- An SVG arc that honestly shows negative momentum, making recovery moments more powerful when they arrive
- The philosophy holding it together: dips are inflection points, not failures — and the tool's design reflects that at every layer
What's next for Moonshot
- GitHub & LinkedIn integration — auto-populate events from commit history, merged PRs, and new connections (the module stubs are already in the codebase)
- Autofill from activity — pull in real data so students don't have to manually log everything
- Shareable arcs — export your journey as an image or live link to share with mentors or include in applications
- Multi-student views — cohort dashboards so advisors can see where students are thriving and where support is needed
- Moo's evolution — more growth stages, more emotional states, and a memory so she can reference past moments in her speech
