Purrfect-match: a matchmaking app for cats with special needs
Introduction
Cats are beloved pets, but unfortunately many still end up in shelters,
especially kittens with special needs have a harder time finding suitable homes.
Purrito Cat Shelter, a dedicated organization of volunteers, takes in these kittens.
Prompt adoption of these special kittens is invaluable to Purrito.
Once these kittens find a suitable family, this opens space for new kittens to be
rescue, care and shelter.
Recently during a hackathon organized by Continuum - Jidoka, we have
developed the "Purrfect-Match" application. This app facilitates the matching of
kittens with special needs to the right families, allowing these kittens to more quickly
finding a loving home.
Some more info on Purrito
Purrito is no ordinary (cat) shelter. They focus on the most vulnerable target group among stray cats: vulnerable kittens who cannot yet eat independently, are sick need shelter or are injured and need to regain their strength.
Their shelter does not have a central location. Kittens receive the necessary care and socialization in domestic settings, namely in the homes of volunteers.
What is Purrito's biggest challenge
Our solution: purrfect-match
To potentially speed up the adoption process, we have developed PurrfectMatch. A kind of matcher for adoptable kittens. In this way, potential candidates get to know the kittens in a playful way.
For the app, we took some inspiration from online dating apps like tinder. When you want to adopt cat you swipe to the right, the kitten does not suit you then you can left and the next kitten will appear.
Below is a small taste of how purrfect-match looks like.
The technologies used
To develop this app, we used the following technologies
Angular 17 | Firebase | Hammer.js
Angular 17
Angular is an open source, component-based front-end framework used to build single-page applications (SPAs). It was developed by Google and is supported by a large community of developers.
Angular 17 is the latest new version of this popular framework, and we felt it was a good time to learn about it. We also immediately noticed that the promised performance improvements, emphatically had an impact on our app development and app performance speed.
In addition to improved performance, Angular also received a new logo and updated documentation with this update. These fit better with the modern look and feel of the framework. The new documentation is also focused on interactive learning by allowing the Angular CLI and other features to be tested directly in the browser being able to test. This makes learning Angular easier and more accessible to everyone.
The new documentation can be viewed at: angular.dev
Among other things, Angular 17 introduces a new block template syntax. This syntax makes it easier to write conditional logic and repetitive content in templates. The old syntax, with *ngIf, *ngFor, etc., can sometimes be awkward to use, especially for more complex logic. The new syntax, with @if, @for, etc., is simpler and more readable.
Because of previous experience, Angular was our choice as the frontend framework during the hackathon. In doing so, we also took advantage of some new Angular 17 features. This did not go entirely without a hitch. Our trusted IDE did not yet support the new version of Angular, and this caused some blood, sweat and quite a few tears. In the meantime, all modern editors and IDEs have been updated, adding to the speed in the rollout of Angular 17.
So we certainly view Angular 17 as a successful and promising update to the framework!
Firebase
Hammer.js
Hammer.js is an open source JavaScript library that we used to detect hand gestures in our app. The app is specifically made to be used on a mobile device (smartphone), and so we want to make the most of the capabilities of such a device to make our app user-friendly.
So practice already swiping left and right until you come across the right kitten match!
Learn more: HammerJS
Next steps for Purrfect match
Of course, a hackaton is just a snapshot, where in a limited time we do the combination of a fun, social project on the one hand. And learning and discovering new technologies on the other.
Because of this time limitation, there are still many extension possibilities that we want to make at later times. Like transforming the static lists of cat profiles into a working database via, for example, Firebase. As well as a management platform that allows the caretakers at Purrito to manage, update and maintain the profiles themselves.
But we hope to have already helped in a first step towards a better shelter for these many kittens. And we look forward to the next hackaton to continue with this app for Purrito!
If you would also like to check out purrfect-match, please visit us at this link: purrfect-match
Technical Conclusion
The use of Angular 17, Firebase and Hammer.js added value in the developing the purrfect-match app. Angular 17 provided a powerful structure for the frontend, while Firebase provided a reliable and scalable backend, and Hammer.js enriched user interaction with smooth gestures and animations.
Besides building the purrfect-match app, we had a great time during the hackathon tremendously entertained. The experience helped us go deeper into the capabilities of Angular 17, Firebase and Hammer.js, giving us a better understanding gained a better understanding of their functionalities, strengths and weaknesses.
