Helping those looking to migrate to a new home
Migrate
NOTE: Mobile demos. Desktop version in progress.
Migrate provides demographic and quality of life information for major urban areas within North America.
A few years ago, my wife, dog and I moved from our home state to Colorado. Just couple years after that, we relocated to Washington. This series of moves made me realize what's most important to me when finding a new place live. My main motivators for change were based around the area's job opportunities, weather, and access to outdoor activities. I also assessed the overall quality of life, along with statistical information. All of this research inspired me to make Migrate. Migrate delivers accessible demographic and quality of life information for over 80 urban areas in North America. It provides a bird’s-eye view of urban areas through imagery, highlights, several rated categories and an overall score.
- Search by major metropolitan area, select from a list or choose from randomized suggestions
- Scores for 17 categories, including housing, safety, healthcare and more
- Location coordinates that link to google maps
- Mobile friendly design
- JavaScript
- HTML
- CSS
- React
- React Router v6
- Git VCS
- GitHub Projects
- React Testing Library
- Cypress
- React-Select
- React-Spinners
- Emotion/React
- Figma
I began planning out this project by reviewing the API documentation provided by Teleport, which led me to brainstorm features. From there, I planned on how to best get the information I needed. The Teleport API has a massive amount of data. Some challenges I faced involved retrieving data embedded deep in a structure that wasn't in a friendly, usable format. I overcame some learning curves as I built this project with several tools I hadn't used before, including React-Select, Emotion/React and Cypress. I also spent time researching React 18 and React Router v6's release changes. Throughout the project, I reviewed and refactored several parts of my code. I often reviewed my prior day's work to determine if I could DRY up the code or implement a better approach to the problem. Overall, I'm satisfied with the outcome and hope to add a desktop friendly version that can take advantage of the wealth of information provided by the Teleport API.
- Teleport API
- React-Select
- React Spinners
- Favicon
- Emotion/React
- Flaticon - Saepul Nahwan
- City Images
- All images belong to the original photographer and are used under creative commons. Attribution information can be located by searching: https://api.teleport.org/api/urban_areas/slug: city name /images/
NOTE: city names must be lower case. With hyphen if city has 2 names ex. san-antonio