Aa home page

client/package.json

@@ -5,14 +5,14 @@
   "dependencies": {
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "^13.1.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.2",
-    "web-vitals": "^1.0.1"
+    "react-scripts": "4.0.3",
+    "web-vitals": "^1.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/App.js

@@ -1,21 +1,22 @@
-import CssBaseline from '@material-ui/core/CssBaseline';
-import {
-  BrowserRouter as Router,
-  Route,
-} from "react-router-dom";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import { BrowserRouter as Router, Route } from "react-router-dom";
 
-import Login from 'components/Login/Login';
-import './App.css';
+import Login from "components/Login/Login";
+import HomePage from "components/HomePage/HomePage";
+import "./App.css";
 
 function App() {
-  return (<>
-    <CssBaseline />
-    <Router>
-      <Route exact path="/">
-        <Login />
-      </Route>
-    </Router>
-  </>);
+  return (
+    <>
+      <CssBaseline />
+      <HomePage />
+      <Router>
+        <Route exact path="/">
+          <Login />
+        </Route>
+      </Router>
+    </>
+  );
 }
 
 export default App;

client/src/components/HomePage.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+
+const useStyles = makeStyles(() => ({
+  appBar: {
+    backgroundColor: "#eee",
+  },
+}));
+
+function HomePage() {
+  const classes = useStyles();
+
+  return (
+    <AppBar className={classes.appBar} position="static">
+      <Toolbar>
+        <Typography variant="h6" color="primary">
+          SDMM FLASHCARD APP
+        </Typography>
+      </Toolbar>
+    </AppBar>
+  );
+}
+
+export default HomePage;

client/src/components/HomePage/HomePage.css

@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");