🟢 Beginner-Level (0–1 year) Questions

1. Build a To-Do List

Task: Create a to-do app with features: Add, Delete, Mark as Done.

Follow-up Questions:

• How would you manage the state of each to-do item?
• Can you persist the data using localStorage?

2. Counter App with Reusable Components

Task: Build a counter with increment, decrement, and reset buttons using a reusable Button component.

Follow-up:

• How will you pass event handlers as props?
• Can you lift state up to a parent?

3. Form with Validation

Task: Create a form with fields: Name, Email, Password. Add validation (e.g., required, email format).

Follow-up:

• How do you show error messages conditionally?
• How would you prevent form submission if validation fails?

🟡 Intermediate-Level (1–2 years) Questions

4. Fetch & Display API Data

Task: Fetch user data from https://jsonplaceholder.typicode.com/users and display it in a table.

Follow-up:

• How do you handle loading and error states?
• How will you implement pagination or search?

5. Build a Product List with Filters

Task: Build a product list with category-based filtering.

Follow-up:

• How would you make the filter reusable?
• Can you optimize it using useMemo or React.memo?

6. CRUD Operations with Mock API

Task: Build a book management app that supports Create, Read, Update, Delete using json-server.

Follow-up:

• How will you update state after delete without refetching all data?
• Can you implement optimistic UI updates?

7. Modal & Portal

Task: Create a modal that opens on button click, and use React Portal to render it outside the main DOM tree.

Follow-up:

• Why would you use portals for modals or tooltips?
• How do you handle accessibility or focus trap in modals?

🟠 Advanced-Level (2–3 years) Questions

8. Authentication Flow (Without Firebase)

Task: Create a login page. After login, store the JWT in localStorage and protect dashboard routes.

Follow-up:

• How will you manage auth state globally?
• What security issues can happen with JWT in localStorage?

9. Reusable Form Component

Task: Build a dynamic form component based on a JSON config.

Follow-up:

• How can you use useReducer to manage complex form state?
• How will you handle different input types like dropdowns, radio buttons, etc.?

10. Performance Optimization

Task: You have a list of 1000 items. Implement virtualization to optimize rendering.

Follow-up:

• What is react-window or react-virtualized?
• When would you use useMemo or useCallback?

11. Dashboard with Charts

Task: Use chart.js or recharts to build a dashboard that shows sales data fetched from an API.

Follow-up:

• How would you handle responsive layout and chart resizing?
• Can you lazy load the chart component?

12. Build a Multilingual App

Task: Create a form that switches between English and Hindi using react-i18next.

Follow-up:

• How do you store translations?
• How do you dynamically change the language?

Bonus: Mock Assignment

Create a mini eCommerce app with:

• Product list and detail page
• Add to cart feature
• Simple checkout form
• React Router navigation