February 2023

PINGO

A geo-based discovery app — and what Ionic & Vue taught us

  • DOCKER
  • ANGULAR
  • NEST JS
  • Leaflet
PINGO

The digital age has brought a wave of innovation — and one such creation, born during Extreme Programming Week, was our app “Pingo.” This geo-based platform aims to bring your surroundings to life in a playful, informative way. Using a location-based system (LBS), Pingo opens an interactive map where users explore various “Geostops” — from hidden natural gems to cultural highlights to historical sights.

Pingo's main focus is sparking curiosity and the urge to discover in each of us. Whether you're a local wanting to find your hometown's hidden corners or a traveler chasing the next adventure, Pingo is designed as an interactive companion. With its ability to offer detailed information, photos, and reviews for every Geostop, Pingo isn't just about finding places — it's about sharing and experiencing the stories behind them.

Our journey with Pingo wasn't without obstacles. During development we found that pairing Ionic with Vue may not have been the optimal choice — especially since most of our team had Angular experience. The combination brought specific challenges, from reactive data binding in Vue to integrating libraries that played better with Angular. It was a learning curve that gave us valuable insight into the nuances and differences between the two frameworks.

In the sections below we'll dig deeper into our experience building Pingo, the challenges we met, and why choosing the right technology base matters for a project as ambitious and innovative as Pingo.

An introduction to NestJS and our backend architecture

In today's technology-driven world, robust and scalable backends are essential to an app like Pingo. We chose NestJS, a progressive Node.js framework that enables efficient, reliable, scalable server-side development. It builds on Express and blends elements of OOP (object-oriented programming), FP (functional programming), and FRP (functional-reactive programming).

While Malek, our senior backend developer, took on the bulk of the NestJS work, Mohamed brought his Spring Boot expertise — a Java-based framework he loves. I, well-read across many technologies though an expert in none, helped bring the pieces together and made sure the backend interacted seamlessly with our frontend architecture.

Now, a look at our API endpoints:

Pingo

  1. GET /pingo: retrieves all existing Pingo objects.
  2. PUT /pingo: updates a Pingo.
  3. POST /pingo: creates a new Pingo.
  4. GET /pingo/{lat}/{lng}/{radius}: finds Pingos within a given radius.
  5. GET /pingo/byId/{id}: retrieves a Pingo by its ID.
  6. GET /pingo/byUser/{id}: lists all Pingos for a user, based on the user ID.
  7. DELETE /pingo/{id}: deletes a Pingo.
  8. GET /pingo/getByHashId/{hashId}: retrieves a Pingo by hash ID.

Auth

These endpoints handle authentication and authorization:

  1. POST /auth/login: signs a user in.
  2. POST /auth/register: registers a new user.
  3. Further endpoints for validating, signing, and refreshing authentication data.

Stations & Hash

This area handles the various stations used in Pingo, along with the hash functionality for creating and managing links between stations, users, and roles.

Users

  1. POST /users/save: saves a new user.
  2. GET /users/search: finds a user based on a search term.
  3. Further endpoints for retrieving, updating, and deleting user data.

Roles

Endpoints related to user roles, enabling roles to be saved, retrieved, and managed.

QRCode

  1. GET /qrcode/{data}: generates a QR code from the provided data.

These endpoints give Pingo a solid foundation for everything it offers users — from creating and managing accounts to retrieving Pingo locations to generating QR codes. Our NestJS backend makes sure it all runs smoothly and that users get a seamless experience.


Gallery