Let’s Build a Web App! Week 3 out of 30

Hi strangers and friends!

You may recall that I’m spending 7 months building out two web apps. (6 months and 1 week remaining! If you were unaware, you can check out my intro here.) I know, cool deal, right? Here’s my weekly blog post breaking down my progress (slightly more concise this time).

What did I set out to do this week?

I originally allocated this week to developing the React app for kusamochi.me (one out of two weeks allocated to this, as opposed to setting the stack on my servers). Here are the to-do items I listed for this stage of the project:

• Start re-implementing original website with different types of content (blog posts) w/ React frontend and Wordpress backend
• Make models/custom Wordpress types for “diary entries”, “review posts”, “art posts”, gallery entities, and more
• Write React code for outer layout of website
• Write React code for each component

I wouldn’t expect to finish all of this in one week as these are all of the remaining steps to complete Kusamochi. But I’d maybe want to get half done, to be where I want to be in the end. :)

I also still had Traefik to get working with my Wordpress stack.

What did I end up getting done this week?

• React development of kusamochi.me 🤷
  I spent the bulk of this week working on this task, as I originally intended. So far I have a basic skeleton of the outermost layout for the app (think components for the header, body, and footer of the site). Following the great open source example of React/headless Wordpress by ustwo.com, I created a module map for different views and used React.createElement to render differing components based on the props to the body of the site.

After that, I worked on implementing a site navigation menu that could pop up on hover. I got partway through implementing Redux for this.
Time spent: an average of 3 hrs/day between Monday, Tuesday, and Wednesday.

• Making Traefik work for my Wordpress stack 🙆
  True to my instinct, my compose.yml for my Wordpress microservices wasn’t configuring Traefik specs correctly because the example I started out with wasn’t written with Docker Swarm in mind. To fix it, I had to move the Traefik labels 1 level down, under the deploy spec. That was 1/2 of the solution.
  The other 1/2 of the solution was making sure the Traefik.port specs matched the ports my services were using inside their containers, and making sure all of the services were on the right network (I pulled Traefik out into a 3rd stack that services on my two other Docker stacks had to be visible to). Figuring out that one Traefik port was incorrectly set super tricky!!! I have to give a HUGE shoutout-thankyou to my friend Tim Britton/wintermanc3r for sitting down with me and helping me figure it out. Those SRE skills are furreal ;) (Tim is a fellow student from Holberton School and a newly minted SRE @ Apple).
  Time spent: 5 hours on Thursday and 1 hour on Friday
• Casting React-related questions in the direction of my mentors 🙆
  I feel successful in the sense that my mentors Nic Chan* and Johann Kerbrat** are FANTASTIC and gave super-smart answers my beginners’ questions. Organizing my concerns and getting those questions to them took time, though. That was the less successful part to this task.
  Time spent: 1.5 hrs here and there on Monday and Wednesday
• * badass self-taught woman engineer doing BADASS frontend work remotely from Hong Kong — and my former schoolmate from Scripps College
  ** amazing Holberton School mentor & Airbnb engineer

Summary of what was difficult or went well / a thing I might try differently next time

What went well: Reaching out to Tim after hours of grokking on the Traefik deal, and mentally collaborating with him to problem-solve. Such a great proof of concept for getting unblocked. 。･゜･(｡´ﾉω･`)

What was difficult: Honestly, managing myself enough to put down sizeable blocks of time developing. I was pretty social this week but didn’t come in earlier to compensate. That meant that I was really only at school from around 12 pm to 6 pm everyday.

Another aspect that was challenging was having to stop coding frequently to research new topics. I think it’s a natural outcome of being new to everything I’m doing, but it’s definitely a start and stop pattern.

What I might try differently next time: Come in earlier to school to get more done, or maybe force my friends to let me code while I hang out with them, so I can be social AND be working at the same time. :)

One cool thing I learned about

The distinction between state and props in React, and the Flux paradigm for data flow and state management.

In conclusion

I have a lot of ground to break next week, my last week for working on kusamochi.me. But as always, I feel grateful for always feeling like I’m learning and making progress everyday, even if it’s not as much progress as I’d like to be making. I look forward to speeding up the front-end dev once I get my first usage of Redux under my belt. See you next week!

Misc links:

My twitter: https://twitter.com/ronachng

My Github repo for kusamochi: https://github.com/ronachong/kusamochi/commits/master

ustwo’s open source headless WP example: https://github.com/ustwo/ustwo.com-frontend

My mentor Johann’s walk-thru to building a React app:
https://github.com/ethaMont/holberton_school_workshop/tree/slides

An example of Redux implementation I’ve been referencing: https://github.com/aybmab/express-redux-sample

The tutorial which helped me figure out how to implement Traefik for Docker swarm mode:
http://training.play-with-docker.com/traefik-load-balancing/