Coding Practice: Graphs

TL;DR

• Graphs are the right model whenever relationships are many-to-many instead of parent/child.
• I practice graphs through traversal, cycle detection, connected components, and dependency ordering.
• For senior frontend developers, this translates well to route dependencies, build graphs, module graphs, and workflow engines.

Context

Even if a product UI never renders a graph directly, graph thinking shows up in state machines, dependency resolution, permission propagation, workflow steps, and bundler/module relationships.

The Approach

Practice these 10 medium-level questions:

1. Number of Connected Components — traversal plus visited set.
2. Clone Graph — preserve identity and edges safely.
3. Course Schedule — cycle detection in prerequisites.
4. Topological Sort — order work given dependencies.
5. Shortest Path in Unweighted Graph — BFS distance layering.
6. Rotting Oranges / Multi-Source BFS — simultaneous frontier expansion.
7. Count Islands — graph traversal over a grid.
8. Pacific Atlantic Water Flow — reverse reachability from borders.
9. Word Ladder — graph search over generated neighbors.
10. Evaluate Division — weighted graph traversal over equations.

Try it in the browser

Trade-offs

• DFS is concise, but BFS is often better when shortest path or wavefront reasoning matters.
• Graph problems can look intimidating, but most of them reduce to “visit everything once, but with the right bookkeeping.”

References

• Related: Coding Practice: Trees
• Related: Coding Practice: Searching