🐕 Adopet 🐈

📑 Table of Contents

• 📑 Table of Contents
• 📖 Overview
• 🛠️ Technologies
• ⚡ Performance & PWA
• 🚀 Demo
• 📦 Install and Use
• 📂 File Structure
• 🎨 Reference & Inspiration
• 👨‍💻 Author and Contact

📖 Overview

Adopet is a streamlined web platform created to facilitate the connection between animal rescue organizations and individuals looking to adopt pets. This repository contains the static frontend implementation of the application, structured for rapid development, accessibility, and clean code organization.

🛠 Technologies

The following technologies were used to build this project:

• HTML5
• CSS3
• Javascript

⚡ Performance & PWA

🚀 Demo

Access the live application below to interact with the interface and run your own performance tests.

Adopet: https://adopet-plum.vercel.app/

Desktop

desktop.mp4

Mobile

mobile.mp4

📦 Install and Use

Prerequisites: Node.js (v22.x) or higher installed.

1. Clone the repository:

git clone https://github.com/Epiled/adopet.git
cd adopet

2. Install the dependencies:

npm install

3. Run the development environment (Build + Watch + Server):

npm run dev

📂 File Structure

Below is the project architecture. All development should be done inside the src/ folder

adopet/
├── design/                  # Wireframes, videos and assets for documentation
├── src/                     # Main source code (Development)
│   ├── assets/              # Original images and icons
│   ├── css/                 # Styles following architecture BEM
│   └── js/                  # UI logic and PWA registration
├── index.html               # Base semantic structure and main markup
└── package.json             # Project dependencies and npm scripts

🎨 Reference & Inspiration

The project's design and wireframes are available for viewing on Figma. Below is a list of the real-world examples that inspired the UI/UX design.

Figma / Wireframe: Adopet

👨‍💻 Author and Contact

_{Felipe De Andrade}

Made with ❤️ by Felipe De Andrade 👋🏽 Get in touch!