📰 Angular JSONPlaceholder Client

---

📑 Table of Contents

• 📰 Angular JSONPlaceholder Client
  • 🌐 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-jsonplaceholder-client/

---

📖 Description

Note

Angular application that consumes the JSONPlaceholder API to display posts using a modular, scalable, and maintainable architecture.

The project demonstrates API consumption with HttpClient, lazy-loaded modules, HTTP interceptors, custom pipes, routing organization, and reusable Angular modules following enterprise-level development practices.

---

⚙️ 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-jsonplaceholder-client.git

cd angular-jsonplaceholder-client

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 architecture focused on scalability and maintainability.

📦 Core Module

Responsible for:

• Global application configuration
• Singleton services
• Shared infrastructure
• Application-level dependencies

📦 Shared Module

Responsible for:

• Reusable pipes
• Shared utilities
• Common functionality
• Cross-module resources

📦 Posts Module

Responsible for:

• Post management
• API integration
• Feature-specific routing
• Lazy-loaded functionality

📦 Services

Responsible for:

• HTTP communication
• API abstraction
• Data retrieval
• Observable management

📦 Interceptors

Responsible for:

• HTTP request customization
• Header injection
• Request preprocessing
• Cross-cutting concerns

---

✨ Features

• 📰 JSONPlaceholder posts visualization
• 📡 REST API consumption
• ⚡ Lazy loading modules
• 🔐 HTTP interceptors
• 🧪 Custom Angular pipe
• 🧭 Modular routing
• 🎯 Strong typing with TypeScript
• 🔄 Reactive programming with RxJS
• 🧩 Reusable modules
• 🚀 Scalable architecture

---

🛠 Technologies Used

Technology	Purpose
Angular 12	Front-End Framework
TypeScript	Application Logic
RxJS	Reactive Programming
HttpClient	API Communication
JSONPlaceholder API	Data Source
HTML5	Structure
CSS3	Styling

---

📁 Project Structure

src/

├── app/
│   ├── core/
│   │
│   ├── interceptor/
│   │   ├── auth.interceptor.ts
│   │   └── general-headers.interceptor.ts
│   │
│   ├── interfaces/
│   │   └── api-jsonplaceholder.interface.ts
│   │
│   ├── pages/
│   │   └── posts/
│   │
│   ├── pipes/
│   │   └── day.pipe.ts
│   │
│   ├── services/
│   │   └── api-json-placeholder.service.ts
│   │
│   ├── shared/
│   ├── app.routes.ts
│   └── app.module.ts
│
├── environments/
├── main.ts
└── README.md

---

🔥 Best Practices Implemented

• Modular architecture
• Lazy loading by feature
• Separation of concerns
• Reusable shared modules
• HTTP interceptor pattern
• Service abstraction layer
• Strong typing with interfaces
• RxJS observable patterns
• Scalable project organization
• Enterprise-oriented structure

---

🎯 Project Goal

Practice and strengthen Angular architecture concepts through the implementation of a client application consuming a REST API:

• API Consumption
• Angular Modules
• Lazy Loading
• HTTP Interceptors
• Routing Architecture
• RxJS Fundamentals
• Reusable Components
• TypeScript Interfaces
• Scalable Front-End Development

---

📄 License

This project is intended for educational and portfolio purposes.

Created by Alondra Francisco.