This is the frontend for data retrieved by https://github.com/pettazz/findvax-scraper
- It's all node just go get node however one does that I dunno
npm i-> Everything is in the production profile because there's no "dev" version of this thing and an un-compressed build takes forever but prod takes like 10stools/webpack-watch-> runs both a static http server out of ./dist and thewebpack --watchbuild, which will regenerate every time a change is detected- You'll need some test data, change the urls in
src/config.jsto some relevant json files. Like maybe from https://github.com/pettazz/findvax-data. You can use the same http server from this project to host the static files with something like./node_modules/http-server/bin/http-server ../findvax-data/MA -p 8888 --cors, which would change your data urls tohttp://localhost:8888/locations.json.
- Auto-refresh every 5m
- Right now doesn't care about states because all the data is from MA, so it needs to be able to switch between them, including choosing an appropriate
locations.json, depending on how the scraper outputs that stuff by state.locations-MA.jsonandavailability-MA.json? It's an open question over there too. - All those tailwind classes all over everything sure could get cleaned up into the
index.cssfile I bet - Some button to switch between available languages?
- Accessibility a11y stuff: mostly semantically not bad, but could be better. No aria attributes (especially modals and buttons), judicious use of
.sr-only, keyboard navigation seems to be missing a lot of highlights, etc - Test in browsers: I don't think IE11 is gonna make the cut here, just nothing supports it anymore. But also I don't have a ton of browsers handy to test in so anything would be useful
- Noscript? Detect this and show a flat print version somehow?
- The Braille Institute's Atkinson Hyperlegible Font
- Airbnb's Polyglot
- Alpine.js
- Spruces
- Tailwind CSS
- Font Awesome
- webpack