Building CatGPT: A Vue 3 and Vuetify Guide for Cat Image Lovers

Calling all cat-loving developers! Unleash your passion for felines and hone your Vue.js skills with CatGPT, a project designed to bring joy to cat enthusiasts and coders alike. This guide delves into the step-by-step process of building your own CatGPT application, complete with code examples and insights for a robust development experience.

This guide will take you through the process of building your own CatGPT application. Here is a sneak peak.

Live demo: https://cat-gpt-nu.vercel.app/

But before move on, want to see the code behind the purrfection? Check out the CatGPT project on GitHub and don't forget to give it a star ⭐!

GitHub - alikrc/CatGPT: Love cats and Vue 3? This interactive project lets you search for adorable…

1. Project Scaffolding: A Speedy Foundation

Let’s leverage the power of Node Package Manager (npm) to establish a solid base for your project. npm offers pre-configured templates to jumpstart development, saving you valuable time. Here’s the command to initiate the magic:

npm create vuetify@latest

This command instructs npm to create a new Vue project using the latest version of the Vuetify template. Vuetify, a fantastic Material Design component framework, streamlines UI development by providing pre-built components for buttons, cards, text fields, and more, all adhering to the Material Design principles.

2. Project Structure: A Roadmap for Success

The newly created project boasts a well-organized structure, serving as a roadmap for your development journey. Key folders include:

• src: This folder houses the heart of your application, containing components, views, and the core logic.
• public: This folder stores static assets like images and fonts used throughout your application.
• node_modules: This automatically generated folder by npm holds all the external dependencies your project relies on, such as Vuetify itself.

3. Hello, Vuetify! Building a User-Friendly Interface

With the project structure established, it’s time to explore Vuetify’s capabilities. This framework empowers you to create a user-friendly interface for your CatGPT application. Imagine constructing beautiful and functional elements like:

a. Random Cat Button:

<template>
  <v-container>
    <v-row align="center">
      <v-text-field
        v-model="searchQuery"
        label="Search Breeds"
        clearable
        @click:prepend="toggleBreeds"
      />

      <v-col cols="4">
        <v-row>
          <v-col cols="2" offset="4">
            <v-icon
              :icon="includeBreeds ? 'mdi-paw' : 'mdi-paw-off'"
              @click="toggleBreeds"
            ></v-icon>
          </v-col>
          <v-col cols="6">
            <v-btn @click="getRandomCats">Random 😺</v-btn>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
import { ref } from "vue";
import api from "@/api/service";

let includeBreeds = ref(true);

async function getRandomCats() {
  let response = await api.getRandomCatImage(includeBreeds.value);
  // Update your UI with the retrieved cat image URL(s) from the response
}

function toggleBreeds() {
  includeBreeds.value = !includeBreeds.value;
}

</script>

This code snippet demonstrates the creation of a random cat button with Vuetify's v-btn component. The includeBreeds variable, managed using ref, allows users to toggle including breeds with the random cat image. Clicking the paw icon (v-icon) or the "Search Breeds" label triggers the toggleBreeds function.

b. Breed Search:

This search bar allows users to search for specific cat breeds. Here’s how it interacts with your code:

<template>
  <v-container>
    <v-row align="center">
      <v-text-field
        v-model="searchQuery"
        label="Search Breeds"
        clearable
        @click:prepend="toggleBreeds"
      />
    </v-row>
  </v-container>
</template>
<script setup>
const searchQuery = ref("");
watch(searchQuery, (v) => {
  // Implement logic to handle search query changes (e.g., debounce, trigger search)
});
async function fetchCats(searchQuery) {
  let response = await api.searchBreeds(searchQuery);
 // Update UI
}
</script>

c. Displaying Feline Data:

<template>
  <v-row>
    <v-col v-for="data in datas" :key="data.id" cols="12" md="4">
      <v-card>
        <v-img :src="data.url" height="200px"></v-img>

        <v-card-title>{{ data.title }}</v-card-title>

        <v-card-subtitle>{{ data.subtitle }}</v-card-subtitle>

        <v-text>{{ data.description }}</v-text>
      </v-card>
    </v-col>
  </v-row>
</template>

This code snippet showcases how to display retrieved cat information using Vuetify’s v-card components. It iterates through the datas array (which you'll need to populate from your API calls) and displays each cat's details using Vuetify's components like v-img, v-card-title, v-card-subtitle, and v-text.

4. Fetching Feline Data: Powering CatGPT with APIs

To populate CatGPT with cat information and captivating images, we’ll leverage external APIs. Popular choices include The Cat API (https://thecatapi.com/) and Catster (https://www.catster.com/), offering rich datasets about various cat breeds. These APIs act as gateways to data repositories, allowing your application to retrieve details like breed names, origins, descriptions, and of course, adorable cat photos.

Code Example: Fetching Feline Data (service.ts)

import axios from "axios";
const baseUrl = "https://api.thecatapi.com/v1";
const apiKey = process.env.API_KEY; // Replace with your actual API key OR put your key in a .env file in this format, API_KEY="..."
async function getRandomCatImage(includeBreeds = false): Promise<string> {
  try {
    const response = await axios.get(`${baseUrl}/images/search`, {
      headers: {
        "x-api-key": apiKey,
      },
      params: {
        size: "small",
        limit: 2,
        has_breeds: includeBreeds,
        include_breeds: true,
      },
    });
    return response.data;
  } catch (error) {
    console.error("API Error:", error);
    throw error;
  }
}
async function searchBreeds(query): Promise<string> {
  try {
    const response = await axios.get(
      `${baseUrl}/breeds/search?q=${query}&attach_image=1`,
      {
        headers: {
          "x-api-key": apiKey,
        },
        params: {
          attach_image: 1,
        },
      }
    );
    return response.data;
  } catch (error) {
    console.error("API Error:", error);
    throw error;
  }
}
export default {
  getRandomCatImage,
  searchBreeds,
};

This code snippet showcases the service.ts file, which handles communication with The Cat API. It defines two functions:

• getRandomCatImage: Fetches a random cat image, optionally including breed information.
• searchBreeds: Searches for cat breeds based on a user query and retrieves representative images.

5. Beyond the Basics: Unleashing Your Creativity

This guide offers a solid foundation for building your CatGPT application. With Vuetify by your side and a dash of creativity, you can expand upon these functionalities. Here are some potential enhancements:

• User Accounts: Allow users to create accounts and curate their favorite breeds, fostering a personalized cat lover experience.
• Interactive Games: Integrate interactive games featuring cats, like trivia or quizzes, to engage users and add an extra layer of fun.
• Advanced Cat Facts: Implement features that display interesting facts about specific breeds, further enriching the user experience.

Embrace the Journey:

Remember, the provided code on GitHub (https://github.com/alikrc/CatGPT) serves as a valuable starting point.