GitStats - Professional GitHub Analytics

A modern, data-driven dashboard that visualizes GitHub user profiles, repositories, and coding habits. Built with React, Vite, GraphQL, and Apollo Client.

---

🚀 Project Overview

GitStats transforms raw GitHub data into a beautiful, actionable dashboard. It is designed for recruiters, engineering managers, and developers who need a quick, visual summary of a GitHub profile.

✨ Key Features

• 📊 Smart Dashboard: A responsive grid layout that organizes data into logical sections (Profile, Stats, Charts, Repos).
• 📈 Advanced Visualization:
  • Language Distribution: Interactive Pie Chart showing top languages.
  • Popular Repos: Horizontal Bar Chart highlighting most-starred projects.
  • Engagement: Vertical Bar Chart for most-forked repositories.
• 🧠 Smart Search:
  • Remembers your Recent Searches for quick access.
  • Instant "Clear" functionality.
• 🎨 Professional UI:
  • "Slate & Indigo" Theme: A clean, enterprise-grade color palette.
  • Sticky Header: Glassmorphism effect for a modern feel.
  • Loading Skeletons: Smooth UI transitions without layout shifts.
• ⚡ High Performance: Powered by Apollo Client caching and GraphQL efficient data fetching.

---

⚙️ Architecture & Tech Stack

This project uses a modern stack to ensure performance, type safety, and maintainability.

1. The Data Layer: GraphQL & Apollo

Instead of multiple REST API calls, we use GraphQL to fetch all required data (User Profile + Repositories + Languages) in a single request.

• Apollo Client manages the connection, caching, and state.
• Custom Hook (useUser) abstracts the data fetching logic, keeping components clean.

2. The UI Layer: React & Tailwind

• Component-Based: Modular components (UserCard, StatsContainer, RepoList) make the code easy to maintain.
• Shadcn UI: We use accessible primitives (Cards, Buttons, Inputs) styled with Tailwind CSS for a consistent look.
• Recharts: A composable charting library used for all data visualizations.

3. State Management

• Local State: React useState handles form inputs and UI toggles.
• Persistent State: localStorage is used to save and retrieve "Recent Searches".
• Server State: Apollo Client handles caching server data.

---

🛠️ Getting Started

Prerequisites

• Node.js (v18+)
• GitHub Personal Access Token (Classic) with public_repo and read:user scopes.

Installation

1. Clone the repo

   git clone https://github.com/your-username/gitstats.git
   cd gitstats

2. Install Dependencies

   npm install

3. Configure Environment Create a .env.local file in the root directory:

   VITE_GITHUB_TOKEN=your_github_token_here

4. Run Development Server

   npm run dev

---

📂 Project Structure

src/
├── components/
│   ├── charts/       # Recharts visualizations (Pie, Bar)
│   ├── form/         # Search input & history logic
│   ├── repo/         # Repository lists & cards
│   ├── ui/           # Shadcn UI primitives (Button, Card, etc.)
│   └── user/         # Profile card & stats container
├── hooks/            # Custom hooks (useUser)
├── lib/              # Utilities (cn, formatters)
├── App.tsx           # Main layout & routing
├── queries.ts        # GraphQL query definitions
└── main.tsx          # Entry point & Apollo Provider

---

Developed with passion by

Tablawy