My Profile Photo

Sharynne Azhar

Collection of various coding notes, projects, thoughts.

React ND - MyReads - Book Tracking App

Day #4

  • Worked from 1:15am - 4am
  • Completed Project #1

MyReads - Book Tracking App

Quick recap before I get to the project: I finished up lesson 5 on React Router yesterday night. I learned about single-page applications (I always hear this term get thrown around but never actually understood the concept until now) and how React Router comes into play in terms of dynamically rendering content.

That was the last lesson for Part 1 of the Nanodegree program. After that, I finally got to work on the project! 🙌 The project was called MyReads and it is a book tracking app. It allows a user to select and categorize books as currently reading, want to read, or have read. The instructors at Udacity provided a ready-made API for us to use, so my work was mainly focused on buiding out the React components. Here’s a preview* of my app:


If you haven’t noticed the bullet points above, I worked from 1:15am until 5am on the project. After finishing the last lesson, I was ready for bed but I wasn’t really sleepy. So, I decided to stay on a bit longer and poke around the project. It must’ve been some combination of sleep deprivation and a mild obsession with coding, because I decided what a great idea it would be to challenge myself and see if I can finish this project before the sun rises while live streaming it.

Why Not?

I’ve been wanting to try out live streaming my coding sessions. I think it’d a great way to improve my ability to think out loud. Though, it’s probably not the best time at three in the morning! Regardless, it was quite an experience. I learned quickly and I also failed quickly. Here are a few takeaways:

  • Take Baby Steps. I started off this project with a rapid-prototyping mentality. I needed to finish it before sunrise to achieve my goal. However, I noticed that I was getting too caught up on things like component names, folder structure, or the cleanest way to filter objects. I actually spent time debating if I should name a component BookShelf or simply Shelf. I should focus on building first and optimizing later.

  • Understand the Bigger Picture. It’s so hard to refrain from diving right into code. In fact, I started this project without reading the requirements. I went straight for it as soon as I saw the project title and a link to the starter-code. For this reason, I ended up deleting and writing the same chunk of code 3-4 times on several occassions. I had to stop myself and take a step back to draw a mental map of what the app will look like. Spending more time planning out what I was going to do saved me.

  • Stay Clean. What’s that popular saying? “Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.” Yes, this might contradict the first bullet point, but you always need to think about the next guy. If not, think about future you. In my case, I had to keep my project reviewer in mind. Will he/she understand what’s going with my code?

Despite how crazy it sounds, this was a lot of fun. I achieved my goal and finished the project in a little over 2.5 hours. Plus, as a reward, I got to see the sunrise and listen to the birds. It was no doubt a great learning experience. Now, I do feel more confident about using React and I can go ahead and build an app at 3am if I have to. 😝

I’ve uploaded my stream on YouTube. Sorry for the potato quality. The software I was using also failed to detect my mic, so all my “codesplaining” wasn’t picked up. Instead, enjoy the music by Chillhop! 🎶

*Why does the app look different in the video compared to the GIF above? I ended up spending an hour extra styling and optimizing the app. 🙃

Project Review Results

I passed and my reviewer left some nice words behind! 🎉

Project Review

comments powered by Disqus