How Ionic and Directus helped me start volunteering

I started volunteering in a big cat colony and that's how Ionic and Directus helped me to get started.

Created on November 2021

How Ionic and Directus helped me start volunteering

A few weeks ago I finally decided to start volunteering and I found a beautiful cat colony in a cemetery. Well, it's not a common cemetery, it's the "Cimitero Monumentale" in Milan, Italy, a beautiful mix of graves and architecture.

Cimitero Monumentale

There was only one, big, issue: the cat colony is HUGE. Really. There are more than 20 cats scattered in 250,000 m2 (2,690,977 ft2, thank you Google). They are grouped in about 10 different spots (they've chosen their spot, of course) and going to feed every cat in there makes you walk about 2.5km (1.55 mi, thank you Google again). Furthermore, I have literally 0 sense of direction and that was the biggest pain at the beginning, that's why I decided to solve my problem, and hopefully for future volunteers too, with the help of the technology (and Open Source).

Ionic App

As I said earlier there's this big area and I wanted to see the spots where the cats are. At the beginning I decided to go with a flat image of the cemetery and map with x,y the points in it. I don't know why, don't ask. At the end, luckily, I came to my senses and opted for a real, interactive map, currently using Mapbox.

For the app I had no doubts: Ionic with Vue. I saw that there's an upcoming v6, currently in beta, and decided to seize the opportunity and start with that. I also installed Tailwind with JIT, because... Well, it's Tailwind, the quickest way to style your code. Luckily Ionic v6 upgraded Webpack with PostCSS 8 and the installation of Tailwind was incredibly fast.

After installing node modules, digging a bit into the Vue integration (that's super easy btw, huge work by Ionic team) I finally managed to restrict the map to the given coordinates, create custom markers and add them into the map. When you click a marker, a sheet modal will popup with the cats in that point.

Map interactive markers in Ionic and Mapbox

As you can see, when you click one or more cat the marker changes color: it helps me to keep track of where I went and what I already did. The pins by default are red, they become green when all the cats are checked or, eventually, will be yellow if a few cats, but not everyone, of a point are marked.

A Mapbox marker changes color

And, finally, what's the best solution to orientate yourself? A live GPS! Thanks to Ionic Native (well, I should say Capacitor, actually) this was super easy as well. It's a great resource to know where I am and where's the closest point to visit.

Live GPS in Ionic

Directus Backend and CMS

For what I needed the final result of the app is great, but obviously it has to fetch the data (cats, point coordinates etc.) somewhere. I was really undecided, but I wanted an headless solution to reduce the server costs and work to manage it (I should say that Ploi does that for me) and to also deploy the frontend to Vercel or Netlify. And, of course, it must have a beautiful and intuitive UI and UX.

I had four choices in my head: Statamic, a great headless CMS built in Laravel, for Laravel with Static Site Generation, but it was too expensive; GraphCMS, beautiful, but expose only GraphQL APIs (and I don't really like it) plus one or two more things that I didn't like of their CMS; Strapi, a Node headless CMS, pretty young but very popular; and, finally, Directus, a no-code headless CMS in Node. Because I already knew Strapi, I had a few company projects with it and I know how it works, I decided to try Directus and that's has been the best choice.

I have two collections: Cats, where I store all the colony pets with their photo, name and some other information and Points to build the markers with latitude, longitude and a Many-to-Many field to connect the cats.

Directus pets collection setup

Directus points collection setup

Do you know how many lines of code I've written to setup these fields, many-to-many relation, validations etc.? Zero. None. Nada. I just have spent a few minutes to setup everything, connect to my Directus instance's APIs with the official SDK and dig around with images thumbnails auto-generation.

Isn't that beautiful? That's the magic of a great and robust no-code software and the amazing team behind it.

Next steps

Since the app and the backend is basically done I can say I reached my goal. In the future I'm going to create the website for the colony where people can see the cats and donate money to help buying food and probably I'll use Gatsby (ouch, React) with the Directus gatsby plugin to fetch data and build the SSG easily.

Hey, here's a gift for you because you reached the end of the post: a photo of three cats of the colony. Meow.

Three cats of the colony


Add elapsed and estimated time to Laravel (and Symfony) console commands