CONTENTS

• Introduction
• User Experience - UX
  • UX
    • Site purpose
    • Site goal
    • Audience
  • User stories
    • First time user goals
    • Returning user goals
  • Agile methodology
  • Design
    • Colors
    • Typography
    • Media
    • Database scheme
    • Wireframes
• Features
  • Existing features
  • Future features
• Technologies used
  • Languages
  • Frameworks libraries, programs
• Testing
• Deployment
  • Forking
  • Cloning the repo with GitPod or Codeanywhere
  • Running the project locally
  • Deploying with Heroku
• Credits

Introduction: Digital patient

This is the Project Portfolio 4 for Code Institute Full-stack development program. Digital patient is a full-stack Django project that runs on Heroku.

The site allows users to register and log in from the frontend. Once registered and logged in users can edit personal data, add, edit and delete diseases/medications, doctors and contacts.

The live website on Heroku can be accessed at the following link: View my Live Website here

User Experience

Back to the top.

UX

Site purpose

This program is designed to make it easier for a patient to keep track of their doctors, diseases, medications, as well as (emergency) contacts. In addition, in the case of an emergency, it should be possible for doctors to see a readable version of the patient's profile to have a look at previous diseases, medications, previous doctors and emergency contacts.

Site goal

The site goal is to build a website where a kind of digital patient dossier can be easily shared by the patient him/herself for possible emergencies.

A tool like this does not (yet) exist in Germany, and in the case of emergency with, for example, an unconscious patient, the doctors may not know any previous diseases, medications, general practitioners or emergency contacts, or they may first have to laboriously collect these on individual platforms or (mobile) devices.

Audience

For anyone who wants to have all their emergency data on one platform for potential doctors in case of emergency.

User stories

First time user goals

• As a first time user I can find information what the purpose of the website is.

Returning user goals

• As a (returning) user I can register for an account so that I can login after registration.
• As a returning user I can log in to my registered account.
• As a returning user I can log out of my registered account.
• As a returning user I can edit my personal data.
• As a returning user I can add, edit and delete medication/diseases, doctors and contacts in my registered account.
• As a returning user I can share a readable version of my account with potential doctors in case of emergency.

Agile methodology

The principles of agile methodology were utilized during the project. Github issues were used to create user stories for the project. Each user story (including user acceptance criteria, tasks and story points) can be displayed on the board or in the issues. By assigning user stories to issues and taking advantage of the GitHub Kanban board functionality, the necessary goals and priorities throughout the project could be well defined. In addition, labels were used to further define the priority of each user story in the Kanban board.

Through the use of the Kanban board in the projects view in Github, the project was divived into a few different sections:

• Add-ons
• To-do
• In progress
• Done

Milestones were used to create sprints. There were 4 sprints each dated appropriately. User stories were completed based on the current sprint in progress. Each sprint was completed on time.

Design

Colors

I decided to use calming colors, primarily shades of blue. Blue is the typical business color, as it is sober, businesslike, calming and trustworthy, and it maintains its character even in different gradations. It best connects to the goal of the website. To keep the contrast between the background and the font, a basis black tone and a lightly grey is included. All colors also connect to Bootstrap's existing colors (primary, secondary and dark).

Typography

Utilized the Bootstrap 5 native font stack that selects the best font-family for each OS and device. Besides this, the font gives a calm and serious impression.

Media

The pictures (background image, favicons) were taken from Pixabay.

Database scheme

The database model reflects the different areas of the website: the personal data and share option through the model "UserProfile", the entries for medications/diseases through the model "MediDisList", the entries for doctors through the model "Doctor" and the entries for contacts through the model "Contact".

Wireframes

Initial wireframes

Home page

Register

Login

Overview (profile)

Personal data

Edit personal data

Medication/Diseases

Doctors

Contacts

Features

Back to the top.

Existing features

• Home screen

  • The home screen shows information about the website and explains briefly in a FAQ-toggle the most important things.
  • The image is intended to symbolize the interface between doctor and patient via the digital medium/the website.

  

• Navigation Bar

  • The navigation bar appears on each page.
  • The home screen can be displayed by clicking on the logo on the left side.
  • The navigation bar for unauthenticated users contains links to the home screen (via de logo), register and login.

  

  • The navigation bar for authenticated users contains links for the home screen (via de logo), logout and a drop down menu with links to the five important pages of the website: Overview (profile), personal data, medication/diseases, doctors, contacts.

  

  • The navigation bar will allow the users to easily navigate from page to page across all devices.
  • The navigation bar is fully responsive. On smaller devices, the hamburger menu appears with an expanded menu bar.

  

  

• Footer

  • The footer appears on each page.
  • The footer is sticky.
  • The footer contains a copyright and a link to Code Institute which opens in a new tab.

  

• Register

  • The page is intended for new users to register.
  • The users have to enter an e-mail address, a username and the password twice.
  • They can found some information about the password criteria.

  

  • After successful registration, users should receive a confirmation email.

  

  • When users click on the link in the mail, they are redirected to the email confirmation page.
  • After clicking the "Confirm" button, they will be redirected to overview.

  

  • If the link is invalid or expired, an error message appears.

  

• Login

  • The page is intended for registered users to log in.
  • The users have to enter their username and the password.
  • When logging in, the 'Remember me' function can also be activated.

  

• Logout

  • The page is intended for registered users to log out.
  • The users are asked if they really want to log out before the final logout.
  • Only after confirming by clicking on the button, the users are logged out and redirected to the home screen.

  

• Lost password

  • The page is intended for registered users to get a new password if they forgot it.
  • Users can get a new password by clicking on the 'Forgot password?' button on the login-page. They will then be redirected and will need to enter their registered email address.

  

  • Users will then receive a reset link to their registered email address.
  • In this email, users will also be reminded of their username.

  

  • After clicking the link in the email, users can set a new password, which they have to type twice.

  

• Overview

  • The page is intended as an overview of the various options available on the website.
  • The page includes links to all five options: Personal data & share account, pre-existing diseases and medications, doctors, contacts and delete account.

  

• Messages

  • Messages appear for almost all relevant operations on the website, e.g. information about login, logout, add, edit, delete.

  

• Delete account

  • In the overview, users will find a button "Delete account".
  • After clicking the button, users will be prompted to enter their password.

  

  • Only if the password is entered correctly, the account will be deleted.
  • If the input is incorrect, the user will be redirected back to the password input.

  

  • Users can also cancel the account deletion by clicking the cancel button.
  • If the password is correct, the users will be redirected to the home screen and a message appears that the account deletion was successful.
  • Users will no longer be able to log in with their old credentials.

  

  • When clicking on the "Cancel" button, a modal appears and asks the users if they really want to discard their changes.
  • If the users choose "No", they will stay on the delete page, if they choose "Yes", they will be redirected back to the overview.

  

• Personal data

  • Users can see their personal data entries on this page.
  • Users can edit them at any time by clicking on the "Edit" button.
  • Users can click on the "Back to overview" button to return to the overview.
  • The "I want to be resuscitated" field is turned on by default for new users without entries.
  • The "Share account" field is turned off by default for new users without entries.

  

• Edit personal data

  • New users can enter their data here for the first time (first name, last name, birthday, address & city, I want to be resuscitated, share account).
  • All fields - except "share account" and "I want to be resuscitated" - are required.

  

  • Returning users can change their entries at any time.
  • By clicking on the "Save" button, the entries are saved and the user is returned to the personal data view.
  • When users enable "share account", a randomized link is automatically generated that allows non-logged-in or non-registered users to view a non-editable overview of the user's entries in case of emergency.
  • When clicking on the "Cancel" button, a modal appears and asks the users if they really want to discard their changes.
  • If the users choose "No", they will stay on the edit personal data page, if they choose "Yes", they will be redirected back to the view personal data page.

  

• Public profile

  • When registered users enable "share account", a randomized link is automatically generated that allows non-logged-in or non-registered users to view a non-editable overview of the user's entries in case of emergency.

  

• Medication/diseases

  • Users can enter their data here (medication/disease name and instructions).
  • The field for mediation or disease name is required.
  • Clicking the "Add" button adds new entries.
  • If there are no entries (yet), this will be indicated to the users accordingly.
  • Users can click on the "Back to overview" button to return to the overview.

  

  • If entries exist, they will be displayed to the users below the Add form.
  • For each entry there is a possibility to edit or delete it.

  

• Edit medication/diseases

  • Users can edit their data here (medication/disease name and instructions).
  • The field for mediation or disease name is required.
  • When clicking on the "Save" button, the changes will be saved and the users will be redirected back to the medication/diseases view.

  

  • When clicking on the "Cancel" button, a modal appears and asks the users if they really want to discard their changes.
  • If the users choose "No", they will stay on the edit page, if they choose "Yes", they will be redirected back to the medication/diseases view.

  

• Delete medication/diseases

  • Users can delete one of their medication/diseases entries here.
  • When clicking on the "Delete" button, the changes will be saved and the users will be redirected back to the medication/diseases view.
  • The deleted entry is no longer displayed.

  

  • When clicking on the "Cancel" button, a modal appears and asks the users if they are sure to cancel the delete.
  • If the users choose "No", they will stay on the delete page, if they choose "Yes", they will be redirected back to the medication/diseases view.

  

• Doctors

  • Users can enter their data here (doctor name and details).
  • The field for the doctor name is required.
  • Clicking the "Add" button adds new entries.
  • If there are no entries (yet), this will be indicated to the users accordingly.
  • Users can click on the "Back to overview" button to return to the overview.

  

  • If entries exist, they will be displayed to the users below the Add form.
  • For each entry there is a possibility to edit or delete it.

  

• Edit doctors

  • Users can edit their data here (doctor name and details).
  • The field for the doctor name is required.
  • When clicking on the "Save" button, the changes will be saved and the users will be redirected back to the doctors view.

  

  • When clicking on the "Cancel" button, a modal appears and asks the users if they really want to discard their changes.
  • If the users choose "No", they will stay on the edit page, if they choose "Yes", they will be redirected back to the doctors view.

  

• Delete doctors

  • Users can delete one of their doctor entries here.
  • When clicking on the "Delete" button, the changes will be saved and the users will be redirected back to the doctors view.
  • The deleted entry is no longer displayed.

  

  • When clicking on the "Cancel" button, a modal appears and asks the users if they are sure to cancel the delete.
  • If the users choose "No", they will stay on the delete page, if they choose "Yes", they will be redirected back to the doctors view.

  

• Contacts

  • Users can enter their data here (contact name and details).
  • The field for the contact name is required.
  • Clicking the "Add" button adds new entries.
  • If there are no entries (yet), this will be indicated to the users accordingly.
  • Users can click on the "Back to overview" button to return to the overview.

  

  • If entries exist, they will be displayed to the users below the Add form.
  • For each entry there is a possibility to edit or delete it.

  

• Edit contacts

  • Users can edit their data here (contact name and details).
  • The field for the contact name is required.
  • When clicking on the "Save" button, the changes will be saved and the users will be redirected back to the contacts view.

  

  • When clicking on the "Cancel" button, a modal appears and asks the users if they really want to discard their changes.
  • If the users choose "No", they will stay on the edit page, if they choose "Yes", they will be redirected back to the contacts view.

  

• Delete contacts

  • Users can delete one of their contact entries here.
  • When clicking on the "Delete" button, the changes will be saved and the users will be redirected back to the contacts view.
  • The deleted entry is no longer displayed.

  

  • When clicking on the "Cancel" button, a modal appears and asks the users if they are sure to cancel the delete.
  • If the users choose "No", they will stay on the delete page, if they choose "Yes", they will be redirected back to the contacts view.

  

• 404 page

  • When users access a link that does not exist, they are automatically redirected to a 404 page.
  • There they are informed about the non-existent page and can click the "Go back to the homepage" button to return to the homepage.

  

  Future features

• For a future version, the function to change the password in the account itself could still be added.

• For a future version, the function to change the email address in the account itself could be added.

• For a future version, other registration/login options - e.g. via Google or Github - could be added.

• For a future version, even more functions could be added in the account, such as detailed instructions on what actions to take or refrain from taking in emergencies.

• For a future version, an upload function, e.g. for doctor's letters or similar, could be added.

Technologies used

Back to the top.

Languages

• Python
• JavaScript
• HTML5
• CSS3

Frameworks, libraries, programs

• Git
  • Git was used for version control by utilizing the Gitpod terminal to commit to Git and push to GitHub
• Github
  • GitHub was used to store the project's code after being pushed from Git
• Am I Responsive
  • Am I responsive was used to create the multi-device mock-up you can see at the start of this README.md file
• Favicon.io
  • Favicon.io was used for making the site favicon
• WC3 Validator, Jigsaw W3 Validator, JS validator and PEP8 were all used to validate the website
• Python Built-in Modules:
  • os
• Bootstrap
  • Was used to create the front-end design
• Balsamiq
  • Was used to create wireframes
• Coloors
  • Was used to create the color scheme
• Djecrety
  • Was used to create a secret key
• Gunicorn
  • As the server for Heroku
• Cloudinary
  • Was used to host the static files and media
• Dj_database_url
  • To parse the database URL from the environment variables in Heroku
• Psycopg2
  • As an adaptor for Python and PostgreSQL databases
• Allauth
  • For authentication, registration, account management
• Crispy Forms
  • To style the forms
• Django
  • As a framework for Python
• App.diagram
  • Was used to create the database schema

Testing

Back to the top.

All testing results can be found here

Deployment

Back to the top.

1. A new repository was created using 'Code-Instutute-Org/ci-full-template'
2. A meaningful name was given to my new repository and I selected 'Create Repository'
3. I then opened the repository on GitHub and clicked the 'Gitpod' button to build the GitPod workspace which would allow me to build and edit the code used to make the Digital Patient website.
4. Version control was used throughout the project using the following commands in the terminal using Bash
   • git add . OR git add "file name" - to stage the changes and get them ready for being committed to the local repo.
   • git commit -m "Description of the update" - to save the change and commit the change to the local repo
   • git push - to push all committed changes to the GitHub
   • commit --amend - for changing the wording or spelling of the most recent commit

Note: One commit is accidentally duplicated ("Change style for custom 404 page; set debug to false"). This was seen too late to correct without possibly affecting the entire history. The note is therefore noted here.

Forking

1. Go to the project repository
2. In the right most top menu, click the "Fork" button.
3. There will now be a copy of the repository in your own GitHub account.

Cloning the repo with GitPod or Codeanywhere

• Log in to your GitHub account
  • Navigate to the repository
  • Select the 'Code' button above the file list on the right had side
  • Ensure HTTPS is selected and click the clipboard on the right of the URL to copy it
  • Open a new workspace in GitPod or Codeanywhere
  • In the bash terminal type 'git clone [copy url here from step 4]'
  • Press enter - the IDE will clone and download the repo

Running the project locally

1. Go to the project repository
2. Click on the "Code" button.
3. Choose one of the three options (HTTPS, SSH or GitHub CLI) and then click copy.
4. Open the terminal in you IDE program.
5. Type git clone and paste the URL that was copied in step 3.
6. Press Enter and the local clone will be created.

Deploying with Heroku

I followed the below steps using the Code Institute tutorial:

The following command in the IDE will create the relevant files needed for Heroku to install your project dependencies pip3 freeze --local > requirements.txt. Please note this file should be added to a .gitignore file to prevent the file from being committed.

1. Go to Heroku.com and log in; if you do not already have an account then you will need to create one.
2. Click the New dropdown and select Create New App.
3. Enter a name for your new project, all Heroku apps need to have a unique name, you will be prompted if you need to change it.
4. Select the region you are working in.

Heroku Settings (beginning the project)

You will need to set your Environment Variables - this is a key step to ensuring your application is deployed properly.

1. In the Settings tab, click on Reveal Config Vars and set the following variables:

   • Add key: PORT & value 8000. This can be delete for final deployment.
   • Add key: DATABASE_URL and the value as your ElephantSQL database URL e.g.
   • Add key: CLOUDINARY_URL and the value as your cloudinary API Environment variable e.g.
   • Add key: SECRET_KEY and the value as a complex string which will be used to provide cryptographic signing.
   • Add DISABLE_COLLECTSTATIC = 1 if you are still working on the project. This can be delete for final deployment.

2. In your project:

   • Create a file env.py and put it into .gitignore.
   • Add your settings, like DATABASE_URL, CLOUDINARY_URL and SECRET_KEY to env.py.
   • Comment out the original DATABASE settings from settings.py and add default Database code.
   • Run your migrations.

Heroku Deployment

In the Deploy tab:

1. Connect your Heroku account to your Github Repository following these steps:
   • Click on the Deploy tab and choose Github-Connect to Github.
   • Enter the GitHub repository name and click on Search.
   • Choose the correct repository for your application and click on Connect.
2. You can then choose to deploy the project manually or automatically, automatic deployment will generate a new application every time you push a change to Github, whereas manual deployment requires you to push the Deploy Branch button whenever you want a change made.
3. Once you have chosen your deployment method and have clicked Deploy Branch your application will be built and you should now see the View button, click this to open your application.
4. Be sure to delete settings in Heroku like PORT and DISABLE_COLLECTSTATIC, set DEBUG to False in your settings.py and add X_FRAME_OPTIONS there.

Credits

Back to the top.

• Code Institute tutorial for deployment
• The pictures (background image, favicons) were taken from Pixabay.
• The following sources were consulted:
  • https://www.mattlayman.com/building-saas/user-accounts-django-allauth/
  • https://www.codesnail.com/django-allauth-email-authentication-tutorial/
  • https://django-allauth.readthedocs.io/en/latest/account/configuration.html?highlight=remember#configuration
  • https://www.codesnail.com/django-allauth-email-authentication-tutorial/#7-email-verification
  • https://gist.github.com/wonderbeyond/1806c7b43d3e642e5ad0aee7052b8e8f
  • https://code.djangoproject.com/ticket/24459
  • https://youtu.be/dam0GPOAvVI?si=JE3VmS2pMQhB3l0p
  • https://youtu.be/wB1qOExDsYY?si=wMeu08aVILVOMtJU
  • https://youtu.be/ZWippgMUCAU?si=w0XOBQD31NbbLjyX
  • https://youtu.be/makqrv3SgzU?si=OmRl-ozbBIMnbFFX
  • https://groups.google.com/g/wagtail/c/SP1l652stDo
  • https://docs.djangoproject.com/en/4.2/ref/request-response/

A very big thank you to Rebecca and Gemma from the student support/tutor team who helped me very well in really difficult situations!

A big thank you to my mentor Martina who patiently answered all my questions!