AthletiCheck

AthletiCheck is an application that allows for:

You can view the website, hosted by DigitalOcean, here.

You can view the Github Organization page with all of the repos here.

You can view the Milestone 1 Project here.

You can view the Milestone 2 Project here.

You can view the Milestone 3 Project here.

Project Idea:

Ever since the transition to electronic medical record systems for athletic staff at university sports programs, a tremendous amount of time has been spent on recording athletes’ data. This is due to the fact that most record systems do not provide a user friendly interface and are not easily accessible by athletic trainers. As a result, trainers often end up recording data during athlete visits and then copying the data into the EMS at the end of the day. This process leads to wasted time and unnecessary repetition of information. Previously conducted interviews and surveys with athletic trainers ranging from junior level programs to D1 sports across the country support this claim. The collected data shows that trainers spend anywhere from 2-4 hours a day on documentation alone. Unfortunately, the University of Hawaii’s athletic program is not an exception. Our group’s solution to this problem is AthletiCheck, a website that creates an easy-to-use record system targeted at both the athletes and their trainers. Each athlete will have a profile where their basic information will be stored. On top of this, a comprehensive history of each visit with a trainer will be attached to their record. The athletes will be able to view their own profile and comment on the recorded visits. This functionality will be available to the trainers, as well as the ability to document new visits with athletes. We hope that this site will reduce time spent on documentation, allow trainers to focus on actually treating the University of Hawaii’s athletes.

User Guide:

The following sections describe the major features of this application. Accompanying feature descriptions are current progress screenshots.

Landing Page:

About Us:

Sign Up:

Sign In:

Athlete Profile:

Admin Athlete Profile:

Edit Profile:

New Visit:

Profile List:

User Feedback

After deploying the website and finishing up the backend configuration for all the essential features to work, we collected real user data of 8 athletes and 2 athletic trainers. We created an google form, sent it out to the users and this is the feedback we could collect.

Design:

Overall, pretty much every user agreed with our design and could not give much thought for improvement.

Functionalities:

Several different functionalitiy add-ons were requested. The most requested functionality to include, a Covid-19 screening, was implemented and added to the website.

Other possible Improvements:

This section was more of a reference for possible future improvements.

Overall, the feedback was helpful and, although the test user count was very small (10 people), we could identify the most wanted trend and functionality, the Covid-19, screening and add it to our website. We could also conclude that our design choice works well and engages the user. Any other wanted add-ons and comment for functionality shall serve as future reference and room for improvement.

Developer Guide

First, install Meteor.

Second, go to https://github.com/athleticheck/athleticheck, click the “Code” button, and download “athleticheck-master.zip” as a ZIP file. Once downloaded, unzip in local machine and open with JS IDE of choice.

Third, cd into the app/ directory of your local copy of the repo, and install third party libraries with:

$ meteor npm install

Next, install the plugin React-Smart-Data-Table. Developed by @joaocarmo.

To install, cd into the app/ directory of your local copy of the repo, and run the following:

$ npm install react-smart-data-table

Developers can learn more about React-Smart-Data-Table and it’s full suite of customization options by referring to the developer site.

Running the system

Once the libraries are installed, you can run the application by invoking the “start” script in the package.json file:

$ meteor npm run start

The first time you run the app, it will create some default users and data. Here is the output:

meteor npm run start

> meteor-application-template-react@ start D:\GitHub\athleticheck\app
> meteor --no-release-check --settings ../config/settings.development.json

[[[[[ ~\D\GitHub\athleticheck\app ]]]]]

=> Started proxy.
=> Started MongoDB.
W20201130-22:33:32.482(-10)? (STDERR) Note: you are using a pure-JavaScript implementation of bcrypt.
W20201130-22:33:32.540(-10)? (STDERR) While this implementation will work correctly, it is known to be
W20201130-22:33:32.540(-10)? (STDERR) approximately three times slower than the native implementation.
W20201130-22:33:32.541(-10)? (STDERR) In order to use the native implementation instead, run
W20201130-22:33:32.541(-10)? (STDERR) 
W20201130-22:33:32.542(-10)? (STDERR)   meteor npm install --save bcrypt
W20201130-22:33:32.543(-10)? (STDERR) 
W20201130-22:33:32.543(-10)? (STDERR) in the root directory of your application.
I20201130-22:33:33.846(-10)? Creating the default user(s)
I20201130-22:33:33.847(-10)?   Creating user admin@foo.com.
I20201130-22:33:34.117(-10)?   Creating user john@foo.com.
I20201130-22:33:34.351(-10)? Creating default data.
I20201130-22:33:34.352(-10)?   Adding: Basket (john@foo.com)
I20201130-22:33:34.372(-10)?   Adding: Bicycle (john@foo.com)
I20201130-22:33:34.374(-10)?   Adding: Banana (admin@foo.com)
I20201130-22:33:34.377(-10)?   Adding: Boogie Board (admin@foo.com)
I20201130-22:33:34.381(-10)? profiles collection is empty!
I20201130-22:33:34.382(-10)? Creating default profiles.
I20201130-22:33:34.382(-10)?   Adding: defaultA
I20201130-22:33:34.396(-10)?   Adding: defaultB
=> Started your app.

=> App running at: http://localhost:3000/

Note regarding “bcrypt warning”:

You will also get the following message when you run this application:

Note: you are using a pure-JavaScript implementation of bcrypt.
While this implementation will work correctly, it is known to be
approximately three times slower than the native implementation.
In order to use the native implementation instead, run

  meteor npm install --save bcrypt

in the root directory of your application.

On some operating systems (particularly Windows), installing bcrypt is much more difficult than implied by the above message. Bcrypt is only used in Meteor for password checking, so the performance implications are negligible until your site has very high traffic. You can safely ignore this warning without any problems during initial stages of development.

Viewing the running app

If all goes well, the template application will appear at http://localhost:3000. You can login using the credentials in settings.development.json, or else register a new account.

ESLint

You can verify that the code obeys our coding standards by running ESLint over the code in the imports/ directory with:

meteor npm run lint

Collections

The application implements a 3 Collections: Profiles, Visits, and Comments.

Profiles contains fields for username, firstName, lastName, imageURL, sport, age, height, weight, graduation (date), and major

The Profiles collection is defined in imports/api/profile/Profiles.js.

The Profiles collection is initialized in imports/startup/server/Mongo.js.

Visits contains fields for profileId, data, trainer, cleared, and description.

The Visits collection is defined in imports/api/visit/Visits.js.

The Visits collection is initialized in imports/startup/server/Mongo.js.

Comments contains fields for visitId, date (Of visit), author, and comment.

The Comments collection is defined in imports/api/comment/Comments.js.

The Comments collection is initialized in imports/startup/server/Mongo.js.

CSS

The application uses the React implementation of Semantic UI.

Routing

For display and navigation among its four pages, the application uses React Router.

Routing is defined in imports/ui/layouts/App.jsx.

Authentication

For authentication, the application uses the Meteor accounts package.

When the application is run for the first time, a settings file (such as config/settings.development.json) should be passed to Meteor. That will lead to a default account being created through the code in imports/startup/server/Accounts.js.

The application allows users to register and create new accounts at any time.

Authorization

Only logged in trainers (Application admin) can manipulate profile and visit documents. Users have read-only access to their own profile and none other.

Configuration

The config directory is intended to hold settings files. The repository contains one file: config/settings.development.json.

The .gitignore file prevents a file named settings.production.json from being committed to the repository. So, if you are deploying the application, you can put settings in a file named settings.production.json and it will not be committed.

Quality Assurance

ESLint

The application includes a .eslintrc file to define the coding style adhered to in this application. You can invoke ESLint from the command line as follows:

[~/athleticheck/app]-> meteor npm run lint

> meteor-application-template-react@ lint D:\GitHub\athleticheck\app
> eslint --quiet --ext .jsx --ext .js ./imports

ESLint should run without generating any errors.

It’s significantly easier to do development with ESLint integrated directly into your IDE (such as IntelliJ).

Developers

The following team members have helped develop this site: