Crowdsourced Map of NYC Bike Repair Stations
Kevin Cole

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.

At first, I considered using Nuxt but was ultimately convinced to give Astro a try given its recent v1 release. I have to say that I was really blown away by the low barrier to entry that Astro provides with its framework agnostic support and the easy-to-grasp concept of ‘fenced’ Javascript which is only run at build time. Especially for small projects like mine which leverage low-overhead headless CMS options, Astro is like a golden bullet!

📜 Project Features

  • Astro was used as an incredibly intuitive static site generator while making use of Astro’s concept of ‘Component Islands’ to power client-side interactive components.

  • 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.
← Back to projects