Add routing

client/package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-router": "^7.1.5"
       },
       "devDependencies": {
         "@eslint/js": "^9.19.0",
@@ -1190,6 +1191,12 @@
         "@swc/counter": "^0.1.3"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -1814,6 +1821,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3911,6 +3927,30 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-router": {
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.5.tgz",
+      "integrity": "sha512-8BUF+hZEU4/z/JD201yK6S+UYhsf58bzYIDq2NS1iGpwxSXDu7F+DeGSkIXMFBuHZB21FSiCzEcUb18cQNdRkA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -4129,6 +4169,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -4495,6 +4541,12 @@
       "dev": true,
       "license": "0BSD"
     },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
+      "license": "ISC"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

client/package.json

@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router": "^7.1.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",

client/src/App.tsx

@@ -1,7 +1,19 @@
+import { Route, Routes } from 'react-router';
+
+import Home from 'pages/Home';
+import Languages from 'pages/Languages';
 import Typing from 'pages/Typing';
+import NotFound from 'pages/NotFound';
 
 function App() {
-  return <Typing />;
+  return (
+    <Routes>
+      <Route index element={<Home />} />
+      <Route path='languages' element={<Languages />} />
+      <Route path='typing/:lang' element={<Typing />} />
+      <Route path='*' element={<NotFound />} />
+    </Routes>
+  );
 }
 
 export default App;

client/src/main.tsx

@@ -1,8 +1,13 @@
 import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router';
 
 import App from './App.tsx';
 
 import './index.css';
 
 // TODO: Bring back strict mode when building and deploying
-createRoot(document.getElementById('root')).render(<App />);
+createRoot(document.getElementById('root')).render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
+);

client/src/pages/Home/index.css

@@ -0,0 +1,3 @@
+.container {
+	text-align: left;
+}

client/src/pages/Home/index.tsx

@@ -0,0 +1,11 @@
+import './index.css';
+
+function Home() {
+  return (
+    <div className='container'>
+      <h1>Home</h1>
+    </div>
+  );
+}
+
+export default Home;

client/src/pages/Languages/index.css

@@ -0,0 +1,3 @@
+.container {
+	text-align: left;
+}

client/src/pages/Languages/index.tsx

@@ -0,0 +1,11 @@
+import './index.css';
+
+function Languages() {
+  return (
+    <div className='container'>
+      <h1>Languages</h1>
+    </div>
+  );
+}
+
+export default Languages;

client/src/pages/NotFound/index.css

@@ -0,0 +1,3 @@
+.container {
+	text-align: left;
+}

client/src/pages/NotFound/index.tsx

@@ -0,0 +1,11 @@
+import './index.css';
+
+function NotFound() {
+  return (
+    <div className='container'>
+      <h1>Not Found</h1>
+    </div>
+  );
+}
+
+export default NotFound;

client/src/pages/Typing/index.tsx

@@ -6,8 +6,10 @@ import Code from 'components/Code';
 import Stats from 'components/Stats';
 
 import './index.css';
+import { useParams } from 'react-router';
 
 function Typing() {
+  const {lang} = useParams();
   const [code, setCode] = useState<string>('');
   const [loaded, setLoaded] = useState<boolean>(false);
 
@@ -16,7 +18,7 @@ function Typing() {
       setCode('');
 
       const response = await fetch(
-        `${import.meta.env.VITE_API_URL}/generate?lang=lisp`,
+        `${import.meta.env.VITE_API_URL}/generate?lang=${lang}`,
       );
 
       if (!response.ok || !response.body) return;