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 5

Final Polish, Demo & Career Prep

This was the last week of labs which feels strange to type. Our goal was to have a fully functional app that looked beautiful and ran smoothly. To get a 3 for the week the requirement was:

As scoped, the application is perfectly implemented. All features work without issue, there are no errors in the console, and no flaws in the layout/presentation.

In addition to getting the project done I was focused on getting my career coach's endorsement which meant that I needed to have my resume, LinkedIn and personal portfolio website all up to date and looking good. It was going to be a busy week in a very good way.

Day 1 - Monday

We spent most of the morning planning out our week and going over our app from top to bottom to spot bugs and things we wanted to implement before we rolled it out for user testing. We listed everything that we needed to work on, how long it would take us and who would work on what. We then prepped what we would say to the client and started to code a bit.

After meeting with the client we presented our plan and laid out our vision for the week: complete all the tasks we needed to do by Tuesday end of day so that we could run some user tests on Tuesday night, which would allow us to implement feedback on Wednesday for another round of testing that night and a final polish on Thursday. It was then time to code.

Front End Pull Requests

Spent most of the afternoon and the following day working on the workouts page which has been the page that I've spent the most time on out of all the pages on the project. We focused on making it look as nice as possible on mobile view since people will most likely be using our app in the gym. Made some great progress on this day.

Day 2 - Tuesday

Tuesday is a bit of a blur. We spent all day working on our tasks and were able to finish and were ready for user tests by the end of the day.

Front End Pull Requests

After our morning standup we got back to completing our tasks in preparation for user testing. I spent the day refactoring the workouts card to be an accordian component that you can click on to display a list of exercises associated with that workout along with some other changes. The entire team finished their tasks before the end of the day and we were ready for user testing.

I shared our application with friends and family as well as the #health-fitness channel on Lambda's Slack room. We got a lot of great feedback and had a good list of things to work on for the following day.

At night I added and improved upon my personal site: elvisibarra.com as it was the only thing I needed to fix to get my career coach's endorsement.

Day 3 - Wednesday

We got together for standup and began to review our feedback and distribute tasks amongst ourselves to get ready for another round of testing by the end of the day.

During our entire 5 weeks this was probably the day filled with the most pull requests out of all of them, I wont put a screenshot for this day because it would be too long. This had to do with all of the minor changes we were making to the site and having us all separated out doing our own pulls to get a lot done quickly.

Front End Pull Requests

I managed to implement all our user feedback from day 1 of testing as well as get our components to use Suspense & Lazy which I'll talk about in the code demo. This allows our components to load only when necessary and gives our site a performance boost. The rest of the team also finished their tasks and I couldn't be more proud of how hard we all work and how well we communicate with each other.

We were ready for another round of user testing.

I also got officially endoresed by my career coach which means that I can apply to all of Lambda School's partner companies. Time to find a job!

Day 4 - Thursday

Our hard work was seemingly paying off... we didn't get too much extra feedback from day 2 of testing but we improved on what we did get back.

Before lunch we had our final check-in meeting with the client to give them a preview of what they would see the following day for our demo. I presented our technical accomplishment which was implementing React Lazy and Suspense. Our client was really impressed and said that we should get a 4 instead of a 3! We did it!

Front End Pull Requests

One thing that we did work on after our second user testing which took us into the afternoon was to implement a "forgot password" feature. Good thing we user tested! This was spotted by one of my close friends and is an essential feature for any website. We have some minor work to do tomorrow morning but overall we are ready to demo FLEXLOG!

Code Example - React Suspense & Lazy

So what is React Suspense & Lazy? Well, they are react features which allow the app's components to be loaded as need rather than all at once. This gave our site a noticable speed improvement and an overall snappier feel.

You first need to import React Suspense & Lazy from React wherever you plan on using them. Since we are not using a 3rd party API in our application we are doing all of this in our App.js file.

We want our navigation and landing page to always load as these are the minimum pages needed for the user on the FLEXLOG.app homepage so these 2 components are not lazy loaded and will be available to the user when they login.

Since these 2 components are not lazy loaded we are not going to wrap them in the tab. We will wrap our other components in this tag. For this to work you must provide a fallback parameter for what should display while the component loads. We used the react-loader-spinner package for a quick loading animation. And that's it! Now when a user first gets to our page the other components/views will not be loaded until a user needs them. It's pretty awesome.

For a more in-depth look at how React Hooks, Suspense & Lazy work I suggest checking out my React instructor's video (Dustin Myers) at Lambda School demo on the subject which was a major point of inspiration for us and our approach to this project:

Lambda School: Dustin Myers React Next Workshop

Recap

We are a little over an hour away from presenting our demo and I'm feeling a bit anxious but also very relieved. I am very happy with how far we've come and can't thank my team, PM, instructors & Lambda School at large enough for this experience. I've learned so much in the past 5 weeks and am happy to have been a part of this. Next is job applications and the Computer Science portion of the curriculum. 🔥

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