Created all necessary routes and connected with server

package.json

@@ -9,13 +9,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "bootstrap": "^5.3.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^3.1.0",
+    "react-router-dom": "^6.16.0",
     "vite": "^4.2.0"
   }
 }

src/App.jsx

@@ -1,59 +1,77 @@
-/*
- * 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 React, { useState } from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import Home from './pages/Home';
+import Blogs from './pages/Blogs';
+import Contact from './pages/Contact';
+import Layout from './pages/Layout';
+import Login from './pages/Login';
+import Signup from './pages/Signup';
+import SignupSuccess from './pages/SignupSucess';
+import Problems from './pages/Problems';
+import ProblemDetails from './pages/ProblemDetails';
+import NoPage from './pages/noPage';
 
 function App() {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [problemId, setProblemId] = useState(null);
+  const [userId, setUserId] = useState(null);
 
-    /* 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>
-  )
-}
+  // Function to simulate a login
+  const login = (token) => {
+    localStorage.setItem('Token', token);
+
+    setIsAuthenticated(true);
+  };
+
+  // Function to simulate a logout
+  const logout = () => {
+    localStorage.removeItem('Token');
 
-// 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>
+    setIsAuthenticated(false);
+  };
+
+  // A function to handle authentication-based redirection
+  const requireAuth = (component) => {
+    return isAuthenticated ? component : <Navigate to="/login" />;
+  };
+
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route
+          path="/"
+          element={
+            <Layout isAuthenticated={isAuthenticated} onLogout={logout} />
+          }
+        >
+          <Route index element={<Home />} />
+          <Route path="/blogs" element={<Blogs />} />
+          <Route path="/contact" element={<Contact />} />
+          <Route path="/signup" element={<Signup />} />
+          <Route path="/signupsuccess" element={<SignupSuccess />} />
+          <Route
+            path="/login"
+            element={
+              <Login
+                onLogin={login}
+                setUserId={setUserId}
+                problemId={problemId}
+              />
+            }
+          />
+          <Route
+            path="/problems"
+            element={<Problems setProblemId={setProblemId} />}
+          />
+          <Route path="*" element={<NoPage />} />
+        </Route>
+        <Route
+          path="/problem/:pid/"
+          element={requireAuth(<ProblemDetails userId={userId} />)} // Protect this route with requireAuth
+        />
+      </Routes>
+    </BrowserRouter>
+  );
 }
-export default App
+
+export default App;

src/index.css

@@ -0,0 +1,67 @@
+.login-container {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.login-container h2 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.signup-container {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.signup-container h2 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+label {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+input[type='text'],
+input[type='email'],
+input[type='password'] {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  outline: none;
+}
+
+/* button {
+    width: 100%;
+    padding: 10px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background-color: #0056b3;
+  }
+   */
+
+.logo {
+  width: 3.125rem; /* Set the desired width */
+  height: auto; /* Automatically adjust height while maintaining aspect ratio */
+}

src/main.jsx

@@ -1,10 +1,11 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);