Frontend Interview Question Set (React, REST API, TypeScript)
Time Allocation Plan (1 Hour)
| Topic | Time | Type | Focus Area |
|-----------------------|-----------|---------------------|--------------------------------------------|
| API Integration | 15 mins | Scenario + Code | REST APIs, retries, error handling |
| React (Hooks + State) | 20 mins | Concept + Code | Hooks, Context, Redux |
| TypeScript | 15 mins | Deep concepts + Code| Generics, Decorators, Utility types |
| System Thinking | 10 mins | Scenario/Arch | API-led connectivity, modularity, scaling
API Integration - 15 mins
Q1. Scenario-Based:
"You're building a product details page that requires 3 API calls - product info, inventory status, and similar
recommendations.
How would you structure the data fetching in React to avoid blocking rendering and handle failures
gracefully?"
Follow-up:
- What if one API fails? Would you show partial content?
- How do you handle retries and timeouts?
Q2. Code Question (5 mins):
"Write a small `useApi` custom hook in TypeScript to handle GET requests with loading and error states."
React - 20 mins
Q3. Conceptual + Tradeoff:
"When would you use Context API over Redux, and when not? Let's say you're managing user preferences,
auth tokens, and cart state - how would you organize this?"
Q4. Code Implementation (Hooks):
"Write a custom hook using useReducer to manage form state for multiple fields like name, email, password.
Frontend Interview Question Set (React, REST API, TypeScript)
Add validation logic for each field."
Q5. Redux Deep Dive:
"Walk me through how you would structure Redux slices and middleware in a large app with 4+ modules like
user, orders, cart, and admin."
Advanced TypeScript - 15 mins
Q6. Type Challenge:
Given the following object:
const config = {
apiUrl: 'https://example.com',
timeout: 5000,
retries: 3
Write a utility type that makes all keys readonly and their values non-nullable.
Q7. Decorator/Namespace Understanding (theory):
"Can you explain what a class decorator is in TypeScript? How would you use one to log execution time of a
method?"
API-Led Connectivity/Architectural Thinking - 10 mins
Q8. Scenario-Based Design Thinking:
"You're leading frontend development for a large retail app that talks to 10+ microservices. How would you
apply API-led design to make integration scalable, testable, and modular?"
Bonus Follow-up:
- Would you use BFF?
- How would you decouple feature development from backend timelines?
Evaluation Matrix
Frontend Interview Question Set (React, REST API, TypeScript)
| Category | What to Look For |
|----------------|----------------------------------------------------------------------------------|
| API Integration| Async handling, graceful failure, retry logic, separation of concerns |
| React | Clean hooks usage, proper state division, Redux architecture thinking |
| TypeScript | Comfort with utility types, decorators, and structural typing |
| Design Thinking| API modularity, separation via layers, experience with complex systems
