Learn › Low-Level Design (LLD)

🧱 Low-Level Design (LLD)

Design real UI systems from scratch — EventEmitter, Modal, Autocomplete, Toast, and Form Validation with full TypeScript implementations.

Goal

Walk through a component LLD in under 30 minutes: requirements → API → data model → working code.

LLD Framework: How to Approach Any Design Problem

A repeatable 5-step process for frontend LLD interviews — requirements, API design, data model, class structure, and edge cases.

medium ⏱ 20m 02

SOLID Principles in JavaScript & TypeScript

All five SOLID principles with real JS/TS examples — what each one means, how to violate it, and how to fix the violation.

medium ⏱ 25m 03

LLD: Design an EventEmitter / Pub-Sub

Full implementation of a typed EventEmitter with on, off, emit, once, and removeAll — one of the most common LLD coding questions.

medium ⏱ 22m 04

LLD: Design a Modal / Dialog Component

Design a production-quality Modal — focus trap, scroll lock, portal rendering, accessibility, animation, and composable API.

medium ⏱ 25m 05

LLD: Design a Typeahead / Autocomplete

Design a production autocomplete — debounced remote search, keyboard navigation, accessibility, caching, and cancellation.

hard ⏱ 30m 06

LLD: Design a Toast / Notification System

Design a global toast system — imperative API, auto-dismiss, stacking, progress bar, and the singleton pattern in React via context.

medium ⏱ 25m 07

LLD: Design a Form Validation Library

Design a composable, schema-based form validation library — validator functions, chaining, async validators, and a React hook integration.