docs: add code tour and cool readme

.tours/first-steps-with-eckchen-backoffice.tour

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://aka.ms/codetour-schema",
+  "title": "First steps with Eckchen Backoffice!",
+  "steps": [
+    {
+      "file": "README.md",
+      "description": "This is the readme of the project. \n\nYou should be able to find here some useful info, like the repo, the Figma design, the technologies used, and how the get the project working! \n\nNext steps will be a bit more technical.",
+      "line": 1
+    },
+    {
+      "file": "src/components/App.svelte",
+      "description": "Everything starts here in the App.svelte, we are using Svelte 5 and we are trying to use the existing features, like runes, effects, new ways of sending/receiving props, etc.\n\nThe App has only one route and we are managing a global state through a store. \nThere we can change two things: the current view and the selected game.\n\nThis way we can easily go from the dashboard to the creation of a new game.\n\nWe will check what kind of data we are getting from the +page.server.ts in the next steps.\n\nLet us check first the store, which is what handles the reactivity.",
+      "line": 10
+    },
+    {
+      "file": "src/stores/view-state-store.svelte.ts",
+      "description": "Here you can see how the store looks like and how we make it reactive by using $state. \n\nWe return getters and setters and then we pass over the ONLY instance of the store that can be in the App.",
+      "line": 1
+    },
+    {
+      "file": "src/routes/+page.server.ts",
+      "description": "Here we are receiving some data from the server and we have commented some actions (we are still handling this).\n\nThe important thing here is that we are fetching all the games when app starts and that we are preparing the two forms we created with superforms.\n\nThese two forms are the ones you find in the NewGameView.svelte",
+      "line": 1
+    }
+  ]
+}

README.md

@@ -1 +1,65 @@
-# Svelte with Superforms 
+<div align="center">
+
+<a target="_blank" href="https://github.com/ZeitOnline/svelte-superforms-backoffice">
+  <img src="./static/eckchen-stylish.png" alt="Thumbnail" width="300" />
+</a>
+
+<div>
+
+# Eckchen Admin Interface
+
+<img style="margin-block: 20px;" src="./static/favicon-eckchen.png" alt="Logo Eckchen" width="50" />
+</div>
+
+
+[Repo](https://github.com/ZeitOnline/svelte-superforms-backoffice)
+|
+[Figma](https://www.figma.com/design/3Dz9yV5vMb9bORSvQQkw8Q/Backoffice---Designs?node-id=6-59&t=iYY5z1KsRiPfrMBo-0)
+
+</div>
+
+## Features
+
+- 🛠️ Modern Admin Interface created with Svelte5 and SvelteKit
+- 🏡 Create new games (also through csv upload), edit the existing ones, delete them! You have full control!
+- 📝 [Superforms](https://superforms.rocks/) is used to handle validation with the forms
+- 🎨 Styling created using TailwindCSS and [Zeit Design System](https://npmjs.com/package/@zeitonline/design-system)
+- ⌨️ 100% written in TypeScript
+- 💻 Reach local the server easily with postqREST
+- 🧪 Test using vitest and svelte testing library
+- 🎁 ...much more
+
+## Description of the project
+
+Following the modus operandi of other games, it was decided that eckchen needed a new admin interface where people could easily update information regarding the games. The project is managed by the team Engagement and Games. 
+
+## Requirements
+
+- Node.js
+- nvm
+- npm
+
+## Setup
+
+1. Clone the repo
+2. Run `nvm use` to install the latest lts version
+3. Run `npm run dev` to start the dev server
+
+## Test
+
+You can run some tests by using the following commands:
+
+1. `npm run test:unit` to run all the unit tests.
+
+## To Dos
+
+Check the main task on [Jira](https://zeit-online.atlassian.net/browse/ZO-5839) for further information.
+
+- [ ] Implement the Microsoft Authentication
+- [ ] Style properly the table in the NewGameView.svelte to look consistent
+- [ ] Add the name and date inputs in the NewGameView.svelte
+- [ ] POST game and questions do not work yet.
+- [ ] PATCH game and questions do not work as expected (they are creating instead of UPSERT) and you need to update the page to make it work.
+- [ ] We have used superform in NewGameView.svelte in two forms. Do we need it also when updating game and deleting?
+- [ ] DELETE game does not work as expected.
+- [ ] Tests for the different views need to be written.

src/components/App.svelte

@@ -7,7 +7,7 @@
 	import { viewStateStore, type ViewStateStore } from '../stores/view-state-store.svelte';
 	import Header from './Header.svelte';
 
-	let store: ViewStateStore = viewStateStore('dashboard');
+	let store: ViewStateStore = viewStateStore();
 	let { data }: { data: PageData } = $props();
 </script>