Virtual Math Teams (VMT)

Virtual Math Teams (VMT) provides a collaboration infrastructure for visual math and geometry tools, such as Geogebra and Desmos. To provide this infrastructure, this version uses React.js and Redux.js, express and sockets.io. see 'Installation' below.

License

• For non-commercial uses, this application is licensed under the AGPL license.
• Any use of VMT for commercial purposes is subject to and requires a special license to be negotiated with Mathematical Thinking.
• See VMT license details

Installation (Technologies used)

To provide the collaboration infrastructure, this application uses a combination of:

• MongoDB,
• Express,
• Socket.io,
• React.js,
• Redux,
• Node.js

Setup for local Development

In its current state, VMT is tightly linked with EnCOMPASS. When a user signs up with VMT, they also receive an EnCOMPASS account which has the same username (and vice versa). If a user is logged in to one app, they will also be logged in to the other app. As a result, you must also be running mt-sso (EnCOMPASS is not required) for user registration and login to work properly. If you do not need signup functionality while developing, then you do not need to be running EnCOMPASS.

If you wish to run VMT separately, then you just need to remove the existing auth routes (server/routes/auth) and middleware (server/middleware/mt-auth) and put in your own system. There are also routes used solely by EnCOMPASS that could be removed (server/routes/enc).

1. Fork this repo (instructions)
2. $ cd vmt/server && npm install
3. $ cd ../client && npm install
4. $ cd ..
5. $ cp .env.example .env Note that the client .env contains very little and will soon be deprecated. Instead, client environment variables are provided by the server. In the server .env file, prefix client variables with REACT_APP_. They will be available in the client code via window.env.REACT_APP_XXX (global variables).
6. Make sure you have mongodb installed. instructions here
7. From anywhere on your computer run $ mongod --dbpath <some-new-dir-for-db> where <some-new-dir-for-db> is a directory for MongoDB data then cd back to the vmt/ and...
8. $ npm run dev This will start the react development server on port 3000 and the express server on 3001 N.B., you'll need to have nodemon and concurrently installed these are included in the dev dependencies but you may need to install them globally. $ npm i -g nodemon concurrently
9. We utilize prettier for formatting.

Deployment

To deploy this project to staging or production go to the root level directory and run $ sh deploy-mac.sh <username> <environment> where environment = production || staging

This can only be done by the core contributors.

Contributions and Git Rebase Workflow

1. git checkout main
2. git pull --rebase upstream main
3. git push origin main
4. git checkout -b feature-branch
5. git add/git commit (on feature branch)
   • To close an issue, add 'closed #[github issue number]' to commit message
6. git pull --rebase upstream main (on feature branch)
7. git push origin feature-branch
8. Submit pull request (your feature branch to upstream main)

More Work to do (Pull Request not accepted)

• Go to Step 5 in Git Rebase flow.

Pull Request Accepted?

1. git checkout main
2. git pull --rebase upstream main
3. git push origin main

Totally done

1. git checkout main
2. git branch -d feature-branch

Troubleshooting

• git remote -v to see remote origins
• git remote add upstream https://github.com/mathematicalthinking/encompass.git
• if existing upstream git remote rm upstream

Styleguide

We use Prettier Add the VS code extension and configure it to format on save.

Testing

We utilize Cypress for end to end testing To run the tests restart the server in test mode npm run test A cypress window will open allowing you to run one or all the integration tests.

Project structure

Frontend (client)

There are one million and one ways to structure a react app. I've found the following structure to work well enough.

App.js serves as the entry point of the application and exposes the Redux store and react-router to the rest of the application.

📁 Routes

There are two primary routes. / for guest users and /myVMT for logged in users.

📁 Containers

Containers come in one of two forms. Either they inject props into a component from the redux store. Or they manage shared local (i.e. non-redux) state for two or more react components (or they do both).

📁 Layout

The layout directory is for organizing...layouts. Each file roughly corresponds to a page.

📁 Components

The shared/reusable UI parts of the app live here

Backend (root)

📁 Routes

📁 Controllers

📁 Models

📁 Middlerware

Sockets.js

Additional notes

This project was bootstrapped with this template refer to its README for additional information regarding the directory structure.

Helpful links

Desmos API Geogebra API