feat: add skeleton navbar and routing capability (#35)

* feat: add skeleton navbar and routing capability

* style: add missing semicolon in index.tsx

* style: add missing semicolon in LandingPage.tsx

frontend/package.json

@@ -13,6 +13,7 @@
     "axios": "^1.6.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

frontend/src/App.tsx

@@ -1,33 +1,21 @@
 import React from 'react';
-import axios from 'axios';
-import logo from './logo.svg';
-import './App.css';
+import { Routes, Route } from 'react-router-dom';
 
-const apiCall = () => {
-  axios.get('http://localhost:9000').then((data) => {
-    console.log(data.data)
-  })
-}
+import Navbar from './components/Navbar/Navbar';
+import LandingPage from './components/LandingPage/LandingPage';
+import ProfilePage from './components/ProfilePage/ProfilePage';
+import NotFoundPage from './components/404Page/404Page';
 
-function App() {
+const App: React.FC = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <button onClick={apiCall}>Make API Call</button>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <Navbar />
+      <Routes>
+  	    <Route path="/" element={<LandingPage />} />
+  	    <Route path="/profile" element={<ProfilePage />} />
+  	    <Route path="*" element={<NotFoundPage />} />
+      </Routes>
+    </>
   );
 }
 

frontend/src/components/404Page/404Page.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const NotFoundPage: React.FC = () => <p>404: Not Found</p>;
+
+export default NotFoundPage;

frontend/src/components/LandingPage/LandingPage.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import axios from 'axios';
+
+const apiCall = () => {
+  axios.get('http://localhost:9000').then((data) => {
+    console.log(data.data);
+  })
+}
+
+const LandingPage: React.FC = () => {
+  return (
+    <div>
+      <button onClick={apiCall}>Get a message from Mickey!</button>
+    </div>
+  );
+}
+
+export default LandingPage;

frontend/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+const Navbar: React.FC = () => {
+  return (
+    <nav>
+      <NavLink to="/"><p>Home</p></NavLink>
+      <NavLink to="/profile"><p>Profile</p></NavLink>
+    </nav>
+  );
+}
+
+export default Navbar;

frontend/src/components/ProfilePage/ProfilePage.css

@@ -0,0 +1,6 @@
+.info-container {
+  margin: auto;
+  width: 50%;
+  border-style: solid;
+  border-color: black;
+}

frontend/src/components/ProfilePage/ProfilePage.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './ProfilePage.css';
+
+const ProfilePage: React.FC = () => {
+  return (
+    <div className="info-container">
+      <p>Name: Mickey Mouse</p>
+      <p>Email: [email protected]</p>
+    </div>
+  );
+}
+
+export default ProfilePage;

frontend/src/index.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
+
 root.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );