WasedaTime

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

• Micro-frontend (https://martinfowler.com/articles/micro-frontends.html?utm_source=arador.com)
• Description of our frontend architecture (in Micro-frontends) will be updated soon.

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.

• Amazon Web Service - Fully powered by AWS.

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

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

Environment Variables

Ask our team leader to get the required .env files.

.env files are private and should not be shared with members outside the team in principle.

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

This section is being moved to internal documentation since it is an instruction for creating new & big features, which would be leave to our team members.

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 💻💼📆🤔👀	Xinyue Tao 💻💼🎨
Michael Kaminski 💻🎨

This project follows the all-contributors specification.

License

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