I completed Net Ninja’s “React, Redux & Firebase App Tutorial” series yesterday; creating a user authentication (login/logout) system with that enables users to write posts that are stored and read from Google’s Firestore database.
My main motivation for completing this tutorial was learning Redux for its overall state management system, and as an added bonus, I got to learn how to use Google’s authentication system, along with its noSQL database.
As another added bonus — which hardly seemed like a bonus since I spent over 4 hours getting it to work — I gained experience setting up hosting for the app. I had configured hosting for Yahtzee with Heroku prior to this project, and seeing how it was done from another avenue was something I was eager to do; as I could decide which one I preferred using going forward. I guess you can say I‘m the kind of guy who likes the idea of having multiple options.
The hosting part of the tutorial took me for a wild ride, but most of the tutorial was a breeze and easy to understand. I only ran into the need for further research two other times (out of 40 videos). The problem I had with hosting was actually quite a simple fix, but part of the fix required me to clear my cache — and until I did, I wouldn’t be able to see the corrected change. ARG!!!
To go into specifics, when I went through “firebase init,” I essentially told the machine that a new index.html file should replace the old one. Well, the index.html file that firebase uses is essentially a page that says “Congratulations you successfully hosted your website with firebase!” and it includes a link to their hosting documentation. Well, right away, I didn’t realize it was their index.html file that produced this message. I thought it was there as a filler because of a time delay or something. So as the clock kept ticking and it didn’t go away, I realized something was wrong.
I started googling my problem and came across a few stackoverflow articles from people that encountered the same issue. With them, I realized my index.html file was replaced during the firebase initialization process.
My next step, therefore, was to swap Firebase’s index.html file out with my original index.html file and redeploy. Easy right? Yes, yes it was. However, the same “You’ve successfully hosted…” message still appeared even after I redeployed, so I tried other variations and ended up redeploying over and over and over again… WHY WON’T YOU WORK!?!?!?!
Finally, I found a recommendation to clear my cache and/or go into incognito mode after redeploying, and once I did that, I was able to feast my eyes on a beautifully ugly working page at https://diet-matador.firebaseapp.com (I haven’t added any styling yet, I just wanted to get through the tutorial).
Things I picked up from the tutorial
Aside from the obvious, there were quite a few things I learned how to do from the tutorial.
- Setting up the redux, firebase, and firestore configuration
- Linking Redux’s store Reducers and Actions to components with mapStateToProps and mapDispatchToProps
- Understanding the basics of Firestore’s noSQL database
- Using Redux to “compose” and connect to Firestore
Establishing rules for CRUD methods based upon user authentication
Adding page ’s based upon user authentication and actions
Creating cloud functions (for the database)
Using middleware (thunk)
Learning instead of the method used in the tutorial (the tutorial code became obsolete so I had to do further research)
Going forward
Now that the Redux tutorial is complete, my next course of action is going through Net Ninja’s “React Context and Hooks” tutorial series to gain experience with React Hooks. React Hooks has become very popular and I can see why. It seems very straightforward and easy to use, so it should make for a great addition in my coding repertoire.
However, instead of using the Context API, I’m planning on swapping it out for Redux in order to challenge myself further, and also to become more comfortable with what I have just learned. Can’t take the easy road here!
Hope you enjoyed the recap, and thanks to Mr. Net Ninja for creating such an awesome, informative tutorial.
Sam
Top comments (0)