FireGram Tutorial Reviewed

Based on Build a Photo Gallery With React & Firebase

Github Final Code: https://github.com/iamshaunjp/firegram/tree/final-files

Recently I was searching for a quick weekend tutorial I where I could learn the Firebase Image Storage pattern. Image upload is a feature needed in an upcoming project so luckily I found a tutorial that was excellent. The author is Sean -- aka the Net Ninja -- and he helps you build a short and sweet Instagram clone, which we'll call FireGram. Now, generally I would show off my project and my own code when I'm psyched about the result but in this case there's so much value I thought it best to share my opinion on what makes it an excellent learning experience.

Who should be interested in this tutorial? Any React engineer willing to spend an hour or so learning the patterns around image upload.

For starters, the course is current. No dated libraries. Hooks are used. And there's nothing worse then having to quit a tutorial you've spent hours on only to find the author forgot a fine point in the code. While debugging is fun, there often comes a roadblock.

Sean's video is free on the TraversyMedia YouTube channel and is divided into bite-size chunks, like 'firestore hook' and 'animation'. And a fun aspect to his presentation is the accent, especially his pronunciation of "subtle" and "opacity" (you'll see what I mean!).

There are two links for github code - starter code, and final code, both of which are very helpful while cutting and pasting CSS as Sean does in the video, or just getting the project scaffolded.

And, the author includes some sweet animations using the Framer Motion library , should you choose to build out a true Instagram clone and/or include this in your portfolio. Framer Motion is super intuitive and I'm definitely looking forward to exploring it in greater depth.

There is one glitch to watch out for. Because Google Cloud console's UI is constantly being enhanced, the UI in the video is slightly off from what you'll see in the video. Just remember to avoid the Realtime Database and stick to Cloud Firestore when setting up your firebase/config.js. You'll know it's working after the saving the image url to database step.

Hopefully this inspires others to learn the image/file upload pattern using React and Google Cloud. Feel free to share or tweet me if I missed anything, and have fun!