Dynamically generated dashboard and map of year-to-date shooting incidents in New York City. The app utilizes Open Data NYC's API to gather a list of individual shootings compiled by the NYPD. From there, it generates a map with pins for each shooting, and charts of statistics. Built with Vue.js, Express.js, and Mapbox. The Express server is used mainly to hide the API's access token in an environmental variable. Fetched data is stored locally to reduce calls to the server. View working component. "Eco" dyno, takes a few seconds to wake up.
Project meets general accessibility (WACG) and cross-browser requirements. More testing with a dedicated services (e.g., Sauce Labs) would be helpful if deploying to production.
-
Header and charts
-
Map and footer
Clone down this repository. You will need node and npm installed globally on your machine. The Express server uses the Fetch API. You will need a later version of Node (18+) for this to work.
Installation:
npm install
To Run Vue:
npm run dev
To Start the Express server:
npm run start
To Visit App:
Visit the localhost port displayed in the terminal after running npm run dev. You may need to disable your browser's Cross-Origin Restrictions.
- Shooting data from NYC Open Data.
- API guidance from SODA Developers.
- Readme guidance from Brenna Martenson.
- Linting guidance from ESLint and Stylelint.
- Design guidance from Google's Material Design.
- Accessibility guidance from Chrome's Lighthouse and Firefox's Developer Tools.
- Shields from Shields.