Feature/submit success page thy doan

.github/workflows/lint.yml

@@ -1,28 +1,27 @@
-name: Lint and style checks
-
-on:
-  pull_request:
-    branches:
-      main
-
-jobs:
-  backend:
-    name: Backend lint and style check
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-    - working-directory: backend # Change this to the name of your backend directory
-      run: |
-        npm ci
-        npm run lint-check
-  frontend:
-    name: Frontend lint and style check
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-    - working-directory: frontend # Change this to the name of your frontend directory
-      run: |
-        npm ci
-        npm run lint-check
+name: Lint and style checks
+
+on:
+  pull_request:
+    branches: main
+
+jobs:
+  backend:
+    name: Backend lint and style check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - working-directory: backend # Change this to the name of your backend directory
+        run: |
+          npm ci --legacy-peer-deps
+          npm run lint-check
+  frontend:
+    name: Frontend lint and style check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - working-directory: frontend # Change this to the name of your frontend directory
+        run: |
+          npm ci --legacy-peer-deps
+          npm run lint-check

backend/.eslintcache

@@ -1 +1 @@
-[{"/Users/alexisvega/Documents/test-dev-project-SP26/backend/eslint.config.mjs":"1","/Users/alexisvega/Documents/test-dev-project-SP26/backend/package.json":"2","/Users/alexisvega/Documents/test-dev-project-SP26/backend/prettier.config.mjs":"3","/Users/alexisvega/Documents/test-dev-project-SP26/backend/src/index.ts":"4","/Users/alexisvega/Documents/test-dev-project-SP26/backend/tsconfig.json":"5"},{"size":2310,"mtime":1778549402658,"results":"6","hashOfConfig":"7"},{"size":1235,"mtime":1778551875648,"results":"8","hashOfConfig":"9"},{"size":506,"mtime":1778549402409,"results":"10","hashOfConfig":"7"},{"size":366,"mtime":1778550302952,"results":"11","hashOfConfig":"12"},{"size":401,"mtime":1778550175418,"results":"13","hashOfConfig":"14"},{"filePath":"15","messages":"16","suppressedMessages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"ox2twy",{"filePath":"18","messages":"19","suppressedMessages":"20","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1q4ttqb",{"filePath":"21","messages":"22","suppressedMessages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","suppressedMessages":"26","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"14awezl",{"filePath":"27","messages":"28","suppressedMessages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1xwcv0w","/Users/alexisvega/Documents/test-dev-project-SP26/backend/eslint.config.mjs",[],[],"/Users/alexisvega/Documents/test-dev-project-SP26/backend/package.json",[],[],"/Users/alexisvega/Documents/test-dev-project-SP26/backend/prettier.config.mjs",[],[],"/Users/alexisvega/Documents/test-dev-project-SP26/backend/src/index.ts",[],[],"/Users/alexisvega/Documents/test-dev-project-SP26/backend/tsconfig.json",[],[]]
+[{"C:\\Users\\Lynx\\Documents\\School\\Transfer\\UC\\UCSD\\Github\\test-dev-project-SP26\\backend\\eslint.config.mjs":"1","C:\\Users\\Lynx\\Documents\\School\\Transfer\\UC\\UCSD\\Github\\test-dev-project-SP26\\backend\\package.json":"2","C:\\Users\\Lynx\\Documents\\School\\Transfer\\UC\\UCSD\\Github\\test-dev-project-SP26\\backend\\prettier.config.mjs":"3","C:\\Users\\Lynx\\Documents\\School\\Transfer\\UC\\UCSD\\Github\\test-dev-project-SP26\\backend\\src\\index.ts":"4","C:\\Users\\Lynx\\Documents\\School\\Transfer\\UC\\UCSD\\Github\\test-dev-project-SP26\\backend\\tsconfig.json":"5"},{"size":2310,"mtime":1779485694903,"results":"6","hashOfConfig":"7"},{"size":1235,"mtime":1779485694990,"results":"8","hashOfConfig":"9"},{"size":506,"mtime":1779485695002,"results":"10","hashOfConfig":"7"},{"size":366,"mtime":1779485695065,"results":"11","hashOfConfig":"12"},{"size":401,"mtime":1779485695072,"results":"13","hashOfConfig":"14"},{"filePath":"15","messages":"16","suppressedMessages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"i590ty",{"filePath":"18","messages":"19","suppressedMessages":"20","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1qsshfd",{"filePath":"21","messages":"22","suppressedMessages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","suppressedMessages":"26","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"19z74s",{"filePath":"27","messages":"28","suppressedMessages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1k5wbyy","C:\\Users\\Lynx\\Documents\\School\\Transfer\\UC\\UCSD\\Github\\test-dev-project-SP26\\backend\\eslint.config.mjs",[],[],"C:\\Users\\Lynx\\Documents\\School\\Transfer\\UC\\UCSD\\Github\\test-dev-project-SP26\\backend\\package.json",[],[],"C:\\Users\\Lynx\\Documents\\School\\Transfer\\UC\\UCSD\\Github\\test-dev-project-SP26\\backend\\prettier.config.mjs",[],[],"C:\\Users\\Lynx\\Documents\\School\\Transfer\\UC\\UCSD\\Github\\test-dev-project-SP26\\backend\\src\\index.ts",[],[],"C:\\Users\\Lynx\\Documents\\School\\Transfer\\UC\\UCSD\\Github\\test-dev-project-SP26\\backend\\tsconfig.json",[],[]]

frontend/app/submit/success/page.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import Image from "next/image";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+
+import styles from "./success.module.css";
+
+export default function ConfirmationPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const name = searchParams.get("name") || "Karen";
+  const avatar = searchParams.get("avatar") || "";
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      router.push("/leaderboard");
+    }, 3000);
+    return () => clearTimeout(timer);
+  }, [router]);
+
+  return (
+    <div className={styles.confirmationContainer}>
+      <h1 className={styles.thankYouHeading}>
+        Thanks for your submission,
+        <br />
+        <span>{name}!</span>
+      </h1>
+      <p className={styles.redirectMessage}>Redirecting to leaderboard...</p>
+
+      <div className={styles.avatar}>
+        {avatar ? (
+          <Image src={avatar} alt={name} width={173} height={173} />
+        ) : (
+          <Image src="/avatar.png" alt={`${name} avatar`} width={173} height={173} />
+        )}
+      </div>
+
+      <div className={styles.spinner} />
+    </div>
+  );
+}

frontend/app/submit/success/success.module.css

@@ -0,0 +1,71 @@
+:root {
+  --color-background: #0c2b35;
+  --color-accent: #debb01;
+  --color-text: white;
+  --color-border: black;
+  --color-spinner: rgba(255, 255, 255, 0.2);
+}
+
+.confirmationContainer {
+  background-color: var(--color-background);
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  text-align: center;
+  padding: 1.5rem;
+  padding-top: 2.5rem;
+}
+
+.thankYouHeading {
+  color: var(--color-accent);
+  font-size: clamp(1.5rem, 5.5vw, 2rem);
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+  margin: 0;
+  padding: 0 2rem;
+}
+
+.thankYouHeading span {
+  font-size: clamp(2rem, 10vw, 3rem);
+}
+
+.avatar {
+  width: min(173px, 43vw);
+  height: min(173px, 43vw);
+  border-radius: 50%;
+  overflow: hidden;
+  margin-bottom: 0.5rem;
+}
+
+.avatarPlaceholder {
+  width: 100%;
+  height: 100%;
+  background-color: #888;
+}
+
+.spinner {
+  width: min(48px, 12vw);
+  height: min(48px, 12vw);
+  margin-top: 1rem;
+  border-radius: 50%;
+  border: 3px solid var(--color-spinner);
+  border-top-color: white;
+  animation: spin 0.9s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.redirectMessage {
+  color: white;
+  font-size: clamp(0.875rem, 3.5vw, 1.25rem);
+  font-weight: 400;
+  margin-bottom: 1rem;
+}

frontend/app/welcome/page.tsx

@@ -0,0 +1,21 @@
+import styles from "./welcome.module.css";
+
+export default function WelcomePage() {
+  return (
+    <main className={styles.container}>
+      <button className={styles.backButton}>
+        <img src="ep_back.svg" alt="go back button" />
+      </button>
+
+      <h1 className={styles.greeting}>
+        Welcome, <br />
+        Caleb!
+      </h1>
+      <p className={styles.loadMessage}>Logging you in now...</p>
+      <div className={styles.avatar}>
+        <img src="Ellipse3819.svg" alt="Caleb avatar" />
+      </div>
+      <div className={styles.spinner} />
+    </main>
+  );
+}

frontend/app/welcome/welcome.module.css

@@ -0,0 +1,70 @@
+:root {
+  --color-background: #0c2b35;
+  --color-accent: #debb01;
+  --color-text: white;
+  --color-border: black;
+  --color-spinner: rgba(255, 255, 255, 0.2);
+}
+
+.container {
+  background-color: var(--color-background);
+  font-family: Rubik, sans-serif;
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  text-align: center;
+}
+
+.backButton {
+  position: absolute;
+  top: 1.25rem;
+  left: 1.25rem;
+  cursor: pointer;
+}
+
+.greeting {
+  color: var(--color-accent);
+  font-size: clamp(2rem, 10vw, 3rem);
+  font-weight: 700;
+  line-height: 1;
+  margin: 0;
+}
+
+.loadMessage {
+  color: var(--color-text);
+  font-size: clamp(0.875rem, 3.5vw, 1.25rem);
+  font-weight: 400;
+  line-height: 1;
+  margin: 0;
+}
+
+.avatar {
+  width: min(173px, 43vw);
+  height: min(173px, 43vw);
+  border-radius: 50%;
+  border: 3px solid var(--color-border);
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.spinner {
+  width: min(48px, 12vw);
+  height: min(48px, 12vw);
+  border-radius: 50%;
+  border: 3px solid var(--color-spinner);
+  border-top-color: var(--color-text);
+  animation: spin 0.9s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}