Winter days continue to be cold in Japan. With poor circulation, my fingertips get so cold that typing on a keyboard becomes painful.
By the way, everyone, don't you find GitHub's home screen difficult to use?
I use GitHub every day, but honestly, I'm dissatisfied with the UX of the home screen.
- The Copilot promotional area is intrusive and makes scrolling annoying
- Too many clicks required to reach my own profile
- Checking PRs and Issues isn't intuitive
Isn't it strange that a platform for developers isn't user-friendly for developers?
Born from this frustration is GitJin, which I'm introducing today.
✨ What is GitJin? The "Fastest" GitHub Dashboard for Accessing Information
GitJin is a web app that displays repositories, PRs, and Issues in an easy-to-read single screen just by logging in with your GitHub account.
https://gitjin.com/
🎯 Three Problems GitJin Solves
Scattered Information
On GitHub, repositories, PRs, and Issues are on separate pages.
GitJin consolidates them into one screen for speedy access without page transitions!Slow Display Speed
Initial display is faster than GitHub, with parallel API requests for a comfortable experience!
- Privacy Data is fetched from GitHub API on-demand. Only minimal necessary information is stored.
🔧 Tech Stack Overview
For personal projects, being able to "build quickly" is crucial. This time I built around Next.js, which I've been obsessed with recently.
Why I Chose It
- Intuitive file-based routing for fast implementation
- Robust development with TypeScript
- Complete frontend and backend in one framework
For personal development and quickly shaping products, I think Next.js is the only choice.
🔐 Authentication
I used better-auth for user authentication.
Previously I used Auth.JS (formerly NextAuth), but better-auth is more intuitive with simpler implementation. Switching was the right decision.
📚 Other Key Libraries
- octokit: Communication with GitHub API
- drizzle: Lightweight and comfortable as database ORM
- @primer/octicons-react: Using official GitHub icons
💡 Key Features I'm Proud Of
⚡ Improved Perceived Speed with Skeleton Display
GitJin's biggest feature is its fast initial display.
The screen appears faster than GitHub, and skeleton states visualize loading while data is being fetched.
Implementation Points:
- Start API requests after initial rendering
- Parallel execution of repository, Issue, and PR requests
- Sequential display as data arrives, dramatically improving perceived speed
I focused on UI design that doesn't make users feel "loading."
🎨 Calculated Menu Close Tolerance
The floating menu in the bottom right intentionally has a wide tolerance area.
In typical implementations, the menu closes immediately when the mouse leaves the menu area, but GitJin allows a margin so it won't close from slight mouse movements.
It's a small detail, but it contributes to a stress-free user experience.
🔤 Web Font Flickering Prevention
const geistMono = Noto_Sans_JP({
weight: ["400"],
subsets: ["latin"],
variable: "--font-geist-mono",
display: "swap", // 👈 Display text even while loading
});
I'm using Noto Sans JP, but by specifying display: "swap", text displays with a fallback font even while the font is loading.
This prevents flickering on initial display without compromising UX.
(Side note: I didn't notice the class name is geistMono... I'll fix that later 😅)
🚀 Future Development
GitJin still has plenty of room for improvement:
- Enhanced notification features
- Customizable dashboard layout
- PR/Issue filtering functionality
If you have feedback or suggestions, please let me know!
🎉 Conclusion
"Build what you want" - that's the appeal of personal development.
GitJin is my ideal GitHub home screen.
If you feel the same frustrations, please give it a try!
Top comments (0)