undone work and directory changes

docs/tutorial/en/01-intro/overview.md

@@ -1,5 +1,6 @@
 ---
 title: Overview
+sidebar_position: 1
 ---
 import GuideFeedback from "../../../../src/components/GuideFeedback";
 

docs/tutorial/en/01-intro/whats-sern.md

@@ -1,5 +1,6 @@
 ---
 title: What is sern?
+sidebar_position: 3
 ---
 import GuideFeedback from "../../../../src/components/GuideFeedback";
 

docs/tutorial/en/01-intro/who-are-we.md

@@ -1,24 +1,25 @@
 ---
 title: Who are we?
+sidebar_position: 2
 ---
 import GuideFeedback from "../../../../src/components/GuideFeedback";
 
 Who are we?
 Meet the passionate minds behind sern, working tirelessly to make your Discord bot development experience exceptional. Whether we're coding, designing, or building infrastructure, our common goal is to provide you the neccecities and bring your bot ideas to life.
 
-# serendipity
+# serendipity {#seren}
 
-# EvolutionX
+# EvolutionX {#evo}
 You can call me Evo, I'm the automation lover of the team. discord.js was my turning point into programming and I've been hooked ever since. I'm a full stack developer and I love to learn new things. I'm also a huge fan of open source and I'm always looking for ways to contribute to the community.
 sern is close to my heart and I'm proud to be a part of it. Let's make some awesome bots together!
 
-# Sr Izan
+# Sr Izan {#ethan}
 
 Hey! I'm Ethan, the only guy on the development team who is european, and the only one who commits on all repos except for the handler.
 
 Nice to meet you and I hope you enjoy this guide as much as we enjoyed making it!
 
-# ropox
+# ropox {#ropox}
 Hey there, I'm ropox! 👋
 
 I'm not just a programmer; I'm one of the passionate maintainers of the sern framework. My mission is to demystify Discord bot development and ensure it's accessible to everyone. But that's not all – I wear multiple hats, including design (i designed the logo) and infrastructure 

docs/tutorial/en/03-setting-up-project/npm-create.md

@@ -0,0 +1,26 @@
+---
+title: npm create @sern/bot
+sidebar_position: 1
+---
+import GuideFeedback from "../../../../src/components/GuideFeedback";
+
+Alright, you've got everything set up. Now it's time to create your bot!
+
+## The backstory
+
+In the initial days of sern, we used to create our bots with the `sern init` command in the CLI.  
+This command was an easy way to set up a sern project in ten, even five minutes!
+
+But now there's a new, cooler and faster sheriff in town: the [`npm create @sern/bot`](https://github.com/sern-handler/create-bot) command.
+This was an alternative to the old command, which got deprecated in favor of this tool in no time.
+
+## The GUI
+
+Currently WIP by me, sern GUI will be a graphical frontend to sern CLI and the npm create command.
+Follow development on the [Github repo](https://github.com/sern-handler/gui).
+
+See you on the next chapter where we'll use the already discussed command to set up your bot!
+
+---
+Written by [Sr Izan](../intro/who-are-we#ethan)
+<GuideFeedback />

docs/tutorial/en/04-setting-up-bot/create-bot.md

@@ -0,0 +1,43 @@
+---
+title: Creating your sern bot
+sidebar_position: 1
+---
+import GuideFeedback from "../../../../src/components/GuideFeedback";
+
+Creating a bot with sern is a piece of cake, trust me!
+As discussed in [the npm create command chapter](../setting-up-project/npm-create), we're going to be using that awesome tool to set sern up.  
+So, what are we waiting for? Let's get started!
+
+Open up a terminal in your ~~failed~~ projects directory. Then, type the following command:
+```sh
+npm create @sern/bot
+```
+After installing the package, prompts will show up on your terminal. Neat!
+
+## Prompt walkthrough
+
+First, choose a template. In this guide we'll be using the `js-esm` template.  
+- `js` means Javascript.
+- `esm` means ECMAScript Modules. ESM provides a better developer experience than the old CommonJS, so 
+```js
+const { Sern, makeDependencies, single } = require('@sern/handler');
+``` 
+would turn to
+```js
+import { Sern, makeDependencies, single } from '@sern/handler';
+```
+
+:::info
+We primarily use Typescript but to make the tutorial easier Javascript will be used.
+:::
+
+Then, choose a project. This one should be lowercase with dashes and/or underscores (aka `kebab-case` or `snake_case`).
+
+In the package manager prompt, select [Yarn](../preparing/package-manager)
+
+And you're done... with that. See you in the next chapter, where you'll get your discord bot token!
+
+---
+Written by [Sr Izan](../intro/who-are-we#ethan)  
+Get the [source code](https://github.com/sern-handler/tutorial-bot/tree/setting-up-bot/creating-bot)!
+<GuideFeedback />

docs/tutorial/en/04-setting-up-bot/create-discord-app.md

@@ -0,0 +1,61 @@
+---
+title: Create your Discord Application
+sidebar_position: 2
+---
+import GuideFeedback from "../../../../src/components/GuideFeedback";
+
+Welcome back!
+
+Before we do anything, we need to edit some code in our bot to make it read the Discord token safely and securely.
+
+# Installing dotenv
+
+The npm package [`dotenv`](https://npm.im/dotenv) lets us use environment variables defined in a `.env` file inside a Node.JS application.
+On the newest versions of node.js you can do it without this package, but for the sake of simplicity this will be used.
+
+Alright, enough rambling. Let's open up a terminal (your favorite thing I know...)
+```sh
+yarn add dotenv
+```
+This command will add dotenv to the dependencies. Awesome!  
+Let's now go to our `index.js` file and add a new import:
+```js
+import 'dotenv/config'
+```
+And create a blank `.env` file in the root of your project directory (the directory where, for example, your `package.json` file is)
+
+```
+.
+├── .env
+├── .gitignore      
+├── .npmignore      
+├── README.md       
+├── package.json    
+├── sern.config.json
+├── src
+│   ├── commands
+│   │   └── ping.js
+│   ├── dependencies.d.ts
+│   └── index.js
+└── yarn.lock
+```
+
+## Setting up your Discord Application
+
+You have your bot (almost) ready to go, but first we need a bot token.
+
+First go to Discord Developer's homepage (you can type [discord.dev](https://discord.dev) in your browser and then click on "Applications" on the sidebar)
+
+Click on "New Application" in the top right.
+
+Then, fill in your application's name:  
+![](https://img.srizan.dev/brave_QYp7LQe5xd.png)
+
+Click on "Bot" in the sidebar, then the "Reset Token" button and copy the token.
+
+
+
+---
+Written by [Sr Izan](../intro/who-are-we#ethan)  
+Get the [source code](https://github.com/sern-handler/tutorial-bot/tree/setting-up-bot/creating-discord-app)!
+<GuideFeedback />

docs/tutorial/langchooser.md

@@ -5,7 +5,7 @@ title: Choose your language
 import GuideFeedback from "../../src/components/GuideFeedback";
 
 Choose your language:
-- [English](./en/intro/whats-sern)
+- [English](./en/intro/overview)
 - [Español](./es)
 - [Turkish](./tr)