This is an app that lets you explore cat breeds while forming an interconnected “path” based on their characteristics. I invite you to try the app before reading further so you don’t spoil the surprise (don’t worry, it includes a tour to guide you through the process): Go to website.
How the idea came about
Before creating Petpath, I had developed applications with data fetching, but nothing too demanding in that regard. When I decided it was time to build something more impressive than a simple calculator for my portfolio, this was a key consideration. I wanted to create a fun project that would help me learn new technologies and, most importantly, challenge me to make heavy use of an API. In other words, I wanted to build an application around the most interesting API I could find.
After some thorough research, I discovered TheDogAPI (yes, Petpath was originally going to be about dogs, and I was pretty excited about it because they’re my kind of animal). However, I later realized that TheCatAPI, developed by the same company, was a much richer resource that would allow me to create something far more detailed.
What the API returned
TheCatAPI provided a set of characteristics for each cat breed, rated from 1 to 5. You could see, for instance, that a certain breed had “a 5 in adaptability and a 2 in energy level,” while another had “a 4 in affection and a 3 in intelligence”. This was great—I had to build something around these features.
The idea I came up with was simple but had potential: starting from a random breed, you could request more, less, or the same level of a specific feature. The app would return a new breed that met that requirement while keeping the rest of the characteristics as close as possible, forming a “breed path”. Later, I'll explain how I implemented this logic in the BFF using a point-based system.
There were so many features that creating something easy to understand was tricky, so I decided to divide them into two main groups: some would serve as exploration points (like affection level and adaptability), while others would appear only as additional information (like grooming needs and health issues). Honestly, I didn’t want to leave anything out.
Design evolution
I went for a vertical layout with a dark background and white cards featuring images of each breed. That general look was clear from the start, but the selection buttons went through several iterations until I found the right balance between clarity and minimalism.
The BFF logic
I initially developed the Backend-for-Frontend with Python and Django, deploying it on Render. However, Render’s free tier had performance issues—the first request could take up to 15 seconds. After some trial and error, I decided to migrate all the logic to JavaScript using Next.js's API folder. The difference was remarkable.
A nice recognition
The API Company, owner of the dog and cat APIs, usually promotes its products very well and encourages the creation of applications around them. That's why they often hold contests to reward the best projects that have used some of their APIs, and I had the honor of winning first place in the month I participated.
