We will be undergoing planned maintenance on January 16th, 2026 at 1:00pm UTC. Please make sure to save your work.

Commit-to-Bloom

Transform your GitHub activity into a living digital garden 🌸 Every commit plants a seed, every PR blooms a flower. Watch your code grow into something beautiful!

Comment

Inspiration 🌱

The CodeSpring Hackathon theme of "renewal" and "growth" inspired us to think about how developers grow through their daily work. We realized that GitHub contribution graphs, while functional, don't capture the emotional journey of building something.

What if we could visualize code contributions as a living, breathing garden? Every commit becomes a seed planted. Every pull request, a flower blooming. The metaphor of "growth over grind" perfectly aligns with CodeSpring's philosophy.

What it does 🌸

Commit-to-Bloom transforms your GitHub activity into a beautiful digital garden:

  • 🌱 Seedlings appear for 1-2 commits
  • 🌿 Plants grow from 3-5 commits
  • 🌸 Cherry blossoms bloom for 6+ commits
  • 🌳 Trees flourish during 7+ day streaks
  • 🍂 Gardens wither when streaks break (motivating consistency!)

The app features a Streak Meter with motivational messages, beautiful stat cards, and floating cherry blossom petals for that spring aesthetic.

How we built it 🛠️

We used a modern React + TypeScript stack with Vite for fast development:

  1. Frontend: React 19 with TypeScript for type safety
  2. Styling: Tailwind CSS with a custom spring color palette
  3. API: GitHub REST API for fetching user activity
  4. Animations: CSS keyframe animations for floating petals and swaying plants
  5. Design: Glassmorphism effects with a lavender-to-mint gradient

The entire app fits in a lightweight bundle with zero backend requirements.

Challenges we ran into 🧗

  • GitHub API Rate Limits: We implemented graceful fallbacks with mock data
  • Animation Performance: Optimized floating petals to use CSS transforms for 60fps
  • Streak Calculation: Building accurate streak logic that handles timezone edge cases
  • Design Balance: Creating visuals that are beautiful but not distracting

Accomplishments we're proud of 🏆

  • The spring theme perfectly matches the CodeSpring hackathon aesthetic
  • Zero dependencies for complex animations - pure CSS magic
  • Responsive design that works beautifully on mobile and desktop
  • The "withering garden" mechanic that gamifies consistency

What we learned 📚

  • GitHub's public Events API is powerful for building developer tools
  • CSS animations can create magical effects without JavaScript
  • The psychology of gamification - visualizing progress motivates action
  • Spring color palettes (cherry blossom pink + mint green) are universally pleasing

What's next for Commit-to-Bloom 🚀

  • OAuth Integration: Private repo support
  • Garden Sharing: Generate shareable garden images
  • Leaderboards: Compare gardens with friends
  • Browser Extension: See your garden on GitHub.com
  • Mobile App: React Native version for on-the-go motivation

Built With

Share this project:

Updates