Datamade_Code_challenge_V2

[Jaime-Codes]

Overview

• Supplement the community area geojson data
• Write a test for your data endpoint
• Filter results by a specific year
• Display results on the page
• Make the map dynamic

Updated map/serializers.py to fetch proper shape of data. updated test to verify correct permit counts. Broke out map/static/js/RestaurantPermitMap.js to React components and util functions. Updated MapContainer to have popup and color based on yearly permits. Added Legend to add additional context to map data.

Demo

Click to expand: Screenshots below

home page

Loading Screen

Error Screen

Popup

Notes

I decided to break up the main RestaurantPermitMap into smaller components based on the philosophy of React thinking in React. The utils folder houses functions what help calculate and shape the data for easier look up for the map container.

Opportunity for improvements

Click to expand: Additional thoughts and ramblings

• Convert js files => ts files, jsx => tsx files. Introducing Typescript would help with developer experience. Due to time constraints, I decided to stick to vanilla js.
• Testing on the front end. Adding jest testing or vitest along with React testing library.
• adding Tanstack Query. Given we only focus on Chicago and the data is fairly static, adding this library could lend itself to more user interaction while limiting unnecessary network calls. Users maybe able to compare permits issues for a given neighborhood throughout the years, compare year over year changes, etc. Set up is fairly straightforward and provides loading and error states out of the box.

Testing Instructions

Click to expand: Instructions on setting up locally

Development requires a local installation of [Docker](https://docs.docker.com/get-started/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/). These are the only two system-level dependencies you should need.

Once you have Docker and Docker Compose installed, build the application containers from the project's root directory:

docker compose build

Load in the data:

docker compose run --rm app python manage.py loaddata map/fixtures/restaurant_permits.json map/fixtures/community_areas.json

And finally, run the app:

docker compose up
The app will log to the console, and you should be able to visit it at http://localhost:8000/

Use this command to run tests:

docker compose -f docker-compose.yml -f tests/docker-compose.yml run --rm app

Testing error page - open dev tools. Find the network tab and select map-data/?year={year} and select block requests and block the url. Navigate to select year in the UI and select a new year. Finally select the blocked year. Verify error page is visible