Forem: Hasan Ayvaz

I Built a GitHub Profile Viewer With AI-Powered Developer Insights

Hasan Ayvaz — Fri, 06 Mar 2026 09:35:11 +0000

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

mockapi-local: Get a Full REST API From a JSON Schema in One Command

Hasan Ayvaz — Fri, 06 Mar 2026 09:27:50 +0000

Every frontend developer knows the pain.

You're building a new feature. The backend isn't ready yet. So you either wait, write a bunch of hardcoded JSON files, or spin up a fake server that takes an hour to configure. Every time.

I got tired of this loop, so I built mockapi-local — a CLI tool that takes a JSON schema file and instantly gives you a fully working REST API with realistic fake data.

What It Does

You describe your data model in a schema.json file:

{
  "resources": {
    "users": {
      "count": 20,
      "fields": {
        "id": "uuid",
        "name": "fullName",
        "email": "email",
        "role": { "type": "enum", "values": ["admin", "user", "moderator"] },
        "createdAt": "pastDate"
      },
      "relations": {
        "posts": "posts"
      }
    },
    "posts": {
      "count": 50,
      "fields": {
        "id": "uuid",
        "title": "sentence",
        "body": "paragraph",
        "userId": { "type": "ref", "resource": "users" }
      }
    }
  },
  "config": {
    "delay": 200,
    "errorRate": 0.05
  }
}

Run one command:

mockapi-local serve schema.json --port 3000

And you instantly get:

GET    /users              → 20 fake users
POST   /users              → create a user
GET    /users/:id          → single user
PUT    /users/:id          → full update
PATCH  /users/:id          → partial update
DELETE /users/:id          → delete
GET    /users/:id/posts    → relational query
GET    /_spec              → OpenAPI 3.0 spec

No database. No config. No boilerplate.

It's Not Just for Simple Use Cases

I wanted something that could model real domains — not just the typical "users and posts" example. Here's a crypto exchange schema in action:

{
  "resources": {
    "coins": {
      "count": 20,
      "fields": {
        "id": "uuid",
        "symbol": { "type": "enum", "values": ["BTC", "ETH", "SOL", "ADA"] },
        "currentPrice": { "type": "number", "min": 1, "max": 65000 },
        "marketCap": { "type": "number", "min": 1000000, "max": 1200000000000 },
        "rank": { "type": "number", "min": 1, "max": 20 }
      }
    },
    "wallets": {
      "count": 30,
      "fields": {
        "id": "uuid",
        "userId": { "type": "ref", "resource": "users" },
        "coinId": { "type": "ref", "resource": "coins" },
        "balance": { "type": "number", "min": 0, "max": 10 }
      }
    }
  }
}

The ref field type ensures that every userId in wallets points to a real user ID — relational integrity out of the box.

Key Features

60+ field types powered by faker.js — uuid, email, fullName, pastDate, bitcoinAddress, iban, jwt, and many more. If a type isn't in the built-in list, it auto-resolves from faker.js modules. It will never throw an error on an unknown type.

Relational integrity — ref fields always reference real IDs from other resources. Resources are generated in dependency order automatically.

Full CRUD + query params — every resource gets pagination (?page=1&limit=10), filtering (?role=admin), and sorting (?sort=name&order=desc) built in.

OpenAPI 3.0 spec — hit GET /_spec and get a full auto-generated spec you can paste into Swagger UI or Postman.

Simulate real conditions — configure response delay and random error rate in the schema to test how your app handles slow or flaky APIs.

Graceful shutdown — single Ctrl+C stops the server cleanly.

vs json-server

The most common alternative is json-server, which is great. But it requires you to write the mock data yourself and doesn't generate it. mockapi-local takes the opposite approach — you define the shape, it handles the data.

Feature	mockapi-local	json-server
Data Generation	✅ Auto (Faker)	❌ Manual JSON
Schema-Driven	✅ Yes	❌ No
Relational Integrity	✅ Automatic	⚠️ Manual
OpenAPI Spec	✅ Auto-generated	❌ No
Latency Simulation	✅ Configurable	❌ No
Error Rate Simulation	✅ Configurable	❌ No
Graceful Shutdown	✅ Yes	❌ No

Getting Started

npm install -g mockapi-local

# Generate a sample schema
mockapi-local init

# Start the server
mockapi-local serve schema.json --port 3000

That's it. Your mock API is running at http://localhost:3000.

📦 npm: npmjs.com/package/mockapi-local
⭐ GitHub: github.com/Hasanayvzz/mockapi-local

If you find it useful, a star on GitHub goes a long way. And if you run into issues or have ideas for new field types or features, open an issue — contributions are very welcome. 🙌