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.

Getting Started

Prerequisites

# install pnpm package manager
npm install -g pnpm
# install bit cli
npm install bit-bin -g
# log into your bit.dev account
bit login
# clone the project
git clone https://github.com/wasedatime/wasedatime-web.git
cd wasedatime-web

Add bit token to your environment variables:

nano ~/.bashrc

# Then inside the file write:
export BIT_TOKEN=???

# Contact us for the value of '???'

Installing

# install packages for all frontend
pnpm install

Running the app for developing

You may meet errors when you run wasedatime-web locally and then access Syllabus page without having a .env file. Please contact us if you need the .env file, while it is not necessary to have it if the development you are engaging in is not related with Syllabus page.

To develop only in one frontend (with 'root'):

cd wasedatime-web/{folder name of the frontend you want to run}
pnpm run local

To develop only in one frontend (without 'root'):

cd wasedatime-web/{folder name of the frontend you want to run}
pnpm run start:standalone

To develop only inside 'root':

cd wasedatime-web/root
pnpm start

To run the whole project:

cd wasedatime-web
pnpm start

Create a new project (micro-app) in WasedaTime

1. Install create-single-spa

pnpm install --global create-single-spa

2. Inside wasedatime-web folder, run pnpx create-single-spa --moduleType app-parcel , then answer questions displayed on the console.

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

4. 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>
<% } %>

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

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.

Contributing

Submit an issue or a pull request! 😊

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 💻🤔

This project follows the all-contributors specification.

License

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