A single-page application for a team to track their progress in the Ultimate Functional Training Challenge, a fun exercise competition designed to promote an active lifestyle and get software engineers up from their desks during the work day.
Participants record their exercises and gain points, trying to reach a set goal. Upon gaining enough points on a single activity, or during a special one-day-challenge, participants are rewarded with badges.
This was a capstone project for a University of Turku Full Stack bootcamp, which took place between March and August of 2019. A team of five was given two months and free hands to design and build it. Original concept and support was provided by Ambientia.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
Make sure you have a recent version of Node.js installed.
For this React frontend to work, start the backend server on the same machine.
Clone the repository.
git clone https://github.com/simosavonen/uftc-frontend.git
cd uftc-frontend
Install Node.js modules.
npm install
Start the application in development mode.
npm start
Navigate to http://localhost:3000 and you should see the login page.
The application is meant to be used by a closed group of people, like a company's employees. Therefore, creating an account works only when you enter the site at http://localhost:3000/login/secret where the term 'secret' matches the one set in the backend .env file for environment variables.
The application assumes to find the backend server running on the same host. Edit the file 'config/config.js' if this is not the case.
To build a production version.
npm run build
Copy the contents of the 'build' folder into your web server.
In the branch mm_test there is a set of end-to-end Cypress tests.
git checkout mm_test
npm install
npm start
Running the tests requires the backend server was started in test mode.
Make sure the .env file has defined a TEST_MONGODB_URI which is different from your development database, since the tests delete all data from Mongo.
git checkout mm_test
npm run watch:test
In the frontend folder, start the Cypress tests with
npm run cypress:open
After Cypress finishes loading, you can click at the button run all specs which launches a battery of tests.
- ReactJs - Web Framework
- Bulma - CSS Framework
- ApexCharts - Charting library
- Moment - Date & Time handling
- React-toastify - Notifications
- Sweetalert2 - Popup alerts
- Cypress - End-to-end testing
- @shonkala - Achievements, popup alerts, series selection
- @simosavonen - Leaderboard, Top5, admin tools
- @MMattila75 - Recent activities, Cypress testing
- @jarigithub - User profile, data input forms
- @SirjeH - UX design, communications
- FullStackOpen - Helsinki University's free course material
- Ambientia - Original concept, support and guidance
- University of Turku - Full Stack bootcamp