Lambda School: My Final Team Project
A recount of my experience in Lambda School’s final unit, Labs!
In this post, I provide a background of Lambda School, describe the Labs unit, and offer insight into my experience developing an educational game app for a stakeholder on a cross-functional team.
If you’re mainly interested in the technical aspects, skip ahead.
What is Lambda School?
Lambda School is a 6+ month computer science and software engineering program that provides an immersive hands-on curriculum with a focus on computer science and full-stack web development.
There are two main advantages over a traditional college degree. First is the accelerated rate of learning that trains you for the professional world. Second is Lambda’s income share agreement, which aligns the school’s incentives with the students’.
Lambda School students learn the depth of a 4-year degree in computer science, while also learning the skills to be a professional web developer or data scientist in a fraction of the time for a fraction of the cost.
The school was founded by Austen Allred in order to provide a remote school for web dev students who cannot afford a traditional college degree, either due to finances or time constraints. Instead of requiring an upfront, traditional tuition, Lambda reduces the financial risk to students by offering an Income Share Agreement.
In short, ISA’s work by repaying the school only after you get a job making a salary over a certain threshold. The total amount and length of repayment are capped.
Here’s the ISA at a glance from Lambda School’s website.
I should point out that I started my web development track in May 2020, and some of the particulars regarding the class structure and ISA may have been updated since I joined the school.
What is the Labs unit?
As each student nears the end of their journey at Lambda School, they are assigned to a team to develop deliverables for a stakeholder of a web application in a one-month deadline.
The purpose of Labs is to provide students an internship-like experience with real-world challenges, deadlines, and programming sprints to mimic the work environment as a software engineer to deliver production-quality code to a deployed app.
I was assigned to Story Squad, an educational game app targeted to 8–12-year-olds that provides interactive and immersive creative challenges to kids. Story Squad was founded by Graig Peterson (a former classroom teacher turned Ph.D. candidate researching the correlation between student’s storytelling abilities and game theory bargaining) and Darwin Johnson (a Lambda School alumnus and professional data scientist).
The Basics of the Game:
- 📚 Users are given a 1–2 chapter fiction passage at the beginning of the week. Each user reads the passage at their own pace.
- 📝 Each user is prompted to create their own additional writing passage and accompanying illustration and upload the PDFs to the app.
- 👯♀️ Users are assigned a teammate and get to read each other’s stories and drawings. This pairing is called a Squad.
- 🏆 Each squad distributes points amongst themselves in order to go up against another squad in the next round.
- 🥳 The two squads face-off to determine who ultimately wins the points, and a winning squad is named!
What problems did we encounter?
The biggest hurdle our team faced was understanding how to build onto the extensive, complex codebase that we inherited from previous Labs teams. The goal of Labs is to pass the torch from team to team to continue working on the stakeholder’s app until it is ready to launch to the public.
Timeline of obstacles:
- Week 1: We spent the first week diving into the front-end and back-end repositories to understand the current state of the app we inherited. Without much guidance, it was difficult at first to understand how to read code from a developer who was no longer available and to figure out how the front-end connects to the back-end databases, back-end API, and the data science API. It was a very accurate look into what we’ll jump into in our first jobs as software engineers (hopefully soon!).
- Week 2: By week 2, we understood what bugs needed fixed first, what features to prioritize, and how to split up the work between the 4 of us teammates. Getting the app to run locally on each of our machines was a challenge that took longer than we expected. The importance of reading all of the documentation to understand how to set up the environment files on the FE and BE repositories was crucial, as was getting Docker and PostgreSQL up and running to support the back-end API.
- Week 3: The third week is when we hit our stride and started implementing feature releases that we shipped to production on our deployed site. I’m proud of how each team member worked diligently to ship the features they worked on. We also pair-programmed on some of the more difficult features and made sure to follow Lambda’s strict version control guidelines.
- Week 4: On Tuesday of the final week we presented our product to the stakeholders live via Zoom. We were able to show off the features we built and got feedback from our stakeholder that he was “blown away” by what we had accomplished in such a short time. Success!
A Close-Up Account of One Technical Challenge
Our project’s front-end was created in React with a Node back-end server.
Aside from working on the back-end moderator controls, which generate groups of 2 users into “squads” based on their grade level (thanks to the data science API provided by a team of Lambda DS students), and “faceoffs”, which generates a faceoff between 2 squads, my team also created a helpful “reset” button to help the developer reset the game while testing the app by wiping the seed data back to square one.
The biggest technical hurdle I personally overcame was displaying the avatars for each child user. I found that the most challenging aspect of this feature was properly displaying the layered elements on top of each other in a responsive way.
In order to accomplish this, I first used Redux to grab the state of each user’s selected avatar in order to display the avatar when the component mounts (after the back-end generates the squad of 2 players).
The stakeholder provided a Figma file for us to use as a template for the design of the app. I utilized the CSS property z-index that allows you to visually layer overlapping elements to recreate the “Join the Squad” screen demonstrated in Figma.
For this project, I couldn’t achieve the goal by nesting the elements inside each other. I needed to be more specific, so I took advantage of z-index.
Z-index allows you to assign a numerical value to each element. Once given values, the highest valued element is shown on top of the other lower-valued elements.
Z-index also requires the position property with a value of absolute, relative, fixed, or sticky. I won’t go into the specifics of those properties here, but you can find a great explanation of how to use position properties on MDN web docs.
In looking at my rendered component above, you will see that the avatar icon is the topmost element with the highest assigned value. Conversely, the word bubble is assigned the lowest value, so it appears behind the other 3 elements.
Here’s a simplified code snippet to better understand:
.wordBubble {
position: relative;
z-index: 1;
}.star {
position: relative;
z-index: 3;
}.avatar {
position: absolute;
z-index: 4;
}.text {
position: absolute;
z-index: 2;
}
What’s next?
There’s always more to learn, and I’m excited to keep acquiring new skills and improving my technical library of tools!
I often wonder if there is a “better” way to achieve something and find myself spending too much time going down a rabbit hole of tutorial videos and articles about one topic. I’ve learned that it’s important to get an MVP version done first and then save time for improvements after the bulk of the project is finished. I love to encounter new challenges so that I have the opportunity to figure out how to best solve the problem!
