CourseUp

CourseUp is a website built to simplify the experience of searching courses and building timetables for the University of Victoria (UVic). The website is a TypeScript app which uses React on the front-end and Firebase on the back-end.

Develop

If you're interested developing this application, follow these steps to get running a local version of the application.

Note: These instructions are for developing the frontend (React). If you wish to develop the backend, please refer to the README located in functions directory in this repository.

1. Fork the repository.
2. Clone your forked repository:

   git clone https://github.com/<YOUR_GITHUB_USERNAME>/courseup.git
   

3. Run npm ci
   • Tip: Avoid using npm install unless you're installing a package.
4. Start the frontend using npm start
   • This will start the Create React App development server.
   • All requests to the backend will be routed to the staging environment of CourseUp. This can be overridden using the proxy property located within package.json.

You will now be able to develop the frontend React application. Any changes made to the code will hot-reload upon save.

Note: If the above is failing to compile on a Windows machine, you will first need to run git config --global core.autocrlf false, then git fetch --all and then git reset --hard. After successfully running these two commands, you can then retry step 4 (npm start).

If you get stuck setting up the development environment, try Google then if you're still stuck drop a question in our GitHub Discussions.

Next.js

CourseUp is migrating to Next.js and thus the project is configured to be dual-stack as there's a create-react-app and Next.js project within the same repository.

During the migration, the Next.js related scripts are prefixed with next:

• npm run next:dev - Starts Next.js in development mode
• npm run next:build - Builds the application for production usage
• npm run next:start - Starts a Next.js production server
• npm run next:lint - Sets up Next.js' built-in ESLint configuration

These prefixed scripts will be removed when create-react-app is removed.

Directory Structure

CourseUp uses a defined structure for directories. Make sure you read up on our frontend directory structure guidelines before submitting contributions.

Chakra UI

CourseUp uses the component library Chakra UI, it's the main source of components, styling, and formatting. You will notice throughout the codebase there is no use of raw HTML elements such as <div>, <li>, etc. as Chakra provides us with clean alternatives that help keep the code consistent and the website looking good.

Fetchers

You will notice there are React hooks like useGetCourse. This is provided by restful-react to interact with our backend RESTful API. Please take a brief read of restful-react to understand what it provides.

We use the code generation capabilities to generate React hooks for all the resource routes to our backend. The generated code is located in here.. DO NOT EDIT THIS FILE as it is supposed to be generated from the OpenAPI spec.

To regenerate the fetchers, run npm run fetchers:generate. This is only required if the backend controllers change.

Contribute

Thanks for wanting to contribute! Make sure you read up on our contributions guidelines before submitting contributions.

Deployment

Hosting is provided by VikeLabs using Firebase. CourseUp has a staging and production environment. Changes will be first deployed to staging to be verified before moving onto production.

Testing

This project uses Jest testing framework. You can execute tests by running npm test.

This will execute tests using Jest files with the extension *.test*.

npx jest --watch will put Jest into watch mode, which will execute tests as files change.

UVic Course Scraper

The website uses the npm package uvic-course-scraper. The package is a web-scraping tool made with TypeScript that is the main way of extracting data from UVic. It is contributed to and maintained by the original development team of courseup.

The motivation of uvic-course-scraper is to abstract away the parsing and scraping required to obtain data. It is not designed to do anything else.

VikeLabs

This project was developed by students at the University of Victoria as part of VikeLabs, which is a student-led software development club.