Chapter 15.2☕ 25 min read

Hyderabad Job Board

Build a job listing platform with filters, pagination, detail pages, auth guards, resolvers, and custom pipes.

01What We'll Build

What We'll Build

A job listing platform for Hyderabad IT companies:

Browse jobs with filters by company/salary/type
Job detail page with resolver pre-fetch
Post a job (auth guard protected)
Pagination with signals
Custom salary pipe (Indian format)

"Hyderabad IT ka job board — TCS, Wipro, Infosys ki jobs ek jagah"

Uses: Routing params (Ch 6.2), Guards (Ch 6.5), Resolvers (Ch 6.6), Pipes (Ch 4.3), Signals (Ch 10).

02Project Structure

Project Structure

src/app/
├── pages/
│   ├── jobs-list/
│   ├── job-detail/
│   ├── post-job/
│   └── company-page/
├── components/
│   ├── job-card/
│   ├── job-filters/
│   ├── pagination/
│   └── salary.pipe.ts
├── services/
│   ├── job.service.ts
│   └── company.service.ts
├── models/
│   ├── job.model.ts
│   └── company.model.ts
├── guards/
│   └── auth.guard.ts
└── resolvers/
    └── job-detail.resolver.ts

03List & Filter

Core Features — List & Filter

Job list with @for and track (Ch 3.7)
Filter by: company, min salary, job type (full-time/part-time), location
Filters as signals → computed filtered list (Ch 10.2)
Custom CurrencyPipe for Indian format (Ch 4.4)

"Filter = job search — sirf relevant jobs dikhao"

04Detail & Guards

Core Features — Detail & Guards

Job detail page with route param /jobs/:id (Ch 6.2)
Resolver pre-fetches job data (Ch 6.6)
Post Job page protected by auth guard (Ch 6.5)

"Detail = job ka poora description, Guard = login kiye bina post nahi kar sakte"

05Pagination

Core Features — Pagination

page = signal(1);
pageSize = signal(10);
paginatedJobs = computed(() => allJobs().slice(start, end));
totalPages = computed(() => Math.ceil(filteredJobs().length / pageSize()));

"Pagination = book ke pages — 10 jobs per page, next page pe click karo"

Project Summary

Signal-based filters with computed() filtered list
Resolver pre-fetches job detail data
Functional auth guard protects post-job route
Signal-based pagination with computed()
Custom pipe for Indian salary format

Previous15.1 — Biryani Shop 📋 All Chapters Next Chapter15.3 — Weather Dashboard →