💼 Hiring Quest – Frontend Angular Engineer (Mid-Level) @ Sahm Food

👋 We are Sahm Food, a technology-driven company operating in the food industry, building digital solutions that power restaurants, retail operations, and modern POS experiences.

Our products are used daily by cashiers, branch managers, and operations teams where speed, usability, and reliability directly impact business operations.

We're looking for a Mid-Level Angular Engineer( 2–4 Years Experience) who enjoys solving complex UI problems, designing maintainable frontend architecture, and building production-quality applications—not just beautiful screens.

🕓 Start Date: Immediate
📍 Location: Nasr City, Cairo (On-Site)
💼 Employment Type: Full-Time
💰 Salary: 25,000 – 40,000 EGP

🛠️ How the Hiring Quest Works

1️⃣ Register for the quest

2️⃣ Receive the complete challenge after registration closes

3️⃣ Submit your solution before the deadline

4️⃣ Top candidates will be invited to a technical review session

5️⃣ One candidate will be hired, while other strong candidates may be considered for future openings

🔍 Who We're Looking For

1. ✅ 2–4 years of professional Angular experience

2. ✅ Strong TypeScript knowledge

3. ✅ Solid understanding of Angular architecture and RxJS

4. ✅ Experience building reusable component libraries

5. ✅ Excellent state management skills

6. ✅ Deep understanding of asynchronous programming

7. ✅ Experience integrating REST APIs

8. ✅ Strong HTML/CSS/SCSS skills

9. ✅ Understanding of responsive and accessible UI

10. ✅ Experience optimizing frontend performance

11. ✅ Familiarity with testing Angular applications

12. ✅ Strong Git workflow

13. ✅ Ability to explain technical decisions clearly

🧠 Hiring Quest

Build a Smart Restaurant POS Dashboard

Business Context

Sahm Food operates hundreds of restaurants where every cashier works through a browser-based POS system.

The company is introducing a new Smart Order Workspace that combines traditional POS operations with AI-powered assistance.

The dashboard is used simultaneously by:

1. Cashiers

2. Branch Managers

3. Kitchen Staff

4. Customer Support

Unlike traditional CRUD dashboards, this workspace continuously receives live updates from multiple systems.

Your goal is not to build a complete application.

Instead, build a frontend architecture capable of handling complex UI interactions, asynchronous events, and scalable state management while keeping the application maintainable.

Core Modules

1. 1. Live Orders Workspace

Display orders coming from different channels:

• Walk-in

• Delivery

• Online

Orders continuously change status.

Examples:

Received

↓

Preparing

↓

Ready

↓

Delivered

↓

Completed

Updates may arrive:

• Automatically

• From polling

• From simulated WebSocket events

The UI should remain responsive without unnecessary re-rendering.

2. AI Order Assistant

Each order includes an AI recommendation panel.

The assistant may suggest:

1. Upselling items

2. Allergy warnings

3. Missing order information

4. Delivery risks

5. Kitchen overload warnings

AI responses arrive asynchronously.

They may:

1. take several seconds

2. fail

3. retry

4. stream partial responses (simulation)

The UI should gracefully handle every state.

3. Kitchen Load Monitor

1. Display live kitchen workload.

2. The workload affects order priorities.

3. When kitchen load changes:

4. Some orders become delayed.

5. Priority badges update automatically.

6. Recommendations change.

7. The UI should react without page refresh.

4. Advanced Product Search

Implement a search experience with:

1. Instant filtering

2. Debouncing

3. Keyboard navigation

4. Category filters

5. Recent searches

6. Highlighted matches

Large datasets should remain performant.

5. Offline Support

The application should tolerate temporary connection loss.

Examples:

Queue optimistic actions

Restore pending operations

Recover gracefully after reconnection

Prevent duplicated user actions

Architectural Expectations

Your project should demonstrate thoughtful frontend engineering.

Examples include:

1. Feature-based architecture

2. Smart separation between presentation and business logic

3. Reusable components

4. Proper Angular patterns

5. Lazy loading where appropriate

6. Scalable folder organization

7. Proper typing

8. Clean dependency boundaries

Avoid placing business logic directly inside components.

State Management

Choose any approach you believe is appropriate.

Examples:

1. NgRx

2. Signals

3. Component Store

4. Services with RxJS

Your choice matters less than your reasoning.

Be prepared to justify:

1. Why you selected it

2. Trade-offs

3. Scalability considerations

UI/UX Expectations

We're evaluating engineering—not graphic design.

However, we expect:

1. Clean UX

2. Responsive layout

3. Loading states

4. Skeleton screens

5. Error boundaries

6. Empty states

7. Smooth transitions

8. Keyboard accessibility

9. Accessible components

10. Good information hierarchy

1. Fake Backend

You may simulate backend behavior.

Examples:

1. Mock APIs

2. JSON Server

3. MSW

4. Fake WebSocket

5. RxJS timers

6. Mock services

The quality of simulation is part of the evaluation.

Engineering Challenges

Your implementation should demonstrate solutions for problems such as:

1. Multiple concurrent API requests

2. Request cancellation

3. Race conditions

4. Optimistic updates

5. Retry strategies

6. Error recovery

7. Caching

8. Reactive programming

9. Memory leak prevention

10. Efficient change detection

11. Preventing unnecessary component renders

Testing

Include meaningful automated tests.

At minimum, cover:

1. State management behavior

2. Search functionality

3. Order status updates

4. AI assistant state transitions

5. Retry logic

6. Offline synchronization

7. Component behavior

8. Critical business flows

Unit tests are expected. Integration tests are a plus.

Documentation

Include a README describing:

1. Project architecture

2. Folder structure

3. Design decisions

4. State management approach

5. Performance optimizations

6. Assumptions

7. Known limitations

8. Future improvements

Deliverables

Submit a GitHub repository containing:

1. Complete source code

2. README

3. Installation instructions

4. Environment configuration

5. Tests

6. Mock backend implementation

Additionally include:

1. Postman or Bruno collection (if mock APIs are exposed)

2. Any mock datasets used

3. Architecture diagram (optional but recommended)

🎥 Technical Walkthrough Video (Required)

Record a 12–20 minute screen recording.

The video should include:

Part 1 — Product Demo

Demonstrate:

1. Live order updates

2. AI assistant behavior

3. Search functionality

4. Offline recovery

5. Kitchen load updates

6. Error handling

7. Loading states

Part 2 — Engineering Deep Dive

Explain:

1. Overall architecture

2. Why you structured the project this way

3. State management decisions

4. Component communication strategy

5. RxJS usage

6. Performance optimizations

7. Change detection strategy

8. Lazy loading

9. Reusability decisions

10. Error handling

11. Testing strategy

Part 3 — Live Code Navigation

Walk through your codebase and explain:

1. Folder organization

2. Shared components

3. Services

4. State layer

5. API abstraction

6. Reusable utilities

7. Custom directives/pipes (if any)

Part 4 — Trade-offs

Discuss:

1. What you intentionally simplified

2. What you would improve with more time

3. Technical debt you accepted

4. Alternative architectural approaches you considered

5. How this project could scale to hundreds of screens

🤖 AI Usage Policy

AI tools are allowed.

However, this challenge evaluates your engineering ability, not your ability to generate code.

If you used AI tools, your submission must include:

1. Which AI tools were used

2. The main prompts or workflows you relied on

3. Relevant conversation excerpts or prompt history

4. Which parts were AI-generated

5. Which parts you designed or significantly modified yourself

6. Architectural decisions you personally made

7. How you verified AI-generated code

8. Any incorrect AI suggestions you rejected and why

Failure to disclose AI usage may negatively affect the evaluation.

📋 Evaluation Criteria

Candidates will be evaluated on:

1. Angular architecture

2. TypeScript quality

3. RxJS proficiency

4. State management

5. Performance optimization

6. Component design

7. Code maintainability

8. Scalability

9. Testing quality

10. Accessibility

11. Error handling

12. Documentation

13. Communication during the walkthrough

14. Engineering reasoning

15. Overall frontend craftsmanship