Inspiration
Trying to answer the simple question “How old am I really?” always felt too shallow.
I wanted a dashboard that treats age as a living data stream—showing every second I’ve been alive, visualising milestones, and celebrating tiny wins with beautiful micro-animations. The result is LifeDash: a precision age calculator that turns raw time into insights, motivation and fun.
What it does
- 🧮 Ultra-precise age engine – calculates to the exact second, auto-updates in real-time.
- 🎉 Birthday mode – confetti + party animation fire automatically at 00:00.
- 📈 Life timeline – GSAP-driven scroll reveals milestones (school, career, etc.).
- 👥 Celebrity comparison – stack your age next to famous people.
- ♈ Zodiac + horoscopes – daily feed showing your sign and age in planetary years.
- 💓 Personal stats – estimates total heart-beats, breaths & hours slept so far.
- 🌗 Theme system – 6 colour palettes + smooth dark-mode toggle (glassmorphism).
- 🌍 Bilingual – instant switch between Bahasa Indonesia & English.
How we built it
| Layer | Tech | Why |
|---|---|---|
| UI | Tailwind CSS utility classes for atomic styling :contentReference[oaicite:0]{index=0} | build fast, avoid CSS bloat |
| Animations | GSAP for 60 FPS motion :contentReference[oaicite:1]{index=1} + Particles.js background | smooth, no jank |
| Charts | Chart.js v4 doughnut & bar charts :contentReference[oaicite:2]{index=2} | minimal bundle |
| Icons | Lucide-React outline icon set :contentReference[oaicite:3]{index=3} | tree-shakable |
| State | Vanilla JS (ES6 modules) & localStorage for history :contentReference[oaicite:4]{index=4} |
keeps it lightweight |
| Export | html2canvas screenshots :contentReference[oaicite:5]{index=5} → jsPDF PDF generator :contentReference[oaicite:6]{index=6} | shareable reports |
| Micro-animations | Lottie-web JSON animations :contentReference[oaicite:7]{index=7} | designer-friendly |
Challenges we ran into
- Time-zone drift – JavaScript
Datequirks required manual UTC normalisation. - Chart performance on mobile – solved by throttling re-renders & lazy-loading heavy libs.
- Accessibility – meeting WCAG 2.2 contrast & keyboard nav while keeping glass style :contentReference[oaicite:8]{index=8}.
Accomplishments
- Hit A-grade Lighthouse on both desktop & mobile.
- Achieved < 100 KB first load despite animations & charts.
- Users stayed on page > 3 min average during early beta.
What we learned
- Utility-first CSS scales better for hackathons than custom component libraries.
- Animations are fun, but 400 ms max duration keeps UX snappy.
- Glassmorphism ✨ is trending for 2025, but needs strict contrast discipline :contentReference[oaicite:9]{index=9}.
What’s next
- AI lifespan predictor: train regression on public health datasets to forecast life expectancy (ethical disclaimers included). :contentReference[oaicite:10]{index=10}
- Habit coach: GPT-powered weekly micro-goals delivered via push.
- Milestone forecaster: suggest the next personal achievement based on your timeline data.
Log in or sign up for Devpost to join the conversation.