Angular Task

A simple Angular project demonstrating pagination, routing, API caching, and loading states.

Quick Start

Installation

1. Setup Environment

   • Get your API key from ReqRes
   • Copy src/environments/environment.example.ts to create your own environment file
   • Add your ReqRes API key to src/environments/environment.development.ts:

   export const environment = {
     apiUrl: 'https://reqres.in/api',
     apiKey: 'YOUR_API_KEY_HERE',
     production: false,
   };

2. Install Dependencies & Start

   pnpm install
   pnpm start

   Navigate to http://localhost:4200/

Features Implemented

• Paginated users list with responsive grid layout
• User details page with navigation
• Instant search by user ID
• HTTP response caching to minimize API calls
• Loading bar for pending network requests
• 404 Not Found page for invalid routes

API Integration

Endpoint	Purpose
GET /users?page={page}	Get paginated users list (6 per page)
GET /users/{id}	Get single user details

Tech Stack

• Angular 21 - Standalone components, modern control flow
• TypeScript - Type-safe development
• Angular Material - UI components
• RxJS - Reactive programming with Signals
• SCSS - Advanced styling with animations
• HTTP Interceptors - Centralized API key, caching, and loading management