Gitwrap is a dynamic, interactive web application that analyzes your GitHub profile to generate a "Spotify Wrapped" style summary of your coding year. It calculates your coding hours, favorite languages, and commits, determines your "Developer Persona," and even roasts your coding habits.
- The Grind: Visualizes total contributions and commit streaks.
- Hyper Coding Time: Analyzes your commit timestamps to determine if you are an Early Bird, 9-to-5er, or Vampire Coder.
- The Arsenal: A progress-bar visualization of your top used programming languages.
- The Roast: A witty, data-driven roast based on your commit history and language choices.
- The Receipt: Generates a downloadable, high-contrast digital receipt of your year's stats (perfect for sharing on X/Twitter).
- Mobile-First Design: Fully responsive UI with touch gestures and smooth animations.
- Framework: Next.js 15 (App Router)
- Styling: Tailwind CSS
- Animations: Framer Motion
- Icons: Lucide React
- Data Fetching: GitHub REST API
- Image Generation: html2canvas (For receipt downloads)
- Language: TypeScript
| Landing Page
| The Commit slide
| The Commit Time |
| Top languages |
| The Roast |
| The Summary |
| The Receipt |
Follow these steps to set up the project locally on your machine.
- Node.js (v18 or higher)
- npm, yarn, or pnpm
-
Clone the repository
git clone [https://github.com/motoyocodes/gitwrap.git](https://github.com/motoyocodes/gitwrap.git) cd gitwrap -
Install dependencies
npm install # or yarn install -
Set up Environment Variables Create a
.env.localfile in the root directory. You need a GitHub Personal Access Token (PAT) to increase API rate limits.NEXT_PUBLIC_GITHUB_TOKEN=your_github_pat_here
-
Run the development server
npm run dev
-
Open your browser Navigate to
http://localhost:3000to see the app running.
├── app/
│ ├── api/og/
│ │ └── route.tsx # Open Graph image generation
│ ├── wrap/[username]/
│ │ └── page.tsx # Main wrapper entry point (Dynamic Route)
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root application layout
│ ├── page.tsx # Landing page (Search input)
│ └── slideSummary.tsx # Summary/Bento Grid Slide
├── components/
│ ├── slides/
│ │ ├── slideClock.tsx # 'Hyper Coding Time' slide
│ │ ├── SlideGrind.tsx # 'The Grind' stats slide
│ │ ├── SlideLanguages.tsx # 'The Arsenal' slide
│ │ └── slideRoast.tsx # 'The Roast' slide
│ ├── Receipt.tsx # Hidden component for image generation
│ └── StoryContainer.tsx # Main swiper/navigation logic
├── lib/
│ ├── github.ts # GitHub API fetching logic
│ ├── roast.ts # Roast generation logic
│ ├── transformData.ts # Data processing/formatting
│ └── utils.ts # Utility functions (Tailwind merge, etc.)
└── public/
└── comits.png # Static assets
## How It Works
Data Collection: The app fetches public data from the GitHub API, including user details, repositories, and commit history for the current year.
Transformation: We process raw commit dates to calculate "Time of Day" vibes and aggregate language bytes to find top languages.
Persona Assignment: Based on the data, the user is assigned a specific "Vibe" (e.g., The Weekend Warrior, The Architect).
Rendering: Framer Motion handles the slide transitions, while the receipt is rendered off-screen and captured via Canvas API for downloading.
## Contributing
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
Fork the Project
##Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request
License
Distributed under the MIT License. See LICENSE for more information.
Made with love and light by motoyocodes