I always wondered, I have written so many software solutions for others but I never developed anything for myself. So I decided to build something and use it every day.

What to build 🤔

So the immediate question was what can I build. After spending few days thinking here is what I came up with

Being a developer, I keep exploring the buzz around technology. I explore following things

• Trending repositories
• Latest dev blogs
• Discussions about different topics

I had to hop around multiple sites to do this e.g. GitHub, reddit, dev blog etc. I decided to bring them all together in one place for overview and deep link to the original sites for detailed reading.

TL;DR

If you are in hurry, here is a screenshot and link of what I developed

• Url: https://sp-fanas.web.app
• GitHub: https://github.com/spoman007/fanas
• GraphQL: https://fanas.herokuapp.com/graphql

Technology stack

• Scrapper using nodejs and scrapeit
• Rest APIs using express (And GraphQL as well because why not!! 😛)
• Host backend on Heroku
• PWA Website using React
• Firebase for Hosting PWA

And thats it, the PWA was up. This was easy but the real learning began when I started to use the app every day

Adding Animations

The site was fast, but still it felt like a website and not like an app. So I decided to add animations. Adding transitions and other effects using Framer Motion (Great library BTW 💗) made really big difference. I started to get sense of satisfaction with smooth UI.

Initial load time

Heroku is a great platform for free hosting, however after 30 minutes of inactivity the dyno goes to sleep and for any request it takes a while (30 seconds) to show response.
Now this would not be a big deal if it was a POC or tutorial app. But the extra waiting started to annoy me. One of my colleague also mentioned that he abandoned the app because of this.

setInterval(async () => {
await fetch("https://fanas.herokuapp.com")
}, 1140000)

With this single line I was able to fix it, around every 20 mins mark I make a call to API, this keeps dyno awake. (It does restart once in 24 hours but because of this code it is up again)

The Bookmarks

One of my friend who was using this app said that the information keeps updating and there is no way to see a repository (or article, discussion) again if it is gone.
To fix this I added the bookmark feature which uses local storage but it turned out tobe really helpful

PWA Store

After adding all the necessary features, I decided to add the app to PWA Store
To my surprise they added the to Editors Choice list

After 2 months more than 30 people are using this application and I am getting lot of feedback about how it can be improved even further.

Conclusion

It is an awesome feeling to use application created by yourself, but it is more awesome when others are using it as well