Giter VIP home page Giter VIP logo

courseup's Introduction

CourseUp

Contributors Stargazers Issues Website Website

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 overrode 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 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.

Fetchers

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.

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.

courseup's People

Contributors

aomi avatar keithradford avatar zthh626 avatar flytewizard avatar szeckirjr avatar joshothemosho avatar shergillmanav19 avatar dependabot[bot] avatar chsunwoo1002 avatar liamshatzel avatar j-raymer avatar schorcher5 avatar malcolmseyd avatar mnthomson avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.