I used my own app for a month and here is what I learned
Tags: node, pwa, react, javascript
Published: 2020-08-07 15:03:37

---
title: I used my own app for a month and here is what I learned
published: true
description: App that brings news, repositories and discussions for any programming language to single place.
tags: node, pwa, reactjs, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/2tqhs3xsqftkks4nufqe.png
---

**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


<img src="https://dev-to-uploads.s3.amazonaws.com/i/2tqhs3xsqftkks4nufqe.png" width="40%" height="40%" title="Fanas">


#### 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](https://progressiveapp.store/pwa/Fanas)
To my surprise they added the to Editors Choice list

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/djlpj86a4xz5r5shq940.png)


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**