Skip to content

An unofficial web app for syllabus searching, classroom finding, and bus schedule checking at Waseda University.

License

Notifications You must be signed in to change notification settings

wasedatime/wasedatime-web

Repository files navigation

WasedaTime

All Contributors FOSSA Status

GitHub license Node.js CI - Root Node.js CI - Syllabus Node.js CI - Campus Node.js CI - Feeds Node.js CI - Career

WasedaTime (stands for Waseda Timetable) is a non-profit & student-run open source web app for syllabus searching, course reviews and bus schedule checking at Waseda University.

We aim at supporting and improving campus lives of Waseda University students.

App Architecture

Continuous Integration and Deployment

This project is deployed on AWS Amplify and uses GitHub Actions for continuous integration.

Unfortunately, currently there are no unit tests created to ensure the code quality.

Built With

Backend

You can view the repository here.

Frontend (Client)

  • Common
    • Single-spa - A framework to bring together multiple JavaScript microfrontends in a frontend application.
    • Styled Components - Library used for adding CSS to React components.
  • Root
    • Tailwind - A utility-first CSS framework packed with classes with humen-friendly name; highly customizable.
  • Syllabus
    • Redux - Library used to manage the state of front-end.
    • Semantic UI React - Official React integration for Semantic UI, a development framework that helps create layouts with prebuilt components easily.
  • Campus
    • React Bootstrap - Official React integration for Bootstrap, a frequently updated development framework that helps create layouts with prebuilt components easily.

Getting Started

Prepare your environment

Git/GitHub

  1. Create a GitHub account if you haven't
  2. If you are a member of our development team, tell me your username or email so that I can add you to our GitHub team.
  3. Install Git on your computer (local): https://git-scm.com/book/en/v2/Getting-Started-Installing-Git

Node.js & NPM

Download: https://nodejs.org/en/ Please download the LTS one and install it. Both Node.js and npm should be installed.

PNPM

Install with npm

npm install -g pnpm
// if ↑ does not work, run ↓
sudo npm install -g pnpm

Installation with other ways: https://pnpm.io/installation

Bit

  1. Create a Bit.dev account if you haven't.

  2. If you are a member of our development team, tell me your username or email so that I can add you to our Bit team.

  3. Then install Bit on your computer (local): https://docs.bit.dev/docs/installation

  4. Check your Bit authentication token with the following command:

    bit config
    

    and add the token to your environment variable with the following steps:

    Mac/Linux

    1. Add the following to file ~/.bash_profile
    export BIT_TOKEN=XXXXXXXXXXXXX
    // replace XXXXXXXXXXXXX to your token
    
    1. If you are using Z shell (check if there is a text zsh on top of your terminal), add the following in file ~/.zshrc
    if [ -f ~/.bash_profile ]; then 
        . ~/.bash_profile;
    fi
    
    1. Either restart your terminal or run the following:
    source ~/.bash_profile
    

    Windows https://www3.ntu.edu.sg/home/ehchua/programming/howto/Environment_Variables.html

Clone WasedaTime

// By HTTP
git clone https://github.com/wasedatime/wasedatime-web.git
// By SSH
git clone git@github.com:wasedatime/wasedatime-web.git

Then move into the cloned repository:

cd wasedatime-web

Run git status or git branch to confirm that you are on master branch

Install dependencies

// At the top level of the project folder
pnpm install
// ↓ works the same
pnpm i

Run the app on your local

  • Run the whole app
     // At the top level of the project folder
     pnpm start
    
  • Run only the root app (with Home page, sidebar, AboutUs page)
     cd root
     pnpm start
    
  • Run another app only (e.g. syllabus)
     cd syllabus
     pnpm run local
    

Branches

  • master: The released version. The website actually viewed and used by users is run according to the code in master.
  • develop: Having the latest changes ready to be released. Sometimes different features may conflict with each other, which you would not find during the development on your branch, and that's why this develop branch is needed: Merge different new changes and test them with develop before officially release
  • feature/name-of-your-feature: Should be created from develop. You should always develop your feature on this branch. If you are working on multiple new features, create different feature branches for each of them
  • hotfix: Created from master and directly pushed backed to master after development. This is only for debugging in emergency.

Contributing

We welcome any developers to submit an issue or a pull request! 😊 For any developers who want to make contribution, including our members, please refer to the following steps!

Steps

Before development

  1. Make a new branch from develop branch called β€œfeature/(name)”

    git checkout develop
    git checkout -b feature/{name-of-your-new-feature}
    
  2. Then you can run git status or git branch again to confirm that you are on a new branch.

  3. Begin your development!


During development

  1. Use Absolute Imports within each project where the src folder of a project is called @app

    e.g.

    import Home from "@app/components/Home"
    import { useLocale } from "@app/hooks/useLocale"
    
  2. Whenever you finish writing code, run linter check and formatter in the terminal with the following command to make sure styling is consistent throughout all files

    cd syllabus // or another app's folder where you were working on
    pnpm fix
    

    Whenever there are errors shown in the files you have changed, please fix them accordingly to the eslint/prettier error message as shown in the terminal


Commit during development

Whenever there is some progress in your work, commit it.

  1. Run git status to check what files are changed during your development.

  2. Let Git know what files are ready to be committed

    git add path/to/the/file
    // or you can add all changed files by:
    git add .
    
  3. Commit your changes with a message precisely but specifically describing your changes

    git commit -m "feat: styling of the clean button"
    

    Please refer to this link about how to write a commit message: https://www.conventionalcommits.org/en/v1.0.0/

  4. Push your changes to Github

    git push origin feature/{name-of-your-new-feature}
    

Code editor like VScode has functionality for you to do the above steps without typing them one by one. What you need to do will not change; it just make the process more convenient.

Finish development

  1. On the repository page, click on the Pull Request tab, and then click the New pull request button.
  2. Set the base branch to develop, compare branch to your branch.
  3. Click Create pull request button.
  4. Inform us that you have created a Pull Request (PR) and we will review it.
  5. Continue developing if we found anything to be improved
  6. If everything is OK, GREAT JOB! We will merge it into develop.
  7. Delete your feature branch on local

Create a new app (micro-app) in WasedaTime

For new big features which is obviously less related to other existing apps (syllabus, campus, feeds)

  1. Install create-single-spa
pnpm install --global create-single-spa
  1. Inside wasedatime-web folder, run pnpx create-single-spa --moduleType app-parcel , then answer questions displayed on the console.

  2. A new app (let's say forum) is created. Move into the newly created folder forum and run the following to install packages

pnpm i
  1. Edit root/src/index.ejs
<% if (isLocal) { %>
<script type="systemjs-importmap" defer>
  {
    "imports": {
      "@wasedatime/forum": "//localhost:8082/wasedatime-forum.js" // port number should not be the same as others
} }
</script>
<% } %>
  1. Try to run the app locally
  • To run the app alone, run pnpm run start:standalone, then open http://localhost:8080
  • To run the app alone but with root, edit forum/package.json like the following:
  "scripts": {
  "start": "webpack serve --port 8082",
  ...
  "local": "concurrently --kill-others \"pnpm start\" \"cd ../root && pnpm start\"",
  ...
},

Then run pnpm run local inside career folder. This runs root and career at the same time. Before this, make sure you have run pnpm i inside root folder to install packages for root. Open http://localhost:9000 to see the result.

  • To run the whole project, run npm run ci-all inside root folder to install packages for all apps, and then edit root/package.json like the following:
"scripts": {
  ...
  "local": "{original script} \"cd ../career && pnpm start\"",
  ...
},

Then run pnpm run local inside root folder. This runs all app at the same time. Open http://localhost:9000 to see the result.

Contributors


Chih-Hao Wang

πŸ› πŸ’» 🎨 πŸ“– πŸ€” πŸ‘€ πŸš‡

Meng Li

πŸ’» 🎨 πŸ€”

Isabella-Ko

πŸ’Ό 🎨 πŸ€”

JiaxianGu

πŸ› πŸ’» 🎨 πŸ€”

YH_hao_are_you

πŸ› πŸ’» πŸ€” πŸ‘€ πŸ“†

AustinZhu

πŸ› πŸ’» πŸ€” πŸš‡ 🚧

NeroArcher

πŸ’» 🎨 πŸ€”

k-jomphon

πŸ’» 🎨 πŸ€”

Xia Zjou Zheng (George)
πŸ“† πŸ€” πŸ’Ό

wanng

πŸ’» πŸ€”

Daiki Nishikawa

πŸ€”

Jaw Bo Yue

🎨 πŸ€”

youenn98

πŸ’»πŸ€”

Zhen Cao

πŸ’» 🎨 πŸ€”
Zenda Chen
πŸ’ΌπŸŽ¨πŸ€”
Kaiqing Chang
πŸ’ΌπŸŽ¨πŸ€”

Kaede Iijima

βœ…πŸŽ¨

Nicholas Narmada

πŸ’»πŸŽ¨πŸ€”

Takumi Otsuka

πŸ’»πŸŽ¨πŸ€”

Jason Park

πŸ’»πŸ’ΌπŸ€”

This project follows the all-contributors specification.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

FOSSA Status