This is a database of dance movements.
Project idea from Maho Ogawa (www.suisoco.com) for her dissertation study at Brooklyn College; web development overseen by Katherine Chuang.
This is a project for CISC 4900 to enhance the features of the minimum movement web app.
- Firebase CLI (firebase-tools)
- Node/NPM
- ReactJS - this project specifically uses
create-react-app - Material UI, Material UI Icons
- Firebase firestore, storage, and hosting
First - contact (@katychuang) to get permissions.
- Install CLI tools needed for managing various
- All at once
npm i -g firebase-tools create-react-app
- All at once
- Clone this repository
- Create a new branch for your feature work and switch to the newly made branch (All at once)
git checkout -b <branch-name> - If you need to update your working directory for whatever reason while inside your branch use
git pull - Pushing to "origin" will add your branch to a branch in the main codebase on GitHub, from which you will be able to merge your changes to the main branch (or leave them in the branch in the main codebase without merging)
- Go into the view subfolder. From the project root,
cd view - install dependencies. Running
npm iworks because there is apackage.jsonfile in that subfolder that specifies which libraries to install.
To test the UI locally, you must be in the view folder before running npm start - this command looks at the package.json file for configuration information. While you're in that mode, it will refresh the page as you make changes to the JS files. You can set the proxy field in the package.json to connect to a specific backend location. Exit out of that preview mode using CTRL+C to return to a regular terminal prompt. Make sure that you've cleaned up the URLs to the backend if you've been shifting between localhost and prod modes.
To deploy the UI changes, npm run build while in the view folder to use create-react-app's tools for packaging a deployable version. The package.json is configured such that a new build folder is created with the files to deploy in there. Go back to the root folder cd .. to run the Firebase commands for deploying to the hosting server: firebase deploy --only hosting --project <project-id>
├── .firebaserc
├── firebase.json
└── view # frontend code
├── build # created from `npm run build`, deployed folder
├── package.json # for npm
├── public # used in producing build folder
└── src # the whole app
├── App.js
├── components
│ ├── lexicon.js
│ ├── movement.js
├── index.js
└── pages
└── exhibit.js # defaults to the landing page
--- bodytension.js
| |-- spatiallevel.js
| |-- range.js
| |-- mood.js
In the comments of the JS files, you'll see these as the {{base_url}} variable
Firebase Hosting
For frontend
- Localhost: https://localhost:3000
Firebase Storate
For media assets
https://storage.googleapis.com/<project-id>/<folder>/<path>/<file>
Helpful Links for frontend dev:
- ReactJS Docs https://reactjs.org/
- Create-React-App https://create-react-app.dev/
- Material UI v5 https://next.material-ui.com/
- In case you're looking for Material-UI v5 changes, check the migration guide https://next.material-ui.com/guides/migration-v4/#pagination
-
Multiple NVM versions From: https://www.digitalocean.com/community/tutorials/nodejs-node-version-manager
Install NVM
#install Node Version Manger `curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash`
Settings
# set $NVM_DIR export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
Then, set the nvm version you want:
- To install,
nvm install 12 - To switch node version,
nvm use 12
- To install,