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

Next exploration projects- Sanity.io, 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