React Firebase CRUD tutorial by Maksim Ivanov

This seems a practical tutorial to do. It does the basic things that yuou want, Create, Read, Update & Delete. He does a script upload for database populating, but I’m interested in using it as a web app for a to do list or project list. Github repository for code HERE.

After downloading his code from github, I linked to a firebase project of my own. I wanted to make an expences app so used the code to link to that. On starting I got errors and couldn’t resolve them with evein import expressons being highlighted as errors. So i loaded up a new react folder with :

npx create-react-app crud-expenses

Then ran >npm start to check the localhost server was running. I finally rebuilt the app, what was happening was I’d downloaded and installed a few extensions in VS Code and typescript was one of them, so it was being difficult, after I went to settings and disabled these the code looked ok.

I also had to re-write names so I could map to expenses rather than spells and after a bit of debugging I got that sorted,

Next there was an error of :

./src/firebase.jsModule not found: Can't resolve 'firebase' in....... '

Although I’d done >firebase init, I hadn’t done >yarn install firebase, and aftwer this was done : Trala!!!

So I have the Sum showing, now I need to get the rest of the data on the screen in the app. This is the bit I stuff up.

I can now display all the fields but it isn’t updating the database. I’ve been fiddling with it and have now sorted it out.

For a new item I use the new Date() and then force it to a string , which is fine, as long as I have a good structure format. I think I can export and pull into a spreadsheet and convert back to a date if I need to.

const dt = new Date();
const date1 = dt.getDate() + "/" + (dt.getMonth() + 1) + "/" + dt.getFullYear();

So, not the prettiest, I can now do CRUD operations on the fields and create a new instance.

Not pretty, but operates, although I still have to refresh the page to see the updates. I will have to watch video 2 to see if I can get it to automatically refresh.

Also a pull down list would be good. That is another challenge. The video below talks about different alternatives to dropdown lists:

The other thing is the input to database is not fixed by type! I need to check on that to stop bad data getting in. Currently I have a boolean for”billable” wanting a true/false but it accepts Y/N and changes type to string in the database. I suppose you can use type to force type in React, I saw a video today showing a react package fixing type , but there didn’t seem to be anything in the database, also no “CATCH” on the data input to stop/show error so not taking data in. The video below talks about types – about 18 minutes in:

End comment

This project on hold- learnings

There are another couple of things I’ve found out about that I want to persue, so will put this project on hold. havent deployed it or done the drop downs or fixed type. Maybe later.

I’m happy with what I’ve done to date on this project. I’ve been able to have, after using the boilerplate from the main video (thank you Maksim Ivanov ) I’ve been able to:

  • change from spells to expense
  • Connect to my Firebase database (there was a problenm as I had not installed firebase with >npm install firebase
  • modified the create to allow for more fields to be created at the same time to put into the database
  • made date a hidden field so it creates a timestamp when the record is created.
  • Modified the timestamp to a string so that it looks like a normal date eg 27/5/2020.
  • modified the fields in the database so that they display multiple fields including date (so it can be modified too)

What I havent done which would be good :

  • havent deployed it as a webapp
  • No drop down loists (this will allow cleaner data entry)
  • No fixed type of data in the database, so if you have a boolean field and put in “Y” it changes that field to a string, which is not good. So fixing the type of input and handling the error when it does not occur needs to be looked at.
  • Auto refresh. At this point, you update a field or create a record, you have to refresh the browser to show the changes. Maksim deals with this in the 2nd video.
  • Inside the iput boxes I’d like a “gray text” indicationg what the field should have eg “sum”, “payee” ….. etc
  • It would be nice to make a nicely formatted page using something like materials-ui to learn a bit about that and chage buttons and maybe even use “table” component for listing the records.

Next exploration projects-, Jamstack, Gatsby

I started to explore using Material-UI templates, that led me on to learning about forking in Github and how to partially download a repository folder. I was seeing if there is a simple way to deploy to the web

This has a great interface and templates for trying to quickly get a tidy react website up and running. There is a template blog but maybe use gatsby.


Simple template site that has Jamstack logic of static page, API & Markdown. I need to explore this as I’ve read a lot about it. No backend (or little- I have to figure this out


This is what the above tow items are based on, it speeds up webpages by making them use API and has templating that you do in React and other JS (and PHP?) things-

Material UI

This has good templating. I need to test/deploy simple pages


This is used to deploy your web apps. There is a free version that I need to explore.

Git partial cloner a directory & fork

I need to do a post on this using tortois SVN