Welcome to the Astute Canary - Syndromic Community Tracker. This provides the front-end framework for a COVID-19 Community Tracker Web application, focusing on tracking users symptoms, vaccination and testing history. While this was built with the COVID-19 pandemic in mind, it could easily be adapted for other health crisis or general use. At this time, this source code is front-end only, and will require building out of any kind of backend, database and authentication needed for your use case.
This is a prototype and may be used for commercial use.
A demo of the frontend can be found here: https://mitre.github.io/astute-canary-SCT/
node- at least v10.13 We recommend you have the latest LTS version installednpm- running v7.5.3 at the time of development
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm run start
# generate static project
$ npm run generateFor detailed explanation on how things work, check out Nuxt.js docs.
The application utilizes the TailwindCSS framework for fast building and adaptable configuration. To change the main page background color of your application, text color, specify secondary colors, etc., locate the tailwind.config.js file in the root of the project. If running the project locally, you can preview how your color selections will look on the website within a few seconds of saving.
To change the base font used see the TailwindCSS documentation on font-family customization.
To add your organizations logo to the application, drop the file into the /assets/images folder using the name and extension Logo.svg. An existing sample logo is in there, but you can remove or overwrite.
To change the application name to your organizations: Locate the file general.js under the /store directory. In this file, you can change the application name and update the 'important information' text on the home screen of the application. Note: if running locally, you may need to clear your cache to see your changes reflected, as this application incorporates Vuex state management along with Vuex Persist, which uses local storage to save your state data in your browser.
To update the symptom, vaccination, and testing tracking questionnaires, the framework uses SurveyJS to create and render the surveys.
You can use the survey configs created as a base or start from scratch. But, you must follow the naming structure as follows:
- For the symptoms survey:
symptom.json - For the testing survey:
testing.json - For the vaccination survey:
vaccination.json
These three files must be named appropriately and located in '/static/survey-configs/' for the application to render them.
Additionally for the symptom.json survey, there currently must be an element with the name "Symptoms". The analysis page uses this expected syntax to generate it's symptom chart. If you wish to have a different format for your symptoms, this will require adapting the Analysis code.
To create a new survey or edit an existing survey you can:
- Edit the appropriate survey JSON File directly
- Use the SurveyJS Creator tool to edit or build new surveys from scratch. To edit an existing survey, copy and paste the survey json into the JSON editor tab on the SurveyJS editor interface. It will populate the editor with the survey and you can edit from there. Make sure to copy and paste the new survey json into the appropriate file.
This application leverages StoryboardJS for it's components. To view the Storybook directory run
npx nuxt storybook or yarn nuxt storybook
This front-end is the first step of many in creating a flexible, adaptable, and customizable web application that can be easily used by organizations to help track the general health of their users. We are also looking to:
- Continue to adapt and improve the user interface through user research
- Continue to ease customization of the UI and other elements of the application, so that someone with little to no coding experience could create an instance
- Provide more flexible visualizations for data analysis
- Improve code and documentation
- Many other exciting things! So stay tuned
This application is built with Vue and Nuxt. Vue is a javascript framework that utilizes an HTML based syntax. Nuxt is a high-level framework built on top of Vue that makes building universal applications fast and easy.
| Library | Package(s) | Description | Where is this used |
|---|---|---|---|
| ChartJS | https://vue-chartjs.org/ | Easy and beautiful charts with Chart.js and Vue.js | Analysis page /pages/analysis/index.vue |
| FontAwesome | @nuxtjs/fontawesome | Module to use Font Awesome icons in your Nuxt.js project. Uses vue-fontawesome under the hoods | Anywhere that uses an icon. |
| SurveyJS | survey-vue | SurveyJS is a modern way to add surveys and forms to your website. | Symptom Tracking page /pages/track/symptoms/index.vue, Testing Tracking page /pages/track/testing/index.vue, Vaccination Tracking page /pages/track/vaccination/index.vue, and the AppSurvey Component /components/AppSurvey.vue |
| TailwindCSS | @nuxtjs/tailwind | Rapidly build modern websites without ever leaving your HTML. | Used throughout the application |
| V-Calendar | https://vcalendar.io/ | An elegant calendar and datepicker plugin for Vuejs. | Calendar page /pages/calendar/index.vue |
- Nuxt documentation - https://nuxtjs.org/docs/2.x/get-started/installation
- Vue documentation - https://vuejs.org/v2/guide/
- TailwindCSS documentation- https://tailwindcss.com/docs
- SurveyJS Creator documentation - https://surveyjs.io/Documentation/Survey-Creator
- V-Calendar documentation - https://vcalendar.io/
- ChartJS documentation - https://www.chartjs.org/docs/latest/
- Storyboard documentation - https://storybook.js.org/docs/react/get-started/introduction
Copyright 2022 MITRE Engenuity. Approved for public release.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.