Migrate to vite

README.md

@@ -29,6 +29,7 @@ Features include:
 * MongoDB
 * GraphQL
 * TypeScript
+* Vite
 
 ## First time setup
 ### Committee Members
@@ -37,18 +38,19 @@ Features include:
     git clone https://github.com/icssc/peterportal-client
     ```
 
-2. Switch to a branch you will be working on.
-    ```
-    git checkout -b [branch name]
-    ```
+2. Check your Node version with `node -v`. Make sure you have version 18 or 20 LTS. If you don't, we recommend [nvm](https://github.com/nvm-sh/nvm) to manage node versions (or [nvm-windows](https://github.com/coreybutler/nvm-windows)).
 
-3. Check your Node version with `node -v`. Make sure you have version 14 or above (18 recommended).
+3. `cd` into the cloned repo.
 
-4. Open a terminal window and `cd` into the directory of your repo.
+4. Run `npm install` to install all node dependencies for the site and API. This may take a few minutes.
 
-5. Run `npm install` to install all node dependencies for the site and API. This may take a few minutes.
+5. Setup the appropriate environment variables provided by the project lead.
+
+6. Switch to a branch you will be working on for your current task (pick a name that's relevant to the issue).
+    ```
+    git checkout -b [branch name]
+    ```
 
-6. Setup the appropriate environment variables provided by the project lead.
 ### Open Source Contributors
 1. Fork the project by clicking the fork button in the top right, above the about section.
 
@@ -57,26 +59,21 @@ Features include:
 git clone https://github.com/<your username>/peterportal-client
 ```
 
-3. Switch to a branch you will be working on.
-```
-git checkout -b [branch name]
-```
-
-4. Check your Node version with `node -v`. Make sure you have version 14 or above (18 recommended).
+3. Check your Node version with `node -v`. Make sure you have version 18 or 20 LTS. If you don't, we recommend [nvm](https://github.com/nvm-sh/nvm) to manage node versions (or [nvm-windows](https://github.com/coreybutler/nvm-windows)).
 
-5. Open a terminal window and `cd` into the directory of your repo.
+4. `cd` into the cloned repo.
 
-6. Run `npm install` to install all node dependencies for the site and API. This may take a few minutes.
+5. Run `npm install` to install all node dependencies for the site and API. This may take a few minutes.
 
-7. Create a .env file in the api directory with the following contents:
+6. Create a .env file in the api directory with the following contents:
 ```
 PUBLIC_API_URL=https://api.peterportal.org/rest/v0/
 PUBLIC_API_GRAPHQL_URL=https://api.peterportal.org/graphql/
 PORT=8080
 ```
-Note: the port should also match the one set up on the frontend's proxy to the backend under `site/src/setupProxy.js` By default this is 8080.
+Note: the port should also match the one set up on the frontend's proxy to the backend under `site/vite.config.ts` By default this is 8080.
 
-8. (Optional) Set up your own MongoDB and Google OAuth to be able to test features that require signing in such as leaving reviews or saving roadmaps to your account. Add additional variables/secrets to the .env file from the previous step.
+7. (Optional) Set up your own MongoDB and Google OAuth to be able to test features that require signing in such as leaving reviews or saving roadmaps to your account. Add additional variables/secrets to the .env file from the previous step.
 ```
 MONGO_URL=<secret>
 SESSION_SECRET=<secret>
@@ -86,10 +83,20 @@ GRECAPTCHA_SECRET=<secret>
 ADMIN_EMAILS=["<your email>"]
 ```
 
+## Open Source Contribution Guide
+1. Choose an issue you would like to work on under the issues tab. Leave a comment letting us know you'll work on this issue.
+
+2. We recommend you switch to a branch you will be working on for each feature.
+```
+git checkout -b [branch name]
+```
+
+3. Once your feature is ready, [open a pull request](https://github.com/icssc/peterportal-client/compare) and a member from our team will review it. Follow the pull request template.
+
 ## Running the project locally (after setup)
 1. Open two terminal windows and `cd` into the directory of your repo in each of them.
 
-2. In the first terminal window, enter the client directory with `cd site`. Then run the React development server using `npm start`. Ensure the server is running on port 3000 by default.
+2. In the first terminal window, enter the client directory with `cd site`. Then run the Vite development server using `npm run dev`. Ensure the server is running on port 3000 by default.
 
 3. In the second terminal window, enter the API directory with `cd api`. Then run the Express development server using `npm run dev`. Ensure the server is running on port 8080 by default.
 
@@ -101,8 +108,7 @@ ADMIN_EMAILS=["<your email>"]
 We consolidate our data directly from official UCI sources such as: UCI Catalogue, UCI Public Records Office, and UCI WebReg (courtesy of [PeterPortal API](https://github.com/icssc/peterportal-api-next)).
 
 ## Bug Report
-🐞 If you encountered any issues or bug, please open an issue @ https://github.com/icssc-projects/peterportal-client/issues/new
-
+🐞 If you encountered any issues or bug, please open an issue @ https://github.com/icssc/peterportal-client/issues/new
 
 ## Other Disclaimer
 ✅ Although we consolidate our data directly from official UCI sources, this application is by all means, not an official UCI tool. We stride to keep our data as accurate as possible with the limited support we have from UCI. Please take that into consideration while using this Website.

api/src/controllers/courses.ts

@@ -6,63 +6,68 @@ import express, { Request } from 'express';
 import fetch from 'node-fetch';
 import { GenericObject } from '../types/types';
 import courseDummy from '../dummy/course.json';
-import {getCourseQuery} from '../helpers/gql';
+import { getCourseQuery } from '../helpers/gql';
 var router = express.Router();
 
 /**
- * PPAPI proxy for course data 
+ * PPAPI proxy for course data
  */
 router.get('/api', (req: Request<{}, {}, {}, { courseID: string }>, res) => {
   let r = fetch(process.env.PUBLIC_API_URL + 'courses/' + encodeURIComponent(req.query.courseID), {
     headers: {
       'Content-Type': 'application/json',
-      'Accept': 'application/json'
-    }
+      Accept: 'application/json',
+    },
   });
-  console.log(req.query.courseID)
+  console.log(req.query.courseID);
 
-  r.then((response) => response.json())
-    .then((data) => res.send(data.payload))
+  r.then((response) => response.json()).then((data) => res.send(data.payload));
 });
 
 /**
- * PPAPI proxy for course data 
+ * PPAPI proxy for course data
  */
 router.post('/api/batch', (req: Request<{}, {}, { courses: string[] }>, res) => {
   if (req.body.courses.length == 0) {
     res.json({});
-  }
-  else {
+  } else {
     let r = fetch(process.env.PUBLIC_API_GRAPHQL_URL, {
       method: 'POST',
       headers: {
-        'Content-Type': 'application/json'
+        'Content-Type': 'application/json',
       },
       body: JSON.stringify({
-        query: getCourseQuery(req.body.courses)
-      })
+        query: getCourseQuery(req.body.courses),
+      }),
     });
 
-    r.then((response) => response.json())
-        .then((data) => res.json(
-            Object.fromEntries(
-                Object.entries(data.data).filter(([_, x]) => x !== null).map(([_, x]) => [(x as { id: string }).id, x])
-            )
-        ))
+    r.then((response) => response.json()).then((data) =>
+      res.json(
+        Object.fromEntries(
+          Object.entries(data.data)
+            .filter(([_, x]) => x !== null)
+            .map(([_, x]) => [(x as { id: string }).id, x]),
+        ),
+      ),
+    );
   }
 });
 
 /**
  * PPAPI proxy for grade distribution
  */
-router.get('/api/grades',
-  (req: Request<{}, {}, {}, { department: string; number: string; }>, res) => {
-    let r = fetch(process.env.PUBLIC_API_URL + 'grades/raw?department=' + encodeURIComponent(req.query.department) + '&courseNumber=' + req.query.number);
+router.get('/api/grades', (req: Request<{}, {}, {}, { department: string; number: string }>, res) => {
+  let r = fetch(
+    process.env.PUBLIC_API_URL +
+      'grades/raw?department=' +
+      encodeURIComponent(req.query.department) +
+      '&courseNumber=' +
+      req.query.number,
+  );
 
-    r.then((response) => response.json())
-      .then((data) => {
-        res.send(data.payload)
-      })
+  r.then((response) => response.json()).then((data) => {
+    res.send(data.payload);
   });
+});
 
-export default router;
+export default router;

api/src/controllers/professors.ts

@@ -11,35 +11,32 @@ import { getProfessorQuery } from '../helpers/gql';
 var router = express.Router();
 
 /**
- * PPAPI proxy for professor data 
+ * PPAPI proxy for professor data
  */
 router.get('/api', function (req: Request<{}, {}, {}, { ucinetid: string }>, res) {
   let r = fetch(process.env.PUBLIC_API_URL + 'instructors/' + req.query.ucinetid);
 
-  r.then((response) => response.json())
-    .then((data) => res.send(data))
+  r.then((response) => response.json()).then((data) => res.send(data));
 });
 
 /**
- * PPAPI proxy for professor data 
+ * PPAPI proxy for professor data
  */
 router.post('/api/batch', (req: Request<{}, {}, { professors: string[] }>, res) => {
   if (req.body.professors.length == 0) {
     res.json({});
-  }
-  else {
+  } else {
     let r = fetch(process.env.PUBLIC_API_GRAPHQL_URL, {
       method: 'POST',
       headers: {
-        'Content-Type': 'application/json'
+        'Content-Type': 'application/json',
       },
       body: JSON.stringify({
-        query: getProfessorQuery(req.body.professors)
-      })
+        query: getProfessorQuery(req.body.professors),
+      }),
     });
 
-    r.then((response) => response.json())
-      .then((data) => res.json(data.data))
+    r.then((response) => response.json()).then((data) => res.json(data.data));
   }
 });
 
@@ -54,7 +51,7 @@ router.get('/api/grades/:name', function (req, res, next) {
   r.then((response) => {
     status = response.status;
     return response.json();
-  }).then((data) => res.status(status).send(data.payload))
+  }).then((data) => res.status(status).send(data.payload));
 });
 
-export default router;
+export default router;