Implemented a basic router

.idea/jsLinters/eslint.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EslintConfiguration">
+    <work-dir-patterns value="$PROJECT_DIR$" />
+  </component>
+</project>
\ No newline at end of file

package.json

@@ -15,6 +15,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "typescript": "~4.1.5"
   },
@@ -44,13 +45,15 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.13.15",
+    "@types/react-router-dom": "^5.1.7",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
-        "eslint": "^7.25.0",
-        "prettier": "2.2.1",
+    "eslint": "^7.27.0",
     "eslint-config-prettier": "^8.3.0",
+    "eslint-config-react": "^1.1.7",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
-        "eslint-plugin-promise": "^4.3.1"
+    "eslint-plugin-promise": "^4.3.1",
+    "prettier": "2.2.1"
   }
 }

src/App.css

-.App {
-    text-align: center;
-}
-
-.App-logo {
-    height: 40vmin;
-    pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    .App-logo {
-        animation: App-logo-float infinite 3s ease-in-out;
-    }
-}
-
-.App-header {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-}
-
-.App-link {
-    color: rgb(112, 76, 182);
-}
-
-@keyframes App-logo-float {
-    0% {
-        transform: translateY(0);
-    }
-    50% {
-        transform: translateY(10px);
-    }
-    100% {
-        transform: translateY(0px);
-    }
-}

src/App.tsx

-import React from 'react'
-import './App.css'
-
-function App() {
-    return (
-        <div className="App">
-            <h1 style={{ color: 'green' }}>UniSport</h1>
-        </div>
-    )
-}
-
-export default App

src/components/App.tsx

+import React, {Suspense} from 'react'
+import {
+    BrowserRouter as Router,
+    Switch,
+    Route,
+} from "react-router-dom";
+import UserHome from "./user/homeComponent";
+
+const AdminComponent = React.lazy(() => import('./admin'))
+
+function App() {
+    return (
+        <Router>
+            <div className="App">
+                <h1 style={{color: 'green'}}>UniSport</h1>
+            </div>
+            <Switch>
+                <Route path="/admin">
+                    <Suspense fallback={<div>Loading AdminComponent...</div>}>
+                        <AdminComponent/>
+                    </Suspense>
+                </Route>
+                <Route path="">
+                    <UserHome/>
+                </Route>
+            </Switch>
+        </Router>
+    )
+}
+
+export default App

src/components/admin/index.tsx

+import React from 'react';
+
+const AdminHome = () => {
+    return (<div>Placeholder for Admin Interface</div>)
+}
+export default AdminHome;
\ No newline at end of file

src/components/user/homeComponent.tsx

+import React from 'react';
+
+const UserHome = () => {
+    return (<div>Placeholder for the page that will allow the user to start the quiz</div>)
+}
+export default UserHome;
\ No newline at end of file

src/index.css

-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;
-}

src/index.tsx

 import React from 'react'
 import ReactDOM from 'react-dom'
-import './index.css'
-import App from './App'
+import App from './components/App'
 import {store} from './redux/store'
 import {Provider} from 'react-redux'
 import * as serviceWorker from './serviceWorker'