🐶 Fever Pets - Frontend Challenge

Technical solution implemented by Rubén Sánchez.

This project is built following Software Engineering principles, prioritizing Scalability, Performance (Core Web Vitals), and No external libraries beyond Angular ecosystem.

🚀 How to Run

Requirements: Node.js v20+. (Angular CLI is included as a dev dependency)

1. Installation

npm install

2. Development Server

npm start

Navigate to http://localhost:4200.

3. Run Tests

npm test

🏗️ Architecture & Design

I have chosen a Vertical Slicing (Feature-First) architecture combined with Hexagonal Architecture principles to ensure a decoupled and maintainable codebase.

📂 Project Structure (src/app/pets/)

1. 🧠 Domain (/domain)

Pure Business Logic. Contains the Truth of the application.

• Models: Pet.
• Repository Interfaces: PetRepository (The contract).
• Strategies: PetHealthStrategy (Logic for calculating health status).

2. 🔌 Infrastructure (/infrastructure)

Implementation Details. How data is retrieved.

• HttpRepository: Implementation of the Domain Repository using HttpClient.
• Mappers: PetMapper transforms raw API DTOs into clean Domain Models.

3. 🎨 UI (/ui)

Presentation Layer.

• Pages: Smart components (e.g., PetListComponent) that orchestrate data via Signals and handle routing.
• Components: Dumb/Presentational components (e.g., PetCard, PetSearchInput) focusing on rendering and user interaction.

✅ Challenge Compliance

• Server-side sorting, pagination, and filtering driven by URL query params (deep-linkable and shareable).
• Navigation preserves list state (sort/order/page/filters) when opening a pet detail and coming back to home.
• Pet of the Day is deterministic per calendar day and cached during navigation so it remains stable all day.

🚀 Key Features

• Reactive UI: Powered by Angular Signals (signal/computed/effect/toSignal).
• Clean Architecture: Strict separation of concerns using Hexagonal Principles (Domain, Infrastructure, UI).
• Modern Testing: Vitest for instant feedback and superior developer experience.
• Zero-Dependency i18n: Custom lightweight Internationalization service implemented from scratch.
• Optimized UX:
  • Skeleton Loading states.
  • Debounced Search & filtering.

🛠️ Tech Stack

• Framework: Angular 21 (Standalone Components, Signals, Control Flow).
• Language: TypeScript (Strict Mode).
• Styling: SCSS (Native CSS Grid/Flexbox).
• Testing: Vitest (Unit & Integration).

🧪 Testing Strategy

The project uses Vitest for unit and integration testing, focusing on:

• Mappers: Ensuring data integrity from API to Domain.
• Components/Domain: Verifying business logic like Health calculation and Pet of the Day flow.
• DOM mocking: Handling native elements like <dialog> in a test environment.

📜 Original Challenge Instructions

To view the original requirements of this technical test, please refer to CHALLENGE.md.