Added routing and set up main layout.

client/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

client/src/App.js

@@ -1,25 +0,0 @@
-import logo from "./logo.svg";
-import "./App.css";
-
-function App() {
-    return (
-        <div className="App">
-            <header className="App-header">
-                <img src={logo} className="App-logo" alt="logo" />
-                <p>
-                    Edit <code>src/App.js</code> and save to reload.
-                </p>
-                <a
-                    className="App-link"
-                    href="https://reactjs.org"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    Learn React
-                </a>
-            </header>
-        </div>
-    );
-}
-
-export default App;

client/src/Layout.js

@@ -0,0 +1,41 @@
+import "./styles/Layout.css";
+import "./styles/extra.css";
+import React from "react";
+import { NavLink, Route, Routes } from "react-router-dom";
+import Welcome from "./pages/Welcome";
+import Navbar from "react-bootstrap/Navbar";
+import { Container, Nav, NavbarBrand } from "react-bootstrap";
+import NavbarToggle from "react-bootstrap/esm/NavbarToggle";
+import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse";
+export default class Layout extends React.Component {
+    render() {
+        return (
+            <div id="app">
+                <header>
+                    <Navbar bg="light" expand="md">
+                        <Container>
+                            <NavbarBrand href="/">Sports Matcher</NavbarBrand>
+                            <NavbarToggle aria-controls="navigation"></NavbarToggle>
+                            <NavbarCollapse id="main-nav">
+                                <Nav className="me-auto">
+                                    <li className="nav-item">
+                                        <NavLink className="nav-link" to="/" >Home</NavLink>
+                                    </li>
+                                </Nav>
+                            </NavbarCollapse>
+                        </Container>
+                    </Navbar>
+                </header>
+                <main>
+                    <Routes>
+                        <Route path="/" element={<Welcome></Welcome>}>
+                        </Route>
+                    </Routes>
+                </main>
+                <footer>
+
+                </footer>
+            </div>
+        );
+    }
+}

client/src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

client/src/index.js

@@ -1,12 +1,14 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import "./index.css";
-import App from "./App";
+import Layout from "./Layout";
 import reportWebVitals from "./reportWebVitals";
-
+import { BrowserRouter } from "react-router-dom";
+import "bootstrap/dist/css/bootstrap.min.css"; // This could be optimized by importing individual css components.
 ReactDOM.render(
     <React.StrictMode>
-        <App />
+        <BrowserRouter>
+            <Layout />
+        </BrowserRouter>
     </React.StrictMode>,
     document.getElementById("root")
 );

client/src/pages/Welcome.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+export default class Welcome extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className="page-root">
+                <div id="welcome-jumbotron" className="jumbotron" >
+                    <h1>Sports Matcher</h1>
+                    <p>The best place to find a local match for a good game of your favourite sport!</p>
+                </div>
+            </div>
+        );
+    }
+}

client/src/styles/Layout.css

@@ -0,0 +1,16 @@
+.page-root,
+main,
+#app,
+#root {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+html,
+body {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}

client/src/styles/extra.css

@@ -0,0 +1,15 @@
+.jumbotron {
+  width: 100%;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 10rem;
+  padding-bottom: 0.75rem;
+  text-align: center;
+  background-size: cover;
+  background-color: black;
+  color: white;
+}
+
+.jumbotron h1 {
+  font-size: 1.5rem;
+}