👋 Introduction

Hi folks!

First of all, I want to thank the Hashnode team for providing us with the opportunity to get out of our comfort zone (or should I say Tutorial Hell 😉) and actually build and deploy something into the real world. This is my first ever hackathon and I am very excited to share what I created with all of you.

I am Jalaj, a student from India currently pursuing my bachelor's degree. I started contributing to Open source last year in December since then I've contributed to 10+ repositories with over 30+ merged pull requests.

Working in Open Source has taught me a lot of things and I would recommend everyone to try it, we get to learn to work with other people, learn and improve by reading code and a lot of other things which one simply can't get by just watching a tutorial on Youtube or Udemy and creating simple and trivial apps.

✨ Introducing GiTrack

• Demo
• Github

I like to keep track of things and while contributing simultaneously to various repositories, it sometimes gets difficult to keep track of assigned issues and pull requests. To solve that problem, I built GiTrack, a website for Open Source Enthusiasts to keep track of issues assigned to them and arrange them in a nice looking Kanban board.

I wanted to create something useful but also simple enough for everyone to use, that's why I went with a Kanban board (coz everyone's familiar with it? 😅) besides that I also decide to add a profile page to the website that shows some useful statistics to the user such as the Total number of their contributions, issues they have opened, pull requests they have created, their current streak and a lot more...

Github has their own project board for a per-project basis, but the idea behind GiTrack is to be an issue tracker for all repositories, owned or otherwise, plus you get some nice statistics.

Here's what I had in mind when I started building the website:

• It should allow users to log in via Github. (who wants to type their email and password?)
• It should have a beautiful homepage that lists features of the website.
• It should allow users to fetch currently assigned issues directly into the board.
• Board state should be saved every time a user makes any changes. So that the next time they visit they can start where they left.
• Profile page should list different stats that might be useful for users.

I used AWS Amplify to host the site. Amplify's CLI is a dream come true for developers. Just one command and the site is deployed live.

💻 Screenshots

Light mode:

Home page

Login Page

Statistics

Issue Tracker

Dark mode:

Home page

Login page

Statistics

Issue tracker

👀 Features

• Issue Tracker
• Github Statistics
• Fetch issues assigned to you directly from Github.
• Client Side Storage using IndexedDB for super fast page loads.
• Persistent board state, so no worries about accidentally closing the page.
• Beautiful UI
• Open Source (checkout code on github)
• One Click Login using Github OAuth

Here's a quick video showing how to use the issue tracker.

🏢 Build Process

I really wanted to get out of my comfort zone and build something with the technologies I've never used before. In the tech stack listed below, I was only familiar with Typescript before I started this project.

👩‍💻 Tech Stack

• Next JS
• Typescript
• AWS Amplify
• Firebase
• Chakra UI

I read about this hackathon at the starting of February and I created a repo and pushed the initial commit the on 14th. But after that, I started procrastinating didn't do anything for the next few days. It was 22 when I got some confidence boost and started working on the project again.

I used OpenChakra to quickly create a basic boilerplate for the pages and edited it to fit my needs. I chose firebase to do the authentication and storage. I really wanted to use Amplify for auth but they don't have Github OAuth. Anyways, after getting done with a basic MVP of the project I deployed it on Amplify using its CLI.

Here are some of the packages I used:

• nextjs : for building the app
• typescript for writing type safe code
• react-trello for issue tracker
• chakra-ui as a UI framework
• firebase for auth and storage
• localforage for storing data in indexedDB
• octokit as a github rest client

🏆 Challenges faced while developing

• Persist board state: I wanted to store board state every time a user makes any change to the tracker board. I could use firebase for this but I wanted to keep it fast. So my only option was to store data in the browser. As the data was complex I was having trouble storing it in localstorage, I did some research and decided to use IndexedDB.

• As I wasn't requesting any special permissions while using GitHub OAuth I had to find an alternative way to get assigned issues for the user. I did some research and used github issues and pull requests search endpoint to get the required data.

• Persist login state: Firebase provides a function just for this purpose but it wasn't working as I expected it to be, it logged the user in without checking if there is data in IndexedDB or not so I had to modify it with added logic of fetching the state from indexedDB first and if there is no data in DB then don't log the user in.

🌟 What's Next

• Add Dark Mode
  • Update 3/3/21: Dark mode added. (Check Screenshots above)
• Allow users to get issues they recently commented on.
• Allow users to get their merged pull requests.
• Keyboard shortcuts

🥳 Conclusion

All in all, it was fun working on the project in a strict timeline. Once again thanks to the folks over at Hashnode for this opportunity.

Thanks to the reader for reading this far, I hope you like the app, and please don't hesitate to message me or comment below if you have any feedback.