setOpen(true)}
+ onMouseLeave={() => setOpen(false)}
+ >
+ setOpen(true)}
+ onBlur={(e) => {
+ if (!ref.current?.contains(e.relatedTarget as Node)) setOpen(false);
+ }}
+ >
+ My Account
+
+
+
+ );
+}
diff --git a/peerprep-frontend/src/components/Field.tsx b/peerprep-frontend/src/components/Field.tsx
new file mode 100644
index 0000000..d588c9e
--- /dev/null
+++ b/peerprep-frontend/src/components/Field.tsx
@@ -0,0 +1,16 @@
+import { InputHTMLAttributes } from "react";
+
+type Props = InputHTMLAttributes
+
+
+ setOpen(false)}
+ >
+ Settings
+
+
+
+
+
+ PeerPrep
+
+
+
+
+ Your Account
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+ Username
+fullstackengineer1234
++ +
+
+
+
+
+ Email Address
+e0702190@u.nus.edu
++ +
+
+ );
+}
diff --git a/peerprep-frontend/src/pages/Home.tsx b/peerprep-frontend/src/pages/Home.tsx
new file mode 100644
index 0000000..1bd6e15
--- /dev/null
+++ b/peerprep-frontend/src/pages/Home.tsx
@@ -0,0 +1,40 @@
+import hero from "@/assets/jose.png";
+import { Link } from "react-router-dom";
+
+export default function Home() {
+ return (
+ Reset your password
+
+
+ + Interview prep made easy +
+ ++ PeerPrep makes it easier than ever to prepare for tech interviews. + Simply pick a difficulty, pick a question category, and start practicing! +
+ +
+ 
+
+
+
+
+ Start Practicing
+
+
+ View Questions
+
+
+
+
+ );
+}
diff --git a/peerprep-frontend/src/pages/SignUp.tsx b/peerprep-frontend/src/pages/SignUp.tsx
new file mode 100644
index 0000000..f58f2b8
--- /dev/null
+++ b/peerprep-frontend/src/pages/SignUp.tsx
@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import Field from "@/components/Field";
+import { useAuth } from "@/context/AuthContext";
+
+export default function SignUp() {
+ const { login } = useAuth();
+ const nav = useNavigate();
+ const [form, set] = useState({ username: "", email: "", password: "", repeat: "" });
+
+ return (
+ + Let’s Start Practicing! +
+ + +
+
+ );
+}
diff --git a/peerprep-frontend/tailwind.config.js b/peerprep-frontend/tailwind.config.js
new file mode 100644
index 0000000..4849b4f
--- /dev/null
+++ b/peerprep-frontend/tailwind.config.js
@@ -0,0 +1,27 @@
+export default {
+ content: ["./index.html", "./src/**/*.{ts,tsx}"],
+ theme: {
+ extend: {
+ fontFamily: { sans: ["Inter", "ui-sans-serif", "system-ui"] },
+ colors: {
+ brand: {
+ 50: "#eef2ff",
+ 100: "#e0e7ff",
+ 500: "#2F6FED", // primary
+ 600: "#215BE0",
+ 700: "#1B4CBF",
+ },
+ ink: {
+ 900: "#0f172a", // headings
+ 700: "#334155", // body
+ }
+ },
+ boxShadow: {
+ card: "0 8px 24px rgba(15, 23, 42, 0.06)",
+ focus: "0 0 0 3px rgba(47, 111, 237, 0.35)"
+ },
+ borderRadius: { xl: "14px", "2xl": "20px" }
+ }
+ },
+ plugins: [],
+}
diff --git a/peerprep-frontend/tsconfig.json b/peerprep-frontend/tsconfig.json
new file mode 100644
index 0000000..6f3835a
--- /dev/null
+++ b/peerprep-frontend/tsconfig.json
@@ -0,0 +1,29 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": [
+ "ES2020",
+ "DOM",
+ "DOM.Iterable"
+ ],
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "strict": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": [
+ "src/*"
+ ]
+ },
+ "types": ["vite/client", "node"]
+ },
+ "include": [
+ "src"
+ ]
+}
diff --git a/peerprep-frontend/tsconfig.node.json b/peerprep-frontend/tsconfig.node.json
new file mode 100644
index 0000000..ad883d0
--- /dev/null
+++ b/peerprep-frontend/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler"
+ },
+ "include": [
+ "vite.config.ts"
+ ]
+}
diff --git a/peerprep-frontend/vite.config.ts b/peerprep-frontend/vite.config.ts
new file mode 100644
index 0000000..e84dd62
--- /dev/null
+++ b/peerprep-frontend/vite.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+ plugins: [react()],
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, './src'),
+ },
+ },
+ server: {
+ port: 5173,
+ open: true,
+ },
+});