Hello, fellow developers! Today, I’m excited to share with you a project I’ve been working on: Catepedia. It’s a cat breed search app built with Nuxt 3, and it’s been a fantastic learning experience. Let’s dive in!

What is Catepedia?

Catepedia allows you to browse through different cat breeds and learn more about their characteristics, temperament, and history. You can also search for a specific cat breed by name or filter them by origin, coat, and pattern. It’s like an encyclopedia but for cats!

How Catepedia Works

Unlike many apps, Catepedia doesn’t use a traditional database. Instead, it leverages the power of the TheCatAPI to fetch cat search results. But there’s a twist: instead of using the API directly, I’ve downloaded all the cat database from their API and stored it locally, including images.

To automate this process, I created a script that downloads the data from the API and stores it in a local file. This approach has several advantages:

• It reduces the number of API calls, which can be beneficial if you’re dealing with API rate limits.
• It allows for faster search results, as the data is already available locally.
• It provides a backup of the data, in case the API is temporarily unavailable. You can find more details about this script in the GitHub repository.

Features

• File-based routing: Catepedia uses the structure of the pages directory to define the routes of the app.
• Data fetching: Catepedia uses composables to fetch data from The Cat API and render them in different ways, such as server-side rendering (SSR), static site generation (SSG), or serverless functions.
• Vite: Catepedia benefits from the fast development and bundling of Vite, which supports hot module replacement (HMR) and code splitting.
• TypeScript: Catepedia is written in type-safe code with the help of Nuxt's auto-generated types and tsconfig.json.

Cat API Downloader Script - GitHub

This is a node script that downloads the TheCatAPI breeds data and stores it locally in JSON and image files. You can use this data in your main application or for any other purpose.

Building Catepedia with Nuxt 3

Building Catepedia was a great opportunity to learn and experiment with Nuxt 3. Here are some of the key features and techniques I used:

• Nuxt 3: The latest version of Nuxt.js offers improved performance, better TypeScript support, and new features like Nitro (a high-performance Node.js server engine) and Vue 3 support.
• Vue 3 Composition API: This new API provides a flexible way to manage component logic, making it easier to reuse and organize code.
• Vite: Nuxt 3 uses Vite as its build tool, which offers fast hot module replacement (HMR) and true on-demand compilation.

Catepedia has been a fun and educational project, and I hope it can serve as a useful example for others learning Nuxt 3. If you’re interested in the code, feel free to check out the GitHub repository.

Catepedia Live App Url

Happy coding, and long live the cats! 🐱

Credits -
The thumbnail is taken from - cute meow