Developer Quickstart

EPICS Team Builder

Overview

This project is for the EPICS program that helps the Directors to automatically create teams. It works by sorting a list of students, available projects, and partners into one group based on an algorithm. The purpose of this project is to:

• Steamline the team sorting and creation process
• Keep track of the available projects and partners available

In addition, the purpose of this project is to import demographic data in order to graphically display said demographic data. The demographics include Ethnicity (African American, Asian, Hispanic, White, International, and other) and Gender (Male Female), and the different way to display this data is based on the course, (2200/3200), semester(Spring, Summer, Fall), the year, and finally by percentage, raw count, or total. The options of diplaying the data is by seperate Bar Graphs, a single pie chart, or a single line graph.

Users/Roles

User/Administration and Directors of EPICS

• View all teams and projects
• Manage teams, projects, partners
• Admin privileges such as adding/removing students from teams
• Look at data analytics
• Import Demographic data
• Display demographic data by Bar Graphs, Pie Charts, or Line Graphs

Functional Requirements

Team Formation

Team Creation Functionality

• The user shall be able to create teams based on the projects available and the student's preference
• The user shall be able to update and modify the current teams

Team/Project Viewing Functionality

• The page shall display the current created teams and available projects, students, and partners

Summary

This app allows users to:

• Select and filter demographic data by course, year, semester, and gender/ethnicity.
• View the filtered data through dynamic bar, line, and pie charts.
• Export the data in various formats like CSV or Excel.
• Update the charts and data dynamically based on the selected filters.
• Ensure that all data is properly validated and errors are handled gracefully.

Tech Stack

Documentation linked:

• Front End: Vue, Nuxt
• Database: PostgresSQL
• Other packages: Prisma
• Other technologies: Postman, Node.js, Type Script Execute, and SheetJS

Setup

Make sure to install the dependencies:

# npm [Default, use this unless told otherwise]
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install

Migration

• If the database is not populated on your device, you will need a copy of the domain-specific demographic data Excel sheet, provided by the University.
• After running the website, navigate to the Demographics page and import the demographics spreadsheet using the provided "Import File" button in the bottom left.
• Then, click "Send Extracted Data" to populate the database using the Excel sheet.
• (This assumes your Excel sheet will be of the same layout as those provided in prior years, which is a necessary assumption.)
• If it is a new semester and you have a spreadsheet with the most recent data on it, simply import that file in the same manner as previously described. The database will be updated with the new data.

Development Server

Start/run the development server on http://localhost:3000 (Useful for seeing results of your code/see a local verison of the application):

# npm [Default, use this unless told otherwise]
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev

Production

Build the application for production:

# npm [Default, use this unless told otherwise]
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build

Locally preview production build:

# npm [Default, use this unless told otherwise]
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview

Possible Setup Bugs:

It has been known that some errors may come up when developing this application on Apple machines; follow these install steps to fix any issues:

# Run the following commands one at a time:
rm
rm 
npm install
npm audit fix