Merge pull request #4 from vahidvdn/improvement/flow-diagrams

Improvement/flow diagrams

README.md

@@ -1,3 +1,5 @@
+![design-pattern-cover](assets/cover.jpg)
+
 # Real World Design Patterns 🗺️
 Explore real-world scenarios and best practices for design patterns in this comprehensive repository. Elevate your software design skills with practical examples and insightful discussions.
 
@@ -20,6 +22,10 @@ Here is some steps in each `README` file:
 - ❌ Bad Practice: a typical solution that works but not in a proper way.
 - ✅ Good Practice: implementing the specified design pattern to solve the problem in a proper way.
 
+Diagram: There is also a diagram to represent the oveview of the design pattern to understand better. This is an example:
+
+![design-pattern-cover](assets/strategy-pattern.jpg)
+
 ## How to Run
 
 After opening the design pattern directory, run:
@@ -60,6 +66,7 @@ Contributing to a community project is always welcome. ✨ This workspace has be
 - [x] Strategy Pattern
 - [x] Dependency Injection Pattern
 - [x] Chain of Responsibility Pattern
+- [ ] Builder Pattern
 - [ ] Template Method Pattern
 - [ ] Command Pattern
 - [ ] Decorator Pattern

app/chain-of-responsibility/README.md

@@ -1,3 +1,5 @@
+![chain-of-responsibility-cover](../../assets/chain-of-res.jpg)
+
 ## 💡 Use Case
 
 Let's say you want to level up based on some conditions. Here I took some basic logic just for demonstration. But in realworld you may have some complex
@@ -52,4 +54,4 @@ const levelUp = userPoint.handle(userDto);
 console.log('User levelup status:', levelUp);
 ```
 
-By this way, you could easly extend your code in the future by adding new classes. See my Medium article here: https://medium.com/@vahid.vdn/learn-the-chain-of-responsibility-pattern-in-depth-with-typescript-4336f8fb4afb
+By this way, you could easly extend your code in the future by adding new classes. See my Medium article here: https://medium.com/@vahid.vdn/learn-the-chain-of-responsibility-pattern-in-depth-with-typescript-4336f8fb4afb

app/dependency-injection/README.md

@@ -1,3 +1,5 @@
+![dependency-injection-design-pattern](../../assets/dependency-injection.jpg)
+
 ## 💡 Use Case
 
 Let's say you want to use some other classes in your User class (e.g. order)
@@ -78,4 +80,4 @@ userService.getUsers();
 
 Note 1: Check `container.ts` for imported files.
 
-Note 2: For large scale projects, I recommend using some frameworks like [NestJS](https://nestjs.com/) or some community packages like [Inversify](https://github.com/inversify/InversifyJS) to have DI. Because this was just a basic implementation just as a proof of concept so you don't want to re-invent the wheel.
+Note 2: For large scale projects, I recommend using some frameworks like [NestJS](https://nestjs.com/) or some community packages like [Inversify](https://github.com/inversify/InversifyJS) to have DI. Because this was just a basic implementation just as a proof of concept so you don't want to re-invent the wheel.

app/strategy-pattern/README.md

@@ -1,3 +1,5 @@
+![strategy-design-pattern](../../assets/strategy-pattern.jpg)
+
 ## 💡 Use Case
 
 Let's say you want to authenticate users with oAuth, based on Google, Facebook and LinkedIn
@@ -55,4 +57,4 @@ const linkedIn = new LinkedInAuth();
 
 const oauth = new OAuth(google, facebook, linkedIn);
 oauth.authenticate('facebook');
-```
+```

app/strategy-pattern/interfaces.ts

@@ -1,5 +1,5 @@
 export interface IOAuth {
     authenticate()
-  }
-  
-export type Provider = 'google' | 'facebook' | 'linkedIn'
+}
+
+export type Provider = 'google' | 'facebook' | 'linkedIn'