- The front end is hosted at https://zero-react.herokuapp.com/
- The backend is hosted at https://zero-flask.herokuapp.com/
Navigate to the root directory of the project and type:
cd api
venv\Scripts\activate
cd ..
npm run start-api
This will start the backend of the project
To start the frontend, first open a new terminal window, navigate to the project and type
npm install
This will install the project dependencies. Next type:
npm start
The entire project now should be running locally
For the underlying data I found data in the form of a csv file from https://simplemaps.com/data/us-zips. I then created a Sqlite database, created a corresponding schema, and then imported the csv file into my database.
To manage the first phrase, I created a single '\create_phrase' endpoint in the flask backend. It takes two parameters: a name and a zipcode. It then queries the database I created to find the corresponding county and population.
The additional feature that I implemented was another api endpoint '/county_pop', that takes a zipcode as a parameter. This then makes a more complicated query on my database which sums up the population of all of the zipcodes within the county of the given zipcode.
On the react side, I created four state variables, name, zip, phrase, and county_phrase. These store the entered name, entered zip code, phrase returned from my first endpoint, and data returned from my second endpoint respectively. I then used the useEffect hook to make get requests to my backend when the relevent state variables were updated.