How We Built a Lightweight, High-Performance Pet Tech Platform with Next.js and Directus

Ozgur — Mon, 20 Jul 2026 19:37:56 +0000

Most pet care applications on the market share the same core issues: they are bogged down by heavy interfaces and trap basic utility behind aggressive sign-up walls. When you are standing at the vet clinic or traveling, you don't want to fight a slow, bloated UI just to show a vaccination record.

We built mypet.my to solve this exact problem. The goal was simple: create a lightning-fast digital pet passport and relational ecosystem that just works, focusing strictly on utility and performance.

Here is a breakdown of the architecture and why we chose our current stack.

The Tech Stack
To achieve maximum speed and clean data management, we settled on a modern, decoupled architecture:

Frontend: React, Next.js, and Tailwind CSS

Backend & API Layer: Directus (Headless CMS / BaaS)

Why Next.js?
For a platform like ours, performance and SEO are critical. Next.js allows us to handle public-facing pages—like pet adoption listings and public showcase profiles—with optimal rendering strategies.

Speed: Tailwind CSS keeps our bundle size minimal, ensuring the UI loads instantly even on weak mobile networks.

Frictionless UX: We designed the web experience to avoid heavy onboarding flows, giving users immediate access to features.

Why Directus?
Instead of spending weeks building a custom CRUD backend and authentication system from scratch, we chose Directus as our data engine. It sits directly on top of our database and instantly provides:

A production-ready REST/GraphQL API layer.

Granular access control (roles and permissions) out of the box.

A clean dashboard to monitor system data without building internal tools.

Architectural Highlight: The Relational Service Ecosystem
One of the most interesting challenges was building the "Services Received" and "Services Provided" infrastructure.

Instead of just letting users type in text fields, we built a relational verification loop. When a pet parent receives a service from a vet clinic, pet shop, or local venue, they can formally link their pet’s profile to that provider.

Once the provider approves it on their end, the connection becomes official:

The pet’s profile showcases the verified vet clinic.

The vet clinic's profile displays the pet's avatar under their served clients.

Directus made handling these many-to-many (M2M) relationships with custom statuses and mutual approval workflows incredibly straightforward, saving us dozens of hours of custom backend logic.

What's Next?
We just launched the web platform alongside our native Google Play Store and Apple App Store apps. Moving forward, we are exploring feature expansions like temporary, time-limited revokable access tokens for clinics during travel, and integrated vet booking systems.

We would love to hear your thoughts on this architectural setup!

Have you used Directus for production-grade consumer apps?

How do you handle complex relational ecosystems in headless architectures?

Check out the platform at mypet.my and let us know your feedback in the comments! 🐾

DEV Community: Ozgur

How We Built a Lightweight, High-Performance Pet Tech Platform with Next.js and Directus