Sign in

Motivation

I thought it would be nice to have a react.js starter project generic enough to serve multiple purpose. I would like it to have firebase integration, has a data grid, and has a chart. So, I created Ferrorod: a Firebase front-end starter project based on MUI, React hooks, and Google auth. The accompany projects ferrofunctions consists of Firebase functions for user account administration. Ferroadmin, a Firebase admin app for ferrorod front-end. I am happy to say the project is kind of works and mostly happy with the result:

What I don’t like about my project are the react-table I am using is give me a number of errors and at times there are too many page loads that don’t seem necessary. If I am going to make a production version of the web app, I would more likely select a commercial data grid instead of an open source one. Not that react-table is not production ready, it is more like what else can go wrong with the way I am using it. If I have a commercial data grid, I would have a more ready made data grid. React-table is more like a data set or “headless” table. I have not try a commercial data grid yet so don’t know how that stacks up against react-table.

There are a lot I like about ferrorod, but I wonder what I can do better. One problem with working alone is I am usually working with doubt. So, it would be nice to compare my code against someone else’s approach to the same problem. So, I spent about $150.00 to get another starter project from divjoy. The GUI is not what I am looking for but I wanted to see what it can offer. Below is a walk-through of how I set it up.

Default Setup

There are a lot of integration needs to happen and I only have firebase account. The strange thing is the project comes with some firebase credential. I am thinking this is some sort of demo project. So, what happens if I just follow the README, build and run the project as is. First problem I ran into with the npm install:

npm install
npm WARN tsutils@3.19.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.

This is one thing I don’t like about node JS. The high severity vulnerability patch comes up often. I don’t want to force fix. That could break my environment.

sudo npm install -g vercel
Password:

What is vercel and why do I need it? ok, it is some kind of deployment tool but might have some of their own backend infrastructure as a service thing. Don’t know why I would need that if GCP/Firebase is full of infrastructure.

vercel dev
bash: vercel: command not found

Why the npm install don’t do a full job and update my path? Kind of fixed it with:

yarn global add vercel

The above is the web app started by vercel. So, it is running with default settings. Not too bad. To use some extra features,the app comes with different levels of access. That is good, I wonder if the app is using custom claim from Firebase.

Upon further inspection of the code, it does not seem to use Firebase custom claim. This could means the authorization is not controlled on the server side. I need more time to look into this as it is a concern when authorization is done on the client side.

Custom Setup of Divjoy

Now that I have a working Divjoy project using the demo / default Firebase project. It is time to update the Firebase credential to point to my own project. The instruction to setup Firebase is a little dense. I do have existing Firebase projects but I don’t want to reuse them. So, it would be best to just start a new one and follow the instruction exactly.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store