🐕 Adopet 🐈

📑 Table of Contents

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

📖 Overview

Adopet is a web platform designed to connect people interested in pet adoption with animals looking for a new home.

The project was developed with a focus on accessibility, responsive design, clean code organization, and realistic user flows.

It includes simulated authentication, user registration, profile management, pet listing, form validation, and automated tests using a localStorage-based mock database.

🛠 Technologies

The following technologies were used to build this project:

• HTML5
• CSS3
• JavaScript
• Vitest
• jsdom
• ESLint
• BrowserSync
• LocalStorage

⚡ Performance & PWA

🧪 Testing

The project uses Vitest with jsdom for automated testing.

The test suite covers:

• Form validation
• Authentication guards
• Database initialization
• Login flow
• Registration flow
• Profile updates
• Phone number masking

Run the test suite with:

npm run test:run

🚀 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

4. Run the tests:

npm run test:run

5. Run ESLint:

npm run lint

📂 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/                  # Application logic
│   │   ├── mocks/           # Simulated database
│   │   └── validation/      # Form validation
│   └── *.html               # Application pages
├── tests/
│   ├── helpers/             # Test utilities
│   └── *.test.js            # Automated tests
└── 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!