Initial commit Video 01

Author: arhtudormorar

.gitignore

@@ -1,7 +1,25 @@
-.vscode
-.cursor/*
-.covarage
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-ping-pong-dapp/.DS_Store
+dist
+dist-ssr
+*.local
 .DS_Store
 
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

tutorial/VIDEO_01/SETUP_README.md

@@ -5,12 +5,15 @@ This directory contains bash scripts to automate the setup process for a React d
 ## Quick Start
 
 ### Option 1: Run All Steps Automatically
+
 ```bash
-./run_all_steps.sh
+./run_project_setup.sh
 ```
-This will run all 8 steps with confirmation prompts for each step.
+
+This will run all 8 steps automatically.
 
 ### Option 2: Run Steps Individually
+
 Execute the scripts in order:
 
 ```bash
@@ -27,49 +30,62 @@ Execute the scripts in order:
 ## What Each Script Does
 
 ### Step 1: `step_01_create_project.sh`
+
 - Creates a new Vite React project with TypeScript template
-- Project name: `ping-pong-dapp`
+- Project files are created directly in the root directory
 
 ### Step 2: `step_02_install_dependencies.sh`
+
 - Installs the initial project dependencies using yarn
 
 ### Step 3: `step_03_install_tailwind.sh`
+
 - Installs Tailwind CSS and its dependencies
 - Creates `tailwind.config.js`
 - Creates `postcss.config.js`
 
 ### Step 4: `step_04_configure_eslint_prettier.sh`
+
 - Installs ESLint, Prettier, and all related plugins
 - Creates `.prettierrc` configuration
 - Creates `eslint.config.js` with comprehensive rules
 
 ### Step 5: `step_05_configure_vite.sh`
+
 - Installs Vite plugins (basic SSL, node polyfills, SVGR, tsconfig paths)
 - Creates `vite.config.ts` with development server configuration
 
 ### Step 6: `step_06_configure_tsconfig.sh`
+
 - Removes extra TypeScript config files
 - Creates a unified `tsconfig.json` with proper settings
 
 ### Step 7: `step_07_add_lint_command.sh`
+
 - Adds lint script to `package.json`
 - Runs the linter to fix any initial issues
 
 ### Step 8: `step_08_start_dev_server.sh`
+
 - Starts the development server
 - Server runs on `https://localhost:3000`
 
 ## Prerequisites
 
 Before running these scripts, make sure you have:
+
 - Node.js (version 16 or higher)
 - Yarn package manager
 - Git (optional, for version control)
 
 ## Project Structure After Setup
 
-After running all scripts, you'll have a `ping-pong-dapp` directory with:
-- React + TypeScript setup
+After running all scripts, your root directory will contain:
+
+- `src/` - React + TypeScript source files
+- `tutorial/` - Tutorial documentation and scripts (existing)
+- `.auto-type/` - Auto-type configuration (existing)
+- `package.json` - Project dependencies and scripts
 - Tailwind CSS configured
 - ESLint + Prettier configured
 - Vite development server with plugins
@@ -78,13 +94,15 @@ After running all scripts, you'll have a `ping-pong-dapp` directory with:
 ## Next Steps
 
 After the setup is complete, you can:
-1. Start developing your dApp in the `ping-pong-dapp` directory
+
+1. Start developing your dApp in the root directory (`src/` folder)
 2. Add MultiversX SDK dependencies for blockchain integration
 3. Build your ping-pong game logic
 
 ## Troubleshooting
 
 If any script fails:
+
 1. Check that you have the required prerequisites
 2. Make sure you have internet connection for downloading packages
 3. Ensure you have sufficient disk space
@@ -94,4 +112,4 @@ If any script fails:
 
 - All scripts are designed to be idempotent (safe to run multiple times)
 - The development server (Step 8) will run indefinitely until stopped with Ctrl+C
-- Each script provides clear success/failure feedback and next step instructions 
+- Each script provides clear success/failure feedback and next step instructions

tutorial/VIDEO_01/VIDEO_01_README.md

@@ -9,19 +9,30 @@ Creating a new React project with Vite
 
 ### Step 1: Create a new Vite React project (TypeScript template).
 
+The project will be created directly in the current directory.
+
 ```bash
-npx create-vite@latest ping-pong-dapp --template react-ts --yes
+# Navigate to root directory
+cd ../../
+
+# Create temporary project and move files to current directory
+npx create-vite@latest temp-project --template react-ts --yes
+mv temp-project/* .
+mv temp-project/.* . 2>/dev/null || true
+rm -rf temp-project
 ```
 
 ### Step 2: Install dependencies:
 
 ```bash
-cd ping-pong-dapp && yarn
+# Already in root directory
+yarn
 ```
 
 ### Step 3: Install Tailwind CSS and its dependencies:
 
 ```bash
+# Continue working in root directory
 yarn add -D tailwindcss postcss autoprefixer @tailwindcss/postcss
 ```
 
@@ -30,11 +41,11 @@ Add tailwind config:
 ```ts
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    extend: {},
+    extend: {}
   },
-  plugins: [],
+  plugins: []
 };
 ```
 
@@ -44,14 +55,15 @@ Add postcss config:
 export default {
   plugins: {
     '@tailwindcss/postcss': {},
-    autoprefixer: {},
-  },
+    autoprefixer: {}
+  }
 };
 ```
 
 ### Step 4: Configure eslint and prettier:
 
 ```bash
+# Continue working in root directory
 yarn add -D @eslint/js eslint prettier eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-sort-exports
 ```
 
@@ -222,6 +234,7 @@ export default tseslint.config([
 ### Step 5: Configure vite
 
 ```bash
+# Continue working in root directory
 yarn add -D @types/node @vitejs/plugin-basic-ssl vite-plugin-node-polyfills vite-plugin-svgr vite-tsconfig-paths
 ```
 
@@ -268,7 +281,7 @@ export default defineConfig({
 });
 ```
 
-### Step 5: Configure tsconfig.json
+### Step 6: Configure tsconfig.json
 
 Keep only one tsconfig.json file in the root of the project (remove the tsconfig.app.json file and the tsconfig.node.json file).
 
@@ -299,7 +312,7 @@ Keep only one tsconfig.json file in the root of the project (remove the tsconfig
 }
 ```
 
-### Step 6: Add formatting scripts and run them
+### Step 7: Add formatting scripts and run them
 
 ```json
 "lint": "eslint --ext js,ts,tsx src --fix",
@@ -311,10 +324,8 @@ Keep only one tsconfig.json file in the root of the project (remove the tsconfig
 yarn lint
 ```
 
-### Step 7: Check if the project is running using BrowserMCP
+### Step 8: Check if the project is running
 
 ```bash
 yarn dev
 ```
-
-

tutorial/VIDEO_01/run_project_setup.sh

@@ -3,7 +3,7 @@
 echo "🚀 React + Tailwind + MultiversX dApp Setup Script"
 echo "=================================================="
 echo ""
-echo "This script will run all 8 steps to set up your ping-pong-dapp project."
+echo "This script will run all 8 steps to set up your project in the root directory."
 echo "Running all steps automatically..."
 echo ""
 

tutorial/VIDEO_01/step_01_create_project.sh

@@ -2,8 +2,20 @@
 
 echo "=== Step 1: Creating a new Vite React project with TypeScript template ==="
 
-# Create the project
-npx create-vite@latest ping-pong-dapp --template react-ts --yes
+# Navigate to root directory
+cd ../../
 
-echo "✅ Project 'ping-pong-dapp' created successfully!"
+# Create the project in current directory by creating a temp project and moving files
+echo "Creating temporary project..."
+npx create-vite@latest temp-project --template react-ts --yes
+
+echo "Moving files to root directory..."
+# Move all files from temp-project to current directory
+mv temp-project/* .
+mv temp-project/.* . 2>/dev/null || true
+
+# Remove the temporary directory
+rm -rf temp-project
+
+echo "✅ Project created successfully in root directory!"
 echo "Next: Run './step_02_install_dependencies.sh'" 

tutorial/VIDEO_01/step_02_install_dependencies.sh

@@ -2,11 +2,11 @@
 
 echo "=== Step 2: Installing dependencies ==="
 
-# Change to project directory
-cd ping-pong-dapp
+# Change to root directory
+cd ../../
 
 # Install dependencies
 yarn
 
 echo "✅ Dependencies installed successfully!"
-echo "Next: Run '../step_03_install_tailwind.sh'" 
+echo "Next: Run './step_03_install_tailwind.sh'" 

tutorial/VIDEO_01/step_03_install_tailwind.sh

@@ -2,8 +2,8 @@
 
 echo "=== Step 3: Installing Tailwind CSS and creating config files ==="
 
-# Change to project directory
-cd ping-pong-dapp
+# Change to root directory
+cd ../../
 
 # Install Tailwind CSS and dependencies
 yarn add -D tailwindcss postcss autoprefixer @tailwindcss/postcss
@@ -33,4 +33,4 @@ EOF
 echo "✅ Tailwind CSS installed and configured successfully!"
 echo "✅ tailwind.config.js created"
 echo "✅ postcss.config.js created"
-echo "Next: Run '../step_04_configure_eslint_prettier.sh'" 
+echo "Next: Run './step_04_configure_eslint_prettier.sh'" 

tutorial/VIDEO_01/step_04_configure_eslint_prettier.sh

@@ -2,8 +2,8 @@
 
 echo "=== Step 4: Configuring eslint and prettier ==="
 
-# Change to project directory
-cd ping-pong-dapp
+# Change to root directory
+cd ../../
 
 # Install eslint and prettier dependencies
 yarn add -D @eslint/js eslint prettier eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-sort-exports
@@ -171,4 +171,4 @@ EOF
 echo "✅ ESLint and Prettier configured successfully!"
 echo "✅ .prettierrc created"
 echo "✅ eslint.config.js created"
-echo "Next: Run '../step_05_configure_vite.sh'" 
+echo "Next: Run './step_05_configure_vite.sh'" 

tutorial/VIDEO_01/step_05_configure_vite.sh

@@ -2,8 +2,8 @@
 
 echo "=== Step 5: Configuring Vite ==="
 
-# Change to project directory
-cd ping-pong-dapp
+# Change to root directory
+cd ../../
 
 # Install Vite plugins
 yarn add -D @types/node @vitejs/plugin-basic-ssl vite-plugin-node-polyfills vite-plugin-svgr vite-tsconfig-paths
@@ -52,4 +52,4 @@ EOF
 
 echo "✅ Vite plugins installed and configured successfully!"
 echo "✅ vite.config.ts created"
-echo "Next: Run '../step_06_configure_tsconfig.sh'" 
+echo "Next: Run './step_06_configure_tsconfig.sh'" 

tutorial/VIDEO_01/step_06_configure_tsconfig.sh

@@ -2,8 +2,8 @@
 
 echo "=== Step 6: Configuring tsconfig.json ==="
 
-# Change to project directory
-cd ping-pong-dapp
+# Change to root directory
+cd ../../
 
 # Remove additional tsconfig files if they exist
 rm -f tsconfig.app.json tsconfig.node.json
@@ -37,4 +37,4 @@ cat > tsconfig.json << 'EOF'
 EOF
 
 echo "✅ tsconfig.json configured successfully!"
-echo "Next: Run '../step_07_add_lint_command.sh'" 
+echo "Next: Run './step_07_add_lint_command.sh'"