Now to the fun part - coding. Except wait, first I need to set up Electron, TypeScript, Webpack and GitHub's design system. Despite doing this for years, it easily ate up multiple hours of my time and set me back significantly. Perhaps I should've used one of Electron boilerplates, but it's been a long time since I worked with Electron and I wanted to understand how everything works. No regrets... almost.
What has really failed me and lost me a significant amount of time is Primer - GitHub's design system and React components. I don't know if it's the incorrect TypeScript definitions or out-dated documentation, but the thing just doesn't work half the time, even when I copy-paste examples from the docs. At one point I had enough of this and just converted the whole UI to Tailwind - a tool I'm really familiar with from my work on Linkjar.
It's funny how I heard the advice of "use familiar technology over hype" and I still went the other way. In the yesterday's post I thought I would get a productivity boost from working with a ready-to-use design system and their components and hopefully get a pretty similar look to GitHub. Obviously, it didn't work that way and I'm going to remember that lesson now for sure.
Anyway, so here's what I've got now.
Lotus supports "Sign in with GitHub" OAuth flow to avoid having to ask users to generate access tokens with the right scopes and then paste them into my app. I could obviously take that shortcut and save a lot of time, but I think this is going to pay off in the long run. To implement that, I'm spinning up a Node.js server under the hood and waiting for GitHub to redirect the user to it after they complete the authentication flow. Then I extract the access token and save it in an encrypted local storage.
Here are the useful Electron modules I've used by the way:
All of them are by Sindre Sorhus, so thank you Sindre!
First draft of an "Unread" page UI looks like this:
Next, I wanted to render notification threads (issues or pull requests) right in the app for several reasons:
After also injecting some custom CSS to hide unnecessary parts of GitHub's UI to make it look good in an embedded web view, here's what I've got:
I'm happy that I was able to overcome this obstacle, but I hoped I'd built more by the end of today. There's still one more day left anyway and hopefully I won't come across more issues or hacky workarounds. Tomorrow I'm going to actually build some functionality that this app is about lol.
I'm building Lotus in the open and I'm sending out progress updates just like this one every Sunday.
I won't send spam and you can unsubscribe anytime.