Forem: d3mn8

I used my own app for a month and here is what I learned

d3mn8 — Fri, 07 Aug 2020 15:03:37 +0000

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

Face Recognising Node Server

d3mn8 — Thu, 30 Jan 2020 17:08:24 +0000

A web server that recognises you if you are registered in the system 🔥🔥🔥

Click Here for github repository!!

What is this and who is it for 🤷‍♀️

This is a node and express based web server. It uses face api js to detect and recognise the face from the web cam feed. If the person is registred in the system the server will recognise the face and a welcome message will be displayed. 😃
This is for developers who want to play around with Machine Learning but does not know python or confused about where to start (Like Me 😜😜 )

Technologies used

Face Api Js JavaScript API for face detection and face recognition in the browser and nodejs with tensorflow.js
TensorFlow.js Library for machine learning in JavaScript
Express js to create a node server
Jquery, HTML and CSS for web page

Running on local machine 💻💻

npm install To install dependencies
npm start To run the server

Credit 🤝🤝🤝

Author: Sandeep Poman ✍️

License

MIT

Reuse business logic between React and React Native

d3mn8 — Wed, 10 Jul 2019 10:28:38 +0000

React ecosystem encourages the Learn Once Write Everywhere style. Once we know the core concepts of react, we can write both web and mobile applications with ease. Even though there are small differences like types of components etc, the core of applications remains same.

React being a library, we generally need help from some state management package to develop large applications. Redux is the more preferred one. Using redux helps us define the flow, business logic and application state.

When we were developing projects for our customers, we realised that even though the view layer of web and mobile application is different, we were writing lot of duplicate code as well.
For example, both our web and mobile applications had a login screen. Now the UI layer of this is different in react and react native. But once we get past that, we need to dispatch same action, make same service call, use same reducer and many more.
So we decided to take this business logic and put it in a separate npm package. We called this npm package Core. Both mobile and web applications can load this as a dependency or link to this package via symlink.

This helped us reduce the duplication of code. We were able to reuse almost 60% of code between React and React Native application. This also helped us in better predictability and consistent error reproduction. If something worked or failed it would happen in both web and mobile applications.

So ultimately we were able to deliver a product with faster turnaround and with less budget.

I created a working repository with sample todo app built in.
Here is the link
https://github.com/spoman007/reactXstarter

What is this Repository?

Demo of how the code can be reused between React and React Native Application
Extracts the business logic to a seperate npm package
Uses Redux to write application business logic: Actions and Reducers are extracted to a seperate npm package.