AI GitHub Profiler

A developer-focused web application that analyzes GitHub profiles using AI-powered insights. Built with a monochromatic terminal-inspired design, it provides comprehensive developer analytics through structured analysis of GitHub activity, repositories, and contribution patterns.

Features

• AI-Powered Analysis: Uses Google Gemini API to generate structured insights about:

  • Developer background and expertise summary
  • Technical skills with technologies and evidence
  • Domain expertise areas
  • Activity patterns and contribution metrics
  • Repository statistics and language distribution

• Comprehensive Profile Insights:

  • Repository statistics (total repos, stars, averages)
  • Language distribution with visual charts
  • Top repositories by popularity
  • Contribution timeline analysis
  • Most active repositories
  • Skills breakdown with indicators and evidence

• Developer Hub Design:

  • Monochromatic dark theme
  • Terminal-inspired UI with monospace fonts
  • Clean, minimal interface
  • Programmatic aesthetic

• Real-time Data: Fetches live data from GitHub REST API

Architecture Flow

Note: The flowchart below renders correctly on GitHub. Some markdown previewers may show the raw Mermaid syntax.

flowchart TD
    A["User enters GitHub username"] --> B["Frontend: React App"]
    B --> C["Backend API: Express Server"]
    C --> D["GitHub API"]
    C --> E["Gemini AI API"]
    D --> F["User Profile Data"]
    D --> G["Repository Data"]
    D --> H["Activity Events"]
    F --> I["Combine Data"]
    G --> I
    H --> I
    I --> E
    E --> J["Structured Insights"]
    J --> K["Technical Skills"]
    J --> L["Domain Expertise"]
    J --> M["Activity Analysis"]
    J --> N["User Insights"]
    K --> O["Frontend Display"]
    L --> O
    M --> O
    N --> O
    O --> P["Profile Dashboard"]

Loading

Simple Flow:

User Input → Frontend → Backend API
                      ↓
            ┌─────────┴─────────┐
            ↓                     ↓
      GitHub API            Gemini AI API
            ↓                     ↓
      Profile/Repos/      Structured Insights
      Activity Data            ↓
            └─────────┬─────────┘
                      ↓
            Frontend Display

UI Snapshots

Hero Section

Profile Overview

Insights & Activity

Skills Breakdown

Contribution Analysis

Tech Stack

Backend

• Runtime: Node.js with Express
• Language: TypeScript
• AI: Google Gemini API (gemini-3-flash-preview) with structured JSON outputs
• Data Source: GitHub REST API

Frontend

• Framework: React 18 with Vite
• Language: TypeScript
• Styling: Tailwind CSS
• Fonts: Inter (sans-serif), JetBrains Mono (monospace)
• Theme: Dark monochromatic with terminal-inspired design

Setup

Prerequisites

• Node.js 18+ and npm
• Google Gemini API Key

Backend Setup

1. Navigate to backend directory:

cd backend

2. Install dependencies:

npm install

3. Set up environment variables: Create a .env file in the root directory (already exists) with:

GEMINI_API_KEY=your_gemini_api_key_here
PORT=3001

4. Start the backend server:

npm run dev

The backend will run on http://localhost:3001

Frontend Setup

1. Navigate to frontend directory:

cd frontend

2. Install dependencies:

npm install

3. (Optional) Set up environment variables: Create a .env file in the frontend directory:

VITE_API_URL=http://localhost:3001

4. Start the frontend dev server:

npm run dev

The frontend will run on http://localhost:5173

Usage

1. Start both backend and frontend servers (see Setup above)
2. Open http://localhost:5173 in your browser
3. Enter a GitHub username in the search bar (e.g., octocat)
4. View comprehensive AI-generated insights including:
   • Profile overview and statistics
   • AI-generated about section
   • Activity insights (commits, PRs, most active repos)
   • Technical and domain skills breakdown
   • Interests and topics
   • Contribution analysis with repository statistics
   • Language distribution and top projects

Project Structure

github-profiler/
├── backend/              # Express API server
│   ├── src/
│   │   ├── routes/       # API routes
│   │   ├── services/    # GitHub & Gemini services
│   │   ├── types/       # TypeScript types
│   │   └── server.ts    # Express server
│   └── package.json
├── frontend/             # React + Vite app
│   ├── src/
│   │   ├── components/  # React components
│   │   ├── services/    # API client
│   │   ├── types/      # TypeScript types
│   │   └── App.tsx      # Main app
│   └── package.json
├── .env                 # Environment variables
└── README.md

API Endpoints

GET /api/profile/:username

Fetches GitHub profile data and generates AI insights.

Response:

{
  "user": {
    "login": "username",
    "name": "Full Name",
    "bio": "Bio text",
    "avatar_url": "https://...",
    "public_repos": 42,
    "followers": 100,
    ...
  },
  "repos": [
    {
      "name": "repo-name",
      "description": "Description",
      "language": "TypeScript",
      "stargazers_count": 50,
      "forks_count": 10,
      ...
    }
  ],
  "insights": {
    "userInsights": {
      "about": "AI-generated summary",
      "workingStyle": {
        "explorationFocus": 75,
        "executionFocus": 60
      },
      "interests": ["machine-learning", "web-development"],
      "recentInterests": ["rust", "typescript"]
    },
    "technicalSkills": {
      "skills": [
        {
          "name": "Full-Stack Development",
          "technologies": ["React", "Node.js"],
          "indicators": ["Built multiple full-stack apps"],
          "evidence": ["repo1", "repo2"]
        }
      ]
    },
    "domainSkills": { ... },
    "activityInsights": {
      "thisYear": {
        "commits": 150,
        "pullRequests": 25
      },
      "mostActiveRepos": [
        { "name": "repo-name", "commitCount": 45 }
      ]
    }
  },
  "languages": {
    "TypeScript": 15,
    "Python": 10,
    ...
  },
  "topics": ["react", "typescript", ...]
}

Development

Backend

• npm run dev - Start dev server with hot reload
• npm run build - Build for production
• npm start - Start production server

Frontend

• npm run dev - Start dev server
• npm run build - Build for production
• npm run preview - Preview production build

Design Philosophy

The application follows a developer hub aesthetic:

• Monochromatic: Dark theme with grayscale colors
• Terminal-inspired: Uses monospace fonts and command-line style elements
• Minimal: Clean interface focused on data and insights
• Programmatic: Developer tool aesthetic, not a marketing site

Notes

• Uses public GitHub API endpoints (no authentication required)
• Gemini API generates structured insights using JSON Schema
• Rate limits: GitHub API allows 60 requests/hour for unauthenticated requests
• The app analyzes up to 100 repositories per user for performance
• AI insights are generated based on repository data and activity patterns

Project Structure

github-profiler/
├── backend/              # Express API server
│   ├── src/
│   │   ├── routes/       # API routes
│   │   ├── services/     # GitHub & Gemini services
│   │   ├── types/        # TypeScript type definitions
│   │   └── server.ts     # Express server entry point
│   ├── package.json
│   └── tsconfig.json
├── frontend/             # React + Vite application
│   ├── src/
│   │   ├── components/   # React components
│   │   │   ├── HeroSection.tsx
│   │   │   ├── SearchBar.tsx
│   │   │   ├── ProfileHeader.tsx
│   │   │   ├── AboutSection.tsx
│   │   │   ├── InsightsSection.tsx
│   │   │   ├── SkillsSection.tsx
│   │   │   ├── InterestsSection.tsx
│   │   │   ├── ContributionAnalysis.tsx
│   │   │   └── LinksSection.tsx
│   │   ├── services/     # API client
│   │   ├── types/        # TypeScript types
│   │   └── App.tsx       # Main application component
│   ├── package.json
│   └── vite.config.ts
├── .env                  # Environment variables (GEMINI_API_KEY)
└── README.md