endpoint is running

Frontend/package-lock.json

@@ -12,6 +12,7 @@
         "@splinetool/react-spline": "^4.1.0",
         "@splinetool/runtime": "^1.11.2",
         "@tailwindcss/vite": "^4.1.17",
+        "axios": "^1.13.2",
         "clsx": "^2.1.1",
         "dayjs": "^1.11.19",
         "framer-motion": "^12.23.24",
@@ -2159,6 +2160,23 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
+      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2240,6 +2258,19 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2317,6 +2348,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2520,6 +2563,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -2529,6 +2581,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.249",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.249.tgz",
@@ -2549,6 +2615,51 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-toolkit": {
       "version": "1.41.0",
       "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.41.0.tgz",
@@ -2931,6 +3042,42 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/framer-motion": {
       "version": "12.23.24",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
@@ -2972,6 +3119,15 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -2982,6 +3138,43 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -3008,6 +3201,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -3031,6 +3236,45 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -3533,6 +3777,15 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3557,6 +3810,27 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3776,6 +4050,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",

Frontend/package.json

@@ -13,6 +13,7 @@
     "@splinetool/react-spline": "^4.1.0",
     "@splinetool/runtime": "^1.11.2",
     "@tailwindcss/vite": "^4.1.17",
+    "axios": "^1.13.2",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
     "framer-motion": "^12.23.24",

Frontend/src/App.tsx

@@ -1,69 +1,67 @@
-import React, { useState } from "react";
+import React from "react";
 import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
+
+import Home from "./pages/home";
 import Dashboard from "./pages/dashboard";
 import Notes from "./pages/note";
 import AIInterview from "./pages/AiInterview";
 import Quize from "./pages/quize";
-import Home from "./pages/home";
 import Sidebar from "./components/dashboard/Sidebar";
 
-const App: React.FC = () => {
-  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+import { AuthProvider, useAuth } from "./components/context/AuthContext";
+import ProtectedRoute from "./routes/ProtectedRoute";
 
-  const handleLogin = () => {
-    setIsAuthenticated(true);
-  };
-
-  const handleLogout = () => {
-    setIsAuthenticated(false);
-  };
+const DashboardLayout = () => {
+  const { logout } = useAuth();
 
   return (
-    <Router>
-      <Routes>
+    <div className="flex h-screen bg-gray-100">
+      <Sidebar onLogout={logout} />
 
-        {/* Public Route */}
-        <Route
-          path="/"
-          element={
-            isAuthenticated ? (
-              <Navigate to="/dashboard" replace />
-            ) : (
-              <Home onLogin={handleLogin} />
-            )
-          }
-        />
+      <main className="flex-1 overflow-y-auto">
+        <Routes>
+          <Route path="/dashboard" element={<Dashboard />} />
+          <Route path="/notes" element={<Notes />} />
+          <Route path="/AIInterview" element={<AIInterview />} />
+          <Route path="/quize" element={<Quize />} />
+          <Route path="*" element={<Navigate to="/dashboard" />} />
+        </Routes>
+      </main>
+    </div>
+  );
+};
 
-        {/* Protected Routes */}
-        <Route
-          path="/*"
-          element={
-            isAuthenticated ? (
-              <div className="flex h-screen bg-gray-100">
+const App: React.FC = () => {
+  return (
+    <AuthProvider>
+      <Router>
+        <Routes>
+          
+          {/* Public Home */}
+          <Route path="/" element={<HomeWrapper />} />
+
+          {/* Protected all dashboard routes */}
+          <Route
+            path="/*"
+            element={
+              <ProtectedRoute>
+                <DashboardLayout />
+              </ProtectedRoute>
+            }
+          />
 
-                {/* Sidebar (only once) */}
-                <Sidebar onLogout={handleLogout} />
+        </Routes>
+      </Router>
+    </AuthProvider>
+  );
+};
 
-                {/* Main Content */}
-                <main className="flex-1 overflow-y-auto">
-                  <Routes>
-                    <Route path="/dashboard" element={<Dashboard />} />
-                    <Route path="/notes" element={<Notes />} />
-                    <Route path="/AIInterview" element={<AIInterview />} />
-                    <Route path="/quize" element={<Quize />} />
-                  </Routes>
-                </main>
+const HomeWrapper = () => {
+  const { isAuthenticated, login } = useAuth();
 
-              </div>
-            ) : (
-              <Navigate to="/" replace />
-            )
-          }
-        />
+  if (isAuthenticated) return <Navigate to="/dashboard" replace />;
 
-      </Routes>
-    </Router>
-  );
+  return <Home onLogin={login} />;
 };
 
 export default App;

Frontend/src/api/api.ts

@@ -0,0 +1,7 @@
+import axios from "axios";
+
+const API = axios.create({
+  baseURL: "http://localhost:8000/api/v1",
+});
+
+export default API;

Frontend/src/components/auth/SignIn.tsx

@@ -1,109 +1,84 @@
-import React, { type FormEvent } from 'react'; // FIXED: Use 'type' import for FormEvent
-import { Mail, Lock, LogIn, Chrome, X } from 'lucide-react'; // Added 'X' icon for close button
+import React, { useState, type FormEvent } from "react";
+import { Mail, Lock, LogIn, Chrome } from "lucide-react";
+import API from "../../api/api";
 
 interface SignInProps {
   onClose: () => void;
   onSwitchToSignUp: () => void;
-  onAuthSuccess: () => void; // New prop to handle successful auth
+  onAuthSuccess: () => void;
 }
 
 const SignIn: React.FC<SignInProps> = ({ onClose, onSwitchToSignUp, onAuthSuccess }) => {
-  
-  const handleSubmit = (e: FormEvent) => {
+  // const [email, setEmail] = useState("");
+  const [username, setUserName] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+
+  const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
-    // TODO: Add your actual authentication logic here
-    
-    // Simulate successful login
-    onAuthSuccess();
-  };
+    setError("");
 
-  const handleGoogleSignIn = () => {
-    // TODO: Add Google OAuth logic here
-    // For now, simulate successful login
-    onAuthSuccess();
+    try {
+      const res = await API.post("/auth/login", {
+        username: username,   // 🔥 FastAPI expects `username` (OAuth2PasswordRequestForm)
+        password,
+      });
+
+      localStorage.setItem("token", res.data.access_token);
+      onAuthSuccess();
+    } catch (err: any) {
+      setError(err.response?.data?.detail || "Login failed");
+    }
   };
 
   return (
-    <> 
+    <>
       <h2 className="text-3xl font-bold mb-8 text-center text-white">
         Welcome Back
       </h2>
 
-      {/* Sign In Form */}
+      {error && <p className="text-red-400 text-center mb-3">{error}</p>}
+
       <form className="space-y-5" onSubmit={handleSubmit}>
-        {/* Email Input */}
         <div>
-          <label htmlFor="email" className="block text-sm font-medium mb-1 text-gray-300">
-            Email Address
-          </label>
+          <label className="block text-sm mb-1 text-gray-300">Email</label>
           <div className="relative">
-            <Mail className="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-400" />
+            <Mail className="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-blue-400" />
             <input
-              id="email"
-              type="email"
-              placeholder="you@example.com"
-              className="w-full pl-10 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 bg-slate-800 border-slate-700 text-white focus:ring-blue-500 transition-colors"
+              type="string"
+              placeholder="username or email"
+              value={username}
+              onChange={(e) => setUserName(e.target.value)}
+              className="w-full pl-10 py-3 bg-slate-800 border border-slate-700 text-white rounded-lg"
               required
             />
           </div>
         </div>
 
-        {/* Password Input */}
         <div>
-          <label htmlFor="password" className="block text-sm font-medium mb-1 text-gray-300">
-            Password
-          </label>
+          <label className="block text-sm mb-1 text-gray-300">Password</label>
           <div className="relative">
-            <Lock className="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-400" />
+            <Lock className="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-blue-400" />
             <input
-              id="password"
-              type="password"
+              type="string"
               placeholder="••••••••"
-              className="w-full pl-10 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 bg-slate-800 border-slate-700 text-white focus:ring-blue-500 transition-colors"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full pl-10 py-3 bg-slate-800 border border-slate-700 text-white rounded-lg"
               required
             />
           </div>
         </div>
 
-        {/* Sign In Button */}
-        <button
-          type="submit"
-          // FIXED: Changed bg-gradient-to-r to bg-linear-to-r (canonical class)
-          className="w-full px-5 py-3 rounded-lg bg-linear-to-r from-blue-500 to-gray-500 hover:from-blue-600 hover:to-blue-500 transition shadow-lg shadow-blue-500/50 text-lg font-semibold flex items-center justify-center gap-2 mt-6 text-white"
-        >
+        <button className="w-full px-5 py-3 rounded-lg bg-linear-to-r from-blue-500 to-gray-500 text-white flex items-center justify-center gap-2">
           <LogIn className="w-5 h-5" />
           Sign In
         </button>
       </form>
 
-      <div className="flex items-center my-6">
-        {/* FIXED: Changed flex-grow to grow (canonical class) */}
-        <div className="grow border-t border-slate-700"></div>
-        {/* FIXED: Changed flex-shrink to shrink (canonical class) */}
-        <span className="shrink mx-4 text-sm text-gray-400">OR</span>
-        {/* FIXED: Changed flex-grow to grow (canonical class) */}
-        <div className="grow border-t border-slate-700"></div>
-      </div>
-
-      {/* Social Sign In */}
-      <button
-        type="button"
-        onClick={handleGoogleSignIn}
-        className="w-full px-5 py-3 rounded-lg border-2 border-blue-400 text-blue-400 hover:bg-blue-400/10 transition-all font-semibold flex items-center justify-center gap-3 bg-slate-900"
-      >
-        <Chrome className="w-5 h-5" />
-        Sign In with Google
-      </button>
-
       <p className="mt-8 text-center text-sm text-gray-400">
-        Don't have an account?
-        <button 
-          type="button" 
-          onClick={onSwitchToSignUp} 
-          className="ml-2 font-medium text-blue-400 hover:text-blue-300 transition-colors"
-        >
-          Sign Up
-        </button>
+        Don’t have an account?
+        <button onClick={onSwitchToSignUp} className="ml-2 text-blue-400">Sign Up</button>
       </p>
     </>
   );

Frontend/src/components/auth/SignUp.tsx

@@ -1,135 +1,126 @@
-// src/components/SignUp.tsx - CORRECTED CODE
-
-import React from 'react';
-import { User, Mail, Lock, UserPlus, Chrome, X } from 'lucide-react'; 
+import React, { useState } from "react";
+import { User, Mail, Lock, UserPlus, Chrome } from "lucide-react";
+import API from "../../api/api";
 
 interface SignUpProps {
-    onClose: () => void;
-    onSwitchToSignIn: () => void;
-    onAuthSuccess: () => void;
+  onClose: () => void;
+  onSwitchToSignIn: () => void;
+  onAuthSuccess: () => void;
 }
 
-const SignUp: React.FC<SignUpProps> = ({ onClose, onSwitchToSignIn, onAuthSuccess }) => {
-    
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-        // ... (Authentication logic remains the same)
-        
-        // Simulate successful first-time sign-up (which logs them in)
-        console.log("Sign Up successful. Logging in and redirecting to dashboard.");
-        onAuthSuccess();
-    };
-
-    const handleGoogleSignUp = () => {
-        // ... (Google Auth logic remains the same)
-        onAuthSuccess();
-    };
-
-    return (
-        <>
-            <h2 className="text-3xl font-bold mb-8 text-center text-white">
-                Create Your Account
-            </h2>
-            {/* --- Sign Up Form --- */}
-            <form className="space-y-5" onSubmit={handleSubmit}>
-                {/* Name Input */}
-                <div>
-                    <label htmlFor="name" className="block text-sm font-medium mb-1 text-gray-300">Full Name</label>
-                    <div className="relative">
-                        <User className="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-400" />
-                        <input
-                            id="name"
-                            type="text"
-                            placeholder="John Doe"
-                            className="w-full pl-10 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 bg-slate-800 border-slate-700 text-white focus:ring-blue-500 transition-colors"
-                            required
-                        />
-                    </div>
-                </div>
-
-                {/* Email Input */}
-                <div>
-                    <label htmlFor="email" className="block text-sm font-medium mb-1 text-gray-300">Email Address</label>
-                    <div className="relative">
-                        <Mail className="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-400" />
-                        <input
-                            id="email"
-                            type="email"
-                            placeholder="you@example.com"
-                            className="w-full pl-10 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 bg-slate-800 border-slate-700 text-white focus:ring-blue-500 transition-colors"
-                            required
-                        />
-                    </div>
-                </div>
-
-                {/* Password Input */}
-                <div>
-                    <label htmlFor="password" className="block text-sm font-medium mb-1 text-gray-300">Password</label>
-                    <div className="relative">
-                        <Lock className="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-400" />
-                        <input
-                            id="password"
-                            type="password"
-                            placeholder="••••••••"
-                            className="w-full pl-10 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 bg-slate-800 border-slate-700 text-white focus:ring-blue-500 transition-colors"
-                            required
-                        />
-                    </div>
-                </div>
-
-                {/* Confirm Password Input */}
-                <div>
-                    <label htmlFor="confirm-password" className="block text-sm font-medium mb-1 text-gray-300">Confirm Password</label>
-                    <div className="relative">
-                        <Lock className="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-400" />
-                        <input
-                            id="confirm-password"
-                            type="password"
-                            placeholder="••••••••"
-                            className="w-full pl-10 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 bg-slate-800 border-slate-700 text-white focus:ring-blue-500 transition-colors"
-                            required
-                        />
-                    </div>
-                </div>
-
-                {/* Sign Up Button */}
-                <button
-                    type="submit"
-                    // FIXED: Changed bg-gradient-to-r to bg-linear-to-r (canonical class)
-                    className="w-full px-5 py-3 rounded-lg bg-linear-to-r from-blue-500 to-gray-500 hover:from-blue-600 hover:to-blue-500 transition shadow-lg shadow-blue-500/50 text-lg font-semibold flex items-center justify-center gap-2 mt-6 text-white"
-                >
-                    <UserPlus className="w-5 h-5" />
-                    Sign Up
-                </button>
-            </form>
-
-            <div className="flex items-center my-6">
-                {/* FIXED: Changed flex-grow to grow (canonical class) */}
-                <div className="grow border-t border-slate-700"></div>
-                {/* FIXED: Changed flex-shrink to shrink (canonical class) */}
-                <span className="shrink mx-4 text-sm text-gray-400">OR</span>
-                {/* FIXED: Changed flex-grow to grow (canonical class) */}
-                <div className="grow border-t border-slate-700"></div>
-            </div>
-
-            {/* --- Social Sign Up --- */}
-            <button
-                type="button"
-                onClick={handleGoogleSignUp}
-                className="w-full px-5 py-3 rounded-lg border-2 border-blue-400 text-blue-400 hover:bg-blue-400/10 transition-all font-semibold flex items-center justify-center gap-3 bg-slate-900"
-            >
-                <Chrome className="w-5 h-5" />
-                Sign Up with Google
-            </button>
-
-            <p className="mt-8 text-center text-sm text-gray-400">
-                Already have an account?
-                <button type="button" onClick={onSwitchToSignIn} className="ml-2 font-medium text-blue-400 hover:text-blue-300 transition-colors">
-                    Sign In
-                </button>
-            </p>
-        </>
-    );
+const SignUp: React.FC<SignUpProps> = ({ onSwitchToSignIn, onAuthSuccess }) => {
+  const [fullName, setFullName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [error, setError] = useState("");
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    if (password !== confirm) {
+      return setError("Passwords do not match.");
+    }
+
+    try {
+      await API.post("/auth/register", {
+        full_name: fullName,
+        email,
+        password,
+      });
+
+      const loginRes = await API.post("/auth/login", {
+        username: email,
+        password,
+      });
+
+      localStorage.setItem("token", loginRes.data.access_token);
+      onAuthSuccess();
+    } catch (err: any) {
+      setError(err.response?.data?.detail || "Registration failed");
+    }
+  };
+
+  return (
+    <>
+      <h2 className="text-3xl font-bold mb-8 text-center text-white">
+        Create Your Account
+      </h2>
+
+      {error && <p className="text-red-400 text-center mb-3">{error}</p>}
+
+      <form className="space-y-5" onSubmit={handleSubmit}>
+        <div>
+          <label className="text-gray-300">Full Name</label>
+          <div className="relative">
+            <User className="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-blue-400" />
+            <input
+              value={fullName}
+              onChange={(e) => setFullName(e.target.value)}
+              type="text"
+              className="w-full pl-10 py-3 bg-slate-800 border border-slate-700 text-white rounded-lg"
+              required
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="text-gray-300">Email</label>
+          <div className="relative">
+            <Mail className="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-blue-400" />
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full pl-10 py-3 bg-slate-800 border border-slate-700 text-white rounded-lg"
+              required
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="text-gray-300">Password</label>
+          <div className="relative">
+            <Lock className="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-blue-400" />
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full pl-10 py-3 bg-slate-800 border border-slate-700 text-white rounded-lg"
+              required
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="text-gray-300">Confirm Password</label>
+          <div className="relative">
+            <Lock className="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-blue-400" />
+            <input
+              type="password"
+              value={confirm}
+              onChange={(e) => setConfirm(e.target.value)}
+              className="w-full pl-10 py-3 bg-slate-800 border border-slate-700 text-white rounded-lg"
+              required
+            />
+          </div>
+        </div>
+
+        <button className="w-full px-5 py-3 rounded-lg bg-linear-to-r from-blue-500 to-gray-500 text-white flex items-center justify-center gap-2">
+          <UserPlus className="w-5 h-5" />
+          Sign Up
+        </button>
+      </form>
+
+      <p className="mt-8 text-center text-sm text-gray-400">
+        Already have an account?
+        <button onClick={onSwitchToSignIn} className="text-blue-400 ml-2">
+          Sign In
+        </button>
+      </p>
+    </>
+  );
 };
 
 export default SignUp;

Frontend/src/components/context/AuthContext.tsx

@@ -0,0 +1,28 @@
+import React, { createContext, useContext, useState } from "react";
+
+interface AuthContextType {
+  isAuthenticated: boolean;
+  login: () => void;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+  const login = () => setIsAuthenticated(true);
+  const logout = () => setIsAuthenticated(false);
+
+  return (
+    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be inside AuthProvider");
+  return ctx;
+};

Frontend/src/routes/ProtectedRoute.tsx

@@ -0,0 +1,14 @@
+import { Navigate } from "react-router-dom";
+import { useAuth } from "../components/context/AuthContext";
+
+const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const { isAuthenticated } = useAuth();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/" replace />;
+  }
+
+  return children;
+};
+
+export default ProtectedRoute;