add utils.ts and update page links to call from it. update vite.config.ts to...

add utils.ts and update page links to call from it. update vite.config.ts to start frontend dev on 8081

src/App.tsx

@@ -10,20 +10,29 @@ import DiscussionPage from "./pages/DiscussionPage.tsx";
 import ProfilePage from "./pages/ProfilePage.tsx";
 import './App.css'
 import {Route, Routes} from "react-router-dom";
+import {
+    discussionPagePath,
+    labsPagePath,
+    loginPagePath,
+    openingsPagePath, profilePagePath,
+    signUpProfessorPagePath,
+    signUpStudentPagePath,
+    welcomePagePath
+} from "./utils.ts";
 
 export default function App() {
     return (
         <div className="app">
             <AppHeader/>
             <Routes>
-                <Route path="/" element={<WelcomePage/>}/>
-                <Route path="/signup/student" element={<SignUpStudentPage/>}/>
-                <Route path="/signup/professor" element={<SignUpProfessorPage/>}/>
-                <Route path="/login" element={<LoginPage/>}/>
-                <Route path="/labs" element={<LabsPage/>}/>
-                <Route path="/openings" element={<OpeningsPage/>}/>
-                <Route path="/discussion" element={<DiscussionPage/>}/>
-                <Route path="/profile" element={<ProfilePage/>}/>
+                <Route path={welcomePagePath} element={<WelcomePage/>}/>
+                <Route path={signUpStudentPagePath} element={<SignUpStudentPage/>}/>
+                <Route path={signUpProfessorPagePath} element={<SignUpProfessorPage/>}/>
+                <Route path={loginPagePath} element={<LoginPage/>}/>
+                <Route path={labsPagePath} element={<LabsPage/>}/>
+                <Route path={openingsPagePath} element={<OpeningsPage/>}/>
+                <Route path={discussionPagePath} element={<DiscussionPage/>}/>
+                <Route path={profilePagePath} element={<ProfilePage/>}/>
             </Routes>
             <AppFooter/>
         </div>

src/components/AppFooter.tsx

 import {Link} from "react-router-dom";
 import "./AppFooter.css";
+import {discussionPagePath, labsPagePath, openingsPagePath, profilePagePath} from "../utils.ts";
 
 export default function AppFooter() {
     return (
         <footer className="container">
             <section className="links">
-                <Link to="/labs">LABS</Link> | <Link to="/openings">OPENINGS</Link> | <Link to="/discussion">DISCUSSION</Link> | <Link to="/profile">PROFILE</Link>
+                <Link to={labsPagePath}>LABS</Link> | <Link to={openingsPagePath}>OPENINGS</Link> | <Link
+                to={discussionPagePath}>DISCUSSION</Link> | <Link to={profilePagePath}>PROFILE</Link>
             </section>
             <p>&copy; 2024 VT Research Connect. All Rights Reserved.</p>
             <p>Capstone Project</p>

src/components/AppHeader.tsx

 import {Link} from "react-router-dom";
 import "./AppHeader.css";
+import {
+    discussionPagePath,
+    labsPagePath,
+    loginPagePath,
+    openingsPagePath,
+    profilePagePath,
+    welcomePagePath
+} from "../utils.ts";
 
 export default function AppHeader() {
     return (
         <header className="header container">
             <section className="logo-and-title">
-                <Link className="logo-and-text" to="/">
+                <Link className="logo-and-text" to={welcomePagePath}>
                     <img
                         className="logo"
                         src="/site-images/logo.png" // PLACEHOLDER
                         alt="VT Reseach Connect Logo"
                     />
                 </Link>
-                <Link className="logo-and-text" to="/">
+                <Link className="logo-and-text" to={welcomePagePath}>
                     <h1 className="logo-text">VT Research Connect</h1>
                 </Link>
             </section>
             <section className="labs-openings-discussion-profile-login">
-                <Link to="/labs"><button className="button"><i className="fa-solid fa-flask"></i> LABS</button></Link>
-                <Link to="/openings"><button className="button"><i className="fa-solid fa-door-open"></i> OPENINGS</button></Link>
-                <Link to="/discussion"><button className="button"><i className="fa-solid fa-comments"></i> DISCUSSION</button></Link>
-                <Link to="/profile"><button className="button"><i className="fa-solid fa-user"></i> PROFILE</button></Link>
-                <Link to="/login"><button className="button"><i className="fa-solid fa-sign-in"></i> LOGIN</button></Link>
+                <Link to={labsPagePath}><button className="button"><i className="fa-solid fa-flask"></i> LABS</button></Link>
+                <Link to={openingsPagePath}><button className="button"><i className="fa-solid fa-door-open"></i> OPENINGS</button></Link>
+                <Link to={discussionPagePath}><button className="button"><i className="fa-solid fa-comments"></i> DISCUSSION</button></Link>
+                <Link to={profilePagePath}><button className="button"><i className="fa-solid fa-user"></i> PROFILE</button></Link>
+                <Link to={loginPagePath}><button className="button"><i className="fa-solid fa-sign-in"></i> LOGIN</button></Link>
             </section>
         </header>
     );

src/pages/LabsPage.tsx

 import {useState, useEffect} from 'react';
 import axios from 'axios';
 import './LabsPage.css';
+import {labsAPI} from "../utils.ts";
 
 interface Data {
     // Define the structure of the data you expect from the endpoint
@@ -38,7 +39,7 @@ export default function LabsPage() {
         // , []);
 
 
-        axios.get<Data[]>('https://vtrc-backend.discovery.cs.vt.edu/api/labs')
+        axios.get<Data[]>(`${labsAPI}`)
             .then(response => {
                 setData(response.data);
                 setLoading(false);

src/pages/LoginPage.css

@@ -23,6 +23,11 @@
     justify-content: space-between;
 }
 
+.login-form form input {
+    color: var(--primary-color);
+    border-radius: 5px;
+}
+
 .remember-me {
     display: flex;
     align-items: center;

src/pages/LoginPage.tsx

 import './LoginPage.css'
 import {Link, useNavigate} from "react-router-dom";
 import React, {useState} from "react";
+import {labsPagePath, loginAPI, signUpProfessorPagePath, signUpStudentPagePath} from "../utils.ts";
 
 export default function LoginPage() {
 
@@ -20,7 +21,7 @@ export default function LoginPage() {
         e.preventDefault();
 
         // Send email and password to server
-        fetch('https://vtrc-backend.discovery.cs.vt.edu/api/login', {
+        fetch(`${loginAPI}`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
@@ -33,7 +34,7 @@ export default function LoginPage() {
                     // use this on other pages to check if user is logged in
                     // Added to LabsPage.tsx, but commented out until we have a login page working
                     localStorage.setItem('token', data.token);
-                    navigate('/labs');   // We can change this
+                    navigate(`${labsPagePath}`);   // We can change this
                 } else {
                     alert('Login failed: ' + data.message);
                 }
@@ -65,8 +66,8 @@ export default function LoginPage() {
                 </form>
                 <div className="no-account">
                     <p>Don't have an account?</p>
-                    <Link to="/signup/student"><a>Student Sign Up</a></Link>
-                    <Link to="/signup/professor"><a>Professor Sign Up</a></Link>
+                    <Link to={signUpStudentPagePath}>Student Sign Up</Link>
+                    <Link to={signUpProfessorPagePath}>Professor Sign Up</Link>
                 </div>
             </section>
         </div>

src/pages/SignUpProfessorPage.tsx

 import "./SignUpPage.css"
 import {Link} from "react-router-dom";
+import {loginPagePath, signUpStudentPagePath} from "../utils.ts";
 
 export default function SignUpProfessorPage() {
     return (
@@ -43,7 +44,9 @@ export default function SignUpProfessorPage() {
                 </form>
                 <div className="have-account">
                     <p>Already have an account?</p>
-                    <Link to="/login"><a>Login</a></Link>
+                    <Link to={loginPagePath}>Login</Link>
+                    <p>Not a Professor?</p>
+                    <Link to={signUpStudentPagePath}>Student Sign Up</Link>
                 </div>
             </section>
         </div>

src/pages/SignUpStudentPage.tsx

 import {Link} from "react-router-dom";
 import "./SignUpPage.css"
+import {loginPagePath, signUpProfessorPagePath} from "../utils.ts";
 
 export default function SignUpStudentPage() {
     return (
@@ -55,7 +56,9 @@ export default function SignUpStudentPage() {
 
                 <div className="have-account">
                     <p>Already have an account?</p>
-                    <Link to="/login"><a>Login</a></Link>
+                    <Link to={loginPagePath}>Login</Link>
+                    <p>Not a Student?</p>
+                    <Link to={signUpProfessorPagePath}>Professor Sign Up</Link>
                 </div>
             </section>
         </div>

src/pages/WelcomePage.tsx

 import './WelcomePage.css'
 import {Link} from "react-router-dom";
+import {
+    discussionPagePath,
+    labsPagePath,
+    openingsPagePath,
+    signUpProfessorPagePath,
+    signUpStudentPagePath
+} from "../utils.ts";
 
 export default function WelcomePage() {
     return (
         <div className="welcome-page center-content">
             <section className="welcome-students">
                 <h2>Welcome Students</h2>
-                <p>As a student, you can easily explore and filter through all the <Link to="/labs">Research Labs</Link> at
+                <p>As a student, you can easily explore and filter through all the <Link to={labsPagePath}>Research Labs</Link> at
                     Virginia Tech. Each lab's profile includes essential details such as the lab name, the principal
                     investigator (PI), and a link to their external website. Additionally, you can search for <Link
-                        to="/openings">Openings</Link> and apply for volunteer or paid positions in various research labs. Join
-                    our <Link to="/discussion">Discussion Forum</Link> to engage with fellow students, share insights about
+                        to={openingsPagePath}>Openings</Link> and apply for volunteer or paid positions in various research labs. Join
+                    our <Link to={discussionPagePath}>Discussion Forum</Link> to engage with fellow students, share insights about
                     research, and subscribe to feeds based on department, topic, or specific labs.</p>
-                <Link to="/signup/student"><button className="call-to-action-button">STUDENT SIGN UP!</button></Link>
+                <Link to={signUpStudentPagePath}><button className="call-to-action-button">STUDENT SIGN UP!</button></Link>
             </section>
             <section className="welcome-professors">
                 <h2>Welcome Professors</h2>
-                <p>As a professor, you can showcase your <Link to="/labs">Research Lab</Link> to the vibrant Virginia Tech
+                <p>As a professor, you can showcase your <Link to={labsPagePath}>Research Lab</Link> to the vibrant Virginia Tech
                     community. Create a comprehensive profile that includes your lab's name, your role as the principal
-                    investigator (PI), and a link to your external website. Post <Link to="/openings">Openings</Link> for
+                    investigator (PI), and a link to your external website. Post <Link to={openingsPagePath}>Openings</Link> for
                     volunteer and paid positions to attract enthusiastic and qualified students. Engage with students
-                    and colleagues in our <Link to="/discussion">Discussion Forum</Link>, where you can share insights, foster
+                    and colleagues in our <Link to={discussionPagePath}>Discussion Forum</Link>, where you can share insights, foster
                     collaborations, and stay updated on the latest research topics and departmental news.</p>
-                <Link to="/signup/professor"><button className="call-to-action-button">PROFESSOR SIGN UP!</button></Link>
+                <Link to={signUpProfessorPagePath}><button className="call-to-action-button">PROFESSOR SIGN UP!</button></Link>
             </section>
         </div>
     );

src/utils.ts

+// http://localhost:8080/api/login
+// https://vtrc-backend.discovery.cs.vt.edu/api/login
+export const loginAPI = 'https://vtrc-backend.discovery.cs.vt.edu/api/login';
+
+// http://localhost:8080/api/labs
+// https://vtrc-backend.discovery.cs.vt.edu/api/labs
+export const labsAPI = 'https://vtrc-backend.discovery.cs.vt.edu/api/labs';
+
+// ROUTES
+export const welcomePagePath = '/';
+export const signUpStudentPagePath = '/signup/student';
+export const signUpProfessorPagePath = '/signup/professor';
+export const loginPagePath = '/login';
+export const labsPagePath = '/labs';
+export const openingsPagePath = '/openings';
+export const discussionPagePath = '/discussion';
+export const profilePagePath = '/profile';
+

vite.config.ts

@@ -5,11 +5,11 @@ export default defineConfig({
   base: "/",
   plugins: [react()],
   preview: {
-   port: 8080,
+   port: 8081,
    strictPort: true,
   },
   server: {
-   port: 8080,
+   port: 8081,
    strictPort: true,
    host: true,
    origin: "http://0.0.0.0:8080",