Dynamic Angular Dashboard

A responsive Dynamic Angular Dashboard with user authentication, API integration, state management using Angular Signals, and performance optimizations.
Live Demo - Angular Dashboard.

---

Features

• User Authentication → JWT-based login & logout
• Dynamic Data Table → Fetches data from JSONPlaceholder
• Filter/Search, Sorting, Pagination → Built with Angular Material Table
• State Management → Uses Angular Signals
• Lazy Loading & Performance Optimizations → Uses OnPush Change Detection and async pipe
• Dark Mode Toggle
• Auth Unit Test

---

Setup & Installation

Step 1: Clone the Repository

git clone https://github.com/chiragobhan/dynamic-angular-dashboard.git
cd dynamic-angular-dashboard

Step 2: Install Dependencies

npm install

Step 3: Run JSON Server (Mock Backend)

We use json-server to simulate an API for user authentication. Users are stored in db.json:

{
  "users": [
    { "id": 1, "username": "admin", "password": "password", "token": "mock-jwt-token" },
    { "id": 2, "username": "testuser", "password": "test123", "token": "mock-jwt-token" }
  ]
}

Start JSON Server

npx json-server --watch db.json --port 3000

Step 4: Run the Angular App

ng serve

Then open http://localhost:4200/ in your browser.

---

How It Works

Authentication

• Users login via json-server API (Mock backend)
• JWT token is stored in localStorage
• AuthGuard protects routes, and prevents logged-out users from accessing /dashboard

State Management

• Angular Signals manage authentication state
• Reactive signal() ensures instant UI updates on login/logout

Lazy Loading & Performance

• The dashboard content is lazy-loaded and uses OnPush Change Detection
• API requests are optimized via Angular’s async pipe
• Pagination, Sorting, and Filtering happen on the frontend for better UX

Dark Mode Toggle

• Uses localStorage to persist user theme
• Applied via document.body.classList.toggle('dark-theme')

---

Running Tests

To run unit tests:

ng test

This will open the Karma test runner and execute auth unit test.

---

Images

Login Page | Light Mode

Login Page | Dark Mode

Dashboard Page | Light Mode

Dashboard Page | Dark Mode

---

Disclaimer: This project is an assignment completed for Pillway. All logos and branding elements belong to Pillway and are used solely for demonstration purposes.