[FEAT] Prepare OD Wave 1

client/pages/integrations/react/bindings/contracts-bindings.md

@@ -0,0 +1,3 @@
+# React Integration - Contracts Bindings
+
+Under development...

client/pages/integrations/react/bindings/models-bindings.md

@@ -0,0 +1,3 @@
+# React Integration - Models Bindings
+
+Under development...

client/pages/integrations/react/controller-connector.md

@@ -0,0 +1,3 @@
+# React Integration - Controller Connector
+
+Under development...

client/pages/integrations/react/dojo-config.md

@@ -0,0 +1,3 @@
+# React Integration - Dojo Config
+
+Under development...

client/pages/integrations/react/main.md

@@ -0,0 +1,3 @@
+# React Integration - Main
+
+Under development...

client/pages/integrations/react/manifest.md

@@ -0,0 +1,3 @@
+# React Integration - Manifest
+
+Under development...

client/pages/integrations/react/overview.md

@@ -0,0 +1,58 @@
+# React Integration Overview
+
+Welcome to the React integration section of Dojo By Example! This comprehensive guide will walk you through building production-ready onchain games using React and the Dojo framework.
+
+## What You'll Learn
+
+This section covers everything needed to integrate Dojo with React applications, from initial setup to advanced patterns. You'll discover how to build seamless gaming experiences that feel like traditional web apps while leveraging the power of blockchain technology.
+
+### 🏗️ **Core Architecture**
+
+Learn how Dojo's architecture enables smooth React integration:
+
+- **Main Setup** - Bootstrap your React app with proper Dojo SDK initialization
+- **Provider Configuration** - Set up the provider hierarchy for Starknet and Dojo connectivity
+- **Configuration Management** - Handle multi-network deployments with environment-based switching
+
+### 🔌 **Auto-Generated Bindings**
+
+Discover how Dojo automatically creates TypeScript interfaces from your Cairo contracts:
+
+- **Models Bindings** - Type-safe interfaces for your game entities and data structures
+- **Contracts Bindings** - Auto-generated client functions for seamless contract interactions
+
+### 🎮 **Gaming-First UX**
+
+Implement controller integration that prioritizes player experience:
+
+- **Controller Connector** - Cartridge Controller integration for frictionless gaming
+- **Session Policies** - Enable uninterrupted gameplay without transaction popups
+- **Manifest Management** - Handle deployment configurations across different networks
+
+## Key Benefits
+
+**⚡ Type Safety** - Full TypeScript integration from Cairo contracts to React components
+
+**🎯 Gaming UX** - Controller integration designed specifically for gaming applications
+
+**🔄 Auto-Generation** - Contract changes automatically update your frontend types
+
+**🌐 Multi-Network** - Seamless switching between localhost, testnet, and mainnet
+
+**🏗️ Production Ready** - Patterns and configurations tested in real gaming applications
+
+## Getting Started
+
+Each section builds upon the previous one, so we recommend following them in order:
+
+1. **Overview** (you are here) - Understanding the integration landscape
+2. **Main Setup** - Application initialization and bootstrap process
+3. **Configuration** - Core configuration files and environment management
+4. **Providers** - Starknet and wallet connectivity setup
+5. **Data Bindings** - Working with auto-generated types and contract functions
+
+By the end of this section, you'll have a complete understanding of how to build robust, type-safe React applications that integrate seamlessly with Dojo smart contracts, providing players with an exceptional gaming experience.
+
+---
+
+*Ready to dive in? Let's start with [Main Setup](/integrations/react/main) to see how it all comes together!*

client/pages/integrations/react/starknet-provider.md

@@ -0,0 +1,3 @@
+# React Integration - Starknet Provider
+
+Under development...

client/routes.ts

@@ -130,32 +130,81 @@ const config: Sidebar = [
     ],
   },
   {
-    text: "Dojo Integrations",
-    collapsed: true,
-    items: [
-      {
-        text: "React",
-        link: "/integrations/react",
-      },
-      {
-        text: "Unity",
-        link: "/integrations/unity",
-      },
-      {
-        text: "AI Agents",
-        items: [
-          {
-            text: "Daydreams",
-            link: "/integrations/ai/daydreams",
-          },
-          {
-            text: "Eliza",
-            link: "/integrations/ai/eliza",
-          },
-        ],
-      },
-    ],
-  },
+  text: "Dojo Integrations",
+  collapsed: true,
+  items: [
+    {
+      text: "React",
+      collapsed: true,
+      items: [
+        {
+          text: "Overview",
+          link: "/integrations/react/overview",
+        },
+        {
+          text: "Configuration",
+          items: [
+            {
+              text: "Dojo Config",
+              link: "/integrations/react/dojo-config",
+            },
+            {
+              text: "Manifest",
+              link: "/integrations/react/manifest",
+            },
+            {
+              text: "Main Setup",
+              link: "/integrations/react/main",
+            },
+          ],
+        },
+        {
+          text: "Providers",
+          items: [
+            {
+              text: "Starknet Provider",
+              link: "/integrations/react/starknet-provider",
+            },
+            {
+              text: "Controller Connector",
+              link: "/integrations/react/controller-connector",
+            },
+          ],
+        },
+        {
+          text: "Data Bindings",
+          items: [
+            {
+              text: "Contracts Bindings",
+              link: "/integrations/react/bindings/contracts-bindings",
+            },
+            {
+              text: "Models Bindings",
+              link: "/integrations/react/bindings/models-bindings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      text: "Unity",
+      link: "/integrations/unity",
+    },
+    {
+      text: "AI Agents",
+      items: [
+        {
+          text: "Daydreams",
+          link: "/integrations/ai/daydreams",
+        },
+        {
+          text: "Eliza",
+          link: "/integrations/ai/eliza",
+        },
+      ],
+    },
+  ],
+},
   {
     text: "Dojo Use Cases",
     collapsed: true,