lcaroselli / citysnapshot

This application pulls data from multiple endpoints to generate and compare cost-of-living data and create a 'snapshot' of a searched city's quality of life. Stack: React & Redux

CitySnapshot - Laura Caroselli

LIVE SITE: https://lcaroselli.github.io/CitySnapshot/

Introduction

This application pulls data from multiple endpoints to generate cost-of-living data and create a 'snapshot' of a searched city's quality of life. The user also has the ability to compare city data and generate a moving checklist which will round out their total moving costs.

---

---

Built With

• HTML
• CSS
• JavaScript
• React
• Redux
• Jest/Enzyme for testing

Project Goals

• Separate application logic into small, testable functions.
• Create modular, reusable React components.
• Advanced familiarity with Redux workflow.
• Write meaningful, comprehensive unit and integration tests.

citysnapshot's Issues

QUESTION - Clean-up data objects - maybe separate files?

EXTENSION: Moving Checklist - prep, move, settle-in

BUG - Search bug - 'Enter' after clicking and then clicking inside input will put the 1st at the top in the input box

Comparison functionality and page

User can star cities

Clean up object

Start Redux and Router

Victory Charts

Proptypes

User can save comparisons

ISSUE: Chart spacing on CityPage

BUG - Data repeating on page

Style data

Write tests

• tests are there you might have to mock some of your router routes.

User functionality

Research & Fetch API data for cities

https://developers.teleport.org/
https://openexchangerates.org/
https://www.numbeo.com/cost-of-living/

QUESTION - Multiple data requests

Save User's city

ISSUE: Get Search to detect arrow keys

Update styles and palette on cityList page and checklist page

Set-up Redux workflow

Actions, reducers, store, provider, container, to components

Choose color palette and design (Wireframes)

CityPage Unique Path & Search

Implement drop-down/auto-fill search functionality

TOADD: ReadMe

CityList Buttons

CityPage component path other than home on render

Fix routes

Fix routing

• There are some router issues with the conditional rendering.

Ability to search by cost of living budget for cities that match a range

Refactor CityCard

• fix function formatting on the class
• you don't have to fliter here-- > https://github.com/lcaroselli/CitySnapshot/blob/master/src/components/CityCard/CityCard.js#L32
  • it might make sense to also change your city cleaner to just return the object and itterate over the object instead of the array. (this may actually be less performant)

Styling of the sections of the city page // the chart

• it might be cool to have another chart for the comparative data for each city
• style the victory chart so its more readable.

Refactor Repeated Code

Standardize Search queries

ISSUE: Testing - Components (tests not recognized)

Fix search to not display div when empty

Search slug

Redux up and running with store

Multiple API requests to not overwrite each other

TOADD: CityList filter search (similar to HeadCount)

CityPage Unique Search

BUG: Comparison Page - Dbl clicking

Begin testing

Get data to display on individual city page

Implent local storage

CSS touch-ups & Responsive

Build out Initial React components

App
NavHeader
Search
CityCard
CreateUser
Login

WelcomePage (welcomes user with search)
CompareCitiesPage
SavedCitiesPage
EXTENSION -> MovingChecklist (with prep/move/settling-in component & estimated cost component)

Clean Compare Page fns & CSS

When clicking on search button, it fills in the search input and auto-submits that city

ISSUE: Path Redirects for CityList page and CityPage (instead of just conditionally rendering)