feat(docs/client): 📝 Add development environment setup tutorial (#128)

Co-authored-by: Pablo Klaschka <pklaschka@users.noreply.github.com>
Co-authored-by: Lina Mitkov <lina-mitk@users.noreply.github.com>

docs/client/tutorials/_category_.yml

@@ -0,0 +1,4 @@
+label: Tutorials
+# === Uncomment and adjust as needed:
+# position: 1
+# collapsible: false

docs/client/tutorials/tutorial.mdx

@@ -0,0 +1,137 @@
+---
+title: Setting up the development enviroment
+# e.g., "Publishing messages to the event bus" or "Installing a dependency using npm"
+
+description: Start a new telestion-client project with the tc-cli
+---
+
+
+
+<!--
+Tutorial
+========
+
+=== When to use this template:
+Use this template when you want to give a quick, step-by-step tutorial for solving a specific
+technical problem. Tutorials allow the reader to learn how to implement something within
+their projects quickly.
+
+=== When not to use this template:
+When your article focuses more on a concept/technology and is not rooted in a specific technical
+problem ("how to do XY?"), consider using a guide instead.
+
+=== Guide or Tutorial
+A tutorial provides a quick, technical "step-by-step" tutorial for a
+given problem. Thus, a guide describes less the handling of a specific problem
+and more the general interaction of the reader with a given concept.
+
+Example with npm articles:
+- "npm": (Concept, explaining what npm is)
+- "Installing a dependency with npm" (Tutorial, providing a quick tutorial to
+  solve a technical problem)
+- "Managing dependencies with npm" (Guide, including both technical knowledge, but
+  also best practices and more)
+
+=== Writing tips:
+- Write in the present tense
+- Use neutral pronouns (they/them instead of he/she and him/her)
+- Be respectful to everyone
+- Be aware of the potential for cultural misunderstandings
+- Provide explanations for what you do, but focus on the step-by-step guide
+  without deeply explaining every technical decision and why it's best prcatice
+  to do so (you can describe best practices in a guide, a tutorial must focus on
+  keeping the "step by step" flow going)
+-->
+
+<!-- Relevant imports: -->
+
+import { Reference, Image } from '/components';
+
+<!-- Short description of what the article covers: -->
+
+In this tutorial, we install the telstion-client-cli and generate a new telestion-client project.
+
+:::info Prerequisites
+
+To complete this tutorial, you should be familiar with basic terminal commands.
+
+:::
+
+## What we'll build
+
+The result is a project structure that you can immediately begin to customize.
+
+## Step 1: Installing `tc-cli`
+
+Install the `tc-cli` by running the following command in your terminal:
+
+```sh
+npm install --global @wuespace/telestion-client-cli
+```
+
+This installs the CLI, which you can call using the `tc-cli` command.
+
+## Step 2: Initializing the project
+
+This step initializes the project.
+
+Open the terminal where you want to generate the project and run
+
+```sh
+tc-cli init myproject
+```
+
+Replace `myproject` with your own foulder name.
+
+This generates a folder that contains a ready-to-use client project and installs all necessary dependencies.
+
+:::info Windows execution policies
+
+On Windows machines, you might get an error message that is about execution policies.
+In this case, run the power shell as administrator and use this command:
+
+```sh
+Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
+```
+
+Restart your other terminal and re-run the `tc-cli` command.
+
+:::
+
+## Step 3: Run the client
+
+Run the client by navigating into your folder and run
+
+```sh
+npm start
+```
+
+:::tip 
+
+This runs `tc-cli start --electron` in the background.
+
+:::
+
+An electron window opens and you can see your application.
+
+## Next steps
+
+<!-- Short concluding sentence: -->
+
+Now that we've generated our client project, we'll configure and extend our client in the following tutorials.
+
+<!-- Links to next steps/related articles -->
+
+
+<!--
+Snippets
+--------
+
+<Reference to="../other-article">
+    Relative Link to other article
+</Reference>
+
+<Reference to="https://www.example.com">
+    Example Website
+</Reference>
+-->