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.
- 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.
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.
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.
- Create a GitHub account if you haven't
- 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.
- Install Git on your computer (local): https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
Download: https://nodejs.org/en/
Please download the LTS one and install it.
Both Node.js
and npm
should be installed.
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
-
Create a Bit.dev account if you haven't.
-
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.
-
Then install Bit on your computer (local): https://docs.bit.dev/docs/installation
-
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
- Add the following to file
~/.bash_profile
export BIT_TOKEN=XXXXXXXXXXXXX // replace XXXXXXXXXXXXX to your token
- 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
- Either restart your terminal or run the following:
source ~/.bash_profile
Windows https://www3.ntu.edu.sg/home/ehchua/programming/howto/Environment_Variables.html
- Add the following to file
// 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
// At the top level of the project folder
pnpm install
// β works the same
pnpm i
- 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
- 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 withdevelop
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 tomaster
after development. This is only for debugging in emergency.
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!
-
Make a new branch from
develop
branch called βfeature/(name)βgit checkout develop git checkout -b feature/{name-of-your-new-feature}
-
Then you can run
git status
orgit branch
again to confirm that you are on a new branch. -
Begin your development!
-
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"
-
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
Whenever there is some progress in your work, commit it.
-
Run
git status
to check what files are changed during your development. -
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 .
-
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/
-
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.
- On the repository page, click on the
Pull Request
tab, and then click theNew pull request
button. - Set the base branch to
develop
, compare branch to your branch. - Click
Create pull request
button. - Inform us that you have created a Pull Request (PR) and we will review it.
- Continue developing if we found anything to be improved
- If everything is OK, GREAT JOB! We will merge it into
develop
. - Delete your feature branch on local
For new big features which is obviously less related to other existing apps (syllabus, campus, feeds)
- Install
create-single-spa
pnpm install --global create-single-spa
-
Inside wasedatime-web folder, run
pnpx create-single-spa --moduleType app-parcel
, then answer questions displayed on the console. -
A new app (let's say
forum
) is created. Move into the newly created folderforum
and run the following to install packages
pnpm i
- 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>
<% } %>
- 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.
This project follows the all-contributors specification.
This project is licensed under the MIT License - see the LICENSE.md file for details