VMT React

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 colloaboration infrastructure, this application uses a combination of:

Setup for local Development

Fork this repo (instructions)
$ npm install
$ nodemon
open a new console tab
$ cd client && npm install
$ npm start
At this point create-react-app will open a browser window for you and refresh it every time a change is made.

Deployment

This should be changed eventually, but it works for now.

$ git push -f heroku HEAD:master

Git Rebase Workflow

git checkout master
git pull --rebase upstream master
git push origin master
git checkout -b feature-branch
git add/git commit (on feature branch)
- To close an issue, add 'closed #[github issue number]' to commit message
git pull --rebase upstream master (on feature branch)
git push origin feature-branch
Submit pull request (your feature branch to upstream master)

More Work to do (Pull Request not accepted)

Go to Step 5 in Git Rebase flow.

Pull Request Accepted?

git checkout master
git pull --rebase upstream master
git push origin master

Totally done

git checkout master
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

Helpful links

Desmos API Geogebra API

Testing

We utilize Cypress for end to end testing To run the tests restart the server in test mode npm run test and then in a new console tab npm run cypress

NB the create-react-app server still needs to be running on port 3000

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). You can find an example of the former here and the latter here

📁 Layout

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

📁 Components

The reusable parts of the app live here

Additional notes

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

philipwisner / vmt