added more structure

backend/recipes/pizza.json

@@ -0,0 +1,4 @@
+{
+  "title": "Pizza recipe for 3 persons",
+  "markdownSyntax": "## Zutaten\n\n### Teig für 3 Pizzen\n\n- **500g** Mehl (Type 405)\n- **250ml** Wasser\n- **21g** Frischhefe (halber Würfel)\n- **10g** Salz\n- **25ml** Olivenöl\n\n### Belag\n\n- Was schmeckt\n\n## Zubereitung\n\n### Teig\n\nAlle Zutaten bis auf das Mehl in eine Schüssel füllen und leicht umrühren.\nDann das Mehl dazuschütten und ca. 5 Minuten mit einem Handrührgerät (Knethaken)\nverkneten. Anschließend noch einmal ca. 10 Minuten per Hand kneten.\n\nDen Teig in einer mit einem feuchten Tuch abgedeckten Schüssel für mindestens 30\nMinuten gehen lassen. Anschließend in 3 gleich große Stücke teilen, noch einmal\nkurz kneten und zu einer Kugel formen. Diese dann in drei kleine Schüssel füllen\nund noch einmal mindestens 60 Minuten gehen lassen.\n\nAbschließend aus den Kugeln mit der Hand runde Pizzaböden formen (nicht mit\nNudelholz!) und nach Belieben belegen.\n\n### Belag\n\nDie Pizza kann belegt werden wie man will. Es lohnt sich, hochwertige Zutaten\nzu verwenden. Außerdem gilt: Weniger ist mehr. Nicht zu dick belegen!\n\n### Backen\n\nHier gilt: Je heißer, desto besser. Im vorgeheizten Ofen bei 300°C Umluft und\nauf einem Pizzastein braucht die Pizza ca. 6-8 Minuten.\nWeder der Pizzastein, noch die 300°C sind unbedingt nötig, aber für das optimale\nErgebnis sollte der Ofen so heiß wie nur irgendwie möglich sein.\n\n### Tipps\n\n- Für einen besonders guten Teig, kann der Teig bereits am Vortag zubereitet\n  werden und über Nacht im Kühlschrank gehen. In diesem Fall sollte die\n  Hefe-Menge halbiert werden\n- Es ist enorm wichtig, den Teig lange genug zu kneten. Hier darf man auf keinen\n  Fall faul sein\n- Den Teig per Hand zu formen erfordert etwas Übung, ist aber relativ schnell\n  gelernt. Es lohnt sich, da man mit dem Nudelholz sonst die ganze Luft aus dem\n  Teig drückt.\n- Der Pizzateig lässt sich leicht einfrieren. Einfach bereits in runde Form\n  bringen, mit Tomatensauce bestreichen und dann einfrieren. Sobald die Pizza\n  gefroren ist, in einen Gefrierbeutel packen damit kein Gefrierbrand entsteht."
+}

frontend/README.md

@@ -1,3 +1,26 @@
+# Dev infos
+
+Here are all infos that are important for the developers. You can find here for example how a installed module works.
+
+## How to markdown
+
+### Necesarry syntax for import
+
+```ts
+<script type="module">
+  import Markdown from 'https://esm.sh/react-markdown@10?bundle'
+</script>;
+import Markdown from "react-markdown";
+```
+
+This syntax is important when you want to use markdown on the website!
+
+### How to call markdown
+
+```ts
+<Markdown>{markdown}</Markdown>
+```
+
 # React + TypeScript + Vite
 
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
@@ -24,31 +47,31 @@ export default tseslint.config({
   languageOptions: {
     // other options...
     parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
       tsconfigRootDir: import.meta.dirname,
     },
   },
-})
+});
 ```
 
 You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
 
 ```js
 // eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
+import reactX from "eslint-plugin-react-x";
+import reactDom from "eslint-plugin-react-dom";
 
 export default tseslint.config({
   plugins: {
     // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
+    "react-x": reactX,
+    "react-dom": reactDom,
   },
   rules: {
     // other rules...
     // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
+    ...reactX.configs["recommended-typescript"].rules,
     ...reactDom.configs.recommended.rules,
   },
-})
+});
 ```

frontend/index.html

@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

frontend/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-markdown": "^10.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

frontend/src/App.tsx

@@ -1,35 +1,17 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import "./App.css";
+<script type="module">
+  import Markdown from 'https://esm.sh/react-markdown@10?bundle'
+</script>;
+import Markdown from "react-markdown";
+const markdown = "# Hi, *Pluto*!";
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
     <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      <button>Sync recipes</button>
+      <Markdown>{markdown}</Markdown>
     </>
-  )
+  );
 }
 
-export default App
+export default App;