Devboard lets you search any GitHub user and instantly see their stats, repos, activity heatmap, and an AI-generated developer persona — no login required.
tags: react, typescript, github, ai
cover_image:
I wanted a cleaner way to look up GitHub developers — not just the raw profile page, but something that actually gives you a quick sense of how someone codes. So I built Devboard.
It's a GitHub profile viewer with a dark-themed interface, real-time data from the public GitHub API, and a couple of AI features that I think make it genuinely useful.
🔗 Live demo: devboard-nu.vercel.app
⭐ GitHub: github.com/Hasanayvzz/devboard
What It Does
Type any GitHub username and you get:
- Profile stats — stars earned, forks, public repo count
- Top languages — a stacked bar chart showing language breakdown across all repos
- Activity heatmap — 365-day contribution graph, styled like GitHub's own calendar
- Repository browser — filter by text, sort by stars / recency / forks / name, paginated
- Commit feed — most recent public push events in real time
- AI Developer Persona — a short professional summary generated from their language usage and repos
- AI Repo Summaries — hit "Analyze" next to any repo for a plain-English breakdown
All of this works without any login or authentication. Just a username.
The AI Features
This was the most interesting part to build. Devboard uses Google Gemini via the @google/genai SDK for two things:
Developer Persona
When you load a profile, Devboard can analyze the user's top languages and repository list and generate a concise summary like:
"Hasanayvzz is a fullstack developer specializing in JavaScript/TypeScript, building interactive web applications and developer tools. Their projects demonstrate proficiency in React, Redux, and backend API development with Go & mock servers."
It's not just a template — it actually reads the repo names, descriptions, and language weights to produce something that feels accurate.
Repo Summaries
Every repo has an "Analyze" button. Click it and you get a 15-word breakdown of what the project does and what tech it uses. Useful when you're quickly scanning someone's work and don't want to click into every repo.
Tech Stack
| Layer | Choice |
|---|---|
| Framework | React 19 + TypeScript + Vite |
| Styling | SCSS + Radix UI + Lucide Icons |
| AI | Google Gemini (@google/genai) |
| Data | Public GitHub REST API |
No backend. Everything runs client-side against public APIs.
One thing I liked about this approach: the GitHub REST API is surprisingly rich for public data. You get contribution events, language breakdowns, repo metadata — all without OAuth. The only external key you need is for the AI features.
Getting Started
git clone https://github.com/hasanayvzz/devboard.git
cd devboard
yarn install
cp .env.example .env
Add your Gemini API key to .env:
VITE_GEMINI_API_KEY=your_actual_api_key_here
Then:
yarn dev
Open http://localhost:5173 and search any GitHub username.
It's a fairly simple project but I learned a lot about working with the GitHub REST API and integrating generative AI into a real UI in a way that feels useful rather than gimmicky.
If you try it out, I'd love to hear what you think — and if you want to contribute or have ideas, the repo is open. 🙌
🔗 Live demo: devboard-nu.vercel.app
⭐ GitHub: github.com/Hasanayvzz/devboard
Top comments (0)