🎁 DevWrapped

Your GitHub Year in Review - Wrapped with Style

Experience your GitHub activity like never before - beautiful animations, AI-powered insights, and shareable year-in-review

🚀 Try Demo • 📖 Docs • 🐛 Report Bug

---

🤔 Why This Exists

Every year, Spotify Wrapped makes us excited to share our music journey. But what about our code journey? DevWrapped brings that same excitement to developers by transforming your GitHub activity into a stunning, animated year-in-review experience.

• 🆓 Completely Free - No paywalls, no premium tiers
• 🔓 No Login Required - Just enter a GitHub username
• 🎨 Beautiful Design - 14 animated slides with 5 unique themes
• 🤖 AI-Powered - Groq generates personalized developer personalities
• 📊 Accurate Data - Uses GitHub GraphQL API for precise statistics
• 🌙 Dark Mode First - Designed for developers who code at night
• 📱 Share Ready - Perfect for social media, portfolios, and README badges

---

✨ Features

📊 Comprehensive GitHub Analytics

• 🔥 Total Commits - Accurate count from GitHub GraphQL API (Jan 1 - Dec 31)
• 📦 Top Repository - Your most committed project with language & stars
• 🌟 Stars Earned - Total stars across all your repositories
• 🍴 Forks Created - Track how others are using your code
• 📝 Issues & PRs - Contributions to open source discussions
• 💬 Code Reviews - Your impact on team collaboration

🎭 AI-Generated Personality

Groq AI analyzes your coding patterns to generate:

• 🏷️ Developer Archetype - "Code Wizard", "Bug Hunter", "Open Source Champion"
• 📜 Personality Summary - Unique description of your coding style
• 🎯 Coding Philosophy - What drives your development approach

🎨 5 Stunning Themes

• 🌌 Cosmic - Purple gradients with star particles
• 🌊 Ocean - Blue waves with bubble effects
• 🔥 Sunset - Warm oranges and reds
• 🌲 Forest - Earthy greens with floating leaves
• 🌃 Midnight - Deep blues with glowing dots

🎬 14 Interactive Slides

1. Welcome & Username
2. Total Commits Counter
3. Top Repository Showcase
4. Stars & Forks
5. Issues & PRs
6. Code Reviews
7. Contribution Graph
8. Most Active Day
9. Coding Streak
10. Languages Breakdown
11. Activity Timeline
12. AI Personality Reveal
13. Year Highlights
14. Share & Download

🎉 Particle Animations

• ❄️ Snowflakes, bubbles, leaves, embers - theme-matched particles
• 🎆 Confetti celebrations on milestone slides
• ✨ Smooth Framer Motion transitions between slides

---

🛠️ Tech Stack

Technology	Purpose	Why We Chose It
Next.js 15	React Framework	App router, server components, API routes
TypeScript	Type Safety	Catch bugs early, better DX
Supabase	Database & Auth	24-hour caching, RLS policies
GitHub GraphQL	Data Source	Accurate full-year commit data
Groq AI	Personality Gen	Fast LLM inference (Llama 3.1)
Framer Motion	Animations	Smooth slide transitions
Tailwind CSS	Styling	Utility-first, responsive design
Zustand	State Management	Lightweight, simple API
React Confetti	Celebrations	Fun visual effects

---

🚀 Quick Start

Prerequisites

• Node.js 18+
• GitHub Personal Access Token (create one)
• Supabase Account (free tier)
• Groq API Key (get one)

Installation

# Clone the repository
git clone https://github.com/akshadjaiswal/dev-wrapped.git
cd dev-wrapped/app

# Install dependencies
npm install

# Copy environment template
cp .env.example .env.local

Environment Variables

# GitHub API (create token: https://github.com/settings/tokens)
# Required scopes: repo, read:user
GITHUB_TOKEN=ghp_xxxxxxxxxxxxx

# Supabase (from https://app.supabase.com/project/_/settings/api)
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJxxx... # Public - safe to expose
SUPABASE_SERVICE_ROLE_KEY=eyJxxx...    # SECRET - server only!

# Groq AI (from https://console.groq.com/keys)
GROQ_API_KEY=gsk_xxxxxxxxxxxxx

Database Setup

# Run migrations in Supabase SQL Editor
# See: my_docs/SETUP.md for full schema

CREATE TABLE github_wraps (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  username TEXT NOT NULL,
  year INTEGER NOT NULL,
  wrap_data JSONB NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  UNIQUE(username, year)
);

-- Enable RLS
ALTER TABLE github_wraps ENABLE ROW LEVEL SECURITY;

-- Public read policy
CREATE POLICY "Allow public read" ON github_wraps FOR SELECT USING (true);

Run Development Server

npm run dev
# Open http://localhost:3000

Build for Production

npm run build
npm start

---

📁 Project Structure

app/
├── app/                      # Next.js App Router
│   ├── api/                 # API Routes
│   │   └── analyze/[username]/  # GitHub data fetching
│   ├── generate/[username]/ # Wrap generation page
│   └── layout.tsx           # Root layout
├── components/
│   ├── ui/                  # Reusable UI (Button, Input)
│   ├── wrap/                # Wrap-specific components
│   │   ├── SlideContainer.tsx   # Navigation logic
│   │   ├── slides/             # 14 individual slides
│   │   ├── ThemeProvider.tsx   # Theme system
│   │   └── particles/          # Animation components
│   └── WrapDisplay.tsx      # Main wrap orchestrator
├── lib/
│   ├── services/
│   │   ├── github.ts           # REST API integration
│   │   ├── github-graphql.ts   # GraphQL queries
│   │   └── groq.ts             # AI personality generation
│   ├── utils/
│   │   ├── calculations.ts     # Stats processing
│   │   └── supabase.ts         # Database client
│   └── types/                  # TypeScript definitions
├── my_docs/                 # Comprehensive documentation
│   ├── claude.md           # AI assistant quick start
│   ├── ARCHITECTURE.md     # System design
│   ├── DATA-FLOW.md        # Pipeline documentation
│   └── ...                 # 6 more reference docs
└── public/                 # Static assets

---

🎨 Customization

Add a New Theme

See: lib/types/theme.ts and components/wrap/ThemeProvider.tsx

// 1. Define theme in lib/types/theme.ts
export const THEMES = {
  custom: {
    name: 'Custom',
    gradient: 'from-pink-500 to-purple-500',
    particleColor: '#ff69b4'
  }
}

// 2. Add particle component in components/wrap/particles/
// 3. Update ThemeProvider.tsx to include new particles

Add a New Slide

See: components/wrap/slides/ and my_docs/COMPONENTS.md

# 1. Create new slide component
components/wrap/slides/NewSlide.tsx

# 2. Add to WrapDisplay.tsx
<SlideContainer totalSlides={15}>  # Increment count
  {/* ... existing slides */}
  <NewSlide data={wrapData} />
</SlideContainer>

# 3. Update navigation in lib/store/navigation.ts

Modify AI Personality Prompt

See: lib/services/groq.ts line 30-80

---

🗺️ Roadmap

• Comparison Mode - Compare two users side-by-side
• Team Wraps - Generate wraps for entire organizations
• Historical Data - View wraps from previous years
• Custom Date Ranges - Generate wraps for any time period
• More Themes - Retro, Neon, Minimalist, Glassmorphism
• Export Options - PDF, Video, High-res images
• Embeddable Widgets - Add DevWrapped badge to your README
• Multi-platform - GitLab, Bitbucket support

---

🤝 Contributing

Contributions are welcome! Please check out our issues or submit a PR.

Development Workflow

# 1. Create a feature branch
git checkout -b feature/amazing-feature

# 2. Make your changes
# See my_docs/ARCHITECTURE.md for code structure

# 3. Test locally
npm run dev
npm run build  # Ensure production build works

# 4. Submit PR
# Include screenshots for UI changes

---

📄 License

This project is licensed under the MIT License - see LICENSE file for details.

---

👨‍💻 Author

Akshad Jaiswal

• 🐙 GitHub: @akshadjaiswal
• 🐦 Twitter: @akshad_999
• 💼 LinkedIn: Akshad Jaiswal

---

🙏 Acknowledgments

• GitHub GraphQL API - Accurate contribution data
• Groq - Lightning-fast AI inference
• Supabase - Excellent developer experience
• Framer Motion - Smooth animations
• Next.js - Amazing React framework

---

Made with ❤️ by developers, for developers

⭐ Star this repo if DevWrapped made you smile!

🚀 Try DevWrapped •🐛 Report Issue