Introducing Catepedia: A Nuxt 3 Cat Breed Search App
Tags: javascript, nuxt, beginners, webdev
Published: 2024-04-08 03:39:13

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!


![catepedia website preview banner home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wrsu55yb92eeeqd46kl3.png)

## 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](https://github.com/Rajesh-Royal/catepedia/blob/master/catApiScrapper/Readme.md)
This is a node script that downloads the [TheCatAPI](https://thecatapi.com/) 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.

&nbsp;
&nbsp;
<img width="80%" style="width:80%" src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMnh4cm1hN2o3MzI3Mm0zNWpoZ2RubmowcmYwYngwYjdraW52eW9xcSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/vmon3eAOp1WfK/giphy.gif">



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.

{% github Rajesh-Royal/catepedia %}

[Catepedia Live App Url](https://catepedia.vercel.app/)

![catepedia live app homepage screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4aiy828ppfl8028e4sl.png)

Happy coding, and long live the cats! 🐱


Credits - 
The thumbnail is taken from - [cute meow](https://www.dafont.com/cute-meow.font)