Design Patterns & Engineering Best Practices

A reference repository demonstrating design patterns and software engineering principles implemented in React + TypeScript + Vite. Each pattern is accompanied by practical examples and clear explanations to help developers apply them in real-world frontend and JavaScript/TypeScript projects.

• React 18
• TypeScript
• Vite
• ESLint + Prettier

• Singleton — ensuring a class has only one instance
• Builder — constructing complex objects step by step
• Factory — creating objects without specifying the concrete class

• Facade — providing a simplified interface to a complex subsystem

• Custom Hooks — encapsulating reusable stateful logic
• State Management Patterns — comparison of different approaches

• Single Responsibility, Open/Closed, Liskov Substitution, Interface Segregation, Dependency Inversion — with code examples

# Clone the repository
git clone https://github.com/brasileirodev/design-patterns.git
cd design-patterns

# Install dependencies
npm install

# Run development server
npm run dev

src/
  patterns/
    creational/    # Singleton, Builder, Factory
    structural/    # Facade
    behavioral/    # Observer, Strategy
  react-patterns/
    custom-hooks/  # Reusable hooks examples
    state/         # State management comparisons

Understanding design patterns is a mark of software maturity. This repository demonstrates:

• How to apply classical patterns in modern TypeScript
• How to write maintainable, scalable React components
• How SOLID principles translate into real frontend code
• Practical custom hook patterns used in production React apps

• Add Observer pattern example
• Add Strategy pattern for form validation
• Add unit tests for each pattern
• Add a deployed demo with Storybook

MIT