Being SDE — Software Design Patterns & Interactive Coding UI

Master Design Patterns with Interactive UIs

Interactive runtime simulators, real-world metaphors, UML structures, and production code in Java, TypeScript, and Python for all Creational, Structural, and Behavioral patterns.

22+ Gang of Four & Modern PatternsLive Interactive Simulator UIJava • TypeScript • Python Code

Interactive Runtime Simulator: Try Any Pattern Live

Interactive Strategy Pattern SimulatorLIVE PLAYGROUND

Interact with the controls below to see how this design pattern executes in memory at runtime.

Category: Behavioral
1. Select Interchangeable Strategy:
RUNTIME CONTEXT & CONSOLE OUTPUTActive: UPI
// Context delegates dynamically:
cart.setPaymentStrategy(new UpiStrategy());
cart.checkout(250);
>System initialized with default payment strategy: UPI FastPay
Showing 22 of 22 design patterns
CreationalBEGINNER
7m

Factory Method

Defines an interface for creating an object, but lets subclasses decide which class to instantiate.

METAPHOR:

A logistics company dispatch center: the core logistics system asks for a 'Transport', while sub-departments dispatch Trucks, Ships, or Planes depending on terrain.

Real-World Usage:
java.util.Calendar.getInstance()Spring Framework BeanFactory
Read Article
CreationalINTERMEDIATE
8m

Abstract Factory

Provides an interface for creating families of related or dependent objects without specifying their concrete classes.

METAPHOR:

A modern furniture store with Victorian, Modern, and Art Deco lines. Ordering a 'Sofa + Chair + CoffeeTable' from ModernFactory guarantees all 3 pieces match in style.

Real-World Usage:
Cross-platform GUI toolkits (Windows vs macOS button, checkbox, scrollbar)Multi-cloud storage & compute adapters (AWS vs Azure vs GCP)
Read Article
CreationalBEGINNER
7m

Builder Pattern

Separates the construction of a complex object from its representation, allowing the same construction process to create different representations.

METAPHOR:

Customizing a pizza or building a custom gaming PC. Rather than passing 18 parameters to a giant constructor (`new PC(cpu, gpu, ram, rgb, liquidCooling...)`), you assemble parts step-by-step.

Real-World Usage:
java.lang.StringBuilder / StringBufferLombok `@Builder` annotation
Read Article
CreationalBEGINNER
6m

Singleton Pattern

Ensures a class has only one instance and provides a global point of access to it.

METAPHOR:

The President of a country: there can only be one official president at any given time, accessible to all government departments.

Real-World Usage:
java.lang.Runtime.getRuntime()Database connection pools (HikariCP DataSource)
Read Article
StructuralBEGINNER
7m

Adapter Pattern

Allows objects with incompatible interfaces to collaborate by converting the interface of one object into another.

METAPHOR:

A US-to-UK power plug adapter. The UK wall socket and the US laptop plug are incompatible, but the adapter bridges them without modifying the wall or the laptop.

Real-World Usage:
java.util.Arrays.asList()InputStreamReader (adapts InputStream to Reader)
Read Article
StructuralINTERMEDIATE
8m

Decorator Pattern

Attaches additional responsibilities to an object dynamically, providing a flexible alternative to subclassing.

METAPHOR:

Putting on clothes in cold weather. You put on a base shirt, then wrap yourself in a warm sweater, then wrap a raincoat over that. Each layer adds a behavior without altering your core body.

Real-World Usage:
java.io stream wrappers: `new BufferedReader(new FileReader("data.txt"))`Spring Security filter chains (`SecurityFilterChain`)
Read Article
StructuralBEGINNER
6m

Facade Pattern

Provides a simplified, unified interface to a complex subsystem of classes, libraries, or frameworks.

METAPHOR:

A hotel concierge. You tell the concierge: 'Book me dinner and a theater ticket'. The concierge coordinates with restaurants, taxi drivers, and ticket vendors behind the scenes.

Real-World Usage:
Spring Boot `@EnableAutoConfiguration` (facade over 50 Spring bean configurations)Database access facades (Repository pattern wrapping ORM, caching, and audit logging)
Read Article
StructuralINTERMEDIATE
7m

Proxy Pattern

Provides a surrogate or placeholder for another object to control access to it.

METAPHOR:

A debit card is a proxy for your bank account cash. You swipe the card instead of carrying paper bills; the card authenticates you, verifies balance, and delegates to the real account.

Real-World Usage:
Spring `@Transactional` and `@Cacheable` (CGLIB / JDK Dynamic Proxies)Hibernate Lazy-Loading proxies for entity relationships
Read Article
BehavioralBEGINNER
7m

Strategy Pattern

Defines a family of algorithms, encapsulates each one, and makes them interchangeable at runtime.

METAPHOR:

Traveling to the airport. Depending on your budget and time, you can choose a strategy: taking the Subway, calling an Uber, or riding a Bicycle. The destination is the same, but the algorithm differs.

Real-World Usage:
Payment processing (CreditCardStrategy, UpiStrategy, CryptoStrategy)Compression algorithms (ZipStrategy, TarStrategy, GzipStrategy)
Read Article
BehavioralBEGINNER
8m

Observer Pattern (Pub/Sub)

Defines a one-to-many dependency between objects so that when one object changes state, all its dependents are notified automatically.

METAPHOR:

A newspaper subscription or YouTube channel. When the YouTuber uploads a new video, all subscribed viewers receive an instant notification on their phones.

Real-World Usage:
UI Event Listeners (`button.addEventListener('click')`)Spring `@EventListener` / `ApplicationEventPublisher`
Read Article
BehavioralINTERMEDIATE
7m

Command Pattern

Encapsulates a request as an object, thereby letting you parameterize clients with different requests, queue or log requests, and support undoable operations.

METAPHOR:

A waiter in a restaurant taking your order on a slip of paper. The slip encapsulates your order request. It can be queued, passed to the chef, tracked, or cancelled before cooking.

Real-World Usage:
GUI action buttons & keyboard shortcuts (Copy, Paste, Undo)Transactional job queues (scheduling background tasks for later execution)
Read Article
BehavioralINTERMEDIATE
7m

Chain of Responsibility

Passes requests along a chain of handlers. Upon receiving a request, each handler decides either to process it or to pass it to the next handler in the chain.

METAPHOR:

A customer support phone tree. The first automated agent handles FAQs. If unhandled, it transfers to Tier-1 support. If unresolved, it escalates to Tier-2 engineering.

Real-World Usage:
Servlet Filter chains in Java (`javax.servlet.FilterChain`)Express.js middleware pipeline (`app.use(auth).use(rateLimit).use(handler)`)
Read Article
BehavioralINTERMEDIATE
8m

State Pattern

Allows an object to alter its behavior when its internal state changes. The object will appear to change its class.

METAPHOR:

A smartphone. Pressing the power button behaves differently depending on current state: if phone is Locked -> Screen wakes up. If phone is Unlocked -> Screen turns off. If phone is Ringing -> Silences ringer.

Real-World Usage:
Order lifecycles (Created -> Paid -> Shipped -> Delivered -> Cancelled)TCP Connection state machine (LISTEN, SYN_SENT, ESTABLISHED, FIN_WAIT)
Read Article
BehavioralBEGINNER
6m

Template Method

Defines the skeleton of an algorithm in the superclass but lets subclasses override specific steps of the algorithm without changing its structure.

METAPHOR:

Building a prefabricated house. The master architectural blueprint defines the sequence: 1. Lay Foundation -> 2. Build Walls -> 3. Add Roof. Subclasses choose whether walls are wooden, brick, or glass.

Real-World Usage:
Spring `JdbcTemplate` / `RestTemplate`Java `AbstractList` / `HttpServlet.service()` calling `doGet()`, `doPost()`
Read Article
CreationalINTERMEDIATE
6m

Prototype Pattern

Specifies the kinds of objects to create using a prototypical instance, and creates new objects by copying this prototype.

METAPHOR:

Cell division (mitosis). A biological cell duplicates its DNA and splits into an identical copy, without having to rebuild the cell from raw atoms from scratch.

Real-World Usage:
java.lang.Cloneable / Object.clone()Game development spawning (copying monster templates with preloaded 3D meshes)
Read Article
StructuralINTERMEDIATE
7m

Composite Pattern

Composes objects into tree structures to represent part-whole hierarchies, letting clients treat individual objects and compositions uniformly.

METAPHOR:

A computer file system. A Folder can contain Files AND other Folders. Calling `getSize()` on a Folder computes the total size recursively, treating leaf files and container folders uniformly.

Real-World Usage:
DOM element trees (HTML body, div, span, text node)GUI component trees (Panel containing Buttons, TextBoxes, and sub-Panels)
Read Article
StructuralADVANCED
7m

Flyweight Pattern

Fits more objects into the available amount of RAM by sharing common parts of state between multiple objects instead of keeping all of the data in each object.

METAPHOR:

Rendering 1,000,000 trees in a video game forest. Rather than loading the 3D mesh and texture 1,000,000 times, you share 1 TreeType in RAM and only store unique (X, Y) coordinates for each tree.

Real-World Usage:
java.lang.Integer.valueOf(int) caching (-128 to 127)String interning (`String.intern()`)
Read Article
BehavioralBEGINNER
6m

Iterator Pattern

Lets you traverse elements of a collection without exposing its underlying representation (list, stack, tree, graph).

METAPHOR:

A tour guide in a museum. The guide walks you through exhibits in a curated sequence (chronological, theme-based) without you needing to know the museum's private floorplan.

Real-World Usage:
java.util.Iterator (`hasNext()`, `next()`)JavaScript Symbol.iterator (`for ... of` loops)
Read Article
BehavioralINTERMEDIATE
7m

Mediator Pattern

Restricts direct communications between objects and forces them to collaborate only via a mediator object.

METAPHOR:

An Air Traffic Control (ATC) tower. Airplanes do not talk directly to each other to negotiate runway landings; every pilot talks exclusively to the ATC tower, which coordinates safe spacing.

Real-World Usage:
Chat room servers (Users send messages to ChatMediator, not to individual user sockets directly)UI dialogs (Checkbox toggling disabled state of Submit button and showing extra inputs via DialogMediator)
Read Article
BehavioralINTERMEDIATE
7m

Memento Pattern

Lets you save and restore the previous state of an object without revealing the details of its implementation.

METAPHOR:

A game save checkpoint or git commit. You take a snapshot of the current state and stash it. If you die or make a mistake, you can reload the exact snapshot without exposing private variables.

Real-World Usage:
Text editor undo/redo history (Ctrl+Z)Database rollback transaction snapshots
Read Article
BehavioralADVANCED
8m

Visitor Pattern

Lets you separate algorithms from the objects on which they operate by using Double Dispatch.

METAPHOR:

A tax auditor visiting different properties (Residential home, Commercial factory, Agricultural farm). Each property accepts the auditor (`property.accept(auditor)`), and the auditor executes property-specific tax calculations without changing the property's class.

Real-World Usage:
Compilers and Abstract Syntax Trees (AST visitors for type-checking, code generation, linting)Document exporters (Exporting elements to PDF, HTML, or Markdown without modifying elements)
Read Article
ConcurrencyCRITICAL
8m

Circuit Breaker Pattern

Detects failures and encapsulates the logic of preventing a failure from constantly recurring during maintenance, temporary external or system difficulties.

METAPHOR:

An electrical circuit breaker in your house. If a wire shorts out, the breaker trips to prevent electrical fires and damage to appliances.

Real-World Usage:
Resilience4j / Netflix Hystrix in Spring BootEnvoy Proxy outlier detection and circuit breaking
Read Article