diff --git a/content/general/meta.json b/content/general/meta.json
index 5105e13..86c6cf0 100644
--- a/content/general/meta.json
+++ b/content/general/meta.json
@@ -5,7 +5,7 @@
"introduction",
"install",
"changelog",
- "tutorials",
+ "[IconBook2][Tutorials](/general/tutorials/)",
"troubleshooting"
]
}
diff --git a/content/general/tutorials.md b/content/general/tutorials.md
deleted file mode 100644
index d84d3f9..0000000
--- a/content/general/tutorials.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Tutorials
-icon: IconBook2
----
-
-## Under construction
diff --git a/content/general/tutorials/index.mdx b/content/general/tutorials/index.mdx
new file mode 100644
index 0000000..8d20673
--- /dev/null
+++ b/content/general/tutorials/index.mdx
@@ -0,0 +1,13 @@
+---
+title: Tutorials
+icon: IconBook2
+---
+
+import {Card, Cards} from "fumadocs-ui/components/card";
+
+
+
+
+
+
+
diff --git a/content/general/tutorials/meta.json b/content/general/tutorials/meta.json
new file mode 100644
index 0000000..bacc359
--- /dev/null
+++ b/content/general/tutorials/meta.json
@@ -0,0 +1,10 @@
+{
+ "title": "Tutorials",
+ "root": true,
+ "pages": [
+ "quick_how-to-login",
+ "quick_first_personal_project",
+ "quick_setting_up_a_project",
+ "quick_creating_a_flow"
+ ]
+}
diff --git a/content/general/tutorials/quick_creating_a_flow.mdx b/content/general/tutorials/quick_creating_a_flow.mdx
new file mode 100644
index 0000000..b6d643c
--- /dev/null
+++ b/content/general/tutorials/quick_creating_a_flow.mdx
@@ -0,0 +1,127 @@
+---
+title: Quick - Creating your first flow
+icon: IconBook2
+---
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+import { Cards, Card } from 'fumadocs-ui/components/card';
+
+We will build a simple flow that listens for a `GET` request and immediately answers back with a classic `pong`.
+
+---
+
+
+
+
+## Kickstart a new flow
+
+Let's begin by creating a fresh canvas. Click the create button to get started.
+
+
+
+Set the trigger type to **REST Endpoint**, give your flow a memorable name, and hit create to open up your new workspace.
+
+
+
+
+
+
+## Access the node settings
+
+Locate and open your newly created flow from the explorer list.
+
+
+
+Click on the **Starting Node** to highlight it. Then, take a look at the right-hand side of your screen and open up the **Node Settings** panel. This is where the magic configuration happens.
+
+
+
+Form here we can start setting up our starting node.
+
+
+
+
+
+
+### Configure your endpoint & logic
+
+First, let's define the data type. Click on the variable **(x)** icon and select `text/plain` from the list.
+
+
+
+Next, let's give your flow an address. Type a clean path like `/ping` into the URL endpoint field.
+
+
+ 💡 **What is a URL endpoint?** This acts as the unique web path for your flow. When combined with your specific project slug, it forms the full web address you will use to trigger this logic.
+
+
+
+
+Choose the `GET` method from the dropdown menu. We are using `GET` for this project so you can easily test and preview the results right inside your favorite web browser.
+
+
+
+Set the incoming input schema to `Data Value` to keep the format simple and clean.
+
+
+
+
+
+
+#### Add a responde node
+
+Now, let's add some action! Open up the **Node Menu** to browse available blocks.
+
+
+
+Type `Respond` into the search bar and select the corresponding node to add it to your workflow canvas.
+
+
+
+Click on the newly placed **Respond** node to configure.
+
+
+
+Let's tell the client everything went smoothly. Set the **Status Code** to `200` (the standard HTTP code for "OK").
+
+
+
+Just like before, use the **(x)** variable icon to set the response content type to `text/plain`.
+
+
+
+Type the word `pong` into the content field. This is the exact text payload that will be sent back to the user.
+
+
+
+Don't lose your progress! Click the **Save** button in the toolbar.
+
+
+
+
+
+
+#### Try out your flow
+
+Time to test it out! Click on the **Play** button and copy the resulting HTTP URL to your clipboard.
+
+
+
+Finally, paste the copied link into a new browser tab.
+If you are developing locally, feel free to adjust the IP address or host if needed.
+Hit enter, and watch your flow instantly reply with `pong`!
+
+
+
+
+
+
+---
+
+### What are my next steps?
+
+Congratulations on deploying your very first endpoint!
+Now that you know how to receive a request and send a basic response,
+you can try passing dynamic data variables or adding conditional logic nodes to make your flow even smarter.
diff --git a/content/general/tutorials/quick_first_personal_project.mdx b/content/general/tutorials/quick_first_personal_project.mdx
new file mode 100644
index 0000000..168b829
--- /dev/null
+++ b/content/general/tutorials/quick_first_personal_project.mdx
@@ -0,0 +1,60 @@
+---
+title: Quick - Creating a personal project
+icon: IconBook2
+---
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+import { Cards, Card } from 'fumadocs-ui/components/card';
+
+Let's walk through setting up a dedicated workspace for your private automations.
+Creating a personal project provides you with a sandbox environment to build, test, and run your individual flows securely.
+
+---
+
+
+
+
+## Return to the homepage
+
+To begin creating your personal project, navigate back to your main dashboard screen by clicking on the **Home** button in the navigation bar.
+
+
+
+
+
+
+## Initialize the project creation
+
+Once you are on the homepage, locate the **Personal projects** section and click on the **Create** button to open the project configuration wizard.
+
+
+
+
+
+
+## Enter your project details
+
+Provide a clear **Name** and a helpful **Description** for your workspace so you can easily identify its purpose later. Once filled out, click **Create project** to finalize the setup.
+
+
+
+
+
+
+## Explore your new workspace
+
+Congratulations! Your personal project has been successfully initialized. You are now looking at your private project dashboard, ready to configure runtimes or deploy your very first flow. 🎉
+
+
+
+
+
+
+---
+
+### What are my next steps?
+
+Now that your private sandbox is ready, you need to connect an runtime to run your automation logic.
+Head over to our **Setting up a project** guide to attach your runtime environment and customize your routing slug.
diff --git a/content/general/tutorials/quick_how-to-login.mdx b/content/general/tutorials/quick_how-to-login.mdx
new file mode 100644
index 0000000..6921cfc
--- /dev/null
+++ b/content/general/tutorials/quick_how-to-login.mdx
@@ -0,0 +1,108 @@
+---
+title: Quick - How to login
+icon: IconBook2
+---
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+import { Cards, Card } from 'fumadocs-ui/components/card';
+
+Welcome to the **Quick Tutorials**! In this guide,
+we’ll walk through all steps from your current installtion to your first flow.
+
+
+ **Prerequisite:** Ensure you have completed the steps from the [Installation Process](/general/install) before proceeding.
+
+
+
+
+
+To access the IDE, you need to visit the URL defined in your `.env` file. Open your environment configuration to verify the `HOSTNAME` and `PORT`:
+
+```bash title=".env"
+# IDE config
+# [!code highlight:3]
+HOSTNAME=localhost
+HTTP_PORT=80
+HTTPS_PORT=443
+SSL_ENABLED=false
+# must be located in ./certs, defaults to ".pem"
+SSL_CERT_FILE=
+# must be located in ./certs, defaults to ".key"
+SSL_KEY_FILE=
+
+INITIAL_ROOT_PASSWORD=tutorials
+INITIAL_ROOT_MAIL=tutorials@code0.tech
+# can be used to create a global runtime with given token
+INITIAL_RUNTIME_TOKEN=runtime
+...
+```
+
+
+
+
+## Local Machine
+
+If you are running the ide in docker on your current computer, use the loopback address.
+
+```text
+http://localhost
+```
+
+
+This only works if the browser and the docker container are on the same device.
+
+
+
+
+
+## Remote Server
+
+If you are accessing a server on your local network, use its IP address.
+
+```text
+http://192.168.2.105
+```
+
+**Instructions:**
+
+1. Find your server IP (PS: On linux headless type `ip addr` copy that address).
+2. Replace `192.168.2.105` with your actual IP.
+3. Ensure port `80` is open in your firewall settings.
+
+
+
+Once you have opened the correct URL in your browser, the login screen will appear. Enter the credentials you defined in your .env file.
+
+```bash title=".env"
+# IDE config
+HOSTNAME=localhost
+HTTP_PORT=80
+HTTPS_PORT=443
+SSL_ENABLED=false
+# must be located in ./certs, defaults to ".pem"
+SSL_CERT_FILE=
+# must be located in ./certs, defaults to ".key"
+SSL_KEY_FILE=
+# [!code highlight:2]
+INITIAL_ROOT_PASSWORD=tutorials
+INITIAL_ROOT_MAIL=tutorials@code0.tech
+# can be used to create a global runtime with given token
+INITIAL_RUNTIME_TOKEN=runtime
+...
+```
+
+Enter the `INITIAL_ROOT_MAIL` and `INITIAL_ROOT_PASSWORD` into their corresponding login fields, then click **Login**.
+
+
+
+
+
+---
+
+### What are my next steps?
+
+Now that you have successfully logged in as the root administrator,
+your next step is to create a home for your automation experiments.
+Head over to our Creating a Personal Project tutorial to get your first sandbox workspace ready!
diff --git a/content/general/tutorials/quick_setting_up_a_project.mdx b/content/general/tutorials/quick_setting_up_a_project.mdx
new file mode 100644
index 0000000..b05ff39
--- /dev/null
+++ b/content/general/tutorials/quick_setting_up_a_project.mdx
@@ -0,0 +1,82 @@
+---
+title: Quick - Setting up your project
+icon: IconBook2
+---
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+import { Cards, Card } from 'fumadocs-ui/components/card';
+
+Before building your automation workflows, let's get your project environment configured properly.
+Setting up your runtime environments and personalizing your project path takes just a few quick steps.
+
+---
+
+
+
+
+## Select your project
+
+From your main dashboard, navigate to and select the specific project you want to configure.
+
+
+
+
+
+
+## Connect a runtime environment
+
+Head over to the sidebar menu and select the **Runtime** tab.
+
+
+
+Click the add button to attach your preferred execution environment to this project. This gives your flows the computing engine they need to run successfully.
+
+
+
+
+
+
+## Customize your project settings
+
+Next, open up the **Project Settings** panel from the lower section of the sidebar navigation.
+
+
+
+Update the **slug** text field to define your preferred URL routing prefix. While you are here, feel free to update the project name and description to keep your workspace well-organized.
+
+
+
+
+ 💡 **Understanding the routing structure:** This project slug directly determines the base web route for every automation you build inside this project. Your final live endpoint URLs will follow this structural format:
+
+ `http://localhost://`
+
+
+Once you are satisfied with your route and configuration tweaks, click the **Save Settings** button to apply the changes.
+
+
+
+
+
+
+## Enter the flow workspace
+
+With your base settings locked in, click on the **Flows** tab to return to your project's main automation interface.
+
+
+
+Welcome to your empty canvas! You are now fully configured and ready to start linking nodes together to build your first live automation flow. 🎉
+
+
+
+
+
+
+---
+
+### Ready for action?
+
+Now that your runtime is wired up and your base slug is configured, you have the perfect foundation built.
+Head over to our **Creating your first flow** tutorial to build out your first functional REST endpoint.
diff --git a/lychee.toml b/lychee.toml
new file mode 100644
index 0000000..4d56d72
--- /dev/null
+++ b/lychee.toml
@@ -0,0 +1,4 @@
+# Custom JSX links (e.g. ) point to extensionless
+# routes, matching how Fumadocs serves pages. Retry missing local files with
+# these extensions so the checker resolves them to their source files.
+fallback_extensions = ["mdx", "md"]
diff --git a/public/tutorials/quick-first-flow/cZ_01_clickOnCreateFlow.png b/public/tutorials/quick-first-flow/cZ_01_clickOnCreateFlow.png
new file mode 100644
index 0000000..641dd11
Binary files /dev/null and b/public/tutorials/quick-first-flow/cZ_01_clickOnCreateFlow.png differ
diff --git a/public/tutorials/quick-first-flow/cZ_02_selectTriggerAndCreate.png b/public/tutorials/quick-first-flow/cZ_02_selectTriggerAndCreate.png
new file mode 100644
index 0000000..30ee871
Binary files /dev/null and b/public/tutorials/quick-first-flow/cZ_02_selectTriggerAndCreate.png differ
diff --git a/public/tutorials/quick-first-flow/cZ_03_selectTheNewFlow.png b/public/tutorials/quick-first-flow/cZ_03_selectTheNewFlow.png
new file mode 100644
index 0000000..d3df0d6
Binary files /dev/null and b/public/tutorials/quick-first-flow/cZ_03_selectTheNewFlow.png differ
diff --git a/public/tutorials/quick-first-flow/cZ_04_selectStartNodeAndOpenNodeSettings.png b/public/tutorials/quick-first-flow/cZ_04_selectStartNodeAndOpenNodeSettings.png
new file mode 100644
index 0000000..e16cf98
Binary files /dev/null and b/public/tutorials/quick-first-flow/cZ_04_selectStartNodeAndOpenNodeSettings.png differ
diff --git a/public/tutorials/quick-first-flow/cZ_05_sidePannelOpen.png b/public/tutorials/quick-first-flow/cZ_05_sidePannelOpen.png
new file mode 100644
index 0000000..c2373ed
Binary files /dev/null and b/public/tutorials/quick-first-flow/cZ_05_sidePannelOpen.png differ
diff --git a/public/tutorials/quick-first-flow/cZ_06_setContentTypeType.png b/public/tutorials/quick-first-flow/cZ_06_setContentTypeType.png
new file mode 100644
index 0000000..14cc53a
Binary files /dev/null and b/public/tutorials/quick-first-flow/cZ_06_setContentTypeType.png differ
diff --git a/public/tutorials/quick-first-flow/cZ_07_setUrlEndpoint.png b/public/tutorials/quick-first-flow/cZ_07_setUrlEndpoint.png
new file mode 100644
index 0000000..b86ed46
Binary files /dev/null and b/public/tutorials/quick-first-flow/cZ_07_setUrlEndpoint.png differ
diff --git a/public/tutorials/quick-first-flow/cZ_08_setHttpRequestMethod.png b/public/tutorials/quick-first-flow/cZ_08_setHttpRequestMethod.png
new file mode 100644
index 0000000..0b06bcc
Binary files /dev/null and b/public/tutorials/quick-first-flow/cZ_08_setHttpRequestMethod.png differ
diff --git a/public/tutorials/quick-first-flow/cZ_09_setInputSchemaToDataValue.png b/public/tutorials/quick-first-flow/cZ_09_setInputSchemaToDataValue.png
new file mode 100644
index 0000000..6cca5d1
Binary files /dev/null and b/public/tutorials/quick-first-flow/cZ_09_setInputSchemaToDataValue.png differ
diff --git a/public/tutorials/quick-first-flow/cZ_10_openNodeMenu.png b/public/tutorials/quick-first-flow/cZ_10_openNodeMenu.png
new file mode 100644
index 0000000..6d210c9
Binary files /dev/null and b/public/tutorials/quick-first-flow/cZ_10_openNodeMenu.png differ
diff --git a/public/tutorials/quick-first-flow/cZ_11_searchAndSelectRespondNode.png b/public/tutorials/quick-first-flow/cZ_11_searchAndSelectRespondNode.png
new file mode 100644
index 0000000..3a2d85f
Binary files /dev/null and b/public/tutorials/quick-first-flow/cZ_11_searchAndSelectRespondNode.png differ
diff --git a/public/tutorials/quick-first-flow/cZ_12_selectYourRespondNode.png b/public/tutorials/quick-first-flow/cZ_12_selectYourRespondNode.png
new file mode 100644
index 0000000..631378c
Binary files /dev/null and b/public/tutorials/quick-first-flow/cZ_12_selectYourRespondNode.png differ
diff --git a/public/tutorials/quick-first-flow/cZ_13_setStatusCode200.png b/public/tutorials/quick-first-flow/cZ_13_setStatusCode200.png
new file mode 100644
index 0000000..c97143f
Binary files /dev/null and b/public/tutorials/quick-first-flow/cZ_13_setStatusCode200.png differ
diff --git a/public/tutorials/quick-first-flow/cZ_14_setRespondContentType.png b/public/tutorials/quick-first-flow/cZ_14_setRespondContentType.png
new file mode 100644
index 0000000..17d6dc1
Binary files /dev/null and b/public/tutorials/quick-first-flow/cZ_14_setRespondContentType.png differ
diff --git a/public/tutorials/quick-first-flow/cZ_15_enterContentToReturn.png b/public/tutorials/quick-first-flow/cZ_15_enterContentToReturn.png
new file mode 100644
index 0000000..0ef1608
Binary files /dev/null and b/public/tutorials/quick-first-flow/cZ_15_enterContentToReturn.png differ
diff --git a/public/tutorials/quick-first-flow/cZ_16_clickOnSave.png b/public/tutorials/quick-first-flow/cZ_16_clickOnSave.png
new file mode 100644
index 0000000..b7e4cdb
Binary files /dev/null and b/public/tutorials/quick-first-flow/cZ_16_clickOnSave.png differ
diff --git a/public/tutorials/quick-first-flow/cZ_17_copyHttpUrl.png b/public/tutorials/quick-first-flow/cZ_17_copyHttpUrl.png
new file mode 100644
index 0000000..4d0fa1d
Binary files /dev/null and b/public/tutorials/quick-first-flow/cZ_17_copyHttpUrl.png differ
diff --git a/public/tutorials/quick-first-flow/cZ_18_enterUrlAndSeeRespond.png b/public/tutorials/quick-first-flow/cZ_18_enterUrlAndSeeRespond.png
new file mode 100644
index 0000000..6da0dfe
Binary files /dev/null and b/public/tutorials/quick-first-flow/cZ_18_enterUrlAndSeeRespond.png differ
diff --git a/public/tutorials/quick-first-personal-project/cZ_01_returnToHomePage.png b/public/tutorials/quick-first-personal-project/cZ_01_returnToHomePage.png
new file mode 100644
index 0000000..22c5368
Binary files /dev/null and b/public/tutorials/quick-first-personal-project/cZ_01_returnToHomePage.png differ
diff --git a/public/tutorials/quick-first-personal-project/cZ_02_clickOnNewProject.png b/public/tutorials/quick-first-personal-project/cZ_02_clickOnNewProject.png
new file mode 100644
index 0000000..8171a01
Binary files /dev/null and b/public/tutorials/quick-first-personal-project/cZ_02_clickOnNewProject.png differ
diff --git a/public/tutorials/quick-first-personal-project/cZ_03_enterNameAndDescription.png b/public/tutorials/quick-first-personal-project/cZ_03_enterNameAndDescription.png
new file mode 100644
index 0000000..4451432
Binary files /dev/null and b/public/tutorials/quick-first-personal-project/cZ_03_enterNameAndDescription.png differ
diff --git a/public/tutorials/quick-first-personal-project/cZ_04_createYourNewProject.png b/public/tutorials/quick-first-personal-project/cZ_04_createYourNewProject.png
new file mode 100644
index 0000000..cd72934
Binary files /dev/null and b/public/tutorials/quick-first-personal-project/cZ_04_createYourNewProject.png differ
diff --git a/public/tutorials/quick-how-to-login/cZ_01_loginPageEnterNameAndPassword.png b/public/tutorials/quick-how-to-login/cZ_01_loginPageEnterNameAndPassword.png
new file mode 100644
index 0000000..65453df
Binary files /dev/null and b/public/tutorials/quick-how-to-login/cZ_01_loginPageEnterNameAndPassword.png differ
diff --git a/public/tutorials/quick-setting-up-a-project/cZ_01_navigateToYourProject.png b/public/tutorials/quick-setting-up-a-project/cZ_01_navigateToYourProject.png
new file mode 100644
index 0000000..cd72934
Binary files /dev/null and b/public/tutorials/quick-setting-up-a-project/cZ_01_navigateToYourProject.png differ
diff --git a/public/tutorials/quick-setting-up-a-project/cZ_02_navigateToRuntimes.png b/public/tutorials/quick-setting-up-a-project/cZ_02_navigateToRuntimes.png
new file mode 100644
index 0000000..df4d63b
Binary files /dev/null and b/public/tutorials/quick-setting-up-a-project/cZ_02_navigateToRuntimes.png differ
diff --git a/public/tutorials/quick-setting-up-a-project/cZ_03_addRuntime.png b/public/tutorials/quick-setting-up-a-project/cZ_03_addRuntime.png
new file mode 100644
index 0000000..f0687ee
Binary files /dev/null and b/public/tutorials/quick-setting-up-a-project/cZ_03_addRuntime.png differ
diff --git a/public/tutorials/quick-setting-up-a-project/cZ_04_navigateToSettings.png b/public/tutorials/quick-setting-up-a-project/cZ_04_navigateToSettings.png
new file mode 100644
index 0000000..de12645
Binary files /dev/null and b/public/tutorials/quick-setting-up-a-project/cZ_04_navigateToSettings.png differ
diff --git a/public/tutorials/quick-setting-up-a-project/cZ_05_editSettingsAsYouWant.png b/public/tutorials/quick-setting-up-a-project/cZ_05_editSettingsAsYouWant.png
new file mode 100644
index 0000000..dc2425e
Binary files /dev/null and b/public/tutorials/quick-setting-up-a-project/cZ_05_editSettingsAsYouWant.png differ
diff --git a/public/tutorials/quick-setting-up-a-project/cZ_06_saveYourSettings.png b/public/tutorials/quick-setting-up-a-project/cZ_06_saveYourSettings.png
new file mode 100644
index 0000000..af1f5c6
Binary files /dev/null and b/public/tutorials/quick-setting-up-a-project/cZ_06_saveYourSettings.png differ
diff --git a/public/tutorials/quick-setting-up-a-project/cZ_07_navigateToProjectHome.png b/public/tutorials/quick-setting-up-a-project/cZ_07_navigateToProjectHome.png
new file mode 100644
index 0000000..9705df1
Binary files /dev/null and b/public/tutorials/quick-setting-up-a-project/cZ_07_navigateToProjectHome.png differ
diff --git a/public/tutorials/quick-setting-up-a-project/cZ_08_flows.png b/public/tutorials/quick-setting-up-a-project/cZ_08_flows.png
new file mode 100644
index 0000000..6dedcde
Binary files /dev/null and b/public/tutorials/quick-setting-up-a-project/cZ_08_flows.png differ