Skip to content

README.md

Latest commit

 

History

History
298 lines (219 loc) · 6.88 KB

README.md

File metadata and controls

298 lines (219 loc) · 6.88 KB
Raw

🧙 Angular Harry Potter API

Angular TypeScript Modular Architecture Completed

Repository GitHub Stars Last Commit

📑 Table of Contents

🌐 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.