🚀 GitHub Wrapped 2025

Your coding year, analyzed, visualized, and roasted.

---

📖 Introduction

GitHub Wrapped 2025 is a full-stack web experience that brings the viral "Spotify Wrapped" storytelling format to the developer community. Instead of top songs, we visualize your commits, top languages, and coding habits.

But we didn't stop at analytics. Using a custom Personality Engine, the app analyzes your metadata to assign you a "Coder Persona"—ranging from the hardworking "Weekend Warrior" to the mythical "10x Developer"—complete with witty, sarcastic commentary on your coding lifestyle.

✨ Key Features

• 📱 Story Mode UI: An immersive, Instagram-style story viewer built with Framer Motion, featuring smooth transitions, pause-on-hold, and mobile-first responsive design.
• ⚡ Smart Caching: Implements a robust caching layer using Redis (Upstash). Heavy GitHub GraphQL queries are cached for 24 hours (TTL), protecting the app from API rate limits and ensuring sub-second load times for returning users.
• 🧠 The Roast Engine: A logic layer that evaluates your commit timestamps, language diversity, and pull request volume to mathematically determine your "Vibe" and "Work Style".
• 🔥 Viral Sharing:
  • Smart Share: Automatically generates a high-res image of your "Receipt" using html2canvas.
  • Native Integration: Uses the Web Share API (Level 2) to attach the image directly to native share sheets on mobile (Instagram/Twitter), while falling back to a seamless download flow on desktop.
• 🛡️ Secure Architecture: Built on a Backend-for-Frontend (BFF) pattern. Your GitHub Personal Access Token (PAT) never touches the client browser.

🛠️ Tech Stack

Backend (The Brain)

• Language: Go (Golang) 1.25
• Framework: Fiber v2 (Fast HTTP engine)
• Data Source: GitHub GraphQL API v4
• Cache: Redis (Upstash Serverless)

Frontend (The Face)

• Framework: React 18 + Vite
• Styling: Modern CSS (clamp() typography, Cylinder 3D effects, Glassmorphism)
• Animation: Framer Motion
• Utilities: html2canvas, canvas-confetti

---

🏗️ Architecture & Security

This project prioritizes security and performance. The frontend is a "dumb" view layer that communicates valid usernames to the backend. The backend handles all authentication with GitHub, ensuring tokens are never exposed.

graph LR
    User[User Client] -- "GET /:username" --> BFF[Go/Fiber Backend]
    subgraph "Server Side"
    BFF -- "Check Cache" --> Redis[(Redis/Upstash)]
    Redis -- "Hit (JSON)" --> BFF
    Redis -- "Miss" --> BFF
    BFF -- "GraphQL Query (Auth)" --> GitHub[GitHub API]
    GitHub -- "Raw Data" --> BFF
    BFF -- "Process & Roast" --> BFF
    BFF -- "Set Cache (TTL 24h)" --> Redis
    end
    BFF -- "Sanitized JSON" --> User

Loading

Security Measures

1. Input Validation: Strict regex validation on usernames to prevent injection attacks.
2. Rate Limiting: IP-based rate limiting via Fiber middleware.
3. CORS: Strict Origin policies configured for production domains.
4. Environment Isolation: GITHUB_TOKEN and REDIS_URL are strictly server-side environment variables.

---

🚀 Getting Started

Follow these steps to run the project locally.

Prerequisites

• Go 1.21+
• Node.js 18+
• A GitHub Personal Access Token (Classic)
• An Upstash Redis URL (or local Redis)

1. Clone the Repository

git clone https://github.com/EmirhanSevmez/GitWrapper.git
cd GitWrapper

2. Backend Setup

Navigate to the backend directory and set up the environment.

cd backend
cp .env.example .env
# Edit .env and add your keys:
# GITHUB_TOKEN=ghp_...
# REDIS_URL=redis://default:...@...upstash.io:6379
# PORT=3000
# ALLOWED_ORIGIN=http://localhost:5173

go mod download
go run .

The backend should now be running on http://localhost:3000.

3. Frontend Setup

Open a new terminal and navigate to the frontend directory.

cd frontend
npm install
npm run dev

The frontend should now be running on http://localhost:5173.

🔮 Roadmap

• Smart Share: Native image attachment for mobile sharing.
• Safe Zones: Full-screen responsive layout with safe zones for notches/nav bars.
• Compare Mode: Duel your friends to see who has the higher "Grind Score".
• Org Analytics: Wrapped for entire GitHub Organizations.
• Music Integration: Auto-play a lo-fi beat that matches your coding speed.

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

Built with 💻 and ☕ by Emirhan Sevmez