Tm/video 1

.gitignore

@@ -11,7 +11,6 @@ node_modules
 dist
 dist-ssr
 *.local
-.DS_Store
 
 # Editor directories and files
 .vscode/*

tutorial/README.md

@@ -0,0 +1,31 @@
+# Building a dApp from scratch with React, Tailwind, @multiversx/sdk-core and @multiversx/sdk-dapp.
+
+## Overview
+
+This is the scenario description for the instructive video series on how to build a dApp from scratch with React, Tailwind, @multiversx/sdk-core and @multiversx/sdk-dapp.
+
+## VIDEO 1: Creating a new React project with Vite
+
+1. Create a new Vite React project (TypeScript template)
+2. Install dependencies
+3. Install Tailwind CSS and its dependencies
+4. Configure eslint and prettier
+5. Configure vite (globals and https)
+6. Configure tsconfig.json (absolute imports)
+7. Add formatting scripts and run them
+8. Check if the project is running
+
+## VIDEO 2: Preparing the basic App structure with routing
+
+1. Install react-router-dom
+2. Creating the pages folder and the Home page
+3. Create the routes folder under /src
+4. Create the index.ts file under /src/routes
+5. Create a Layout component
+6. Update the App.tsx file
+7. Run lint again to fix the errors
+
+## VIDEO 3: Installing sdk-dapp
+
+1. Install sdk-dapp & its dependencies
+2. Create the lib folder from where we will re-export dependencies

tutorial/TEST_INSTRUCTIONS.md

@@ -0,0 +1,43 @@
+# Tutorial Workflow
+
+## 1. Create the final version of the project
+
+1. Create the final version of the project
+2. Split the project into phases (will be videos)
+3. Create a folder for each step called VIDEO_NUMBER inside the tutorial folder (E.g. VIDEO_01)
+4. Create a VIDEO_NUMBER_README.md in each folder (E.g. VIDEO_01_README.md)
+5. Ask agent to create a .sh file for each step of the video (E.g. step_01_create_project.sh)
+6. Create a run.sh main file in each folder that runs all the steps of the video
+7. In the tutorial folder create a run_all.sh file that runs all main run.sh files 
+
+## 2. Setup filming:
+
+1. Start a Chrome browser with remote debugging enabled
+2. Install code-server and navigate to the project folder
+3. Install the browser instance as a PWA so URL is hidden when filming
+4. Make sure code-server PWA is running when filming
+
+## 3. Filming:
+
+1. Create a global tests folder
+2. Replicate the VIDEO_NUMBER folder structure in the tests folder
+3. In each folder create a main video file (Eg. video01.spec.ts)
+4. For each sh file ask agent to create a playwright step file (Eg. step_01_create_project.ts)
+5. Include the steps files in the main video file
+6. At the beginning of the main video file, use `playwright-video` to record the video and stop it at the end of the video
+7. Before each step that edits files, create a git commit to be able to compare the changes. Start commit messages with numbers 01, 02, 03, etc.
+8. At the end of each main video, use `videogit` to create a video of the changes for specific files:
+`videogit $(git log --grep="^01" --pretty=format:"%h" -n1) $(git log --grep="^02" --pretty=format:"%h" -n 1) -w 180 -r 24 -f tailwind.config.js --show-line-numbers --title "tailwind.config.js" --output-filename 01 -o /Users/tudor/Work/test/playwright-mcp/videos/VIDEO_01`
+Explenation:
+    - $(git log --grep="^01" --pretty=format:"%h" -n1) is the first commit message that starts with 01
+    - $(git log --grep="^02" --pretty=format:"%h" -n 1) is the last commit message that starts with 02
+    - -w 180 is the words per minute
+    - -r 24 is the frame rate
+    - -f tailwind.config.js is the file to be included in the video
+    - --show-line-numbers is to show the line numbers
+    - --title "tailwind.config.js" is the breadcrumb display inside the video for the specific file
+
+NOTE: you can run the edit files videos at the end since commits remain unchanged
+
+9. Run the main test with `chromium.connectOverCDP("http://127.0.0.1:9222")`
+

tutorial/VIDEO_01/VIDEO_01_README.md

@@ -29,11 +29,19 @@ rm -rf temp-project
 yarn
 ```
 
-### Step 3: Install Tailwind CSS and its dependencies:
+Initialize git repository & create first commit:
+
+```bash
+git init
+git add .
+git commit -m "01. Initial commit"
+```
+
+### Step 3: Install Tailwind CSS: 
 
 ```bash
 # Continue working in root directory
-yarn add -D tailwindcss postcss autoprefixer @tailwindcss/postcss
+yarn add -D tailwindcss@3.3.3 postcss autoprefixer
 ```
 
 Add tailwind config:
@@ -43,7 +51,11 @@ Add tailwind config:
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    extend: {}
+    extend: {},
+    backgroundImage: {
+      // eslint-disable-next-line quotes
+      'mvx-white': "url('../multiversx-white.svg')"
+    }
   },
   plugins: []
 };
@@ -54,12 +66,34 @@ Add postcss config:
 ```js
 export default {
   plugins: {
-    '@tailwindcss/postcss': {},
+    tailwindcss: {},
     autoprefixer: {}
   }
 };
 ```
 
+Replace contents of src/index.css with the following:
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Copy the multiversx-white.svg file to the public folder.
+
+```bash
+cp ../../multiversx-white.svg public/multiversx-white.svg
+```
+
+Commit the project:
+
+```bash
+git add .
+git commit -m "02. Add tailwind css"
+```
+
 ### Step 4: Configure eslint and prettier:
 
 ```bash