Elvis Ibarra's Lambda School Labs Development Journal

I am a full-stack developer currently studying at Lambda School.

Checkout my personal blog where I recap the Lambda School experience from week 1 and my projects page at:

www.elvisibarra.com

Currently based in Los Angeles, CA

©2019 Elvis Ibarra - Made with DatoCMS

Labs Week 3

Functionality & Mobile Responsiveness

This was a very busy week. Our goals this week were to be feature complete and mobile responsive. Some pretty lofty goals but we were confident that we could get it done.

Day 1 - Monday

This was technically a day off (MLK day) but we agreed to meet and get a bit of work done especially since we had such large goals set out for us this week. We talked about what we were going to work on but I wasn't able to code until later that night. I was able to successfully use my first React Hook to populate a dropdown list for the user's categories. I was excited to show the team at the next day's standup.

Day 2 - Tuesday

After showing the team my work I was excited to get the pull request in and have my first contribution of the week taken care of.

Front End Pull Requests

For our first pull request we got our dropdown component to correclty display a user's categories for their workouts. This was a continuation from last week where we only initialized the component with the required inputs and now we are populating the dropdown list using a Hook.

Another thing that we accomplished on this day was a database adjustment. We started to get errors in productions with some of our routes and we realized after lots of research that it was because PostgreSQL starts at index 1 instead of 0 which was causing an issue with our seeds. Fixing this was a huge relief as now we could work with our routes without errors and truly focus on making our app functional.

Day 3 - Wednesday

On Wednesday we started to realize that our state wasn't being managed in an organized manner across our site. We decided to focus on making everything functional and then refactor as needed when we have a solution that works best. As we split into two smaller groups we got to work on finishing the dropdown component and realized that looking into using Context with our Hooks would probably be the solution that would not only work for this dropdown component but the entire app.

This was a great learning experience.

Later in the day I made some minor styling updates and got further along in fully implementing the edit feature which is one of the few features we have left before presenting tomorrow. Cutting it close!

Front End Pull Requests

For these pull request we introduced Context/Hooks as our state management system at the top level of our application and started to add conditional rendering for a user to edit a workout. I worked on my own for a bit on this night to get the inputs to update when a user clicked on a workout.

Day 4 - Thursday

This was a crazy morning of coding where we worked right through lunch in order to be feature complete by the time we had to meet with the client. It was a fantastic collaborative effort to get to feature complete on time. I'm happy to report that we made it! After working with some teammates I saw a much cleaner way to implement and reuse the Hooks that I was using to populate the dropdown and the state on the input fields to be reusable which cleared things up immensely. My teammate Chris Cedeno has a gift for explaining React Hooks & Context even though we've all only just started to learn it in the past few days. I'm starting to understand React on a much deeper level.

Front End Pull Requests

For the final major pull request of the week we finished the edit workout functionality. I'll explain a bit how our state is managed and how a user edit's a workout below:

Code Example

For our state management we created an Index.js file and borrowed some terminology from Redux and created a Store to contain our State and Reducer functions and wrapped our up in this Store.Provider(for Context).

We then have our reducer in this file as well:

We then define our state and dispatch with the useReducer hook and pass these as a value to the Store.Provider we setup above so that our entire App has access to state and dispatch functions. Very cool!

Here is how we access the state and dispatch in a lower componenet without prop drilling:

And this is how we implement the useEffect Hook to edit a workout. There is an onClick on the exercise title that changes the state to editing workout and makes this useEffect kick in. It acts as a componentDidUpdate and watches the variable in the parenthesis state.editWorkout for changes before updating the variables using setTitle, setExercises and setCategory.

Following Dan Abramov on Twitter has helped a lot in this project as has Dustin Myer's instructionals for Lambda School.

Once our features were complete and our site was re-deployed we had our meeting with the client. It was great! We got 3's on both our feature complete requirement and our mobile responsiveness requirement. Once again I'm extremely thankful to be a part of such a hard working collaborative team that gets it done. After this meeting we took a well deserved lunch and came back to record our whiteboards.

Whiteboard Challenge #2:

Lambda Schools - Labs9 - Whiteboard#2: Climbing Stairs

For this whiteboard challenge the problem was as follows:

A child is running up a staircase that has n steps. The child can hop either 1, 2, or 3 steps at a time. Write a function climbStairs that counts the number of possible ways in which the child can climb the staircase.

For example, for a staircase with n = 3 (the stair has 3 steps), there are 4 ways to climb the staircase:

3 hops of 1 A jump of 1 followed by a jump of 2 A jump of 2 followed by a jump of 1 A single jump of 3

So climbStairs(3) should return 4.

Analyze the time and space complexity of your solution.

Whiteboard challenges are still new to me and I'm definitely not comfortable yet in this situation. Couple that with the fact that I started to feel ill during the recording and I did not perform at my best.

After sitting with this problem in my head for a day now I realize my error and will learn from it. I was too focused on getting the code to run and not enough on how many different ways there were to jump steps even when there are only 4 steps. Now I see that there are 7 ways to get up 4 steps and I just wasn't thinking about it clearly enough. Knowing that I could've come up with the inelegant recursive solution and definitely need to practice a lot more to be able to come up with the more elegant solution that involves memoization which I have not had much exposure to. Feeling a bit embarrased for not getting the solution but I'm so happy to get these experiences now so that I can nail it during real technical interviews.

Recap

I'm impressed with our team because we hit our goals through it all and am super pumped to polish this site up and start implementing som stretch goals over the next 2 weeks. I could never have anticipated being a part of something so cool and having what we have after only 3 short weeks when I first joined Lambda School. Having a great time so far in Labs.

Next week we plan on working mainly on styling our site so that it is ready for the following week which is when we present our project. 🔥

The frontend is deployed to: https://flexlog.app/

The backend is deployed to: https://fitmetrix.herokuapp.com/alive

Interested in my experience at Lambda School before labs? Checkout: https://elvisibarra.com/lambdablog.html