Scribd
Upload
2 views3 pages

Frontend Interview Preparation

This document outlines the top 30 frontend interview tasks specifically designed for software developer internship interviews, focusing on React and Tailwind. It covers essential topics such as core React component logic, state management, API handling, accessibility practices, and testing. Each task is aimed at enhancing practical skills relevant to real-world UI development and testing scenarios.

Uploaded by

defobad216
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views3 pages

Frontend Interview Preparation

This document outlines the top 30 frontend interview tasks specifically designed for software developer internship interviews, focusing on React and Tailwind. It covers essential topics such as core React component logic, state management, API handling, accessibility practices, and testing. Each task is aimed at enhancing practical skills relevant to real-world UI development and testing scenarios.

Uploaded by

defobad216
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

✅ Top 30 Frontend Interview Tasks (100%

Interview-Proof Edition)
Tailored for Software Developer Internship Interviews with React + Tailwind + Real-World
UI + State + API + Testing

⚛️Core React & Component Logic (1–8)


1. Modal & Tooltip System From Scratch
→ Positioning, click-outside, ESC key, accessibility.

2. Custom Dropdown/Select Component


→ Keyboard nav, outside click, highlight.

3. Multi-Step Form (Stepper)


→ Navigation, schema validation, summary.

4. Dark/Light Theme Switcher (Tailwind + localStorage)

5. Responsive Dashboard Layout (Sidebar + Cards)

6. Framer Motion for Modal/Page Animations

7. Kanban Drag & Drop UI (react-beautiful-dnd)

8. Toast Notification System (Customizable + Auto-dismiss)

🌐 Routing, Navigation & Auth Flow (9–10)


9. React Router App with Lazy-Loaded Pages
→ React.lazy, Suspense, nested + protected routes.

10. Login System with Protected Routes (Context + Route Guard)

🔁 State Management (Redux + Context) (11–14)


11. Redux Toolkit Counter + API Slice Demo
12. Redux Mini Cart + Badge + LocalStorage Sync

13. Context API Theme Toggle (Global State)

14. Auth Context with useReducer & Global User State

📊 Charts & Data Visualization (15–16)


15. Pie Chart from Scratch (SVG + Hover Labels)

16. Line/Bar Chart Using Recharts or Chart.js (Responsive)

🔍 API + List + Async Logic (17–20)


17. Search + Filter + Sort on List (Local & API)

18. Paginated API List with Loading/Error States

19. Sortable Data Table with Pagination

20. Skeleton Loader/Shimmer While Fetching Data

📝 Form Handling & Validation (21–23)


21. Dynamic Form with Yup Validation (Add/Remove Fields)

22. File/Image Upload with Preview + Size/Type Validation

23. Debounced Auto-Suggestion Search Input (API-based)

🌍 Accessibility & A11y Practices (24–25)


24. Accessible Modal/Dialog (aria- + Focus Trap + ESC)*

25. Accessible Form with Semantic Tags & Keyboard Navigation


🧪 Testing + TypeScript + Docs (26–28)
26. Write Unit Tests with React Testing Library (Modal, Toast)

27. Convert 1-2 Components to TypeScript


→ Add types for props/state/hooks

28. Add JSDoc or README to 2–3 Components for Self-Docs

🎨 UX Polish & Micro-Features (29–30)


29. Copy to Clipboard Button + Toast Feedback

30. Countdown Timer App with Real-Time Update

You might also like