Matt

Frontend/algoverse/README.md

@@ -1,3 +1,6 @@
+# What to do in order to get the project to work
+Run npm install command in terminal once you are located in the root of the frontend part of the project. This will install all dependencies required for the project to work in any computer.
+
 # Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

Frontend/algoverse/package.json

@@ -9,6 +9,8 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0",
+    "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

Frontend/algoverse/src/App.css

@@ -1,38 +1,5 @@
 .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);
-  }
+  background-color: #496a8e;
+  height: 100vh;
+  width: 100vw;
 }

Frontend/algoverse/src/App.js

@@ -1,5 +1,8 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import SideBar from "./components/SideBar";
+import SearchBar from "./components/SearchBar";
+import Home from "./components/pages/Home";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 function App() {
   return (

Frontend/algoverse/src/components/Home.css

@@ -0,0 +1,36 @@
+.home {
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+  background-color: #496a8e;
+}
+
+header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 10%;
+}
+
+input[type="text"] {
+  width: 50%;
+  height: 50%;
+  border-radius: 5px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.grid {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 70%;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 3px;
+}

Frontend/algoverse/src/components/SearchBar.css

@@ -0,0 +1,36 @@
+.container {
+  background-color: #334a64;
+  padding-top: 3vh;
+  padding-bottom: 3vh;
+  width: 40%;
+  min-width: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.search-bar {
+  background-color: white;
+  width: 40%;
+  border-radius: 0px;
+  height: 2.5rem;
+  padding: 0 15px;
+  box-shadow: 0px 0px 2px #ddd;
+  display: flex;
+  align-items: center;
+}
+
+input[type="text"] {
+  background-color: transparent;
+  border: none;
+  height: 100%;
+  font-size: 1.1rem;
+  width: 100%;
+  margin-left: 5px;
+}
+
+input:focus {
+  outline: none;
+}

Frontend/algoverse/src/components/SearchBar.js

@@ -0,0 +1,15 @@
+import "./SearchBar.css";
+import { FaSearch } from "react-icons/fa";
+
+function SearchBar() {
+  return (
+    <div className="container">
+      <div className="search-bar">
+        <FaSearch id="search-icon" />
+        <input type="text" placeholder="Search" />
+      </div>
+    </div>
+  );
+}
+
+export default SearchBar;

Frontend/algoverse/src/components/SideBar.css

@@ -0,0 +1,27 @@
+.container {
+  display: flex;
+}
+
+.side-bar {
+  height: 100%;
+  width: 200px;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: #334a64;
+  overflow-x: hidden;
+  padding-top: 50px;
+}
+
+.side-bar a {
+  padding: 6px 8px 6px 16px;
+  text-decoration: none;
+  font-size: 20px;
+  color: #818181;
+  display: block;
+}
+
+.side-bar a:hover {
+  color: #f1f1f1;
+}

Frontend/algoverse/src/components/SideBar.js

@@ -0,0 +1,15 @@
+import "./SideBar.css";
+
+function SideBar() {
+  return (
+    <div className="container">
+      <div className="side-bar">
+        <a>Sorting</a>
+        <a>Tree Search</a>
+        <a>Path Finding</a>
+      </div>
+    </div>
+  );
+}
+
+export default SideBar;

Frontend/algoverse/src/components/pages/Home.js

@@ -0,0 +1,39 @@
+/* eslint-disable jsx-a11y/img-redundant-alt */
+import "../../App.css";
+import "../Home.css";
+import React from "react";
+
+function Home() {
+  return (
+    <div className="home">
+      <div className="grid">
+        <div className="sorting">
+          <img
+            src="images/Sorting-img.png"
+            alt="description of image"
+            width="200"
+            height="200"
+          />
+        </div>
+        <div className="treeSearch">
+          <img
+            src="images/TreeSearch-img.png"
+            alt="description of image"
+            width="200"
+            height="200"
+          />
+        </div>
+        <div className="pathFinding">
+          <img
+            src="images/PathFinding-img.png"
+            alt="description of image"
+            width="200"
+            height="200"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Home;