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
Top comments (17)
I feel like this is the greatest way to create software! Create it for yourself, implement feature your want and need. Show it to others who might like it as well and get inspired by feedback. I would love to make something for myself.
Great work!
Nice work. I like it :)
Great idea and very handy tool for Devs to kick off the day :)
Great effort and the app idea too! ;)
Great idea and very handy tool for cuteplushies.net/
Salam , may god reward you
Helpfull
Good work, I would suggest you use the api's instead of writing a scraper.
I had used the trending api for gitstars.co
For dev.to they have an official api
Thanks!!
Yes and it is super convenient as well. I am already using it for dev.to and reddit.com.
Awesome app! I love you solution to bypass the heroku sleep time. I'm going to bookmark this. That snippet may be useful in the future. 😊
Thank you !!
Yup 😄
Great insights!
That's awesome. Good job!