The Pinnacle of my Lambda School Odyssey
The story begins
I started Lambda School’s Full Stack Web development track on September 30th, 2019 with the hopes of advancing my skills and knowledge to eventually get a job in the tech industry. I had spent about a year prior teaching myself through various mediums how to program in Java and felt like this step was necessary for me to grow. I was chaotic in my learning, juggling topics and languages never really finding a fit. I realized I needed structure in my learning, and I felt like Lambda was a perfect fit for me at the time.
Fast forward in time to now, and as I approach the end of my time with Lambda School, I would like to reflect on what I would like to call the “pinnacle” of my Lambda experience….Lambda Labs. Basically Labs is a chance for students to put their skills on display working in teams on a project with a prebuilt codebase. On top of your contributions to your team/project, to pass labs students must also pass a technical code challenge and a core web interview.
To say I was nervous in the beginning would be an understatement. Throughout my time at Lambda I had struggled with imposter syndrome, and finding out about these interviews was nerve wracking to say the least. Not to mention, I was also assigned a mentee through the Lambda Leadership program, so my plate was beginning to get full again.
The first few weeks was dedicated to team orientation and planning. Live coding didn't start until our fifth week, and I was appreciative of this approach because one of the things I seem to struggle with is planning. The project I was assigned to was a pet groomer app where customers would be able to view groomers in their area based on location, and then order services as well without ever having to leave their house. The project was built using Node/React.js, with AntD as our styling library and Okta for authentication. After meeting my team and planning the structure of the app, live coding began. My first task given to me by the team on the Front End side of things was to hook up Redux for state management and add functionality to search for groomer in our database.
To begin, I decided to set up Redux first. My thinking behind this was that it was important to set our initial state and connect components early to avoid confusion or complication once our code base grew. In other words our application would be more scalable this way.
The Search for Groomers
So after setting up our initial Redux state, I was tasked with creating a Search Form that would give our users the ability to search groomers in our database. Since the code was scaffolded already, I decided to try adding a search form directly into the component that rendered the profile list instead of making the searching its own page. I did this by creating my search component and then importing it directly into the profile list. By passing down my handle change function as a prop my search form was able to manipulate the filtered data and display the relevant results. Now I did consider other approaches but this one in my opinions was the least invasive to the existing code base, and would require less changes in other components. In the early stages our search was limited by groomer name, but using the MapBox API I was able to add the functionality of location based searching.
Using some npm packages (React-Map-GL and React-Map-Geocoder), I was able to abstract some of the code away into a more condense and readable component. I was also able to add markers, which used groomers latitude and longitude positions to display their business location on our map. Honestly this part of the project I think I am the most proud of, mostly because before this project I had no idea this API even existed and in a few short weeks I was able to add map functionality to our app and even style the map to match our app design.
Not dealing with these cards
The next thing I wanted to accomplish was to make more functional user profile cards. Not only that, but I also wanted to start creating a style and theme for our app. I decided to use the Card component form AntD as a base and then would style it from there using node-sass. I'm a big fan of SCSS and I definitely prefer component level styling , as I feel I get more control of every component’s styling. While some may find it redundant, I have always been a fan of styling this way. But then I had another issue….How was I supposed to fit all of this information on one card? Just think about it, I wanted a button to take you to that users individual profile, I wanted a picture on the card, a name and also a rating.
With all of that on one card I felt like I was losing some things id like to have had on there so with that thought I came up with the idea to have a back and front to the profile cards This way, I could add a rate feature or even display business information on the backside of the profile card. To abstract away this process and make it easier to accomplish this i found a very useful npm package called react-card-flip. It was easily one of the best decisions I made as far as technical choices. I also decided against an on hover flip and went with an onClick approach. I did this because I wanted our application to be mobile friendly and to me it made more sense to flip on a button click.
Home is where the heart is
After the cards, I wanted to make our home page a little more unique. So I went to freelogodesign.org and made a free logo to use in our app. I also created the name Pet-XPress for our app which made sense, and I needed a title for our logo. So with that, and once again using SCSS for styling, I transformed our homepage. I'm very proud of the work me and the team has done, and I felt the style direction we went in (goofy and colorful) was perfect for this type of application.
What's a journey without a few road bumps?
One of the biggest technical challenges me and the team had with this project was trying to store current user data to Redux on login. What made this difficult was the applications use of Okta for authentication. Since this part of the application was already done for us, we had to navigate through different config files just to see what was going where and when. This is where I really credit my team, we were tenacious in figuring out this problem. I remember a few nights where we were in a zoom chat debugging this problem for hours, so once we were able to figure out how to structure the Api call correctly (which fixed the issue), it was a huge relief and felt like one of the bigger accomplishment ive had in Lambda so far.
So…what now?
As me and my team’s time in Lambda school comes to a close, we are now putting the finishing touches on our work. Meticulously going through the work we have done adding relevant tips and comments as we potentially prepare to hand our application to another team to work on. There's still a lot to be done, such as linking individual profiles to their cards to be viewed when they are clicked on, and adding the functionality for payments with the stripe Api. There are some challenge's ahead, as our map component is currently using dummy data the next team will have to need to find a way to Geocode a users location to get their lat/lon coordinates. Hopefully the groundwork we have laid makes it easier for another team to come in and finish our vision.
I have learned a lot during my time in labs, and the opportunity Lambda has given me to simulate a team project like this will be invaluable to my future as a developer. I truly enjoyed working on my team and the feedback I have received from them regarding my technical skills helped me battle my imposter syndrome and ace my two labs interviews. I now enter the next step in my journey more confident than I have ever been and also proud of what I have been able to accomplish during my time at Lambda School. I have met so many kind and amazing developers who all deserve to be working and thriving in this industry. I can only hope to continue to improve and reach my full potential as a developer. I will always consider myself a Lambda School Alum, and will forever cherish my time here. It was well worth it.
