YaleComputerSociety · Seb-G0 · Sep 26, 2025 · Apr 9, 2025 · Apr 18, 2025 · Apr 18, 2025
diff --git a/client/dist/assets/developers/AlanZhong.jpeg b/client/dist/assets/developers/AlanZhong.jpeg
diff --git a/client/dist/assets/developers/ChristianPhanhthourath.jpeg b/client/dist/assets/developers/ChristianPhanhthourath.jpeg
diff --git a/client/dist/assets/developers/ChristinaXu.jpeg b/client/dist/assets/developers/ChristinaXu.jpeg
diff --git a/client/dist/assets/developers/DohunKim.jpeg b/client/dist/assets/developers/DohunKim.jpeg
diff --git a/client/dist/assets/developers/QuntaoZheng.jpeg b/client/dist/assets/developers/QuntaoZheng.jpeg
diff --git a/client/dist/assets/developers/RyanFernandes.jpeg b/client/dist/assets/developers/RyanFernandes.jpeg
diff --git a/client/dist/assets/developers/SebastianGonzalez.jpeg b/client/dist/assets/developers/SebastianGonzalez.jpeg
diff --git a/client/dist/assets/developers/no-user.png b/client/dist/assets/developers/no-user.png
diff --git a/client/dist/assets/icons/github-icon.png b/client/dist/assets/icons/github-icon.png
diff --git a/client/dist/assets/icons/link-icon.png b/client/dist/assets/icons/link-icon.png
diff --git a/client/dist/assets/icons/link.svg b/client/dist/assets/icons/link.svg
diff --git a/client/dist/assets/icons/linkedin-icon.png b/client/dist/assets/icons/linkedin-icon.png
diff --git a/client/dist/assets/icons/new-link.png b/client/dist/assets/icons/new-link.png
diff --git a/client/dist/assets/icons/star-empty.svg b/client/dist/assets/icons/star-empty.svg
diff --git a/client/dist/assets/icons/star-full.svg b/client/dist/assets/icons/star-full.svg
diff --git a/client/dist/assets/icons/website-icon.png b/client/dist/assets/icons/website-icon.png
diff --git a/client/dist/assets/icons/ycs-icon.png b/client/dist/assets/icons/ycs-icon.png
diff --git a/client/dist/assets/icons/yura-icon.png b/client/dist/assets/icons/yura-icon.png
diff --git a/client/dist/assets/index-CDOBa6eK.css b/client/dist/assets/index-CDOBa6eK.css
diff --git a/client/dist/assets/index-CbSqCWf5.js b/client/dist/assets/index-CbSqCWf5.js
diff --git a/client/dist/assets/logos/RDB.png b/client/dist/assets/logos/RDB.png
diff --git a/client/dist/assets/logos/YURA.png b/client/dist/assets/logos/YURA.png
diff --git a/client/dist/assets/logos/paperclip.png b/client/dist/assets/logos/paperclip.png
diff --git a/client/dist/assets/logos/ylabs-blue.png b/client/dist/assets/logos/ylabs-blue.png
diff --git a/client/dist/assets/logos/ylabs-temp-blue.png b/client/dist/assets/logos/ylabs-temp-blue.png
diff --git a/client/dist/assets/logos/ylabs-temp.png b/client/dist/assets/logos/ylabs-temp.png
diff --git a/client/dist/favicon.ico b/client/dist/favicon.ico
diff --git a/client/dist/index.html b/client/dist/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Find research labs at Yale University"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
+    <title>YaleLabs</title>
+    <script type="module" crossorigin src="/assets/index-CbSqCWf5.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CDOBa6eK.css">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-3SQLGT56ZM"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-3SQLGT56ZM');
+    </script>
+  </body>
+</html>

diff --git a/client/dist/manifest.json b/client/dist/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "y/labs",
+  "name": "y/labs",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/client/dist/robots.txt b/client/dist/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Find research labs at Yale University"
+    />
+    <link rel="apple-touch-icon" href="/logo192.png" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
+    <title>YaleLabs</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-3SQLGT56ZM"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-3SQLGT56ZM');
+    </script>
+  </body>
+</html>
diff --git a/client/package.json b/client/package.json
@@ -6,16 +6,16 @@
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.4.3",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.4.1",
     "@types/node": "^16.11.26",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "axios": "^0.26.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "19.0.0-rc.0",
+    "react-dom": "19.0.0-rc.0",
     "react-router-dom": "^6.21.2",
     "react-scripts": "5.0.0",
     "react-spinners": "^0.11.0",
@@ -24,11 +24,12 @@
     "typescript": "^4.5.5",
     "web-vitals": "^2.1.4"
   },
+  "type": "module",
   "scripts": {
-    "start": "set PORT=3000 && react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "eslintConfig": {
     "extends": [
@@ -50,6 +51,10 @@
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.23",
-    "tailwindcss": "3"
+    "@vitejs/plugin-react": "^4.4.1",
+    "jsdom": "^26.1.0",
+    "tailwindcss": "3",
+    "vite": "^6.3.5",
+    "vitest": "^3.1.3"
   }
 }
diff --git a/client/postcss.config.js b/client/postcss.config.js
@@ -0,0 +1,8 @@
+const postcssConfig = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default postcssConfig;
diff --git a/client/src/components/DeveloperCard.tsx b/client/src/components/DeveloperCard.tsx
@@ -12,7 +12,7 @@ const DeveloperCard = ({ developer }: DeveloperCardProps) => {
     return(
         <div>
             <img 
-                src={developer.image ? developer.image : "assets/developers/no-user.png"}
+                src={developer.image ? developer.image : "/assets/developers/no-user.png"}
                 alt={`${developer.name} Profile Picture`}
                 className="aspect-square object-cover w-full rounded-lg mb-2"
                 width={500}

diff --git a/client/src/components/Search.tsx b/client/src/components/Search.tsx
@@ -34,7 +34,7 @@ export default function Search(props: SearchProps) {
       setIsLoading(true); 
       const backendBaseURL = window.location.host.includes("yalelabs.io")
         ? "https://yalelabs.io"
-        : process.env.REACT_APP_SERVER;
+        : import.meta.env.VITE_APP_SERVER;
       const url = backendBaseURL + '/listings?dept=' + departments 
                   + '&keywords=' + keywords + '&lname=' + lastNamePI;
       axios.get(url).then((response) => {

diff --git a/client/src/components/SignInButton.tsx b/client/src/components/SignInButton.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 const SignInButton = () => {
   const backendBaseURL = window.location.host.includes("yalelabs.io")
     ? "https://yalelabs.io"
-    : process.env.REACT_APP_SERVER;
+    : import.meta.env.VITE_APP_SERVER;
 
   const [redirectUrl, setRedirectUrl] = useState(window.location.origin);
 

diff --git a/client/src/components/home/SearchHub.tsx b/client/src/components/home/SearchHub.tsx
@@ -198,7 +198,7 @@ const SearchHub = ({
         const formattedDepartments = selectedDepartments.join(',');
         const backendBaseURL = window.location.host.includes('yalelabs.io')
             ? 'https://yalelabs.io'
-            : process.env.REACT_APP_SERVER;
+            : import.meta.env.VITE_APP_SERVER;
 
         if (sortBy === 'default') {
             url =

diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -1,18 +1,25 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import UserContextProvider from "./providers/UserContextProvider";
 
-ReactDOM.render(
+const container = document.getElementById("root");
+
+if (!container) {
+  throw new Error("Root container missing in index.html");
+}
+
+const root = createRoot(container);
+
+root.render(
   <React.StrictMode>
     <UserContextProvider>
       <App />
     </UserContextProvider>
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/client/src/types/types.tsx b/client/src/types/types.tsx
@@ -57,4 +57,15 @@ export type Developer = {
   website?: string;
   linkedin?: string;
   github?:string;
+}
+
+interface ImportMeta {
+  readonly env: {
+    readonly VITE_APP_TITLE: string;
+    readonly MODE: string;
+    readonly BASE_URL: string;
+    readonly PROD: boolean;
+    readonly DEV: boolean;
+    [key: string]: string | boolean | undefined;
+  };
 }
diff --git a/client/src/types/vite-env.d.ts b/client/src/types/vite-env.d.ts
@@ -0,0 +1,7 @@
+interface ImportMetaEnv {
+    readonly VITE_APP_SERVER: string;
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv;
+}
diff --git a/client/src/utils/axios.ts b/client/src/utils/axios.ts
@@ -2,7 +2,7 @@ import axios from "axios";
 
 const backendBaseURL = window.location.host.includes("yalelabs.io")
     ? "https://yalelabs.io"
-    : process.env.REACT_APP_SERVER;
+    : import.meta.env.VITE_APP_SERVER;
 
 export default axios.create({
   withCredentials: true,

diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
+    "./index.html", 
     "./src/**/*.{js,jsx,ts,tsx}"
   ],
   theme: {

diff --git a/client/tsconfig.json b/client/tsconfig.json
@@ -18,9 +18,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["react", "react-dom"]
   },
   "include": [
-    "src"
-, "postcss.config.mjs"  ]
+    "src", 
+    "postcss.config.mjs"  
+  ]
 }
diff --git a/client/vite.config.js b/client/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  css: {
+    postcss: './postcss.config.js',
+  },
+  server: {
+    port: 3000,
+  },
+});