Lessons Learned in Lambda Labs

It’s been almost three years since I started learning to code, and one year since I started on my journey with Lambda School’s full stack web development bootcamp. During my time at Lambda, I reinforced my knowledge of HTML, CSS, and JavaScript. I learned React and Node.js and was exposed to many new frameworks and libraries. Every unit in the core curriculum concluded with a group project, a two-week sprint where I worked on a team to build an app from scratch. The 12-month program ends with an 8-week group project that is designed to be as close as possible to working on a real product.

The project I worked on was an app called Pet Express that connects pet owners with dog grooming services in their area. We had meetings with a staff member who played the role of a stakeholder, and we used his input to plan the new features we would add to the existing codebase. It was interesting to work off of another team’s progress instead of starting from the ground up, but it was also challenging to jump into a half-finished application, bugs and all. Another challenge I faced was learning new frameworks rapidly, such as Ant Design and Styled Components.

Planning a Full-Stack Application

Before we got access to the codebase, my team and I spent two weeks planning out the project as if we were starting from scratch. We started by writing user stories, which are goals from the perspective of a customer using the application. Then, each user story was broken down into technical tasks that the development team needed to do in order to accomplish this goal. This gave us a clear roadmap to follow once we started coding.

Next, we created wireframes using a tool called Whimsical. Wireframes made development easier because there was an outline of what each screen of the application should look like. I designed the landing pages and most of the mobile version of our application.

Desktop view of the landing page.

Mobile view of the landing page.

Technical Challenge — Floating Footer

I implemented my designs in code using React and Styled Components, and one challenge I faced was getting the footer menu to stay at the bottom of the page. When the content didn’t take up the whole screen, the footer would float beneath it in the middle of the page.

This is what the login page looked like before we started coding.

I read a lot of tutorials and tried many solutions, but this is what worked for me:

• On every element, set box-sizing to border-box. This setting includes the element’s padding and any borders into its width and height.
• Wrap everything in a div (app-container in the picture below).
• Make the minimum height of the app the height of the screen.
• Within the app container, wrap everything but the header and footer in another div (content-wrapper in the picture).
• Give the content a flex-grow property of one, which means that as the screen size changes, the elements within will grow or shrink equally.

These styles were applied to the application, which fixed the bug with the footer floating on the page.

This is what the styled login page looked like:

This is what the login page looked after I styled it.

Results

When we began working on this project, users could log in and not much else. By the end of the 8-week development cycle, the team shipped the following features:

• All users can edit their profile information.
• Users can create, edit, and delete pets associated with their profiles.

Users can add information about their dogs and upload a pet profile photo.

• Clients can request appointments, and users designated as dog groomers can see and approve appointments.
• Site visitors see marketing pages before they log into the app, which entices potential users to sign up.

This explains the features and benefits of the app for professional dog groomers.

• There is navigation throughout the site, and the links change based on whether or not the user is logged in, as well as the pages the user has access to.

There is a mobile menu for smaller screen sizes.

• The entire app received a style overhaul, new logo, and new branding.
• The website is now responsive and has a mobile menu for small screens.

Reflection

One aspect of Labs that pushed me out of my comfort zone was giving code reviews to peers. It was challenging to tell teammates that something about their code needed to be fixed, but I think everyone realized that it was for the good of the project.

I also received feedback on my work from my peers, and it was a valuable learning opportunity for me. For example, when I submitted the new navigation bar for review, a teammate pointed out that the colors I chose did not have enough contrast, which made our site less accessible for people with visual impairments. He introduced me to this accessibility audit tool called WAVE, which is a neat tool for showing areas of improvement in any website’s visuals and code. His advice helped me make the website better for all users, and gave me a resource that I plan to use on future projects.

Overall, I think that my team made good progress on this application. We created some core functionality with the ability to edit user profiles and create appointments. I made contributions to the app that made the app responsive to more screen sizes and improved user experience.

Future teams will work on the Pet Express project, and there are still many features that are not implemented yet. I am excited to see where the next group takes it!