Try a Quiz

• Design Patterns Quiz
• React Quiz
• Rendering Patterns Quiz
• Performance Quiz

Chapter 5: Modules and Classes

• Modules: Dog Gallery (source)
• Modules: Dog Gallery (Favorites via Dynamic Import) (source)
• Modules: Bakery (source)
• Dynamic Import (source)
• Dynamic Import: Lodash (source)
• Dynamic Import: Visibility (source)
• Classes: Bakery App (source)
• Classes: Cookies (source)
• Classes: Cookies with Private Members (source)

Chapter 7: Design Patterns

• Builder Pattern (source)
• Adapter Pattern (source)
• Composite Pattern (source)
• Bridge Pattern (source)
• Object Properties (source)
• Object.create (source)
• Basic Constructor (source)
• Prototype Constructor (source)
• Object Literals (source)
• JavaScript Modules: Test Module (source)
• Namespace (source)
• Namespace: Basket (source)
• Namespace: Basket 2 (source)
• Import Mixins (source)
• Module: WeakMap (source)
• Module: WeakMap 2 (source)
• Module: WeakMap 3 (source)
• Module: React (source)
• Revealing Module Pattern (source)
• Singleton Pattern (source)
• Singleton Pattern: Options (source)
• Prototype (source)
• Prototype Inheritance (source)
• Prototype Extend (source)
• Factory Pattern (source)
• Factory Pattern: Trucks 1 (source)
• Factory Pattern: Trucks 2 (source)
• Factory Pattern: Abstract (source)
• Facade Pattern (source)
• Facade Module (source)
• Mixins: Subclassing (source)
• Mixins: Superclassing (source)
• Mixins: Constructor Augmenting (source)
• Decorators (source)
• Decorators: Multiple (source)
• Decorators: Interface (source)
• Decorators: Abstract (source)
• Decorators: Interface 2 (source)
• Decorators: Interface 3 (source)
• Flyweight (source)
• Flyweight 2 (source)
• Flyweight: Book Factory ( GitHub)
• Flyweight: Extrinsic States (source)
• Flyweight: Event Handling (source)
• Observer (source)
• Observer: Gmail (source)
• Observer: PubSub (source)
• Observer: PubSub 2 (source)
• Observer: Stock App (source)
• Observer: jQuery PubSub (source)
• Observer: jQuery Ajax (source)
• Observer: RxJS (source)
• Mediator (source)
• Mediator: EventEmitter (source)
• Mediator: Event Aggregator (source)
• Command Pattern (source)
• Strategy Pattern (source)
• Proxy Pattern (source)

Chapter 8: MV* Patterns

• MVC (source)
• MVC: Lodash (source)
• MVP (source)
• MVVM (source)
• MVC: React (source)
• MVC: Vue (source)

Chapter 9: Async Patterns

• Async Patterns: Fetch (source)
• Async: Promise Chaining (source)
• Async: Error Handling (source)
• Async: Promise Parallelism (source)
• Async: Promise Sequential Execution (source)
• Async: Promise Memoization (source)
• Async: Promise Pipeline (source)
• Async: Promise Retry (source)
• Async: Promise Decorator (source)
• Async: Promise Racing (source)
• Async: Function Composition (source)
• Async: Iteration (source)
• Async: Read/Write Files (source)
• Async: Retry (source)

Chapter 10: Modular Patterns

• RequireJS (source)
• RequireJS: Plugins (source)
• RequireJS: jQuery (source)
• UMD (source)

Chapter 11: Namespacing Patterns

• Namespacing: Global (source)
• Namespacing: Prefix (source)
• Namespacing: Object Literal Notation (source)
• Namespacing: Object Literal Notation (Nuanced) (source)
• Namespacing: Object Literal Notation (Theming) (source)
• Namespacing: IIFE (source)
• Namespacing: Nested (Automated) (source)
• Namespacing: Deep Object Extension (source)
• Namespacing: Nested (React) (source)

Chapter 12: React Patterns

• React: Loading Patterns
• Load More Pattern (Demo)
• Virtual List Pattern (Demo)
• React: Provider Pattern (source)
• React: Compound Component Pattern (source)
• React: State Reducer Pattern (source)
• React: Conditional Rendering Pattern (source)
• React: Observers + Facade + Mixins (source)
• React: Higher-Order Components (source)
• React: HOC Composition (source)
• React: Stateless Functional Components (Next.js)
• React: State Reducer Pattern (Next.js)
• React: Compound Components Pattern (Next.js)
• React: Render Props (source)
• React: Render Props 2 (source)
• React: Lifting State (source)
• React: Lifting State (Children as Function) (source)
• React: Hooks (source)
• React: useState (source)
• React: useEffect (source)
• React: Custom Hooks (source)
• React: Suspense + SWR + Skeleton UI
• React: Mediator Pattern (source)
• React: Tweets (Stateful) (source)
• React: Tweets (Hooks) (source)
• Next.js: Data-fetching (Context, SWR, React Query, Redux, useState)
• Next.js: Data-fetching (getStaticProps)
• Next.js: Data-fetching (getServerSideProps)
• Next.js: Client-side fetch

Chapter 13: Next.js Rendering Patterns

• Next.js: Client-Side Rendering (source)
• Next.js: Server-Side Rendering (source)
• Next.js: Incremental Static Regeneration (source)
• Next.js: Static Site Generation (source)

Community implementations

• Modern vanilla TodoMVC
• Movies: React Server Components + Next.js App Router (source)
• Hacker News: React Server Components + Next.js App Router (source)
• Commerce: React Server Components + Next.js App Router (source)
• AirBnB: React Server Components + Next.js App Router (source)
• Next.js App Directory

Continue learning

• Patterns.dev has more free interactive content on this topic.