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 1

Meeting, Planning, Initializing

Before we jump into a recap of the week I just want to start by describing a bit of what Lambda Labs is and how I end up on team Workout Tracker (working title?)

So what is Lambda Labs?

Lambda Labs is a 5-7 week long experience (depending on whether or not you do Labs before or after the CS portion of the curriculum) where you work with a small team to build a web app from the ground up.

We had a list of projects presented to us over the break and we had a preliminary round to weed out the low-interest projects and a final round to make the final teams.

I gravitated towards the workout app because it is something that I would use after building it. It seemed like it could get to be pretty complex/challenging which was also a factor that I was looking for since we have 4 weeks to build it and 3-4 other awesome Lambda students to do it with.

During labs our team will be having daily stand up meetings, code reviews and a client to report to. Once our project is complete we will have to present a capstone defense. Along the way we will be given career advice and weekly whiteboard challenges so that we can practice our technical interviewing skills.

I was really glad I was on a team with familiar names and on an app that I was going to enjoy working on. I was really looking forward to writing some code.

Day 1

Note one line of code written... it was amazing!

We started off the day at 8am sharp with a kick-off lecture which went over how Labs was structured and what was expected of us by the end of the day/week. It was a lot of information but luckily it's all documented and our team communicated well with each other right off the bat.

We were given two tasks for the day: finish the technical design document (TDD) & start this Gatsby Development Journal.

We spent hours working on the TDD. It helped us layout our application down to the component level on the first day. We went 0 to 100 quick. Especially after having been off for 3 weeks. It was nice, I had no time to do anything but think about how to get this application to work. My team is really nice. We were able to map out our application backend database structure and our views on the front end and justify our stack to the client. We chose a React/Node/PostGres stack and plan on using Hooks once we complete our minimum viable product (MVP). It was great to be able to plan in this fashion. I definitely don't take enough time doing this on my own projects and I'm so thankful to see how others work and learn from them. After reviewing our initial submittal we were asked for further benefits and costs of our stack choices and that was our task for Tuesday morning.

It was a really good first day, I'm thankful to be in a group that is clicking and focused on making and awesome app.

Day 2

We started with a standup where we made our justifications for our stack choices and resubmitted our TDD for approval. While we were waiting I had started to watch a React Hooks workshop on Youtube given by a Lambda School instructor because I want to use them for this project. A few of us on our team actually got into it. Soon enough we were given our Trello board and access to our Github Repo.

The first thing we did was split into a team of 3 for frontend (which I was on) and 2 for backend.

Once we were in our groups we started a VS Code LiveShare session and the three of us began to organize our project. I had never used this extension before or worked with more than 1 person on a project in such an organized manner. It was a great start to the coding process.

We used the component model we developed for our TDD to structure all our files and our components. Once we were done we submitted our first pull request to the client and awaited approval. Here are all the pull requests we did on the first day of coding:

Front End Pull Requests

The second pull request I listed was for some additional work we did nesting our components based on our model to make progress in anticipation of deployment. We worked that out and are waiting to submit that pull request while backend deploys in the morning. There is an issue deploying to Heroku from within a subdirectory of a Git repository so we are switching to the Now platform and then continuing from there on day 3.

One final thing we discussed as a team was to switch members around from backend to frontend and vice versa as the project progresses so that we all get experience doing both. I'm staying on frontend for another day but it's awesome to collaborate with like minded people who all want to learn and help each other improve.

Day 3

Overnight one of my teammates was able to deploy the backend to Heroku. He explained what errors he was encountering which helped me understand how to deploy in the future when you have the backend and frontend in the same repository. After updating the url in the frontend we deployed that and we then met with the client who gave us some great tips for how to manage our data and what a user would do once they are in our app. This made us re-organize some tables which allowed us to continue to implement functionality. This was a great meeting. When I say client in these posts I am referring to the instructor for Labs who is in charge of our group. We then broke for lunch.

Front End Pull Requests

For the first pull request we went through on frontend and converted all of our components to be styled components. We went with styled components because it enables us to have one theme which can be used with all our components to have a consistent style & began to style some of the views.

In the second pull request we started to set our state on the main App.js file and started to pass the necessary data down to their respective components through props.

Overall this was a very good day, I started to pickup the intricacies of working with branches & Git which was awesome to do on a real project. Having a lot of fun so far.

Day 4

After our morning standup we started coding. I went to backend for today to balance the workload and to make sure that we are all working on a bit of everything. Right after lunch we were given a UI/UX presentation which gave us great direction for our app and then we met with the client for our team weekly review. We met MVP and are a bit ahead of schedule.

Back End Pull Requests

For the first pull request I wrote the GET/POST/DELETE endpoint for the users route and for the second pull request I wrote the PUT functionality for the users route.

Backend was fun, it was great to be able to hop over and do something new. It's good to think about a new problem and stay fresh.

Here's recap of the week! (not including Friday). I'm really enjoying working with my team members. I think one of the things that has helped us bond and click so soon is that we have been livesharing our coding sessions from day one. It's a great way to help each other and stay accountable. We also chose a name today and found an available domain. Fitmetrix coming soon! I can only speak for myself but so far our team has had very little friction, the one thing that I might be able to identify as having been a friction moment might be during initial startup. We were going so fast that we ended up not seeing a glitch in our data model which we may have caught earlier had we done some more closer planning. We got through it but there was definitely a bit of frustration until we all spoke about our model and worked through the problem. See ya in week 2.

Our data model looks like this:

Finally here is some code! This is an endpoint I wrote for backend which is used to edit a user's information. It uses the user's ID in the route to make a call to our users table and updates that user's record if found. If an ID is provided which is not in our database we return an error message which stating that the ID does not exist and likewise if a name/email/phone are not provided in the request we return an error message which asks for that provided information since our user's database has these fields being not-nullable/required. 

router.put("/edit/:id", async (req, res) => {
 const { name, email, phone } = req.body;
 const { id } = req.params;

 if (
   !{ name, email, phone }.name ||
   !{ name, email, phone }.email ||
   !{ name, email, phone }.phone
 ) {
   res
     .status(400)
     .json({ errorMessage: "Please provide a name/email/phone for the user" });
 }

 try {
   const updateduserCount = await db("users")
     .where("id", "=", req.params.id)
     .update({ email, phone, name });

   {
     updateduserCount === 0
       ? res
           .status(404)
           .json({ message: "The user with the specified ID does not exist." })
       : res.status(200).json({ updateduserCount });
   }
 } catch (error) {
   res.status(500).json(error);
 }
});

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

The backend is deployed to: https://fitmetrix.herokuapp.com/api/user/info/22

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