Inheriting a codebase, working on it for two months, and passing it on
Published: 2021-02-04 02:25:51

During Lambda Labs I worked on the Express Groomer product, a build-on product that had been worked on by the previous cohort. It aims to connect pet owners to pet groomers based on location and other filters. I worked on the landing page and the profile editing functionality for groomers. Before I started labs I was worried that I would not be able to contribute much to the team. I felt like I had forgotten how to code and that I would only slow the team down. However, I was excited to get back into coding.

## Progress and Setbacks

The codebase we inherited already had quite a lot of functionality in place, such as the login and profile editing functionality. There was plenty of room for improvement though. The team as a whole developed the search functionality, improved the registration and login process, and added more options for profile customization. Individually I worked on the file structure of the codebase, the landing page, and the customization of the groomer profile. I also worked with other developers to fix problems as they came along.

The file structure in the codebase was confusing and deeply nested. The first task I tackled was turning the file structure into something more intuitive. The main problem was in the components directory. It was nested four levels deep with related components in different file paths. I separated the components into groomer and customer directories and moved the rest out of the nest.

Next, I worked on improving the landing page. The landing page was hardly customized to our app and looked like a page for a tech company, not a dog grooming service. There was also no easy way to get to the landing page from our app. I redesigned the color palette, images, and icons on the landing page and adding routing to it from the main app. I also added conditional rendering that would take signed-in users to their dashboards.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6o0r5etu0rgwglr5h9fz.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6h6kv21xeejgtwv7ny4b.png)

The groomer profile was already customizable but it was missing some key fields. I added inputs to the editing form for which animals the groomer groomed, what services they offered, and whether their business was mobile or stationary.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zlm3xcqf9v2rta7l6w4h.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z0ml7uua05keuhdw4bn7.png) Then I added columns to the groomer table in the backend for those fields. Finally, I added new sections to the groomer profile to display the new information.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z0ml7uua05keuhdw4bn7.png)

Everything moved along smoothly until about six weeks into the project. Our Okta login information stopped working across the whole team. When attempting to login the user would be continuously rerouted back to the login page instead of being logged in. I worked with another developer and our team lead to fix this issue. It turns out our routing was at fault. We were missing an "exact" attribute on one of the routes, which was causing the user to be rerouted incorrectly. We fixed that and then discovered that the user's email was not being passed properly. We had to search through the props of several components to find the issue, but we eventually fixed it, and were able to login again.

## Wrapping it up and Passing it on

At this point the product has functional registration and login features, search functionality, location functionality, and routing. The customers and groomers can customize their profiles and those of their pets. The landing page is what greets users when they go to the app, and it takes them to their dashboards when they login. We added a lot of features to the product, but there are still many more that need to be added.

A rating system for customers to leave reviews for groomers and an appointment management system would improve user experience greatly. The Stripe API should also be added so customers can pay groomers securely through the app.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k49h28tqgqru53atau79.png)

Adding new features will of course bring challenges. The appointment management system will probably be difficult to implement because of how many elements go into it. Storing the information in the backend will be difficult because of how many different tables will be required, and displaying the information on the frontend will be difficult because of how much of it there is. There are a lot of things that could cause problems while implementing the appointment management system.

This project has allowed me to grow as a developer. During the project I was told by a teammate that I focused too much on unimportant details like font color and little design elements. I reflected on the way I coded and I realized that I had spent a lot of time on small details like that. From then on I stopped myself whenever I had been spending a long time on details and I asked myself if the details were important or not. If they were not then I would move on and only come back to them if I had time at the end of my tasks. This has helped me use my time coding more wisely and improved my efficiency. 

For me, this project was the perfect way to experience what working as a web developer would be like. In the real world, I will probably end up inheriting codebases from previous developers, and I had never done that before this project. In my previous experiences of building a product with a team we were always building the product from scratch. Now that I have inherited a codebase I can appreciate how difficult it can be to make sense of someone else's code. Working on this project has also shown me how important it is to keep practicing my coding. I have learned a lot from this experience and I was able to meet some really cool developers along the way.