💼 Hiring Quest – Mid-Level Frontend Developer Angular @ Expanders360

👋 We are Expanders360, a LegalTech & Data Intelligence company empowering legal teams with real-time analytics, automation, and intelligent insights.
We help enterprises track compliance, monitor legal workflow health, and make data-driven decisions through clean, high-performance dashboards.

We’re hiring a Mid to Senior Frontend Developer (Angular) to join our engineering team building next-generation legal analytics modules.

🕓 Start Date: Immediate
📍 Location: Nasr City (Hybrid)
💰 Salary: $1000–$1500

🛠️ How the Hiring Quest Works

1. Register for the quest

2. Receive the full challenge after registration closes

3. Submit your solution before the deadline

4. Top candidates join a technical review session

5. One candidate will be hired

🔍 Who We’re Looking For

1. ✔ 3+ years of professional experience with Angular

2. ✔ Advanced usage of ECharts or D3.js

3. ✔ Strong understanding of reactive programming (RxJS)

4. ✔ Experience building real-time dashboards or data-heavy visualizations

5. ✔ Solid knowledge of architecture, state management (NgRx / Signals), and performance tuning

6. ✔ Strong API integration skills with clean abstractions

💡 Bonus Skills

1. WebSockets / SSE

2. Streaming data

3. Timeline visualizations

4. Docker

5. Caching layers

6. Deployment/hosting familiarity

🎯 Your Mission

“Legal Workflow Monitoring & Anomaly Detection Dashboard”

🧠 Business Context

Legal teams need real-time visibility to detect delays, anomalies, and potential SLA breaches in workflows (case intake, approvals, document reviews).

Your mission: Build a real-time monitoring dashboard that displays workflow health, anomalies, and system activity in an intuitive, visually compelling way.

📌 The Challenge

1️⃣ Step 1 — Mock API for Real-Time Data

You will build a small simulated backend with endpoints:

Required Endpoints

GET /stats/overview

1. total workflows today

2. average cycle time

3. % SLA compliance

4. active anomalies count

GET /stats/timeline

1. workflow events in the past 24 hours (timestamp + event type)

GET /stats/anomalies

1. type

2. severity

3. timestamp

WebSocket or SSE (High Value)

Broadcast a new event every 10–20 seconds (e.g., “SLA breach”, “Case delayed”).
These events must update the dashboard in real-time.

2️⃣ Step 2 — Angular Real-Time Dashboard

Build a dashboard with four core components:

📈 1. Real-Time Event Timeline

1. Horizontal timeline chart

2. Green = completed

3. Yellow = pending

4. Red = anomaly

5. Auto-scroll on new events

6. Tooltip on hover
   

🚦 2. Workflow Health Status Cards

1. SLA Compliance

2. Cycle Time

3. Active Anomalies

4. Total Workflows Today

5. Updates reactively as new events stream in

📊 3. Anomaly Heatmap

1. Group anomalies by hour & severity

2. Severity-based color coding

3. Click a cell to open details panel

📉 4. Workflow Volume Chart

1. Bar/line hybrid

2. Volume per hour

3. Filters: 6h / 12h / 24h

3️⃣ Step 3 — Interactions & Filters

1. ✔ Filter timeline events by category

2. ✔ Toggle anomaly types

3. ✔ Auto-refresh or WebSocket streaming

4. ✔ Smooth chart transitions

4️⃣ Step 4 — State Management (NgRx or Signals)

Store the following in a scalable state layer:

1. Live events

2. Overview metrics

3. Anomaly lists

4. User filters

Must be performant, real-time, and cleanly organized.

5️⃣ Step 5 — Deployment & DevOps (New Requirement)

We want to see how you ship your work.

Required

1. Dockerfile for frontend (Angular app)

2. Dockerfile for backend (mock API + WebSocket/SSE)

3. docker-compose.yml that runs the full system with one command

4. Clear documentation for: Local setup, Running with Docker, Environment variables

Optional but Highly Impressive

1. Public live demo URL

2. Basic CI pipeline (GitHub Actions)

3. Instructions for deploying to a simple hosting service (Railway, Render, Azure App Service, etc.)

6️⃣ Step 6 — Bonus Features (+15%)

1. ✨ Real-time toast notifications

2. ✨ Dark mode

3. ✨ Pause/resume live updates

4. ✨ Global refresh

5. ✨ Custom D3 animations

6. ✨ Simulated backend errors (5% error rate)

🗄️ Suggested Tech Stack

1. Angular 13+

2. ECharts or D3.js

3. NgRx / Angular Signals

4. WebSockets / SSE

5. Node.js / FastAPI for the mock API

6. TailwindCSS / Angular Material

7. Docker + Docker Compose

8. GitHub Actions (optional)

🧩 Example Flow

1. Dashboard loads and shows initial stats

2. WebSocket pushes a new “delay” event

3. Timeline updates instantly

4. Overview metrics recalculated

5. User filters for SLA Breaches only

6. Heatmap highlights the relevant hour
   

🎁 Extra Points

1. ✨ Local caching of events

2. ✨ Chart tests (Jest/Karma)

3. ✨ Smooth chart transitions

4. ✨ Skeleton loaders

5. ✨ Accessibility best practices

🧰 What You Should Submit

📂 GitHub Repository containing:

1. /frontend Angular implementation

2. /backend mock API + streaming

3. Dockerfile(s)

4. docker-compose

5. Clean architecture

6. README.md with setup + deployment

7. Dashboard screenshots

8. Optional: ARCHITECTURE.md

📹 Video (5–8 minutes)

1. 2 min introduction

2. 3–5 min dashboard walkthrough

3. Optional deployment explanation

📊 Evaluation Criteria

1. Real-Time Architecture & State Management 30%

2. Data Visualization & Chart Quality 25%

3. UI/UX & Responsiveness 20%

4. API Integration & Data Handling 15%

5. Deployment & Setup (Docker, DX) 5%

6. Error Handling 5%

7. Bonus Features +5%

📩 After Submission

Top candidates will be invited to a live technical review to discuss:

1. Real-time architecture

2. Visualization decisions

3. State management

4. Deployment strategy

5. How the dashboard would scale to enterprise load
   

👉 Final hiring decision within 5 business days.