adding frontend

deno.json

@@ -1,6 +1,7 @@
 {
   "imports": {
     "@oak/oak": "jsr:@oak/oak@^17.0.0",
-    "@tajpouria/cors": "jsr:@tajpouria/cors@^1.2.1"
+    "@tajpouria/cors": "jsr:@tajpouria/cors@^1.2.1",
+    "react-router-dom": "npm:react-router-dom@^6.26.2"
   }
 }

deno.lock

@@ -25,6 +25,7 @@
       "npm:eslint@^8.57.0": "npm:eslint@8.57.1",
       "npm:path-to-regexp@6.2.1": "npm:path-to-regexp@6.2.1",
       "npm:react-dom@^18.3.1": "npm:react-dom@18.3.1_react@18.3.1",
+      "npm:react-router-dom@^6.26.2": "npm:react-router-dom@6.26.2_react@18.3.1_react-dom@18.3.1__react@18.3.1",
       "npm:react@^18.3.1": "npm:react@18.3.1",
       "npm:typescript@^5.2.2": "npm:typescript@5.6.2",
       "npm:vite": "npm:vite@5.4.8",
@@ -435,6 +436,10 @@
           "fastq": "fastq@1.17.1"
         }
       },
+      "@remix-run/router@1.19.2": {
+        "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==",
+        "dependencies": {}
+      },
       "@rollup/rollup-android-arm-eabi@4.22.4": {
         "integrity": "sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==",
         "dependencies": {}
@@ -1314,6 +1319,22 @@
         "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
         "dependencies": {}
       },
+      "react-router-dom@6.26.2_react@18.3.1_react-dom@18.3.1__react@18.3.1": {
+        "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==",
+        "dependencies": {
+          "@remix-run/router": "@remix-run/router@1.19.2",
+          "react": "react@18.3.1",
+          "react-dom": "react-dom@18.3.1_react@18.3.1",
+          "react-router": "react-router@6.26.2_react@18.3.1"
+        }
+      },
+      "react-router@6.26.2_react@18.3.1": {
+        "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==",
+        "dependencies": {
+          "@remix-run/router": "@remix-run/router@1.19.2",
+          "react": "react@18.3.1"
+        }
+      },
       "react@18.3.1": {
         "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
         "dependencies": {
@@ -1502,7 +1523,8 @@
   "workspace": {
     "dependencies": [
       "jsr:@oak/oak@^17.0.0",
-      "jsr:@tajpouria/cors@^1.2.1"
+      "jsr:@tajpouria/cors@^1.2.1",
+      "npm:react-router-dom@^6.26.2"
     ],
     "packageJson": {
       "dependencies": [

src/App.css

@@ -33,10 +33,6 @@
   }
 }
 
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
+.dinosaur {
+  display: block;
 }

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 { Route, Routes } from "react-router-dom";
+import Index from "./pages/index";
+import Dinosaur from "./pages/Dinosaur";
+import "./App.css";
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <>
-      <div>
-        <a href="https://vitejs.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>
-    </>
-  )
+    <div>
+      <Routes>
+        <Route path="/" element={<Index />} />
+        <Route path="/:selectedDinosaur" element={<Dinosaur />} />
+      </Routes>
+    </div>
+  );
 }
 
-export default App
+export default App;

src/main.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import { BrowserRouter } from "react-router-dom";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <BrowserRouter>
     <App />
-  </React.StrictMode>,
-)
+  </BrowserRouter>,
+);

src/pages/Dinosaur.tsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import { Dino } from "../../types";
+
+export default function Dinosaur() {
+    const { selectedDinosaur } = useParams();
+    const [dinosaur, setDino] = useState<Dino>({ name: "", description: "" });
+
+    useEffect(() => {
+        (async () => {
+            const resp = await fetch(
+                `http://localhost:8000/dinosaurs/${selectedDinosaur}`,
+            );
+            const dino = await resp.json() as Dino;
+            setDino(dino);
+        })();
+    }, []);
+
+    return (
+        <div>
+            <h1>{dinosaur.name}</h1>
+            <p>{dinosaur.description}</p>
+            <Link to="/">🠠 Back to all dinosaurs</Link>
+        </div>
+    );
+}

src/pages/index.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { Dino } from "../../types.ts";
+
+export default function Index() {
+    const [dinosaurs, setDinosaurs] = useState<Dino[]>([]);
+
+    useEffect(() => {
+        (async () => {
+            const response = await fetch(`http://localhost:8000/dinosaurs/`);
+            const allDinosaurs = await response.json() as Dino[];
+            setDinosaurs(allDinosaurs);
+        })();
+    }, []);
+
+    return (
+        <main>
+            <h1>Welcome to the Dinosaur app</h1>
+            <p>Click on a dinosaur below to learn more.</p>
+            {dinosaurs.map((dinosaur: Dino) => {
+                return (
+                    <Link to={`/${dinosaur.name.toLowerCase()}`} key={dinosaur.name} className="dinosaur">
+                        {dinosaur.name}
+                    </Link>
+                );
+            })}
+        </main>
+    );
+}

types.ts

@@ -0,0 +1 @@
+export type Dino = { name: string; description: string };