Finding your dream city (My Lambda School labs project experience)
Dreaming big 💭
In January of 2020, I told myself that this year would be different, this year I would finally go back to school and learn something that I can use to get a job I could be proud of. So with no coding experience whatsoever (unless you count MySpace profile edits way back in the day), I enrolled in Lambda School, an accelerated program with an immersive hands-on curriculum that has a focus on computer science, software engineering, and web development. We started off learning the basics like HTML and CSS, then moved up to JavaScript, React and Python all while working on various projects with the hopes that some of them could conceptually solve a problem for its users.
Here’s one problem that comes to mind, have you ever planned to move to another city? I personally have not up to this point but just the thought of it scares me because of all the research, planning and effort that would go into such a big venture. So there lies the question, is there a website I can visit to find essential information on any city? Information such as what cities have the best schools, what are the safest cities, and which cities have the best weather. My laptop just shivered at the thought of the 100 web browser tabs that would be needed to gather all of this information.
That’s where Cityspire comes in. Cityspire is a project I’m currently working on that aims to help its users find valuable information on various cities they wish to move to including the average housing costs, school data, crime data, weather and more. No longer would you have to go to various different sites to find key information about a potential city on your move to list.
When I first was assigned to work on this project I had a lot of concerns, the goal of having a clean and polished product that displayed various key information about a given city seemed daunting due to the state in which the original project that was given to my team was in. For starters, in order to even get to the landing page you had to login, but there was no way to create an account! If you didn’t know the dummy login info you were out of luck. Then if you managed to get to the landing page, the design was not very visually appealing to put it nicely.
Here’s what the original landing page looked like
After countless hours of work, I managed to get the landing page looking a lot better. Using a combination of Material-UI and Ant Design, Here’s how the top part of the page ended up looking like.
Building the city, brick by brick 🏙️
As I previously stated, there were many challenges my team and I faced while working on this project. One of the many was the redesigning of the landing page, we needed a clean and visually appealing design to display various information, and so I worked on adding a card component that displays a modal with a list of the corresponding cities for each subject (i.e safest cities, best schools)
Besides the visual design challenges, we also had a plethora of technical problems. One specific problem that comes to mind is that when we tried searching for a city in the search bar or clicking on a city in one of the card modals, it would take you to the city results page but the exact city information would not be loaded, this was very problematic and took hours of trial end error by my team and I to try and find where the problem was in the code.
After many failures, I had almost decided to give up on trying to fix it when I got an idea, but it was so simple that I didn’t think it would work, I mean could a small change really fix this issue? And it turns out that this small change was exactly what was needed to get this feature to work. There was some code that was storing the city name information in the local storage property of the browser, and instead of passing the city name as a plain string, it was using a JavaScript function called JSON.stringify() for no reason and it was causing the name of the city to get stored improperly. Consequently when you searched for a city it could not load the correct information.
This was the problematic code on line 65
So all that I needed to do was remove that function in the setCityAndState function and just simply pass in the value which is the name of the city as a plain string. If you could imagine how my team felt when I told them it was just a one line change in order to make it work. 🤦
One line can make a huge difference!
It was worth the time ⌚
After over a month of work and what seemed like hundreds of zoom meetings, we finally have a polished, mostly functioning product that we could be very proud of. Although there are still many bugs left to iron out we managed to ship a good amount of features including:
- A new page header
- A hero image with some cool animated text that types on it’s own
- A search bar that actually works and loads the city information on the results page
- A card component that displays various information in a pop up modal such as the cities with the best schools, the most dangerous cities, the safest cities and the cities with the best weather
- A brand new new city search results page that displays a myriad of information on your desired city including the number of sunny days, the unemployment rate, average rental costs and more
- We also cleaned up the ability to pin a city to a users pinned cities page, and remove a city from a users pinned cities.
Due to unforeseen technical issues and no fault of their own, our data science team was not able to get a working API deployed in time for us to implement their data into our application. They worked really hard on gathering all kinds of data for the cities so it was a shame that we could not get their API in time to connect it to our front-end and back-end.
However, our incredibly talented back-end team was able to deploy an API that returns some dummy data for a large list of cities as well as placeholder JSON objects that can be retrieved with a get request.
Here’s the text animation on the hero image I mentioned earlier.
In terms of what the future holds for Cityspire, I believe that we laid out a solid foundation that can be built upon by our team and other teams. Some features and fixes I would like to see include:
- Adding the ability to create your own account
- Getting the map box functionality working so that users can use the map to see the city and surrounding areas they are searching for without the need to open up another application like Google maps
- The ability to type a city that is more than one word (i.e Los Angeles) without the need to have a hyphen in between words like currently constructed
- The ability to open an information modal on the landing page by simply clicking a card instead of needing to have a ‘view’ button
- Having more media queries in order to make the application responsive on more screen sizes like tablets and phones
- And last but most importantly integrating a data science API that pulls real data for a large majority of cities in the United States.
Here’s a look at our new city results page.
The main technical challenge I foresee for this project in the future is the integration of the data science API. This is because our back-end team had to create dummy data, tables, and JSON objects that might not match what the data science API is returning to us and so a great deal of code refactoring will need to be done on the back-end as well as the front-end.
As the work on this project comes to a close, I find myself having learned a lot of things in such a short amount of time that will help me with my career goals moving forward. My understanding of the GitHub workflow that includes making a detailed pull request, pushing branches, and pulling from branches has greatly improved. I also gained a lot of experience with media queries and getting a page to look good across many different screen sizes. I believe I became a better teammate alongside by far the best team I’ve had during my time at Lambda School. They gave me some great feedback including a lot of praise on how great the landing page turned out which gives me a lot of confidence that I can be a good front-end engineer moving forward. The feedback from my team leader also pushed me to become a better developer and helped me deliver better answers to technical and behavioral questions.
Well Cityspire, it’s been a great experience, but I guess now it’s time to leave the city. ✌️✌️
*Cue sad ending credits music*