XamHub

Futuristic GitHub Developer Analytics Dashboard

Visualize, analyze, and compare any GitHub developer profile in seconds — no setup, no login required.

🚀 Live Demo · 🐛 Report Bug · ✨ Request Feature

---

📖 Table of Contents

• About The Project
• Features
• Tech Stack
• Getting Started
  • Prerequisites
  • Installation
  • Running Locally
• Project Structure
• Environment Variables
• Available Scripts
• Roadmap
• Contributing
• License
• Contact

---

🌟 About The Project

XamHub is an open-source GitHub analytics dashboard that turns raw GitHub data into beautiful, actionable insights. Whether you're a developer evaluating your own open source impact, comparing yourself to peers, or just curious — XamHub delivers it all instantly, with zero configuration.

Built with a cinematic neon glass-morphism UI, smooth Framer Motion animations, and powered entirely by the public GitHub REST API.

No account. No API key. No setup. Just results.

---

✨ Features

Feature	Description
🔍 Instant Profile Search	Search any GitHub username and get a full analytics dashboard in milliseconds
📊 Developer Analytics	Language breakdown, top repos, activity timeline, and contribution stats
🏆 Impact Score & Grade	Algorithmic open source grade based on stars, forks, commits, and activity
📄 Developer Resume Card	Generate and download a shareable PNG resume card from your GitHub profile
🔥 Roast Engine	Honest, funny system diagnostics of your GitHub habits and patterns
🧪 GitHub Addiction Meter	Measures commit frequency, late-night coding streaks, and weekend warrior scores
⚖️ Side-by-Side Comparison	Compare two GitHub profiles head-to-head across all key metrics
🏥 Repo Health Assessment	Quality scoring for each repository based on documentation, activity, and more
🎨 Cinematic UI	Neon glass-morphism design with smooth Framer Motion animations

---

🛠️ Tech Stack

Category	Technology
Framework	React 18 + TypeScript 5
Build Tool	Vite 5
Styling	Tailwind CSS 3
UI Components	shadcn/ui (Radix UI primitives)
Animations	Framer Motion
Charts	Recharts
Image Export	html2canvas
Data Fetching	TanStack Query v5
Routing	React Router v6
Data Source	GitHub REST API v3
Testing	Vitest + Testing Library

---

🚀 Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js v18.0.0 or higher
• npm v9+ or bun

node --version   # v18+
npm --version    # v9+

Installation

# 1. Clone the repository
git clone https://github.com/mdjameee400/xamhub.git

# 2. Navigate into the project folder
cd xamhub/starfall-analytics

# 3. Install dependencies
npm install

Running Locally

# Start the development server
npm run dev

Open http://localhost:5173 in your browser. The page hot-reloads on every save.

---

📁 Project Structure

starfall-analytics/
├── public/                      # Static assets (favicon, OG image)
├── src/
│   ├── components/              # All UI components
│   │   ├── ui/                  # shadcn/ui base primitives
│   │   ├── AddictionMeter.tsx   # GitHub Addiction Meter visualizer
│   │   ├── Analytics.tsx        # Language chart + activity timeline
│   │   ├── Background.tsx       # Animated neon background
│   │   ├── CompareView.tsx      # Side-by-side developer comparison
│   │   ├── ProfilePanel.tsx     # User profile card
│   │   ├── RepoGrid.tsx         # Repository grid with indicators
│   │   ├── RepoHealthAssessment.tsx  # Repo quality scoring
│   │   ├── ResumeCard.tsx       # Downloadable Developer Resume PNG
│   │   ├── RoastCard.tsx        # Roast engine diagnostics
│   │   ├── SearchBar.tsx        # Username search input
│   │   └── SkeletonDashboard.tsx # Loading skeleton UI
│   ├── hooks/
│   │   ├── useGitHub.ts         # Fetch & cache GitHub profile data
│   │   └── useCompare.ts        # Compare two GitHub profiles
│   ├── pages/
│   │   ├── Index.tsx            # Main dashboard page
│   │   └── NotFound.tsx         # 404 page
│   ├── services/
│   │   └── github.ts            # GitHub API calls (typed interfaces)
│   ├── utils/
│   │   ├── scoring.ts           # Impact score + freshness index
│   │   └── realityCheck.ts      # Roast engine + addiction calculator
│   ├── lib/
│   │   └── utils.ts             # Shared utilities (cn, etc.)
│   ├── App.tsx                  # Root app with routing
│   ├── main.tsx                 # Entry point
│   └── index.css                # Global styles + CSS tokens
├── .gitignore
├── components.json              # shadcn/ui configuration
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── vite.config.ts

---

🔐 Environment Variables

XamHub works fully without any API key. It uses the public GitHub REST API (unauthenticated, 60 req/hour per IP).

For higher rate limits, create a .env.local file in the project root:

# .env.local — ⚠️ DO NOT COMMIT THIS FILE
VITE_GITHUB_TOKEN=your_personal_access_token_here

⚠️ Warning: The .env.local file is already in .gitignore. Never commit tokens or secrets to version control.

To generate a GitHub token: Settings → Developer Settings → Personal Access Tokens

---

📜 Available Scripts

Command	Description
npm run dev	Start the local development server at localhost:5173
npm run build	Build the production bundle to ./dist
npm run preview	Preview the production build locally
npm run lint	Run ESLint across the entire codebase
npm test	Run tests once with Vitest
npm run test:watch	Run tests in interactive watch mode

---

🗺️ Roadmap

• GitHub profile analytics dashboard
• Language distribution chart
• Developer Impact Score & Grade
• Developer Resume Card (downloadable PNG)
• Roast Engine / System Diagnostics
• GitHub Addiction Meter
• Repo health assessment
• Side-by-side developer comparison
• GitHub Token support for higher API rate limits
• Contribution heatmap visualization
• Organization profile analytics
• Dark / Light theme toggle
• Share to social media improvements
• Public API endpoints

See the open issues for a full list of proposed features and known issues.

---

🤝 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also open an issue tagged enhancement.

# 1. Fork the repository on GitHub

# 2. Clone your fork
git clone https://github.com/<your-username>/xamhub.git
cd xamhub/starfall-analytics

# 3. Create your feature branch
git checkout -b feat/amazing-feature

# 4. Make your changes, then commit
git add .
git commit -m "feat: add some amazing feature"

# 5. Push to your branch
git push origin feat/amazing-feature

# 6. Open a Pull Request

Contribution Guidelines

• Follow the existing TypeScript + Tailwind code patterns
• Use Conventional Commits — feat:, fix:, docs:, chore:
• Run npm run lint and npm test before submitting a PR
• Keep PRs focused — one feature or fix per PR
• Never commit .env files, API keys, or secrets

---

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

📬 Contact

Md Jamee — @mdjameee400

Project Link: https://github.com/mdjameee400/xamhub

---

If XamHub helped you or you think it's cool, please consider giving it a ⭐ — it helps the project grow!

_{Built with ❤️ and a lot of late-night commits.}