feat: Add React Router (#16)

* feat: Add React Router

* merged from app.tsx from main

* integrate existing frontend template with router

Author: Kevinorta

web/package-lock.json

@@ -14,6 +14,7 @@
     "@tailwindcss/vite": "^4.1.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-router-dom": "^7.5.0",
     "react-icons": "^5.5.0",
     "tailwindcss": "^4.1.4"
   },

web/package.json

@@ -1,8 +1,13 @@
+import { useEffect, useState } from "react";
+import { Outlet } from "react-router-dom";
 import SideNav from "./components/SideNav";
-import PopularActivities from "./components/PopularActivities";
-import WeeklySchedule from "./components/WeeklySchedule";
 import RightContent from "./components/RightContent";
-import PersonalBests from "./components/PersonalBests";
+// function App() {
+//   return (
+//     <>
+//       {/* This is where the Navbar and other components will be rendered */}
+//
+//     </>
 
 export default function App() {
   return (
@@ -11,17 +16,8 @@ export default function App() {
         <div className="flex-shrink-0">
           <SideNav />
         </div>
-        <div className="flex flex-col flex-1 w-full p-4 md:p-8 overflow-y-auto min-h-0">
-          <PopularActivities />
-          <div className="flex flex-col md:flex-row gap-4 md:gap-8 mt-8">
-            <div className="w-full md:w-1/2">
-              <WeeklySchedule />
-            </div>
-            <div className="w-full md:w-1/2">
-              <PersonalBests />
-            </div>
-          </div>
-        </div>
+        <Outlet />{" "}
+        {/* This is where the Content (child routes) will be rendered */}
         <div className="w-full md:w-64 p-4 flex-shrink-0 overflow-y-auto min-h-0">
           <RightContent />
         </div>

web/src/App.tsx

@@ -32,54 +32,61 @@ const SideNav: React.FC = () => {
           TTP Code App
         </div>
         <a
-          href="#home"
+          href="/"
           className="text-base md:text-lg p-2 md:p-0"
           onClick={toggleMenu}
         >
           Home
         </a>
         <a
-          href="#profile"
+          href="#profile" //update this to the correct route
           className="text-base md:text-lg p-2 md:p-0"
           onClick={toggleMenu}
         >
           Profile
         </a>
         <a
-          href="#schedule"
+          href="#schedule" //update this to the correct route
           className="text-base md:text-lg p-2 md:p-0"
           onClick={toggleMenu}
         >
           Schedule
         </a>
         <a
-          href="#activities"
+          href="#activities" //update this to the correct route
           className="text-base md:text-lg p-2 md:p-0"
           onClick={toggleMenu}
         >
           Activities
         </a>
         <a
-          href="#settings"
+          href="#settings" //update this to the correct route
           className="text-base md:text-lg p-2 md:p-0"
           onClick={toggleMenu}
         >
           Settings
         </a>
         <a
-          href="#quiz"
+          href="#quiz" //update this to the correct route
           className="text-base md:text-lg p-2 md:p-0"
           onClick={toggleMenu}
         >
           Quiz
         </a>
         <a
-          href="#leetcode"
+          href="#leetcode" //update this to the correct route
           className="text-base md:text-lg p-2 md:p-0"
           onClick={toggleMenu}
         >
           Leetcode
         </a>
+        <a
+          href="/about" //update this to the correct route
+          className="text-base md:text-lg p-2 md:p-0"
+          onClick={toggleMenu}
+        >
+          About Us
+        </a>
       </div>
 
       {isOpen && (

web/src/components/SideNav.tsx

@@ -1,10 +1,11 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
-import App from "./App.tsx";
+import { RouterProvider } from "react-router-dom";
+import { router } from "./router.js";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
-  </StrictMode>,
+    <RouterProvider router={router} />
+  </StrictMode>
 );

web/src/main.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const AboutUs = () => {
+  return (
+    <div>
+      <h1>About Us</h1>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </p>
+    </div>
+  );
+};
+
+export default AboutUs;

web/src/pages/AboutUs.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import PopularActivities from "../components/PopularActivities";
+import WeeklySchedule from "../components/WeeklySchedule";
+
+import PersonalBests from "../components/PersonalBests";
+
+const Home = () => {
+  return (
+    <div>
+      <div className="flex flex-col flex-1 w-full p-4 md:p-8 overflow-y-auto min-h-0">
+        <PopularActivities />
+        <div className="flex flex-col md:flex-row gap-4 md:gap-8 mt-8">
+          <div className="w-full md:w-1/2">
+            <WeeklySchedule />
+          </div>
+          <div className="w-full md:w-1/2">
+            <PersonalBests />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Home;

web/src/pages/Home.tsx

@@ -0,0 +1,16 @@
+import { createBrowserRouter } from "react-router-dom";
+import App from "./App.tsx";
+
+import AboutUs from "./pages/AboutUs.tsx";
+import Home from "./pages/Home.tsx";
+export const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+
+    children: [
+      { path: "about", element: <AboutUs /> },
+      { path: "/", element: <Home /> },
+    ],
+  },
+]);