A real-time dashboard tracking the global developer ecosystem: salaries, AI risk, hot niches, hiring signals, and live activity across 44+ countries
DevPulse is a live developer ecosystem intelligence dashboard. It pulls real data from GitHub, Remotive, HackerNews, Dev.to, and Stack Overflow and presents it in a sleek, terminal-aesthetic UI giving developers a pulse on what's happening across the global tech landscape right now.
Whether you want to know which roles are being eaten by AI, what niches are paying the most, or which dev hubs are most active worldwide it's all here, live.
- Dotted SVG world map with per-country developer activity intensity coloring
- 26 dev hub markers (San Francisco, Bangalore, Karachi, Nairobi, Tel Aviv, and more) rendered as interactive triangle pins
- Hover any hub for a rich tooltip showing: developer count, GitHub pushes/day, public repos, top language, top framework, AI adoption %, remote worker %, avg salary, and YoY growth all with live-incrementing numbers
- Pulsing animations on top-10 most active countries
- Layered canvas + SVG rendering for performance (static dots on canvas, animated dots in SVG)
- GitHub Activity live commits/sec and new job postings/min, both animating in real time
- AI Tool Adoption animated progress bar showing the % of devs using AI coding assistants, plus Stack Overflow questions/hr
- AI Replacement Risk flip cards for 8 developer roles showing automation risk % with color-coded severity. Tap any card to flip it and get personalized upskilling advice
- Hot Niches · Demand Index ranked demand bars for the hottest specializations (AI/LLM, RAG, DevOps, Cybersecurity, Web3, etc.) with YoY growth and avg freelance rates
- Live-animating median salaries for 8 roles (AI/ML Engineer → Frontend Developer) with YoY trend indicators, overlaid directly on the map
- Hacker News top 5 stories fetched live with score, author, comment count, and time ago
- GitHub Trending top 5 repos by stars with language color dots, description, and topic tags
- Dev.to Articles top 6 trending articles with reactions, read time, and tags
- Scrolling live job feed at the bottom of the page, pulled from Remotive's remote jobs API pauses on hover, shows category, company, and salary when available
Data Sources (live APIs) Next.js App Router
───────────────────── ──────────────────
GitHub Search API ──► fetchGithubTrending()
Remotive Jobs API ──► fetchRemotiveJobs()
HackerNews Firebase API ──► fetchHNTopStories()
Dev.to API ──► fetchDevToArticles()
Static / Curated Data Components
───────────────────── ──────────
dev-data.ts ──► DottedMap (world map + tooltips)
dotted-map-data.json ──► StatsDisplay (all stat cards)
cities-data.json ──► JobTicker (scrolling jobs)
LiveFeed (HN + GitHub + Dev.to)
API responses are cached via Next.js revalidate jobs and articles refresh every 5 minutes, GitHub trending every 10 minutes, HN stories every 2 minutes. The live counters (commits/sec, devs online, etc.) are client-side animated from curated base values with realistic variance.
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router) + React 19 |
| Language | TypeScript 5 |
| Styling | Tailwind CSS v4 |
| Animation | Framer Motion 12 |
| Map Rendering | d3-geo (Mercator projection) |
| Map Data | Custom dotted-map JSON + TopoJSON |
| Icons | Lucide React |
| Fonts | Geist Sans + Geist Mono (Google Fonts) |
| Package Manager | pnpm |
devpulse/
├── app/
│ ├── components/
│ │ ├── AIRiskCard.tsx # Flip card with risk bar + upskilling advice
│ │ ├── DottedMap.tsx # World map: canvas dots + SVG animations + hub markers + tooltips
│ │ ├── JobTicker.tsx # Scrolling live job feed (Remotive API)
│ │ ├── LiveFeed.tsx # HN + GitHub Trending + Dev.to columns
│ │ ├── MapContainer.tsx # Dynamic import wrapper (SSR disabled for map)
│ │ └── StatsDisplay.tsx # All stat cards, counters, salary rows, AI risk grid
│ ├── data/
│ │ ├── dev-data.ts # Country activity, salaries, AI risk, hot niches, hub markers
│ │ ├── cities-data.json # City coordinates for dot placement
│ │ ├── country-data.ts # Country metadata
│ │ └── dotted-map-data.json # Pre-computed dot positions per country
│ ├── lib/
│ │ └── api.ts # All external API fetch functions
│ ├── globals.css # Design system CSS variables + animations
│ ├── layout.tsx # Root layout with metadata + fonts
│ └── page.tsx # Main dashboard page
├── components/
│ └── ui/ # shadcn/ui component library
├── hooks/ # Custom React hooks
├── lib/
│ └── utils.ts # Utility functions (cn, etc.)
├── public/
│ └── logo.svg # DevPulse logo
└── types/
└── react-simple-maps.d.ts # Type declarations
- Node.js 18+
- pnpm (recommended)
# Clone the repo
git clone https://github.com/MuhammadTanveerAbbas/devpulse-map.git
cd devpulse-map
# Install dependencies
pnpm install
# Start the dev server
pnpm dev
# Open http://localhost:3000No environment variables required all APIs used are public.
| Command | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build for production |
pnpm start |
Start production server |
pnpm lint |
Run ESLint |
One-click deploy on Vercel no env vars needed:
This project wouldn't exist without these excellent tools and APIs:
| Tool / Service | What it powers |
|---|---|
| Next.js | App framework, server components, API caching |
| React | UI rendering |
| Tailwind CSS | All styling |
| Framer Motion | Animations pixel flip transitions, bar fills, card flips |
| d3-geo | Mercator map projection for dot and marker placement |
| Lucide React | Icons |
| Geist Font by Vercel | The monospace terminal aesthetic |
| shadcn/ui | Base UI component primitives |
| GitHub Search API | Trending repositories |
| Remotive API | Live remote job listings |
| HackerNews Firebase API | Top stories feed |
| Dev.to API | Trending developer articles |
| Stack Overflow | Question volume data reference |
- Animated dotted world map with 44+ countries
- 26 dev hub markers with rich hover tooltips
- Live-incrementing stat counters
- AI replacement risk flip cards with upskilling advice
- Hot niches demand index
- Salary by role with YoY trends
- Live feed: HN + GitHub Trending + Dev.to
- Scrolling live job ticker
- Dark / light theme toggle
- Country detail drill-down page
- Historical trend charts
- Shareable snapshot / OG image export
PRs are welcome. Fork the repo, create a branch, and open a pull request.
git checkout -b feature/your-idea
git commit -m 'Add your idea'
git push origin feature/your-ideaMIT see LICENSE for details.
Built by Muhammad Tanveer Abbas SaaS Developer · Building production-ready MVPs in 14–21 days
If DevPulse gave you value, a ⭐ goes a long way