Scribd
Upload
5 views4 pages

Frontend Machine Coding Guide

This document is a comprehensive interview preparation guide for frontend machine coding, categorized into basic, intermediate, and advanced levels. It includes high-frequency questions and practice sets from various companies, along with pro tips for machine coding rounds. Key topics cover DOM manipulation, state management, component creation, performance optimization, and real-world application patterns.

Uploaded by

Mayank Gupta
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
5 views4 pages

Frontend Machine Coding Guide

This document is a comprehensive interview preparation guide for frontend machine coding, categorized into basic, intermediate, and advanced levels. It includes high-frequency questions and practice sets from various companies, along with pro tips for machine coding rounds. Key topics cover DOM manipulation, state management, component creation, performance optimization, and real-world application patterns.

Uploaded by

Mayank Gupta
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

Frontend Machine Coding

Interview Prep Guide


Basic · Intermediate · Advanced

Use this guide to track your prep. Interview Favourites = high-frequency questions. Practice
Set = depth & senior rounds.

Interview Favourites
High-frequency questions seen at Flipkart, Swiggy, Razorpay, Google, and similar.

🟢 Basic
1 Todo list — add, delete, mark complete DOM

2 Counter app — increment, decrement, reset State

3 Form validation — email, password strength Forms

4 Toggle dark / light mode CSS

5 Show / hide password field DOM

6 Star rating component Component

🟡 Intermediate
1 Typeahead / autocomplete search Async

2 Debounced search with API call Perf

3 Modal / Dialog component from scratch Component


4 Infinite scroll list DOM

5 Custom dropdown / Select component Component

6 Tabs component Component

7 Stopwatch / Timer app State

8 Shopping cart — add / remove / quantity State

9 Fetch + display paginated data API

10 Drag and drop list reordering Events

🔴 Advanced
1 Virtualized list — render only visible rows Perf

2 Implement custom useState / useReducer Hooks

3 Build a client-side router (SPA) Arch

4 Kanban board with column + card movement Complex UI

5 Calendar / Date Picker from scratch Complex UI

6 Implement undo / redo functionality State

7 Polling mechanism with pause / resume Async

8 Tooltip component (positioning logic) Component

Practice Set
Build depth and tackle senior-level rounds. Architecture, complex UI, and real-world patterns.

🟢 Basic
1 OTP input — auto-focus next field Forms

2 Multi-step form wizard Forms

3 Character / word counter textarea DOM

4 Responsive navbar with hamburger CSS

5 CSS accordion / FAQ section CSS

6 Skeleton loader UI CSS

🟡 Intermediate
1 Carousel / slider component Component

2 Image gallery with lazy loading Perf

3 Rich text editor — bold, italic, lists Complex UI

4 Pub/sub event emitter Patterns

5 Memoization utility function Patterns

6 Request retry with exponential backoff Async

🔴 Advanced
1 Virtual DOM / mini React renderer Arch

2 Spreadsheet with editable cells + formulas Complex UI


3 Tree view — nested, expandable nodes Recursive UI

4 Bar / line chart using Canvas or SVG Data Viz

5 Chess board UI with move highlighting Logic

6 Wordle clone Game

7 Video player with custom controls Media

8 WebSocket-based live dashboard Real-time

9 Chat UI (WhatsApp / Slack style) Real-time

10 URL shortener UI with history App

Pro Tips for Machine Coding Rounds

→ Ask clarifying questions first Browser support, framework constraints, edge cases
before writing code.

→ Think component-first Break the UI into small, composable pieces before


implementation.

→ Handle edge cases Empty states, loading, error states — mention them proactively.

→ Write clean, readable code Good naming matters more than being clever.

→ Mention performance Debounce, throttle, lazy loading, memoization where relevant.

You might also like