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.
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.
- Fork the repository.
- Clone your forked repository:
git clone https://github.com/<YOUR_GITHUB_USERNAME>/courseup.git
- Run
npm ci
- Tip: Avoid using
npm install
unless you're installing a package.
- Tip: Avoid using
- 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 overrode using the
proxy
property located withinpackage.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.
CourseUp uses a defined structure for directories. Make sure you read up on our frontend directory structure guidelines before submitting contributions.
CourseUp uses the component library Chakra UI as it's 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.
You will notice there are React hooks like useGetCourse
. This is provided by resful-react to interact with our backend RESTful API. Please take a brief read of resful-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.
Thanks for wanting to contribute! Make sure you read up on our contributions guidelines before submitting contributions.
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.
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.
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.
This project was developed by students at the University of Victoria as part of VikeLabs, which is a student-led software development club.