Overview
City-Spire is an application that provides vital information for users looking to move into a new city. City-Spire allows for users to easily search for cities by name or postal code and get metrics on those cities; such as population, crime, livability and walkability to name a few.
The problem with moving, especially to an area that isn’t local, is that you may not be entirely sure what you will be moving into. Lots of research is needed, and vital information is often scattered across many sites and pages. City-Spire will offer all of the vital information needed to make an educated decision all in one place with one easy search.
Initial Build Concerns
Initially the main concerns for the City-Spire consisted of map-box integration and display of data to the end user. Map-box required use of the map-box API as well as their reverse-geocoding features to convert partial names of cities typed into a search bar into suggestions for the user to select and execute as a search. The search would then use the reverse-geocoding to convert the name of the city into a postal zip code that would then be sent to a back-end API. The return from that API call would then be displayed in usable form to the end user. The biggest hurdles to City-Spire were getting the data to the back-end in a shape that they required for use in their databases.
Ant in the City
The layout and presentation of information delivered by City-Spire to the end user is incredibly important. If information poorly organized and hard to navigate the user stiction will fall off. Users will move to competing applications if they cannot get the information they need in an organized manner.
One feature of City-Spire that was of key importance was developing an information card for searched (or saved) cities that is easy to read and has all relevant information for the end user. Data display for these cards needs to be simple, yet also be capable of showing in depth data (such as rent and rent predictions for cost of living).
This problem was addressed with the use of the Ant Design library. Through the use of an Ant Design tabbed card Cities are able to be shown with select information so as to keep clutter down on the actual card.
Initially, the component for displaying city information was monolithic and contained within the actual display page. The problem in doing this was that the city cards were confined to a single page, and would not easily be used elsewhere in the application. Breaking the actual card out of the page code and into it’s own component allowed for the card to be used across the application, rather than in a single page.
Ant was utilized because it provided a flexible solution within it’s own framework to style the card in an ideal form. Their tabbed card allowed for customization of each individual portion and was flexible enough to cover all of the cities that a user could be searching.
The Ant Design tabbed card required some setup for it to work properly, mainly defining a function to set a tab title to local state and then display information relevant to that tab when selected. An array of predefined tabs needed to be defined for use in the card, as well as the content that was to be shown on each card. Card information was to be passed into the card component through state properties and then added into the proper section of the card.
Features and Future
City-Spire shipped with working map-box searching and Ant Design components that are able to dynamically display city data. Users will be able to tab through data and select cities to add to their own saved profile. OKTA login and authentication is used for City-Spire to ensure security of user data.
Challenges for the future development would include individual map-box integration to each city info card. Streamlining saving a map, or map image will be important to cut down on load times for each card, and the amount of data being transferred into the application. Having a map on each city card would be a great visual for the end user to have, but finding a streamlined way to integrate it could prove challenging.
A specific favorites page for each user displaying city info cards for each city specific to the logged in user would be a logical next step for the development team. The framework in the API for the front-end of the application is present for such a feature.
Thoughts
Working with the City-Spire team gave insight into real world application development, from inception to shipping a product. This process began with user stories, describing circumstances and features an end user would want in an application. Doing this put us as developers in the users’ position and allowed the team to define specific features and allowed us to focus development towards those features. After user stories, the team listed all of the technology that would be needed for the application. This also focused the team to do what was needed. With so much technology available to developers it is important to set standards for technology at the beginning of the development cycle. While coding, writing informative pull requests allowed us as developers to focus what was being committed to main branches of code and demonstrated good industry practice.
Working on this team prepared me to be a better developer. I was able to work in a team, provide feedback, have feedback provided to me, and make changes based on that feedback. I was given the opportunity to work towards a goal with a group of developers and deliver a product. We were able to overcome challenges of working with different teams and ship a working product.
