Skip to content
Nikki Babaii edited this page Apr 21, 2022 · 16 revisions

Welcome to the virtual-wellness-project wiki!

General Overview

The virtual wellness app is meant to be a system that can be used by health care providers at clinics with their patients. The main idea is that Health care providers would be able to assign treatments to their patients, and the patients would be able to log in and track their treatment plan, what they have completed and what they have to do. The long term goals of this project were to gamify it, maybe add a points system or badges to earn, in order to motivate the users to progress in their plans. There is also room to add fitness trackers to aid in tracking progress. Eventually, the admin should be able to download data from the databases regarding patient use. The platform should also adhere to Canadian guidelines for storing health data. Overall, it should be an easy to use, expandable system for patients of all ages and technical abilities.

What We Achieved

Our team was able to set up the site with a user and admin system. A user can login to their page, where details regarding their health are recorded in their profile. They have a treatments page, showing a list of their treatments, where they can see further details for individual treatments or add new ones. The admin user has the added privilege of being able to see the treatments for users, and add treatments on their behalf. There is also an email notification setup to send out emails when a treatment is due to be complete.

Contributing

Requirements:

  • Cloning this project
  • Cloning the deployment fork (see Deployment section)
  • PHP installation including composer and artisan
  • Node.js installation including npm
  • Installation of React
  • An IDE that can edit PHP and Javascript
  • A browser with React Developer Tools and access to the Console. On Chrome and Firefox you can access this using F12. React Developer tools can be installed through the Chrome WebStore and Firefox Add Ons
  • Reading this documentation, all of it

Architecture

Laravel was used for the backend while React was used for the front end. This image provides an overview of how they interact. The Database, Models, Controllers, and Views are part of the Laravel Framework, while the components (in orange/grey) are part of the React front end.

Laravel uses the Model-View-Controller Design Pattern, for which you can read more about here.

arch

Database

The database migrations can be found in database/migrations. Each migration file represents a different table in the database. Each file describes the different columns of data that are added, their respective datatypes and the relationships that exist between different tables.

Models

The data models can be found in the folder app/models. The user models contain information about the relationships that different data objects have with one another. For example the fact that a treatment needs to be assigned to a user is described in the model.

Controllers

Routes

API: API routes links to resources where data is stored and manipulated. Each API route refers to a different function within one of the controllers. The API routes are protected xcrf tokens and sanctum authorization. Documentation on both of those processes can be found in the Laravel documentation.

Sanctum: https://laravel.com/docs/9.x/sanctum#main-content

xcrf token: https://laravel.com/docs/9.x/csrf#csrf-x-xsrf-token

Web: The web routes are listed in the routes/web.php file. Each route stipulates the url and the controller function that will return the connected view.

Views

Views in the form of blade.php files. These files allow us to render what is on the page using react components and control access to a page based on auth. You will notice that many of the views "extend layout" this allows us to have the same background, sidebar and topnav on every page. You will find this in the layouts folder of views. The Sidebar and NavItem components are rendered here.

Components

orange container with embedded components listed in grey These are react components. The Orange is the container, and the Grey is all of the components rendered in the parent container, making up the views. Components are js/jsx files, and are explained in further detail in the react section of this wiki.

Clone this wiki locally