GitHub & LeetCode Stats Showcase

A premium, modern web application to display your GitHub and LeetCode statistics in a single, beautiful dashboard. Built with React, Tailwind CSS, and Node.js.

🚀 Features

• Powered by MCP Integrations:
  • Utilizes Model Context Protocol (MCP) concepts to aggregate data from multiple developer platforms.
  • Acts as a central "Context Server" normalizing data from GitHub and LeetCode into a unified schema.
• Unified Dashboard: View GitHub and LeetCode stats side-by-side.
• GitHub Insights:
  • Profile overview (Followers, Following, Bio).
  • Contribution Heatmap: Visualizes daily activity using GraphQL data sources.
  • Top Repositories: detailed metrics via the GitHub MCP-style integration.
• LeetCode Statistics:
  • Real-time problem-solving metrics fetched via custom connectors.
• Modern UI/UX:
  • Dark Mode: Sleek dark theme using GitHub's color palette.
  • Responsive Design: Fully responsive layout for mobile and desktop.

🛠️ Tech Stack

Frontend

• React: Core framework for building the user interface.
• Vite: Next-generation frontend tooling for fast development and building.
• Tailwind CSS: Utility-first CSS framework for rapid and custom styling.

Backend (The "MCP" Layer)

• Node.js & Express: Serves as the aggregator, handling secure token management and API routing.
• GitHub Connector: Uses the GitHub GraphQL API to retrieve deep context about user activity and repositories.
• LeetCode Connector: Interfaces with the LeetCode GraphQL API to fetch real-time problem-solving stats.

⚙️ Prerequisites

• Node.js (v18 or higher recommended)
• GitHub CLI (gh): Required for secure authentication to the GitHub API.
  • Install: https://cli.github.com/
  • Login: Run gh auth login in your terminal.

📦 Installation & Setup

1. Clone the Repository

   git clone https://github.com/karthikkondagurla/dev-dashboard.git
   cd dev-dashboard

2. Install Dependencies

   • Backend:

     npm install

   • Frontend:

     cd client
     npm install

3. Start the Application

   You need to run both the backend (API) and frontend (UI).

   • Backend (Terminal 1):

     # From root directory
     node server.js

     Server runs on http://localhost:3000

   • Frontend (Terminal 2):

     # From client directory
     cd client
     npm run dev

     App runs on http://localhost:5173

4. Open in Browser Visit http://localhost:5173 to see your dashboard!

📂 Project Structure

├── client/                 # React Frontend
│   ├── src/
│   │   ├── components/     # Reusable UI components (Heatmap, StatsGrid, etc.)
│   │   ├── App.jsx         # Main application logic
│   │   └── index.css       # Tailwind directives
│   ├── tailwind.config.js  # Tailwind configuration (custom colors)
│   └── vite.config.js      # Vite config (API proxy)
├── public/                 # (Legacy static files)
├── server.js               # Express API Server
├── query.graphql           # GitHub GraphQL query
├── leetcode_query.graphql  # LeetCode GraphQL query
└── package.json            # Backend dependencies

🔒 Security Note

This application uses your local gh CLI credentials to authenticate with GitHub. The token is fetched securely at runtime and is never hardcoded or stored in the repository.

---

Created by Karthik Kondagurla