chesterheng
diff --git a/‎.gitignore
+1 b/‎.gitignore
+1
diff --git a/‎01-default-state.jpg
9.92 KB b/‎01-default-state.jpg
9.92 KB
diff --git a/‎02-clap-count.jpg
10.4 KB b/‎02-clap-count.jpg
10.4 KB
diff --git a/‎03-clap-total.jpg
8.84 KB b/‎03-clap-total.jpg
8.84 KB
diff --git a/‎README.md
+24 b/‎README.md
+24
diff --git a/‎showcase/.gitignore
+3 b/‎showcase/.gitignore
+3
diff --git a/‎showcase/_redirects
+1 b/‎showcase/_redirects
+1
@@ -0,0 +1 @@
+.DS_Store
@@ -5,6 +5,7 @@
   - [Table of Contents](#table-of-contents)
   - [**Section 1: Introduction**](#section-1-introduction)
   - [**Section 2: The Medium Clap: Real-world Component for Studying Advanced React Patterns**](#section-2-the-medium-clap-real-world-component-for-studying-advanced-react-patterns)
+    - [Why build the medium clap?](#why-build-the-medium-clap)
   - [**Section 3: Custom Hooks: The first Foundational Pattern**](#section-3-custom-hooks-the-first-foundational-pattern)
   - [**Section 4: The Compound Components Pattern**](#section-4-the-compound-components-pattern)
   - [**Section 5: Patterns for Crafting Reusable Styles**](#section-5-patterns-for-crafting-reusable-styles)
@@ -30,6 +31,29 @@ Why Advanced React Patterns
 
 ## **Section 2: The Medium Clap: Real-world Component for Studying Advanced React Patterns**
 
+### Why build the medium clap?
+
+- [How the demo showcase works](https://advanced-react-patterns-ultrasimplified.netlify.app/)
+
+Building and styling the medium clap
+1. The default State of the Component - unclicked
+2. The Clap Count & Burst Shown
+3. The Clap Total count Show
+
+![The default State of the Component - unclicked](01-default-state.jpg)
+
+![The Clap Count & Burst Shown](02-clap-count.jpg)
+
+![The Clap Total count Show](03-clap-total.jpg)
+
+```javascript
+<button>
+  <ClapIcon />
+  <ClapCount />
+  <CountTotal />
+</button>
+```
+
 **[⬆ back to top](#table-of-contents)**
 
 ## **Section 3: Custom Hooks: The first Foundational Pattern**
 
@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store 
@@ -0,0 +1 @@
+/*  /index.html  200
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+node_modules`
	`2`	`+dist`
	`3`	`+.DS_Store`