Low-Level-Design-Javascript

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

Low-Level-Design-Javascript

★ 12 Open GitHub ↗

LLD Most asked question in LLD

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# LLD interview practice (JavaScript)

Small, runnable **low-level design** exercises in plain **Node.js (ESM)**. Each folder is self-contained: **`node index.js`** or **`npm start`**, almost always **zero npm dependencies**. Code is for **interview prep** and **talk-track practice**, not production.

**Where to learn each topic:** open **`interviews/<NN-topic>/README.md`** for that exercise. Every project README is written to stand alone: **problem scope**, **several Mermaid diagrams** (flow, sequence, structure, state), **class map**, **how to run**, **file index**, and **interviewer Q&A**. This file ties the **collection** together and adds **extra collection-level charts** you will not find in a single folder.

---

## 1. What this repo is for

| Goal | How this helps |
|------|----------------|
| **Name responsibilities** | Each project splits **nouns** (entities, value objects) from **verbs** (services, managers, games). |
| **Pick patterns** | Singleton facades, Strategy, State, Observer, composite delivery, builders—**in context**, not only textbook lists. |
| **Run something** | Trace **one user command** from `index.js` → facade → domain → back to stdout. |
| **Draw before coding** | Project READMEs use **Mermaid** (renders on GitHub, VS Code, Notion, many viewers). |
| **Speak in an interview** | Use each README’s **Q&A** and **talk track** as prompt cards. |

**What is *not* here:** production auth, real databases, horizontal scaling, full observability—those appear as **cross-questions** in READMEs.

---

## 2. How to use it (step-by-step)

1. **Pick** a topic from the [index](#3-index--all-exercises) or [tracks](#4-suggested-tracks-optional-paths).  
2. Open **`interviews/<folder>/README.md`** and read in order: **problem → diagrams → solution shape → commands**.  
3. **`cd`** into that folder; run **`npm start`** and/or **`npm run demo`**.  
4. Map **diagram boxes** to **real files** using the **File reference** table.  
5. **Close the loop:** explain aloud: requirements → main classes → **happy path** → **failure path** → **one extension**.

**Prerequisites:** Node.js LTS. Prefer a **real TTY** for REPLs.

### Study loop (per exercise)

```mermaid
flowchart TD
  A[Open folder README] --> B[Read problem + out of scope]
  B --> C[Study all Mermaid diagrams]
  C --> D[Read solution shape table]
  D --> E[Run demo + REPL]
  E --> F[Trace code path]
  F --> G{Matches diagrams?}
  G -->|no| C
  G -->|yes| H[Mock: 60s talk + 2 edge cases]
```

---

## 3. Index — all exercises

| # | Topic | Folder | Idea in one line |
|---|--------|--------|------------------|
| 01 | [Tic Tac Toe](01-tic-tac-toe/README.md) | `01-tic-tac-toe` | Board + game loop + deque turns |
| 02 | [Snake & Ladder](02-snake-and-ladder/README.md) | `02-snake-and-ladder` | Board jump map, dice, exact finish |
| 03 | [Minesweeper](03-minesweeper/README.md) | `03-minesweeper` | Deferred mines, flood fill, flags |
| 04 | [Parking lot](04-parking-lot/README.md) | `04-parking-lot` | Typed spots, singleton lot, simulation |
| 05 | [Online book reader](05-online-book-reader/README.md) | `05-online-book-reader` | Reader system, shelf, display |
| 06 | [Logging framework](06-logging-framework/README.md) | `06-logging-framework` | Levels, appenders, formatter, singleton logger |
| 07 | [Vending machine](07-vending-machine/README.md) | `07-vending-machine` | State pattern, inventory, coins |
| 08 | [Traffic signal system](08-traffic-signal-system/README.md) | `08-traffic-signal-system` | Directions, light states, timers |
| 09 | [Task management system](09-task-management-system/README.md) | `09-task-management-system` | Tasks, lists, search + strategies |
| 10 | [Stack Overflow](10-stack-overflow/README.md) | `10-stack-overflow` | Q&A, votes, tags, reputation |
| 11 | [Elevator system](11-elevator-system/README.md) | `11-elevator-system` | Multi-elevator dispatch, state, SCAN-like |
| 12 | [Splitwise](12-splitwise/README.md) | `12-splitwise` | Groups, split strategies, balances |
| 13 | [Movie ticket booking](13-movie-ticket-booking/README.md) | `13-movie-ticket-booking` | Shows, seat lock, pricing + payment |
| 14 | [Notification system](14-notification-system/README.md) | `14-notification-system` | Publish, severity, composite channels |
| 15 | [Food delivery](15-food-delivery/README.md) | `15-food-delivery` | Order, prep, rider match, notify |
| 16 | [LRU cache](16-lru-cache/README.md) | `16-lru-cache` | Hash map + DLL, O(1) get/put |
| 17 | [URL shortener](17-url-shortener/README.md) | `17-url-shortener` | Base62, TTL, optional dedupe |
| 18 | [Social networking service](18-social-networking-service/README.md) | `18-social-networking-service` | Friends, posts, feed strategy, notify |
| 19 | [Rate limiter](19-rate-limiter/README.md) | `19-rate-limiter` | Fixed/sliding/token/leaky + factory |
| 20 | [Collaborative document editor](20-collaborative-doc-editor/README.md) | `20-collaborative-doc-editor` | OT-style pipeline, presence, revisions |
| 21 | [ATM](21-atm/README.md) | `21-atm` | State machine, bank, cash dispenser chain |
| 22 | [LinkedIn-style networking](22-linkedin/README.md) | `22-linkedin` | Profiles, connections, jobs, search |
| 23 | [Car rental system](23-car-rental-system/README.md) | `23-car-rental-system` | Reservations, overlap, payments |
| 24 | [Online auction system](24-online-auction-system/README.md) | `24-online-auction-system` | Listings, bids, close, winner |
| 25 | [Hotel management system](25-hotel-management-system/README.md) | `25-hotel-management-system` | Rooms, dates, check-in/out, payments |
| 26 | [Digital wallet service](26-digital-wallet-service/README.md) | `26-digital-wallet-service` | Multi-currency, FX, transfers |
| 27 | [Airline management system](27-airline-management-system/README.md) | `27-airline-management-system` | Flights, seats, bookings, cancel |
| 28 | [Library management system](28-library-management-system/README.md) | `28-library-management-system` | Catalog, loans, limits |
| 29 | [Restaurant management system](29-restaurant-management-system/README.md) | `29-restaurant-management-system` | Menu, orders, reservations, reports |
| 30 | [Concert ticket booking](30-concert-ticket-booking-system/README.md) | `30-concert-ticket-booking-system` | Seats, waitlist, confirmations |
| 31 | [Chess game](31-chess-game/README.md) | `31-chess-game` | Board, legal moves, checkmate, stalemate |
| 32 | [Ride-sharing service](32-ride-sharing-service/README.md) | `32-ride-sharing-service` | Passengers, drivers, fares, ride lifecycle |
| 33 | [Course registration](33-course-registration-system/README.md) | `33-course-registration-system` | Capacity, enroll, search, observers |
| 34 | [Online shopping](34-online-shopping-service/README.md) | `34-online-shopping-service` | Catalog, cart, checkout, orders |
| 35 | [Online stock brokerage](35-online-stock-brokerage-system/README.md) | `35-online-stock-brokerage-system` | Accounts, quotes, limit orders, portfolio |
| 36 | [Music streaming](36-music-streaming-service/README.md) | `36-music-streaming-service` | Library, playlists, player, recommendations |
| 37 | [Cricinfo](37-cricinfo/README.md) | `37-cricinfo` | Matches, scorecards, live balls |

### Master map — primary pattern & entry file

Quick orientation when you open a folder:

```mermaid
flowchart LR
  subgraph entry["Typical entry"]
    I[index.js]
    D[demo.mjs]
    P[package.json]
  end
  subgraph core["Typical core"]
    F[Facade *Service.js]
    E[entities/]
    U[enums/]
  end
  I --> F
  D --> F
  F --> E
  F --> U
```

| # | Main facade / brain | Patterns to mention |
|---|---------------------|---------------------|
| 01–03 | Game class | Game loop, rules |
| 04 | `ParkingLot` | Singleton, Factory |
| 05 | `OnlineReaderSystem` | Facade, managers |
| 06 | `Logger` | Singleton, Strategy, Chain |
| 07–08 | `VendingMachine` / signals | **State** |
| 09 | `TaskManagementSystem` | Singleton, Strategy |
| 10 | StackOverflow facade | Facade, tagging |
| 11 | Elevator controller | **State**, scheduling |
| 12 | Splitwise service | Strategy, graph balances |
| 13 | Booking flow | Strategy, Observer |
| 14 | Notification hub | Composite, Strategy |
| 15 | Delivery orchestration | Multiple services |
| 16 | `LRUCache` | DS design |
| 17 | URL service | Strategy, encoding |
| 18 | `SocialMediaService` | Repository, Observer, Strategy |
| 19 | `RateLimiterService` | **Strategy**, Factory |
| 20 | `CollaborativeDocService` | OT, Observer-style fan-out |
| 21 | `AtmService` | **State**, CoR |
| 22 | `LinkedInService` | Repository, Strategy search |
| 23 | `CarRentalService` | Strategy payments, intervals |
| 24 | `AuctionSystem` | Domain + notifications |
| 25 | `HotelManagementSystem` | Strategy payments, intervals |
| 26 | `DigitalWalletService` | Accounts, FX |
| 27 | `AirlineManagementSystem` | Inventory seats |
| 28 | `LibraryManager` | Rules + catalog |
| 29 | `RestaurantService` | Orders, payments |
| 30 | `ConcertTicketBookingSystem` | Concurrency on seats |
| 31 | `ChessGameService` | Rules engine, game state |
| 32 | `RideSharingService` | Matching, state machine, pricing |
| 33 | `CourseRegistrationSystem` | Capacity invariants, observer |
| 34 | `OnlineShoppingService` | Cart, payment strategy, inventory |
| 35 | `StockBrokerService` | Limit orders, portfolio |
| 36 | `MusicStreamingService` + `MusicLibrary` | Catalog + playback + rec |
| 37 | `CricinfoSystem` | Match aggregate, live scorecard |

---

## 4. Suggested tracks (optional paths)

| Track | Folders | Focus |
|-------|---------|--------|
| **Games / board** | 01, 02, 03, 31 | Game loop, rules, chess |
| **Patterns-heavy** | 06, 07, 08, 11 | Strategy, State, Observer |
| **Product / services** | 05, 09, 10, 12–15, 18, 22, 29, 32–34, 36–37 | Facades, workflows |
| **Travel & venues** | 23, 25, 27, 30 | Booking, overlap, inventory |
| **Money & limits** | 12, 13, 19, 21, 26, 35 | Payments, rate limits, ATM, wallet, brokerage |
| **Marketplace** | 24, 28 | Auctions, lending rules |
| **Data & APIs** | 16, 17, 20 | Cache, encoding, collaboration |
| **Classic devices** | 04, 21 | Parking, ATM |

### Exercises by theme (overview)

```mermaid
flowchart TB
  subgraph games["Games and puzzles"]
    P01[01 TicTacToe]
    P02[02 SnakeLadder]
    P03[03 Minesweeper]
    P31[31 Chess]
  end
  subgraph systems["Systems and devices"]
    P04[04 ParkingLot]
    P06[06 Logging]
    P07[07 Vending]
    P08[08 Traffic]
    P11[11 Elevator]
    P21[21 ATM]
    P25[25 Hotel]
    P27[27 Airline]
  end
  subgraph apps["Product-style apps"]
    P05[05 BookReader]
    P09[09 Tasks]
    P10[10 StackOverflow]
    P12[12 Splitwise]
    P13[13 MovieBooking]
    P14[14 Notifications]
    P15[15 FoodDelivery]
    P18[18 Social]
    P20[20 Collab Doc]
    P22[22 LinkedIn]
    P23[23 CarRental]
    P24[24 Auction]
    P26[26 Wallet]
    P28[28 Library]
    P29[29 Restaurant]
    P30[30 Concert]
    P32[32 RideShare]
    P33[33 CourseReg]
    P34[34 Shopping]
    P35[35 Brokerage]
    P36[36 Music]
    P37[37 Cricinfo]
  end
  subgraph classic["Classic CS and API limits"]
    P16[16 LRU]
    P17[17 URL]
    P19[19 RateLimiter]
  end
```

### Soft prerequisite order (comfort, not strict)

```mermaid
flowchart LR
  A[01–03 Games] --> B[04 Parking / 07 Vending]
  B --> C[06 Logging / 09 Tasks]
  C --> D[10 StackOverflow / 12 Splitwise]
  D --> E[13–15 Orchestration]
  E --> F[16–37 Services and DS]
  G[08 Traffic / 11 Elevator] -.-> B
```

---

## 5. Repository layout — layered mental model

```mermaid
flowchart TB
  subgraph presentation["Presentation"]
    CLI[index.js — REPL]
    DEMO[demo.mjs — scripted path]
  end
  subgraph application["Application"]
    FAC[Facade singleton service]
  end
  subgraph domain["Domain"]
    ENT[Entities / value objects]
    VO[Enums]
  end
  subgraph patterns["Pluggable behavior"]
    ST[Strategy]
    STA[State]
    OBS[Observer / pub-sub]
  end
  CLI --> FAC
  DEMO --> FAC
  FAC --> ENT
  FAC --> VO
  FAC --> ST
  FAC --> STA
  FAC --> OBS
```

### Request path (typical)

```mermaid
sequenceDiagram
  participant U as Terminal
  participant I as index.js / demo.mjs
  participant F as Facade
  participant D as Domain
  U->>I: command / script step
  I->>F: parse + delegate
  F->>D: invariants + mutation
  D-->>F: result
  F-->>I: DTO / message
  I-->>U: stdout
```

---

## 6. Typical structure inside each project `README.md`

Each exercise README is the **source of truth** for that topic. You should find most of:

1. **Problem statement** — requirements and **out of scope**  
2. **Approach & diagrams** — bullets plus **multiple Mermaid** charts  
3. **Solution shape** — responsibility table  
4. **How the JavaScript works** — execution / algorithm notes  
5. **Commands** — `cd`, `npm` scripts  
6. **What you will see** — demo / REPL walkthrough  
7. **File reference** — map files to roles  
8. **Interview Q&A** and extensions  
9. **References** (external links) and/or a **~60s talk track** where it helps

---

## 7. Patterns you will see more than once

| Pattern | What it solves | Example folders |
|---------|----------------|-----------------|
| **Singleton facade** | One “system” API | 04, 06, 07, 09–15, 17–37 |
| **Strategy** | Swap algorithms | 06, 09, 12–13, 15, 18, 19, 22, 23, 25 |
| **State** | Legal transitions | 07, 08, 11, 21 |
| **Observer / notify** | Decouple reactions | 06, 13, 14, 15, 18, 20, 24 |
| **Factory** | Construct variants | 04, 07, 19 |
| **Chain of responsibility** | Pipeline handlers | 06, 21 |
| **Repository** | Hide storage | 18, 20, 22 |

```mermaid
flowchart LR
  subgraph S[Singleton]
    s1[04 06 07]
    s2[09–30 many]
  end
  subgraph ST[Strategy]
    t1[06 09 19]
    t2[12 13 22]
  end
  subgraph STA[State]
    a1[07 08 11 21]
  end
  subgraph O[Observer / fan-out]
    o1[13 14 15 18 20]
  end
```

---

## 8. LLD interview flow (mock)

```mermaid
flowchart TD
  Q1[1. Clarify requirements] --> Q2[2. Entities + one-line job each]
  Q2 --> Q3[3. Relationships on whiteboard]
  Q3 --> Q4[4. Happy path]
  Q4 --> Q5[5. Failure / edge case]
  Q5 --> Q6[6. Patterns + why]
  Q6 --> Q7[7. Extensions only if asked]
```

---

## 9. Global tips

1. **Clarify** scope, sync vs async, persistence, multi-user.  
2. **Nouns → classes** with a single main responsibility.  
3. **Draw** before you code deep; reuse Mermaid from these READMEs.  
4. **Walk** happy + sad path out loud.  
5. **Extensions** when asked: new Strategy, persistence adapter, API layer.

---

Personal study material — adapt freely.

Low-Level-Design-Javascript

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README