🐾 Pet App (Vue Frontend)

🎯 Overview

Welcome to the Pet App, a Vue 3-based frontend for managing virtual pets. This application provides an interactive interface for users to create, feed, play, and track their pets, seamlessly integrating with the Pet API. This application uses both Options api and Composition api.

📌 Related Projects

There is also a Hexagonal Architecture backend for this project that you can find here.

If you're interested in the MVC version of the backend, check it out here.

🚀 Key Features

✅ Vue 3 with Options API – Structured and easy-to-maintain frontend.
✅ REST API Integration – Communicates with the Pet API for full pet management.
✅ Vuex / Pinia (Optional) – Manages global state efficiently.
✅ SCSS Support – Organized and reusable styles.
✅ Responsive Design – Works on desktop and mobile devices.
✅ Axios for API Requests – Handles HTTP requests efficiently.

---

🛠 Technologies

• Vue 3
• Vite
• Axios
• SCSS

📦 Dependencies

• Vue 3 (Core framework)
• Axios (HTTP client)
• Pinia (State management - if used)
• Lodash (Optional utility functions)

---

📖 Project Structure

📦 src
│── 📂 assets          # Static assets (images, icons, etc.)
│── 📂 components      # Reusable Vue components
│── 📂 views          # Main pages/views
│── 📂 store          # Vuex/Pinia state management (if used)
│── 📂 services       # API calls (Axios)
│── 📜 App.vue        # Root component
│── 📜 main.js        # Entry file


## To run the application

```code
  cd Pet-webapp

  npm install

  npm run dev

This frontend relies on the Pet API as the backend. To configure the API URL, update the .env file:

VITE_API_BASE_URL=http://localhost:8080/api

Snapshots

Main Page

Login Page