Insight UBC - Course Explorer

A full-stack web application designed to query, analyze, and visualize UBC course data. This application allows users to upload raw dataset archives, explore historical course performance, and view aggregate insights through an interactive dashboard.

Features & Usage

1. Manage Datasets

   • Upload: On the welcome screen or sidebar, click "Add" or "Upload Dataset". Enter a unique ID and select a zip file.

   • Delete: Use the "Delete" button in the sidebar to remove a dataset from memory and disk.

   • Active Selection: Click on a dataset in the sidebar to make it "Active". The main view will update to reflect data from that specific dataset.

2. Course Explorer (Main View)

   • Once a dataset is active, use the Department dropdown to filter courses (e.g., "CPSC", "MATH").

   • Use the Course Number text input to search for specific courses (e.g., "310").

   • Click "View Stats" on any row to see historical averages, pass/fail counts, and section details for that course.

3. Global Insights

   • Quick Stats: The sidebar displays aggregate stats (Highest Average, Average Class Size) for the currently active dataset.

   • Graphs: Click the "Learn More" button on a dataset card in the sidebar to view visual insights, such as:

     • Courses with the Highest Averages

     • Courses with the Most Fails

     • Courses with the Most Passes

Prerequisites

Before starting, ensure you have the following installed:

• Node.js (v14 or higher)
• Yarn (Recommended) or npm

Installation

Clone the repository:

git clone https://github.com/Michael-Kabat/UBC-Insight.git

cd UBC-Insight

Install Dependencies:

Run the install command in the root directory to install packages for both the backend (Express/TS) and frontend (React/Vite).

npm install

Running the Application

To use the application, you must run both the backend server and the frontend client simultaneously. It is easiest to do this using two separate terminal windows.

Start the Backend Server

The backend handles the REST API, dataset processing, and query engine.

1. Open your first terminal window in the project root.

2. Run the start script: npm start

3. Wait for the confirmation message: Server is listening on port: 4321

Start the Frontend Client

The frontend is the React-based user interface.

1. Open a second terminal window in the frontend directory

2. Run the development script: npm run dev

3. The terminal will display the local URL, typically: Local: http://localhost:5173/

4. Open your browser and navigate to http://localhost:5173/ to use the app.