Why I Built This
Every week I find myself doing the same thing: jumping between GitHub search tabs, bookmarking repos in random browser folders, losing track of that promising library I saw last Tuesday.
I wanted a single place to discover, evaluate, and save open source projects - specifically in the mobile and cross-platform space. So I built the GitHub Repos Board directly into Dan Tech Academy.
It is not just a GitHub search wrapper. It is a developer tool designed around how I actually explore open source.
What You Can Do
Filter by Ecosystem
Five topic filters cover the ecosystems I write about most:
- Kotlin - Android libraries, KMP projects, Compose tooling
- Mobile - Cross-platform tools, SDKs, device APIs
- React Native - Navigation, state management, native modules
- Flutter - Widgets, plugins, state solutions
- Swift - iOS frameworks, SwiftUI components, Apple platform tools
Each topic queries GitHub's search API with topic: qualifiers and a minimum 50-star threshold to filter out noise.
Repo Detail Sheet
Click any card to open a detail panel. On desktop it slides in from the right. On mobile it rises from the bottom.
Inside you get:
- README preview rendered with GitHub Flavored Markdown - tables, task lists, code blocks all work
- Activity sparkline showing 52 weeks of commit history as a pure SVG chart
- Top contributors with avatar display
- Quick actions - favorite the repo, copy the
git cloneURL, or jump to GitHub
The detail data is fetched through a server-side API route that aggregates three GitHub endpoints into one call. README content is truncated to 10KB to keep things fast.
Favorites System
Hit the heart icon on any card to save it. Your favorites persist in localStorage with full metadata - not just IDs.
Open the favorites drawer to review your collection. Sort by date added, star count, or name. Remove individual items or clear everything.
When you are ready to share, export in three formats:
- Markdown - awesome-list style, ready to paste into a README or Gist
- JSON - structured data for programmatic use
- Shareable URL - hash-encoded link that encodes up to 50 repos
Keyboard Navigation
The board is fully keyboard-driven:
| Key | Action |
|---|---|
j / k | Navigate between cards |
Enter | Open detail sheet |
f | Toggle favorite |
/ | Focus search |
Esc | Close detail sheet or drawer |
No mouse required. The focused card gets a visible ring indicator and auto-scrolls into view.
Deep Links
Every state is URL-encoded. Filter by topic, sort, search - the URL updates. Open a detail sheet and the URL adds ?repo=owner/name. Share that link and the recipient lands on exactly what you see.
Under the Hood
For the technically curious:
- Next.js 15 App Router with server-side API routes proxying GitHub's Search API
- SWR for client caching with
keepPreviousDatato prevent layout shifts during filter changes - Framer Motion for enter/exit animations with
prefers-reduced-motionsupport - react-markdown + remark-gfm for README rendering (dynamically imported to reduce initial bundle)
- Pure SVG sparkline - zero chart library dependencies
- GitHub API aggregation - the detail route fetches README, commit activity, and contributors in parallel via
Promise.allSettled, handles GitHub's 202 "computing" response with auto-retry
The entire feature follows the site's zero-radius, zero-border design system. Visual hierarchy comes from background color layers, not decorative elements.
Try It
Head to /github-repos and start exploring.
If you find a project worth sharing, use the export feature to generate a curated list. I use this tool daily to stay current with the mobile open source ecosystem - hopefully it is useful for you too.