-

frontend/README.md

@@ -4,6 +4,8 @@ Here are all infos that are important for the developers. You can find here for
 
 ## How to markdown
 
+This module is from this [GitHub repo](https://github.com/remarkjs/react-markdown)
+
 ### Necesarry syntax for import
 
 ```ts
@@ -15,12 +17,16 @@ import Markdown from "react-markdown";
 
 This syntax is important when you want to use markdown on the website!
 
+> You have to call the script elemt above in every file where you want to use markdown!
+
 ### How to call markdown
 
 ```ts
-<Markdown>{markdown}</Markdown>
+<Markdown></Markdown>
 ```
 
+Between the openeing and closing tag can you write markdown. This markdown syntx is then rendered on the website.
+
 # React + TypeScript + Vite
 
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

frontend/src/App.tsx

@@ -1,17 +1,25 @@
-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*!";
+import { useEffect, useState } from "react";
 
 function App() {
+  const [recipes, setRecipes] = useState<any[]>([]);
+
+  useEffect(() => {
+    fetch("http://localhost:3000/loadRecipes")
+      .then((res) => res.json())
+      .then((data) => setRecipes(data))
+      .catch((err) => console.error(err));
+  }, []);
+
   return (
-    <>
-      <button>Sync recipes</button>
-      <Markdown>{markdown}</Markdown>
-    </>
+    <div>
+      <h1>Rezepte</h1>
+      <ul>
+        {recipes.map((r, i) => (
+          <li key={i}>{JSON.stringify(r)}</li>
+        ))}
+      </ul>
+    </div>
   );
 }
 
-export default App;
+export default App;