Frontend Developer
This Frontend Developer interview question bank covers 15 questions across React, State management, Accessibility, Performance, CSS, Testing, Javascript. Each one mirrors a entry to mid level screen, so you can rehearse the exact areas a hiring panel digs into and walk in ready.
What this interview tests
- React
- State management
- Accessibility
- Performance
- CSS
- Testing
- Javascript
Frontend Developer interview questions
- Question 1Focus area: React
Walk me through how you would architect a large React application with dozens of pages and shared state. What patterns and folder structures do you use?
What a strong answer covers
A strong answer covers feature-based folder structure, co-location of related files, clear separation of concerns (UI vs logic), awareness of barrel exports and tree-shaking implications, route-based code splitting. Be ready to discuss: How do you decide what state lives in a global store versus local component state? How do you handle code splitting and lazy loading? What naming conventions do you follow for components and hooks?
- Question 2Focus area: State management
Describe a complex state management challenge you've faced in a frontend application. How did you solve it?
What a strong answer covers
A strong answer covers clear problem framing, evaluation of options (Context, Redux, Zustand, Jotai), understanding of when global state is truly needed, performance considerations (unnecessary re-renders), normalization of server state. Be ready to discuss: Why did you choose that particular state management approach over alternatives? How did you handle derived or computed state?
- Question 3Focus area: Accessibility
How do you approach making a web application accessible to users with disabilities? Give me specific techniques you've implemented.
What a strong answer covers
A strong answer covers semantic HTML, ARIA roles and labels (used correctly, not overused), keyboard navigation, focus management in SPAs, screen reader testing (VoiceOver, NVDA), color contrast, WCAG 2.1 awareness, automated tooling (axe-core, Lighthouse). Be ready to discuss: How do you test for accessibility issues during development? What's the most challenging accessibility problem you've had to solve?
- Question 4Focus area: Performance
Tell me about a time you had to significantly improve the performance of a frontend application. What metrics did you focus on, and what changes did you make?
What a strong answer covers
A strong answer covers core Web Vitals (LCP, FID/INP, CLS), use of Lighthouse/WebPageTest, bundle analysis, image optimization, critical rendering path, React profiler for re-render analysis, concrete before/after metrics. Be ready to discuss: How did you measure the impact of your changes? What trade-offs did you make between performance and developer experience?
- Question 5Focus area: CSS
How would you implement a design system that's shared across multiple frontend applications? What are the key decisions you'd need to make?
What a strong answer covers
A strong answer covers component library architecture, CSS-in-JS vs utility-first CSS vs CSS Modules tradeoffs, design tokens, monorepo or npm package distribution, Storybook for documentation, visual regression testing, semver for breaking changes. Be ready to discuss: How do you handle theming and dark mode? How do you version and distribute the design system?
- Question 6Focus area: React
Explain how you handle data fetching in a modern React application. What patterns do you follow for loading states, error handling, and caching?
What a strong answer covers
A strong answer covers React Query/SWR or similar data-fetching library, stale-while-revalidate pattern, loading/error/success state machines, optimistic UI with rollback, SSR/SSG decisions based on data freshness needs, avoiding waterfalls. Be ready to discuss: How do you handle optimistic updates for mutations? When would you use server-side rendering vs client-side fetching?
- Question 7Focus area: Testing
How do you approach writing tests for frontend components? What's your testing strategy and where do you draw the line on what to test?
What a strong answer covers
A strong answer covers testing library (React Testing Library), testing behavior not implementation, mocking API calls (MSW), test pyramid for frontend (many integration, few e2e), snapshot testing used sparingly, user-centric selectors (role, label). Be ready to discuss: How do you decide between unit tests, integration tests, and end-to-end tests for a given feature? How do you test components that depend on external APIs?
- Question 8Focus area: React
Describe how you would build a complex form with dynamic fields, conditional validation, and multi-step navigation. What tools and patterns would you use?
What a strong answer covers
A strong answer covers form library choice (React Hook Form, Formik), schema-based validation (Zod, Yup), controlled vs uncontrolled inputs, debounced validation, draft persistence (localStorage, URL state), clear UX for multi-step (progress indicator, back navigation). Be ready to discuss: How do you handle form state persistence if the user navigates away accidentally? How would you implement real-time field validation without degrading UX?
- Question 9Focus area: Javascript
How do you handle authentication and protected routes in a single-page application? Walk me through the flow from login to accessing a protected resource.
What a strong answer covers
A strong answer covers JWT vs session-based auth tradeoffs, httpOnly cookies vs localStorage, silent refresh with refresh tokens, route guards, redirect to login with return URL, XSS and CSRF awareness, token expiration handling. Be ready to discuss: How do you handle token refresh without disrupting the user experience? What security considerations are specific to storing tokens in the browser?
- Question 10Focus area: CSS
Tell me about a time you had to debug a particularly tricky CSS layout issue. What was the problem, and how did you solve it?
What a strong answer covers
A strong answer covers systematic debugging (DevTools, computed styles, box model inspection), understanding of flexbox/grid layout algorithms, stacking context and z-index issues, browser-specific quirks, responsive design breakpoints, CSS specificity management. Be ready to discuss: What tools do you use to debug CSS issues? How do you ensure consistent rendering across browsers?
- Question 11Focus area: Javascript
How would you implement internationalization (i18n) in a React application that needs to support both LTR and RTL languages?
What a strong answer covers
A strong answer covers i18n library choice (react-intl, next-intl, i18next), ICU message format for plurals, logical CSS properties for RTL (inline-start/end), dir attribute handling, locale-aware date/number formatting (Intl API), translation workflow (extraction, translator handoff). Be ready to discuss: How do you handle pluralization and date/number formatting across locales? What's your approach to managing translation files at scale?
- Question 12Focus area: Performance
Explain how you would optimize a React application that has noticeable jank when rendering large lists of data.
What a strong answer covers
A strong answer covers virtualization (react-window, react-virtuoso), React.memo and useMemo for expensive computations, key prop usage, avoiding inline object/function creation in render, React DevTools Profiler, requestAnimationFrame for scroll-linked updates. Be ready to discuss: When would you use virtualization versus pagination? How do you profile React component re-renders?
- Question 13Focus area: React
How do you handle error boundaries and graceful degradation in a production React application?
What a strong answer covers
A strong answer covers React Error Boundary components, granular boundaries around independent features (not one giant wrapper), fallback UI design, error reporting (Sentry, LogRocket), recovery mechanisms (retry buttons), differentiation between recoverable and fatal errors. Be ready to discuss: How do you decide the granularity of your error boundaries? How do you report frontend errors in production?
- Question 14Focus area: CSS
Describe your approach to responsive design. How do you ensure a complex dashboard works well on both desktop and mobile?
What a strong answer covers
A strong answer covers mobile-first vs desktop-first reasoning, container queries vs media queries, fluid typography (clamp), design collaboration (not just shrinking desktop), touch target sizes, responsive data tables strategies, breakpoint selection rationale. Be ready to discuss: How do you decide what to show or hide on smaller screens? What's your approach to responsive typography and spacing?
- Question 15Focus area: State management
You've just joined a new team and the frontend codebase has significant technical debt. How would you assess the situation and propose a plan to address it?
What a strong answer covers
A strong answer covers systematic audit approach (bundle size, test coverage, dependency freshness, type coverage), impact-based prioritization (what blocks velocity most), incremental refactoring alongside feature work, measurable goals, ability to frame tech debt in business terms. Be ready to discuss: How do you prioritize which debt to tackle first? How do you get buy-in from stakeholders who want new features?
Questions asked in almost every interview
Ready to practice for real?
Rehearse these Frontend Developer questions out loud with an AI interviewer that speaks Arabic and English, then get instant feedback on your answers.
Practice with AI, start free