Adam Clifton
Christopher Gold
Dillon O'Brien
Sergio Prieto
Shane Thoney
- Introduction
- Build Instructions
- Frontend Overview
- Frontend Technology
- Frontend Tools
- Backend Overview
- Backend Technology
- Backend Tools
- Cloud-hosting and Database Overview
- Reference Materials
This Retrospective Toolkit (the "Toolkit") is the product of Team 18's capstone project. The toolkit will be used as a training tool by our sponsor that modeled after a cube activity done in-person at our sponsor's training facility.
The functional aspects of the Toolkit are separated into three areas: (1) frontend components, (2) backend components, and (3) cloud-hosting and database components. This document will cover the topics and technology used in the project.
This project was bootstrapped with Create React App.
To initialize dependencies before running:
In the project directory, you can run:
and then
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
This invokes the testing framework provided with the create-react-app package. Yarn test will first initialize any test components from the src/setupTests.js file, then it will search for files with the *.test.js naming convention to run provided tests. The setupTests.js file is a top-level file in the src folder, similiar to index.js. These tests should be written and placed in the src/tests/ directory. Any mock functionality that is needed for test environment is accessed from the src/tests/__mocks__/ directory.
Mock components and other functionality should be written and placed in the src/tests/__mocks__/ folder. For more information about react testing, see the Jest documentation and React Jest Testing.
The frontend consists of a landing for the cube activity, information about the activity and the activity board. There is the ability to have administrative or user login.
The frontend is a Node/ReactJS build. The Cube activity game makes use of a physics library called three.js and its supporting libraries react-three-fiber. The frontend includes a full testing suite with heavy utilization of jest and supporting libraries. See Reference Materials for more information.
Tools:
- three.js
- react-three-fiber
- axios
- aws-sdk
- material-ui
- React related libraries
Testing Tools:
- jest
- enzyme
- supertest
- testing-library
- react-test-renderer
The backend consists of a seperate server package that handles authentication, middleware and database queries along with its usual server functionality (routing, controllers, etc.).
The backend is a Node/ExpressJS build. Databases used include Postgres and Redis. The backend contains a full testing suite with using jest and supporting libraries. See Reference Materials for more information.
Tools:
- redis
- postgres
- bcrypt
- Express related libraries
Testing Tools:
- jest
- supertest
- mocha
- chai
- Heroku is used to host the application for its ease of use and cost effectiveness. See Reference Materials for more information about Heroku.
- Node.js: Node is the foundation for React.js.
- Bebelrc: Babel is a Javascript compiler that makes writing React apps easier and more similar to JS.
- Webpack: Webpack compiles multiple .js files into one file to load into scripts when starting the app.
- Yarn: Makes package, scripting and dependency management easier.
- Create React App
- three.js
- react-three-fiber
- axios
- material-ui
- aws-sdk
Full-stack Tools:
Frontend Unit Testing:
Backend Integration Testing: