https://github.com/vikelabs/courseup
An open-source website built to simplify the experience of searching courses and building timetables for the University of Victoria.
https://github.com/vikelabs/courseup
firebase react typescript
Last synced: 9 months ago
JSON representation
An open-source website built to simplify the experience of searching courses and building timetables for the University of Victoria.
- Host: GitHub
- URL: https://github.com/vikelabs/courseup
- Owner: VikeLabs
- Created: 2021-02-19T01:52:49.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-06-21T20:31:36.000Z (about 2 years ago)
- Last Synced: 2024-06-22T20:23:30.012Z (about 2 years ago)
- Topics: firebase, react, typescript
- Language: TypeScript
- Homepage: https://courseup.vikelabs.ca/
- Size: 11.6 MB
- Stars: 41
- Watchers: 1
- Forks: 29
- Open Issues: 51
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# CourseUp
[![Contributors][contributors-shield]][contributors-link]
[![Stargazers][stars-shield]][stars-link]
[![Issues][issues-shield]][issues-link]
[![Website][website-staging-shield]][website-staging-link]
[![Website][website-prod-shield]][website-prod-link]
CourseUp is a website built to simplify the experience of searching courses and building timetables for the [University of Victoria](https://uvic.ca) (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](./functions/README.md) located in `functions` directory in this repository.
1. Fork the repository.
2. Clone your forked repository:
```
git clone https://github.com//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](https://create-react-app.dev/) 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](https://github.com/VikeLabs/courseup/discussions/categories/q-a).
### Next.js
CourseUp is migrating to [Next.js](https://nextjs.org/) 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](https://github.com/VikeLabs/courseup/wiki/Frontend-Directory-Structure) before submitting contributions.
### Chakra UI
CourseUp uses the component library [Chakra UI](https://chakra-ui.com/), 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 `
`, ``, 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](https://github.com/contiamo/restful-react/) to interact with our backend RESTful API. Please take a brief read of [restful-react](https://github.com/contiamo/restful-react/) to understand what it provides.
We use the [code generation](https://github.com/contiamo/restful-react/#code-generation-from-openapi--swagger-specs) capabilities to generate React hooks for all the resource routes to our backend. The generated code is located in [here.](./src/shared/fetchers.tsx). **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](CONTRIBUTING.md) before submitting contributions.
## Deployment
Hosting is provided by [VikeLabs](https://vikelabs.ca) using [Firebase](https://firebase.google.com/). 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](https://jestjs.io/) 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`](https://github.com/VikeLabs/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`](https://github.com/VikeLabs/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](https://www.uvic.ca) as part of [VikeLabs](https://vikelabs.ca), which is a student-led software development club.
[contributors-shield]: https://img.shields.io/github/contributors/VikeLabs/courseup?style=flat
[contributors-link]: https://github.com/VikeLabs/courseup/graphs/contributors
[stars-shield]: https://img.shields.io/github/stars/VikeLabs/courseup?style=flat
[stars-link]: https://github.com/VikeLabs/courseup/stargazers
[issues-shield]: https://img.shields.io/github/issues/VikeLabs/courseup
[issues-link]: https://github.com/VikeLabs/courseup/issues
[website-staging-shield]: https://img.shields.io/website?down_message=staging%20offline&up_message=staging&url=https%3A%2F%2Fcourseup.vikelabs.dev
[website-prod-shield]: https://img.shields.io/website?down_message=prod%20offline&up_message=prod&url=https%3A%2F%2Fcourseup.vikelabs.ca
[website-staging-link]: https://courseup.vikelabs.dev/
[website-prod-link]: https://courseup.vikelabs.ca/