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 4

Final Design & Polish

This week the focus for our MVP goal was to have a professional user interface (UI) and user experience (UX). We are always trying to get 3's on our weekly goals, this week that would mean that:

An end user will perceive the app as being done, professional looking, and no different than the other apps and sites they use every day.

An end user will perceive the app as simple to use, logical, and having a nice "feel." They will find it comparable to the other sites they use daily.

I knew we had a lot to do going into this week but I was happy with the progress we had gotten so far. I also shot off a first draft of my resume to my Career Coach for review after getting some initial feedback from her from our first meeting the previous Friday. Lots to do at Lambda School.

Day 1 - Monday

During standup we reviewed our goals for the week and started working on things we left off with the previous week, with new UI/UX tasks taking priority given our current MVP goals. I felt a bit nervous starting the day as it seemed like we had a huge amount of tasks compared to previous weeks and not enough time to do them all in.

We began the day by spending some time trying out a styling library because we felt like it would allow our app to look nice and cohesive in the shortest amount of time. We quickly realized that any library we chose was going to have a learning curve and we didn't have time to spare. It would also not give us the customizability we were looking for. We decided instead to stick with styled-components and use as many recycled components as we could throughout the app to give the app a standardized look and feel.

I also heard back from my career coach with some notes on the first draft of my resume so I had that to work on as well.

Shortly before lunch we met with two UI/UX designers at Lambda (one instructor and one student) and they gave us some great ideas for how we could take our app to the next level. These meetings were super helpful. I felt so much better about where we needed to be by the end of the week now that we had some clear directiond design-wise.

After lunch we prepped for our start of the week client meeting. We laid our our plan for the week and our current progress. The meeting with the client went well and we got to coding again.

Front End Pull Requests

My first pull request was a re-styling of the Workouts page with some of the new styling and the new Context/Hooks setup that we figured out late last week. My explanation from last week was a bit off and I'll elaborate on that in the code examples for the week. I was happy that the add functionality was restored on our re-styled page and that was how we ended the day.

Day 2 - Tuesday

This day I focused on re-implementing delete and edit with our new styles. I got delete back pretty quickly but was stuck on getting the inputs to change in the edit function. The breakthrough came in using the proper array method to assign the correct data from state using Hooks to the onChange function on our inputs which I'll show in the code example.

Front End Pull Requests

This was a busy day of coding where we made a lot of progress. All that was left for the page that I was working on was to implementing the reusable drawer component that we're using in other places of the app and to fix the back-end for workouts to be able to be edited.

Day 3 - Wednesday

This was another busy coding day.

We focused on trying to finalize our styling our application because we had another UI/UX meeting with an expert and we wanted to get as close as possible to final while implementing the feedback we got from the day before.

Front End Pull Requests

I was able to implement the drawer component which is a recycled component throughout our app to the workouts page and I fixed the functionality that adds a category back after we had restyled this page. There were still some bugs to fix before we met with the client the following day but we were at a good place to break for the design meeting.

We got a lot of great feedback and I have gained a great appreciation for the field of design working on this project. There were lots of things we had never thought about and something that would be great to improve upon for a future version of labs is to have these design meeting earlier on in the process.

Our meeting went really well and we got some cool ideas for how to improve our app even further.

We coded for a bit more after lunch and then met with our project manager to prep our demo to the client for the following day. We identified bugs and styling fixes we could implement the following morning and into the afternoon before our client meeting.

Day 4 - Thursday

Got right to coding after our morning standup.

I focused on the user experience on the workouts page and started by moving a delete button from one component to another.

I then worked on re-implementing the ability to delete a workout, remove an exercise from a workout that is being created and add a workout (all without bugs). I finished up right before we met with our PM for a final run through of what we were showing to the client later on in the day.

Front End Pull Requests

During this meeting I noticed that the workouts page I had been working on all week did not look good on mobile which is the whole point of the app. I went into the zone and added a breakpoint that made it look nice on mobile. We were ready for the client meeting.

After lunch we met up again and did some practice run-throughs as a group to make sure we knew what to show and what we were going to say while we were waiting on confirmation for our client meeting. Once we knew when the meeting was going to be we took a nice break to clear our heads and then got back to do our whiteboard challenge.

With the whiteboard challenge complete we met with our client and presented our progress. The meeting went really well and the client walked away impressed. All our hard work during the week had paid off and it felt great to problem solve and do a lot of work on my own this week now that we all had items to work on since our app has grown in size and complexity since we started.

Code Example

For my code examples this week I wanted to show how we setup Context and Hooks to manage state on our app one more time since we refactored this week and I learned some new stuff. I'll also link a lightning demo I gave last friday. Then I'll show how we used recycled components across our app.

Setting up Context & Hooks

The following code is all in an Index.js file that is at the top level of our file structure. The first thing you have to do to Setup Hooks & Context is to import your required Hooks and setContext from React like so:

Next we setup our Context Store which will contain our state using createContext:

Next we will create our initial state, we will be passing this to our useReducer Hook, only showing a piece since our initial state is quite big:

Then we setup our reducer which we will also be passing to the useReducer Hook, again only showing a portion of our possible reducer function:

We can now pass our initial state and our reducer to the useReducer Hook which is going to act like Redux and allow us to access state or any of our reducer methods further down our app without prop drilling:

The last step is to wrap your app in the Context store object and then you're set:

Here is an example of a dropdown we are using which uses the useState Hook to populate itself and uses a useReducer Hook to set the category the user has chosen on state:

This was a real game-changer for us and let our creativity shine in creating this app. I gave a lightning demo on this topic here:

Lambda Schools - Labs9 - Context/Hooks Lighting Demo

Using Recycled Components

Another neat thing we accomplished this week was using recycled components across our app to give it a consistent theme and style. It also cut down on coding things twice. A good example of this is our input components which can change (Date-picker, number input, text input, size, color, etc) based on the props that are passed to it.

Here is our input component from a shared folder:

And here is how we set it up after importing it from the shared folder for use in the component that adds a workout:

Whiteboard Challenge #3:

Lambda Schools - Labs9 - Whiteboard#3: Bitcoin Trading

For this whiteboard challenge the problem was as follows:

You're trying to make your fortune by trading Bitcoin. Suppose you want to automate this task. Write a function findMaxProfit that receives an array of today's Bitcoin prices. Your function should return the maximum profit you can make from a single buy and sell. You must buy first before selling; shorting is not allowed.

Example:

const bitcoinPrices = [1050, 270, 1540, 3800, 2];
findMaxProfit(bitcoinPrices);   // should return 3530, which is the max profit you can make

from these prices by buying at 270 and selling at 3800 Analyze the time and space complexity of your solution.

This was a fun problem to solve. I was almost at the solution and had I had some more time I would've definitely arrived at the solution so I was happy about that. I was a lot more relaxed this time around which I guess means that these whiteboard challenges are working. I still need a lot of practice doing these but it's good to be put on the spot like this to get comfortable with what it would be like in practice at an actual interview.

Recap

This was a really good week. We have come a long way from where we were on Friday and I'm really proud of all the hard work that my team has put in. Our final demo is a week from today and I couldn't be more excited! 🔥

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