FCC Speedrun: Recipe Box

      1 Comment on FCC Speedrun: Recipe Box
Facebooktwittergoogle_plustumblrmailFacebooktwittergoogle_plustumblrmail
Screenshot of Recipe Box App for the FCC Speedrun challenge

Screenshot of Recipe Box App for the FCC Speedrun challenge

I posted a couple of weeks ago about starting the curriculum at FreeCodeCamp. That is still going really well. I started the program on 3/13 and completed the Front End certification on 3/28. I recently joined one of the Chingu cohorts at FCC, and am doing the FCC Speedrun. This is a challenge to complete as many FCC projects as possible in a short time period (about three weeks). I’m currently working on the Data Visualization Certification. My first project for the speedrun was the recipe box challenge.

I completed and uploaded the project on Monday. The completed project is here. The repo with the code is here.

The Challenge for my FCC Speedrun #1

The challenge is to create a recipe box app “functionally similar” to the one here. The user can create recipes, which each contain a name and list of ingredients, and those recipes are stored locally and listed on the page. The user should also be able to edit and delete recipes.

The Process

I started working on the recipe box on Friday. I expected it to go pretty quickly. The two data visualization challenges before this one each took me about 2 – 3 hours, so I was expecting this to be similar. I was wrong. It ended up taking me about three days.

I used React and eventually Redux. I went into this data visualization section not knowing a thing about React. Unfortunately, FCC does not have course material for this section, so I went to outside resources. I did a brief React tutorial at Code School, but didn’t really start learning it until I watched the Modern React with Redux course at Udemy. This is a great course, and I highly recommend it. I got it for $10, but it is easily worth 10x that.

The initial setup was not that complicated. I created the UI using bootstrap accordions. As I find is often the case with bootstrap, I spent quite a bit of time overriding styles trying to get the accordions to look how I wanted. I was able to get them pretty close, but it never did quite come together the way I wanted.

Where things got complicated was in the communication between components. I have a recipe list, an add new button, and a recipe editor. The first challenge was creating the modal for the recipe editor. In Grider’s course he offers a modal model in the supplemental material, but this model was not working well for me. I did some research and found this post on modals by David Gilbertson. I was able to get this implemented, but I do wonder if it is a bit over-complicated.

Once the modal was working, I was having trouble getting the recipe editor content back to the recipe list. I initially planned to implement this without Redux, but went ahead and added it in about half way through. That helped with some of the communication challenges, but something that seemed like it should have been really simple was stumping me: hiding the modal after save or cancelling the recipe creation.

The modal is displayed or hidden based on an “active” class. When the user clicks either add or edit, the active class is added to the modal, which causes it to animate in. What I was finding difficult was getting the class off the modal after the recipe was submitted or cancelled. In order to do this, I needed to get the fact that the recipe was submitted back to the recipe list component.

I’m still learning React, and at this point I was really struggling to understand parent-child communication. It turns out that it is not that complicated, but it took me a couple of days of frustration to figure that out.

Ultimately, the solution was to pass a callback to the modal that gets called when the submit (or cancel) button is clicked. The callback function hideModal() is then available on this.props and can be called from within the modal. When it is called, it sets “modalHidden” in the recipe list state to true (not to be confused with the application state) and boom, modal animates out.

In recipe_editor.js

handleSubmit(event) {
 event.preventDefault();
 if(this.state.recipe.ingredients != '')
   this.props.editRecipe(this.state.recipe);
 this.props.hideModal();
}

In recipe_list.js

hideModal() {
 this.setState({ modalHidden: true });
}

Enhancements

Since I am trying to get through these challenges quickly, I didn’t add on a lot of enhancements, but I did add a few. In the example app, if you edit a recipe and then change the name it actually creates a new recipe. In my app, when you do this it actually edits the name of the existing recipe. I am also sorting my recipes alphabetically.

Overall

This is really simple and fairly useless app, but it did force me to understand communication between React components a little better. I’m now working on the Game of Life challenge, where that is even more critical. I’m enjoying the FCC Speedrun challenge and am looking forward to seeing how much I can accomplish.

Summary
FCC Speedrun: Recipe Box
Article Name
FCC Speedrun: Recipe Box
Description
An overall of my experience creating the Recipe Box app for FreeCodeCamp during the Chingu FCC Speedrun.
Author
RaneWallin.com

One thought on “FCC Speedrun: Recipe Box

Leave a Reply

Your email address will not be published. Required fields are marked *