Crowdsourced Map of NYC Bike Repair Stations
For this project, I re-vamped my previous Community-Sourced NYC Bike Repair Station Map using the webdev skills I’ve been learning over the past year or so. In previous projects I’ve used Gridsome as it was one of the first Vue-friendly static site generators. However, as the Vue ecosystem has continued to develop, I knew for this project that I wanted to use a SSG with support for Vue3.
📜 Project Features
Vue3 was used for authoring UI components:
- The new Vue Composition API for simple state & utility function sharing across components.
- VueUse’s usePreferredDark composition utility to style the app’s map in accordance to the user’s preferred color mode.
- HeadlessUI’s Modal component.
- Vue-Leaflet for interactive mapping.
- TailwindCSS as a CSS framework, including super-simple light/dark-mode support.
Netlify for building and hosting.
Airtable as a light-weight database and headless CMS
- Airtable’s native form features are leveraged to allow community-sourced submissions and updates.
- Airtable automations are leveraged to trigger a Netlify build any time that records marked for publication are added or their underlying data changes via Webhook.
🎓 Learning Moments
As always, this project provided me with some great opportunities to learn new approaches and become familiar with new tools.
Harnessing Vue3’s Composition API
As someone who first dove into Vue before the announcement of Vue3, I have traditionally been more comfortable with the Options API for structuring my components. For this project, I was determined to kick the habit and adopt the Composition API—I’m pretty sure I won’t be looking back!
- While I initially followed the Astro documentation’s suggestion to use the Nanostores package to handle minimal app-wide state for this project, I quickly saw how simply this functionality could be achieved with the Composition API and composables. This let me cut down on external dependencies, simplify the overall project structure and to package simple state management together with shared functionality logic via two composable utilities.
- After having heard about the VueUse package, I also decided to test out the package. It’s incredible to see how much value this adds to the Vue ecosystem!
Rapid Styling with TailwindCSS
- This project was also my first experience using TailwindCSS, though I’ve used other CSS frameworks like Bulma previously. I was really happy with how much this sped up the development process while still allowing me to feel like I had freedom to implement the overall app design I was aiming for.