Kaatupoochi

Inspiration Git history is intimidating for beginners and tedious for project managers to review. Raw code diffs (+42 -15) don't explain the business value or the human intent behind a code change. We wanted to bridge that translation gap. The goal was to build a tool that acts as a professional code change reporter, turning terrifying terminal logs into a beautiful, human-readable storybook.

What it does Kaatupoochi takes a repository and visualizes its entire commit history as an interactive contribution calendar. When you click on any active day, it doesn't just show you code syntax—it uses Google Gemini 2.5 Flash to translate the technical commit messages into plain English. It generates team-leader-ready summaries explaining what changed, why it matters, and who benefits. It also natively renders the repository's README right on the home screen for full context. Additionally, this project acts as a powerful analytics tool. It can be used to evaluate other GitHub repos, track daily commit velocity, and instantly visualize the number of days developers have actively worked on a specific project.

How we built it We built the frontend using Next.js 15, React, TypeScript, and Tailwind CSS for a sleek, dark-mode UI. The backend is powered by Node.js and Express, communicating directly with the GitHub REST API via Octokit. For the core AI feature, we integrated Google Gemini 2.5 Flash (@google/genai) to handle the complex translation of technical data into JSON summaries. To build a full-stack application of this scale in just 7 days as a beginner, I heavily utilized AI assistants (Claude and Gemini) as my pair programmers to help brainstorm architecture and debug UI state.

Challenges we ran into Speed and API rate limits were our biggest enemies. Initially, trying to fetch a full year of commit history (like Microsoft's VSCode repo) took over 3 minutes and crashed the browser. We had to completely re-architect the backend just hours before the deadline. We pivoted to fetch a lightweight "activity map" (just dates and commit counts) which loads the calendar instantly, and we only fetch the heavy commit details when a user explicitly clicks a specific day. Oh, and surviving a massive Git merge conflict that temporarily broke our environment just 3 hours before submission was a heart-pounding challenge!

The GitHub vs. GitLab Pivot: Due to the strict 7-day hackathon time limit, we had to make a tough architectural choice. We realized a massive portion of beginners actively struggle with GitHub's complex history first, so we prioritized a hyper-optimized GitHub MVP. While we didn't have time to fully complete the GitLab API integration before the deadline, prioritizing GitHub allowed us to deliver a highly polished, working prototype.

Accomplishments that we're proud of The Custom Calendar UI: Building a fully interactive, GitHub-style contribution graph from scratch that perfectly maps data to a 365-day grid with color-coded activity levels.

Lightning-Fast Optimization: Reducing our load time from 3+ minutes to under 2 seconds. We also realized that if this logic were integrated directly into GitHub's native database rather than relying on external APIs, it would be incredibly fast. This project serves as a perfect proof-of-concept for a native GitHub add-on!

The AI Prompting: Successfully tuning the Gemini prompt to consistently return professional summaries in a strict JSON format that the React frontend could render without breaking.

What we learned I learned a massive amount about full-stack development in a very short time. I learned how to effectively navigate and paginate REST APIs, how to manage complex React state across multiple interconnected components (Calendar, Commit List, Detail View), and the critical importance of minimizing API payloads for speed. I also learned a hard but incredibly valuable lesson about Git branch management and resolving merge conflicts!

What's next for Kaatupoochi While we built a highly polished GitHub analyzer for the MVP to ensure stability, our immediate next step is expanding the backend to fully support the GitLab API, bringing this tool natively to GitLab users. Beyond that, we plan to build our "Invisible Auto-Save Agent" (which silently commits checkpoints every 10 minutes to prevent code loss) and a "Human Language Layer" that translates confusing Git CLI terminology (push, pull, branch) into everyday words for absolute beginners.

Built With

• 2.5
• and
• built-with-next.js-15
• express.js
• gemini
• google
• node.js
• react
• tailwind-css
• the-github-rest-api
• typescript