compleated all the given assingment tasks except the backend function…

package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.11.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

src/App.jsx

@@ -1,59 +1,32 @@
-/*
- * Temporary problems array schema
- */
-const problems = [{
-    title: "201. Bitwise AND of Numbers Range",
-    difficulty: "Medium",
-    acceptance: "42%"
-},{
-    title: "201. Bitwise AND of Numbers Range",
-    difficulty: "Medium",
-    acceptance: "412%"
-},
-    {
-        title: "202. Happy Number",
-        difficulty: "Easy",
-        acceptance: "54.9%"
-    },
-    {
-        title: "203. Remove Linked List Elements",
-        difficulty: "Hard",
-        acceptance: "42%"
-    }];
+import { Routes, Route } from "react-router-dom";
 
+import Login from "./elements/login";
+import SignUp from "./elements/signup";
+import SingleProblem from "./elements/singleproblem";
+import Problems from "./elements/problems";
+import NavBar from "./elements/navbar";
+import Explorer from "./elements/explorer";
 
 function App() {
-
-    /* Add routing here, routes look like -
-       /login - Login page
-       /signup - Signup page
-       /problemset/all/ - All problems (see problems array above)
-       /problems/:problem_slug - A single problem page
-     */
-
-    return (
-    <div>
-        Finish the assignment! Look at the comments in App.jsx as a starting point
-    </div>
-  )
+  return (
+    <>
+      <main>
+        <Routes>
+          <Route path="/" element={<NavBar />}>
+            <Route index element={<Explorer />}></Route>
+          </Route>
+          <Route path="/problems" element={<NavBar />}>
+            <Route index element={<Problems />}></Route>
+          </Route>
+          <Route path="/problem/:id" element={<SingleProblem />}></Route>
+          <Route path="/login" element={<Login />}></Route>
+          <Route path="/signup" element={<SignUp />}></Route>
+        </Routes>
+      </main>
+    </>
+  );
 }
 
 // A demo component
-function ProblemStatement(props) {
-    const title = props.title;
-    const acceptance = props.acceptance;
-    const difficulty = props.difficulty;
 
-    return <tr>
-        <td>
-            {title}
-        </td>
-        <td>
-            {acceptance}
-        </td>
-        <td>
-            {difficulty}
-        </td>
-    </tr>
-}
-export default App
+export default App;

src/elements/explorer.css

@@ -0,0 +1,31 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+
+  }
+
+
+h1{
+    font-size: 50px;
+    color: rgba(139, 131, 17, 0.805);
+    text-align: center;
+  }
+  .questions-intro{
+    text-align: left;
+    margin-left: 1em;
+    padding:10px;
+    font-size: 20px;
+  }
+  .questions-intro p{
+    text-align: left;
+    margin-left: 1em;
+    padding:10px;
+    font-size: 20px;
+  }
+  .questions-intro{
+    text-align: left;
+    margin-left: 1em;
+    padding:10px;
+    font-size: 20px;
+  }

src/elements/explorer.jsx

@@ -0,0 +1,25 @@
+import "./explorer.css";
+
+function Explorer() {
+  return (
+    <>
+      {/* Finish the assignment! Look at the comments in App.jsx as a starting point */}
+
+      <h1>Welcome to PeetCode</h1>
+      <div className="questions-intro">
+        <h2>Some Questions-:</h2>
+        <h3>What do we do here?</h3>
+        <p>Here we Prectice interview questions</p>
+      </div>
+
+      <div className="questions-intro">
+        <h3>What do i get if i practice Questions</h3>
+        <p>
+          You will get some practice when solving questions in the interview
+        </p>
+      </div>
+    </>
+  );
+}
+
+export default Explorer;

src/elements/login.css

@@ -0,0 +1,45 @@
+#login {
+    width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #f2f2f2;
+    border-radius: 5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+
+  #login h2 {
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  #login #form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  #login input {
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+  }
+
+  #login button[type="submit"] {
+    padding: 10px 20px;
+    background-color: #4caf50;
+    color: #fff;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+
+  #login button[type="submit"]:hover {
+    background-color: #45a049;
+  }
+
+