🧙 Angular Harry Potter API

---

📑 Table of Contents

• 🧙 Angular Harry Potter API

  • 🌐 Live Demo
  • 📖 Description
  • ⚙️ System Requirements
  • 🚀 Project Installation
  • ▶️ Run the Project
  • 🧠 Project Architecture
  • ✨ Features
  • 🛠 Technologies Used
  • 📁 Project Structure
  • 🔥 Best Practices Implemented
  • 🎯 Project Goal
  • 📄 License

---

🌐 Live Demo

🔗 https://alobuuls.github.io/angular-harry-potter-api/

---

📖 Description

Note

Angular 12 application that consumes the Harry Potter API to display character information through a modular architecture following Angular best practices.

The project demonstrates API consumption, route guards, HTTP interceptors, reactive forms, RxJS operators, custom pipes, centralized error handling, and scalable application structure.

---

⚙️ System Requirements

Before running the project, make sure you have installed:

• 📦 Node.js: v12.14.x – v14.x (recommended: v14.21.3 LTS)
• 📦 npm: v6+
• 🅰️ Angular CLI: v12.x

---

🔍 Verify Installed Versions

Run the following commands in your terminal:

node -v
npm -v
ng version

---

🚀 Project Installation

1️⃣ Clone the repository

git clone git@github.com:alobuuls/angular-harry-potter-api.git

cd angular-harry-potter-api

2️⃣ Install dependencies

npm install

---

▶️ Run the Project

Start the development server:

ng serve

Then open:

http://localhost:4200

---

🧠 Project Architecture

The application follows a modular Angular architecture focused on scalability, maintainability, and separation of concerns.

📦 Core Module

Responsible for:

• Application-wide functionality
• Navigation menu
• Shared core features

📦 Characters Module

Responsible for:

• Harry Potter character listing
• Search functionality
• API data presentation

📦 Protected Module

Responsible for:

• Protected routes
• Route guard implementation
• Navigation control

📦 Services

Responsible for:

• Harry Potter API communication
• Data transformation
• Centralized error handling

📦 Interceptors

Responsible for:

• Global HTTP request modification
• API request configuration
• Cross-cutting concerns

📦 Shared Module

Responsible for:

• Custom pipes
• Shared resources
• Reusable functionality

📦 Guards

Responsible for:

• Route protection
• Unsaved changes prevention
• Navigation validation

---

✨ Features

• 🧙 Harry Potter character listing
• 🔍 Character search
• 📡 REST API consumption
• ⚡ Reactive programming with RxJS
• 🛡️ Route Guards
• 🚫 Unsaved Changes Guard
• 🔄 HTTP Interceptors
• 🧩 Custom Pipes
• 📋 Reactive Forms
• ❌ Centralized Error Handling
• 🎯 Strong typing with TypeScript
• 📦 Modular Angular architecture

---

🛠 Technologies Used

Technology	Purpose
Angular 12	Framework
TypeScript	Application Logic
RxJS	Reactive Programming
Angular Router	Navigation
Angular HttpClient	API Communication
Reactive Forms	Form Management
Route Guards	Route Protection
HTTP Interceptors	Request Handling
HTML5	Structure
CSS3	Styling

---

📁 Project Structure

angular-harry-potter-api/

├── src/
│
├── app/
│   │
│   ├── core/
│   │   ├── menu/
│   │   └── core.module.ts
│   │
│   ├── pages/
│   │   ├── characters/
│   │   └── protected/
│   │
│   ├── services/
│   │   ├── hp.service.ts
│   │   └── error-handler.service.ts
│   │
│   ├── interceptors/
│   │   ├── api-hp.interceptor.ts
│   │   └── global-headers.interceptor.ts
│   │
│   ├── guard/
│   │   ├── auth.guard.ts
│   │   └── form-unsaved.guard.ts
│   │
│   ├── shared/
│   │   ├── pipes/
│   │   └── shared.module.ts
│   │
│   ├── interfaces/
│   │   ├── hp.api.interface.ts
│   │   └── stucture-data-api.interface.ts
│   │
│   ├── helpers/
│   │   └── init-with-status.helper.ts
│   │
│   ├── app.module.ts
│   ├── app.routes.ts
│   └── app.routing.module.ts
│
├── environments/
│   ├── environment.ts
│   └── environment.prod.ts
│
├── angular.json
├── package.json
├── tsconfig.json
└── README.md

---

🔥 Best Practices Implemented

• Modular Angular architecture
• Separation of concerns
• Strong typing with TypeScript interfaces
• Reactive programming with RxJS
• Route Guards implementation
• Unsaved Changes Guard pattern
• HTTP Interceptors
• Reusable custom pipes
• Centralized error handling
• Shared module architecture
• Service abstraction
• Scalable project structure

---

🎯 Project Goal

Practice and strengthen Angular development concepts through the implementation of a real-world API-driven application:

• REST API Consumption
• Angular Modules
• Route Guards
• HTTP Interceptors
• Reactive Forms
• RxJS Operators
• Custom Pipes
• Error Handling
• TypeScript Interfaces
• Front-End Architecture

---

📄 License

This project is intended for educational and portfolio purposes.

Created by Alondra Francisco.