Question

Github Dashboard

Project Link - https://github.com/LegedsDaD/Github-Dashboard

A modern, customizable GitHub profile dashboard generator built with React, TypeScript, Vite, Tailwind CSS, and Vercel Serverless Functions.

Generate beautiful SVG GitHub dashboards displaying your profile information, repository statistics, programming languages, and top repositories. Embed the generated dashboard directly into your GitHub profile README or any Markdown-supported website.

---

Status

Item	Status
Build	Passing
Deployment	Live
Version	v1.0.0
License	MIT

---

Live Demo

Website

https://github-dashboard-sooty.vercel.app/

API Example

https://github-dashboard-sooty.vercel.app/api/dashboard?username=octocat

---

Quick Start

Option 1 (Recommended)

Visit the website and generate your dashboard without writing any URLs manually.

https://github-dashboard-sooty.vercel.app/

The generator lets you:

• Enter your GitHub username
• Choose from multiple themes
• Enable or disable dashboard sections
• Preview your dashboard instantly
• Copy the generated Markdown with one click
• Copy the SVG URL
• Customize your dashboard without editing query parameters manually

This is the easiest way to create your dashboard.

---

Option 2 (Manual)

Embed the dashboard directly in your README.

![GitHub Dashboard](https://github-dashboard-sooty.vercel.app/api/dashboard?username=YOUR_USERNAME)

Using a theme:

![GitHub Dashboard](https://github-dashboard-sooty.vercel.app/api/dashboard?username=YOUR_USERNAME&theme=midnight)

Example:

![GitHub Dashboard](https://github-dashboard-sooty.vercel.app/api/dashboard?username=torvalds&theme=forest)

---

Features

• GitHub Profile Card
• Repository Statistics
• Additional GitHub Metrics
• Top Programming Languages
• Most Starred Repositories
• Multiple Built-in Themes
• Responsive Dashboard Generator
• SVG Generation API
• GitHub README Ready
• Copy Markdown Support
• Live Preview
• Section Visibility Controls
• Highly Customizable

---

Theme Gallery

Below are live examples of every available theme.

Midnight

---

Ocean

---

Sunset

---

Forest

---

Dracula

---

Nord

---

Rosé Pine

---

Catppuccin

---

GitHub

---

Mono

---

API

Endpoint

/api/dashboard

Parameters

Parameter	Description	Required
username	GitHub username	Yes
theme	Dashboard theme	No
sections	Comma-separated list of sections	No

Example:

/api/dashboard?username=octocat

With theme:

/api/dashboard?username=octocat&theme=forest

With custom sections:

/api/dashboard?username=octocat&sections=profile,stats,languages,repositories

---

Available Sections

You can choose which sections appear on your dashboard.

• Profile
• Statistics
• Additional Statistics
• Languages
• Top Repositories

Example:

sections=profile,stats,languages

If a section is omitted, it will not be displayed.

---

Available Themes

• Midnight
• Ocean
• Sunset
• Forest
• Dracula
• Nord
• Rosé Pine
• Catppuccin
• GitHub
• Mono

---

Project Structure

api/
    dashboard.js

src/
    App.tsx
    main.tsx
    config.ts
    themes.ts
    utils/

public/

package.json
vite.config.ts
vercel.json

---

Development

Clone the repository.

git clone https://github.com/YOUR_USERNAME/Github-Dashboard.git

Install dependencies.

npm install

Start the development server.

npm run dev

Build the project.

npm run build

Preview the production build.

npm run preview

---

Roadmap

Feature	Status
SVG Dashboard Generator	Complete
Dashboard Builder	Complete
Theme Support	Complete
Section Toggle	Complete
GitHub API Integration	Complete
Markdown Generator	Complete
More Themes	Planned
PNG Export	Planned
PDF Export	Planned
Dashboard Templates	Planned

---

Contributing

Contributions are welcome.

1. Fork the repository.
2. Create a feature branch.
3. Commit your changes.
4. Push the branch.
5. Open a Pull Request.

---

License

This project is licensed under the MIT License.

---

Acknowledgements

Built with:

• React
• TypeScript
• Vite
• Tailwind CSS
• GitHub REST API
• Vercel Serverless Functions