GitHub Profile War ⚔️

GitHub Profile War is a dynamic, head-to-head developer battle application. Enter two GitHub usernames and watch them battle it out based on their GitHub statistics, language usage, commit history, and more. With animated stats, real-time fetching, and a declared champion at the end, it's the ultimate way to settle the score on who the better developer is!

The project is already deployed on Vercel.

🚀 Features

• Head-to-Head Battles: Compare two GitHub profiles side-by-side.
• Detailed Statistics: Analyzes commits, repositories, stars, forks, and language usage.
• Interactive UI: Smooth animations, staggered stat reveals, and a dramatic winner overlay.
• Shareable Links: Generate a unique link to share the battle results with others.
• OAuth Integration: Log in with GitHub to boost your API rate limits and avoid hitting the unauthenticated ceiling.
• Smart Caching: Uses sessionStorage to instantly restore recent battle results without making redundant API calls.
• Error Handling: Graceful handling of invalid usernames, network issues, and rate limits.

⚔️ How It Works (The Scoring System)

When a battle is initiated, the application fetches the profiles, repositories, and recent events of both users from the GitHub API. They are then scored across 8 distinct categories, each acting as a "round" in the battle:

1. Star Power (⭐): Total number of stars across all owned public repositories.
2. Commit Streak (🔥): The longest consecutive-day commit streak calculated from recent push events.
3. Total Commits (💻): The total number of commits made by the user.
4. Language Diversity (🌐): The number of unique programming languages used across all owned repositories.
5. Social Reach (👥): The total number of followers the user has.
6. Fork Impact (🍴): Total number of forks generated by the user's owned repositories.
7. Repo Volume (📦): Total number of public repositories owned.
8. Veteran Status (⏱️): Account age (in years). Small differences in account age result in a tie.

The winner of each category gets 1 point. In the event of a tie in a category, both developers receive 0.5 points. The developer with the most points at the end of the 8 rounds is crowned the champion!

🏗 Architecture

The app is structured cleanly using modern web paradigms:

• State Management ($lib/stores/*.svelte.js): Centralizes battle state (usernames, loading states, OAuth tokens) and UI state using the new Svelte 5 runes ($state, $derived, $effect).
• Stats Engine & Utilities ($lib/utils/*): Pure functions that take raw GitHub API responses, compute derived stats (like commit streaks), handle the battle scoring logic, and manage language colors.
• API Fetching ($lib/utils/github.js): Handles communication with the GitHub API, including respecting rate limits and injecting OAuth tokens when available.
• UI Components ($lib/components/*): Reusable, animated UI pieces like the player cards, stat rows with staggered reveals, language charts, and the dramatic winner overlay.

🛠 Tech Stack

• Framework: SvelteKit (using Svelte 5 runes for state management)
• Styling: Tailwind CSS 4
• Build Tool: Vite
• Deployment: Vercel

⚙️ Local Development

Prerequisites

• Node.js (v18 or higher recommended)
• npm, yarn, or pnpm

Installation

1. Clone the repository (or download the source):

   git clone <repository-url>
   cd github-war

2. Install the dependencies:

   npm install

3. (Optional) Set up environment variables if necessary (e.g., for GitHub OAuth configuration) by copying the .env.example to .env and filling in the values.

Running the App

Start the development server:

npm run dev

The app will be available at http://localhost:5173. You can also open it directly in your browser using:

npm run dev -- --open

🏗 Building

To create an optimized production build of the app:

npm run build

You can preview the production build locally with:

npm run preview

📝 License

This project is open-source and available under the MIT License.