A comprehensive collection of design patterns implemented in JavaScript and TypeScript, with clear examples and explanations to help you write better, more maintainable code.
Created with ♥ by:
Design patterns are proven solutions to recurring problems in software design. They provide standardized templates for solving common coding challenges, enabling you to build more organized, modular, and flexible codebases.
Each design pattern includes:
- Explanation: Detailed overview of the pattern's purpose, benefits, and use cases
- Code Examples: Clear JavaScript/TypeScript implementations
- Real-World Use Cases: Practical applications and scenarios
- Best Practices: Tips for effective implementation
Focus on object creation mechanisms, providing flexibility in how objects are instantiated.
Deal with object composition and relationships, forming larger structures from individual components.
Define communication patterns between objects and how they collaborate.
Provide guidance on organizing application structure for scalability and maintainability.
Visit the live site: https://matiascarabella.github.io/design-patterns-js
Simply visit the GitHub Pages link above to explore all patterns interactively!
- Node.js (v14 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/matiascarabella/design-patterns-js
cd design-patterns-js- Install dependencies:
npm install- Start the development server:
npm start- Open http://localhost:3000 in your browser
This project is ready for GitHub Pages deployment:
- Push your code to GitHub
- Go to your repository Settings → Pages
- Under "Source", select the
mainbranch - Click Save
- Your site will be live at
https://matiascarabella.github.io/repository-name
No build step required - it's all static HTML/CSS/JS!
- JavaScript fundamentals and ES6+ features
- Singleton - Ensure a class has only one instance
- Builder - Construct complex objects step by step
- Observer - Define one-to-many dependencies between objects
- Strategy - Define a family of algorithms and make them interchangeable
- State - Allow an object to alter its behavior when its state changes
- Bridge - Decouple abstraction from implementation
- Decorator - Add responsibilities to objects dynamically
- Flux - Unidirectional data flow architecture
design-patterns-js/
├── index.html # Main landing page
├── 01 - JS Intro/ # JavaScript fundamentals
│ ├── index.html
│ └── js/intro.js
├── 02 - Creational/
│ ├── singleton/ # Singleton pattern
│ └── decorator/ # Builder pattern
├── 03 - Behavioral/
│ ├── observer/ # Observer pattern
│ ├── strategy/ # Strategy pattern
│ └── state/ # State pattern
├── 04 - Structural/
│ ├── bridge/ # Bridge pattern
│ └── decorator/ # Decorator pattern
├── 05 - Architectural/
│ └── flux/ # Flux pattern
├── package.json
├── README.md
└── DEPLOYMENT.md # GitHub Pages deployment guide
This repository is based on content from the Udemy Design Patterns Course and various online resources.
Feel free to explore, experiment, and adapt the code to your projects. Contributions and improvements are welcome!
This project is licensed under the MIT License.