Hack Reactor Week 11 Review

I'm attending the Hack Reactor 12 Week immersive coding bootcamp from 11APR to 8JUL in an effort to develop my programming skills to offer a wider range of services to my clients. The schedule is jam packed with 11 hours of coding content 6 days a week Mon-Sat. I'll be keeping a journal of my experiences with the program here.

Just a couple days to build MVP (Minimum Viable Product). This is a 48 hour solo sprint requiring us to build any fullstack app of our dreams. My dream is to build Yelp, but for Trader Joe's snacks.

My girlfriend is a pretty big Trader Joe's fan. She likes to send me updates from @TradeJoesList of all the latest enticing foods. Honestly it's pretty fun to see what the next trendy food is, which right now is anything Ube... mochi, cookies, spread, etc. In my experience some people just love Trader Joe's. People are loyal to their markets, and Trader Joe's fans are perhaps the most loyal when you consider it sells the most per square foot of store real estate, beating out Whole Foods by 2x!

So shouldn't there be a place where people can share their love of Trader Joe's, and gossip about the latest products?

Enter Judging Joe's

I hope you like it! It was fun to build, and was my first full fledged, production-grade app out of Hack Reactor. My goals in building this one were:

1. Make a full-stack hosted app with real user-generated data
2. Make it look good, or as good as I can.
3. Implement users
4. Use Firebase
5. Make it mobile-first (>50% of people are viewing the web on phones these days so it should be the priority in my opinion)

Firebase was a really cool way to combine everything for the app under one roof: hosting, No-SQL database, user authentication, cloud (server-side) functions, and storage. It's a one-stop shop! It's very mature in the React ecosystem so was pretty simple getting most of the stuff spun up.

I got a lot more familiar with Tailwind CSS on this build and enjoyed the speed with which it let me write CSS. Almost felt like I was back in Webflow again with how fast front end was going! 😆 I really enjoyed the way you can use groups to build out complex animations and had fun playing around with different color combinations in their integrated palette.

Some things I would change if I was starting MVP over from scratch:

1. Figure out the local emulator for cloud functions first! It takes a while to deploy and test cloud functions, so knowing how to test my code locally would have been the right way to go from step one. I thought it would just be a few simple lines of code that I needed to update the product rating on the server but turns out it needed more conditional statements than I expected so I ended up wasting a lot of time and energy through multiple deploys.
2. Implement image compression from the start. In my eagerness to make it to MVP, I just spun up a Firebase storage instance and loaded the photos from Trader Joe's into there. I'm too used to Webflow compressing and serving responsive images at device-specific sizes for me which made me completely overlooked this. Turns out there's a prebuilt plugin that will do this for you, but only for new photos, not ones already uploaded. Lesson learned. While a strong Lighthouse performance score wasn't part of my goals for MVP, it would have been cool to boast about that. On another note, from what I'm learning about NextJS, there are a ton of improvements to be had from static site generation AND it comes with a image component that does the stuff mentioned above for you too. Definitely going to explore NextJS next.
3. Be careful with user testing. I was eager to get the app in the wild and receive feedback from friends and family. But friends will break your app as soon as they can. My buddy Nick found the /add route on a whim and uploaded gyoza to the database without me knowing 🤣. My girlfriend sent the site to her mom who started adding a ton of reviews and quickly found errors in my form validations and update logic 🤣. Beta testers are a benefit not to be taken lightly I've learned!
4. Memoization should be a priority and we should understand the React component render lifecycle. With only a few products and comments, I was already generating a lot of requests to Firebase. When I introduced an infinite loop by not using a dependency for my useEffect hook, I generated a few thousand requests very fast! I made it halfway to the paid tier 😆 with jsut a handful of database records... just gyoza, ube cookies, and macarons raking up the hits. I guess it's nice to know that Firebase can scale with ease.