From 5c875c3f312b81f838f51c778ea7ce85a18319a5 Mon Sep 17 00:00:00 2001
From: Leonardo Montini <lion.48m@gmail.com>
Date: Fri, 29 Nov 2024 18:49:21 +0100
Subject: [PATCH] docs: add balastrong's video tutorials (#1048)

---
 docs/config.json                              | 15 +++++++++
 .../react/community/balastrongs-tutorials.md  | 33 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 docs/framework/react/community/balastrongs-tutorials.md

diff --git a/docs/config.json b/docs/config.json
index 5a1589635..a543f3a53 100644
--- a/docs/config.json
+++ b/docs/config.json
@@ -408,6 +408,21 @@
         }
       ]
     },
+    {
+      "label": "Community Resources",
+      "children": [],
+      "frameworks": [
+        {
+          "label": "react",
+          "children": [
+            {
+              "label": "Balastrong's Tutorials",
+              "to": "framework/react/community/balastrongs-tutorials"
+            }
+          ]
+        }
+      ]
+    },
     {
       "label": "Examples",
       "children": [],
diff --git a/docs/framework/react/community/balastrongs-tutorials.md b/docs/framework/react/community/balastrongs-tutorials.md
new file mode 100644
index 000000000..7c68b54fc
--- /dev/null
+++ b/docs/framework/react/community/balastrongs-tutorials.md
@@ -0,0 +1,33 @@
+---
+id: balastrongs-tutorials
+title: Balastrong's Tutorials
+---
+
+TanStack Form maintainer [Balastrong](https://bsky.app/profile/leonardomontini.dev) has created a series of video tutorials showcasing the most relevant features of the library. You'll find step by step guides that give you some extra insights into what you can build with TanStack Form, plus some nice tips and tricks.
+
+[Watch the full playlist](https://www.youtube.com/playlist?list=PLOQjd5dsGSxInTKUWTxyqSKwZCjDIUs0Y)
+
+
+## 1. [Setup and validation](https://youtu.be/Pf1qn35bgjs)
+
+The first steps into TanStack Form learning all the basics, from setting up the library to creating a simple form with text fields and validation (sync, debounced and async). [Watch video (8:16)](https://youtu.be/Pf1qn35bgjs)
+
+## 2. [Advanced validation](https://youtu.be/Pys2ExswZT0)
+
+An example of data being validated through a backend API while ensuring a smooth user experience by controlling loading state, error messages and linked fields. [Watch video (8:05)](https://youtu.be/Pys2ExswZT0)
+
+## 3. [Array fields](https://youtu.be/0IPPHdjvrzk)
+
+How to handle array fields with primitives (strings, numbers) and objects (nested fields), with validation and reordering. [Watch video (6:53)](https://youtu.be/0IPPHdjvrzk)
+
+## 4. [Reactivity](https://youtu.be/UXRZvNCnE-s)
+
+Learn why form values may not update in real time, why this behavior is intentional, and how to trigger UI updates efficiently. [Watch video (4:26)](https://youtu.be/UXRZvNCnE-s)
+
+## 5. [Form validation with schema libraries](https://youtu.be/HSboMHfPuZA)
+
+Use schema libraries like zod, yup or valibot to define your schema with validation rules. Pass it to TanStack Form through an adapter to validate all fields at once. [Watch video (6:29)](https://youtu.be/HSboMHfPuZA)
+
+## 6. [Side effects and listeners](https://youtu.be/A-w2IG7DAso)
+
+Similarly to field validators, you can attach events to field listeners and react to them, for example to reset a field when another one it depends on has changed. [Watch video (5:50)](https://youtu.be/A-w2IG7DAso)
\ No newline at end of file