Developed and designed as part of Milestone Project 3: Python and Data Centric Development
Please view the live project here
Mockup responsive image was created with Techsini.
Click to expand table of contents
The project was created as a Milestone Project 3 as a part of Diploma in Full Stack Software Development with Code Institute. The project is developed using Python, JavaScript, HTML, CSS, and Materialize framework.
AIRMED is a healthcare application that contains information about AIRMED, a fictional clinic, its doctors, services, and patient data. Its main purpose is to give a real-time access to high-quality, affordable healthcare to all. In Irish mythology, Airmed was the goddess of healing and this name seemed appropriate for the application name.
Users will be able to make appointments quickly, while doctors are not involved in the appointment process, so their time will also be saved. All the information from AIRMED, patient personal data, doctor data is saved in one place, easily accessible from any digital device, 24/7.
Well-done UI is one of the key factors defining the success of AIRMED healthcare application. The application is easy to use and simple to navigate. Also, the User Interface is engaging, attractive and professional. It is taken in consideration that the patient and doctor's user data should be safe and secure to access.
Please note, this project is for educational purposes only and provided clinic's and doctor's information is fictional.
- As a site visitor, I would like to gain an understanding of the website's purpose from the home page.
- As a site visitor, I would like to easily navigate through the site on all devices and find what I am looking for with an ease.
- As a site visitor, I would like to see clinic's location and address on the map.
- As a patient, I would like to have an option to register on the site and to create my personal account.
- As a patient, I want a website that looks professional, so I feel confident in storing my personal data.
- As a patient, I want to be able to update my personal data.
- As a patient, I want to have an option to search for doctors by the name or specialty.
- As a patient, I want to have an option to make an appointment with a medical professional.
- As a doctor, I want to be able to see my personal data.
- As a doctor, I want to be able to update my personal data.
- As a doctor, I want to have an option to upload profile image.
- As an admin, I would like to have an option to add new doctor and his/her personal data on the system.
- As an admin, I want to be able to delete doctor profile to ensure it adheres to site conditions.
- As an admin, I would like to have an option to search for doctors by the name or specialty.
- The main function of the application is to make the app accessible for each and every potential user who is a potential patient
- AIRMED will be created with a primary purpose to solve patient problems, beginning with an online appointment booking
- Attractive and good quality UI design
- To enable an easy access to the health clinic, services, and doctor's information
The site will be fully responsive mobile first website. Many features will be available that allow the user to engage and find needed information fast and easy.
The site consists of a homepage which gives an overview of the site purpose with search feature, specialties information and why to choose AIRMED Healtg clinic. Second page is About Us page which tells more about the Clinic, its mission and values, and location.
The website furthermore contains a Login In pages for Patients and Doctors, respectively. Since the website will hold lots of data, the site owner wanted to differentiate two separate points for login. The website will have a Register page for patients and a register page for doctors which is named Add Doctor. Doctor registration will be performed only by Admin users.
Both Patients and Doctors will have Profile pages where they will be able to update some of the personal information. These pages are only visible when the user will be logged in under their username / email address, respectively. Admin users will be able to see all Doctor profiles under the Dashboard page where they will have ability to search for and delete a particular doctor profile.
The website will be designed to be pleasing to the eye, consistent and user friendly.
-
Interaction Design
- Consistent design will be used throughout the website to maintain a good UX.
- The navigation with effective slider background images will make the website look elegant and attractive.
- Easy and fast patient log in and register forms
-
Information Architecture (IA)
- The project was conceptualized as a websige divided in four pages. This structure was used because it is simple and familiar to the site visitors and it is sufficient for all user stories.
- Short paragraphs providing the relevant information will be used. This approach was selected to provide enough information, yet not to overwhelm.
- The content is organized and categorized by importance from top to bottom and left to right
- Personal user profiles for doctors and patients
The wireframes were created in Balsamiq
| Desktop Wireframes | Tablet Wireframes | Mobile Wireframes |
|---|---|---|
| Homepage | Homepage | Homepage |
| About Us | About Us | About Us |
| Log In | Log In | Log In |
| Register | Register | Register |
| Profile | Profile | Profile |
| Add Doctor | Add Doctor | Add Doctor |
| Dashboard | Dashboard | Dashboard |
There are few smaller modifications made in the design then planned under the initial wireframes.
Delicate and soothing color palette will be chosen for medical app. Users should feel calm and comforted when opening AIRMED app, knowing that they have come to the right place to address their healthcare needs, questions, and any concerns.
- Celadon Blue (#247BA0)
- Blue Sapphire(#16546E)
- Green Sheen (#70C1B3)
- Middle Blue Green (#91CEB9)
- Mango Tango (#f68c48)
- White (#FFFFFF)
Coolors was used to create a color palette.
Mainly cold colors will be selected throughout the app in order to establish an overall sense of tranquility that is necessary to help users concentrate on the more important app features.
White will be primarily used as the background because it represents reverence, purity, and innocence. This association calms people and influences their brain activity in a very positive way. Blue color symbolizes a sense of calm, peace harmony, trust and knowledge. Celadon Blue will be used to promote a tranquil environment for the users. Green is associated with health, good luck, youth, vigor, generosity, and fertility. A variety of orange color (Mango Tango) will be used sparingly as button highlighters.
-
Two fonts will be used throughout the project, Roboto and Montserrat. Both will be used with
sans-seriffont as a fallback. Montserrat will be used for the main headings and Roboto will be used for the hero text, paragraph sections and the footer. -
These fonts pair very well together and make the website appear both prestigious and contemporary. They make a good combination of tradition and modernity.
-
Fonts were imported from Google Fonts.
- I used Canva to design the custom logo which was used only for favicon.
Icons should be obvious and very intuitive so that users can easily understand what a particular icon represents. Also, a detailed heading will be used for each icon to describe top specialties the Airmed clinic offers.
AIRMED doctor application will be built to be fully responsive mobile-first. This will be primarily achieved by utilizing the Materialize's grid system.
- Navigation menu
- responsive on all devices
- hamburger menu on smaller devices
- Footer
- the footer is standard across all pages on the website except on Login In and Register pages
- it contains of social media, working hours, and contact information
- there is also a copyright information at the very bottom
- About us
- The About Us page provides information about the Clinic, its mission and values, and location information
- Responsiveness
- by using the mobile-first approach, the website will be built to be fully responsive
- Slider (carousel)
- a slider with an effective hero background images will be used to gain instant user attention
- a hero text strategically placed in transparent text box
- Interactive
- back to top arrow button will appear on the lower right of the page when the user starts to scroll down the page
- animate on scroll library (AOS)
- parallax feature
- Social media
- social media icons will be located at the footer
- allow users to find more information on national parks on the social media
- Registration option for patients
- Login in option for patients and admin user
- Log in option for doctors
- patients and doctors will have separate form to log in
- Personal profile pages for patients and doctors
- Appointment request form
- for visitors and patients
- Search feature
- visitors and patients will have ability to search for doctors by the doctor's name or specialties
- after the search users will have an option to make an appointment request
- admin users will have an option to search for doctors by the doctor's name or specialties
- Create / Manage / Add / Edit / Delete profiles
- patients will have an ability to create, update and delete their profiles
- doctor users will have an ability to update their profiles
- admin users will have an ability to update their profile and to create and delete doctor's profiles
- Admin Dashboard
- 404 and 500 error pages
- if a user navigates to a page which does not exist or if they do not have permission to access, they will be directed to a 404 error page
- if there are an internal problems with the server, a 500 error page will appear
- Ratings & Reviews for doctors
- Appointment approval and rejection available on the app
- Pagination
- Forgot password feature
- Real time chat
- Video consultation
- Payment integration
- Smart scheduling
- Subscription packages
There are four types of users that this website is designed for:
A visitor is anyone who navigates to this website and can navigate through the homepage and about page. Visitors can search for and view through the list of available doctors and make an appointment request. Furthermore, visitors can register for an account. The website is a full functional for read only access for visitors.
A visitor who registers for an account automatically becomes a "patient". Patients will have the same rights as visitors, in addition they have an access to patient profile where they can update and add additional personal data.
Doctors will have the same rights as visitors and in addition they have an access to Doctor profile where they can update and add additional personal data like profile image. Doctors don't have an option to register profile by themselves. This can be done only by Admin user.
Administrators can register Doctor accounts and add all relevant personal data. Furthermore, admin users have an option to delete doctor profiles. Admin users are logged in to the site via 'Patient' Log In page.
Admin users have an option to update and delete their user themselves also. This will be removed in the next version due to the security reasons.
There are different permission levels what each user has access to on the webpage.
| Navbar | Visitor | Patient | Doctor | Admin |
|---|---|---|---|---|
| Home | ✅ | ✅ | ✅ | ❌ |
| About Us | ✅ | ✅ | ✅ | ❌ |
| Log In | ✅ | ✅ | ✅ | ✅ |
| Register | ✅ | ❌ | ❌ | ❌ |
| Profile | ❌ | ✅ | ❌ | ❌ |
| Doc Profile | ❌ | ❌ | ✅ | ❌ |
| Add Doctor | ❌ | ❌ | ❌ | ✅ |
| Dashboard | ❌ | ❌ | ❌ | ✅ |
| Log out | ❌ | ✅ | ✅ | ✅ |
As part of the milestone project, we have to demonstrate that our application can perform CRUD operations.
| Create | Read | Update | Delete | |
|---|---|---|---|---|
| Visitor | No | Yes | No | No |
| Patient | Yes | Yes | Yes | Yes |
| Doctor | No | Yes | Yes | No |
| Admin | Yes | Yes | Yes | Yes |
All CRUD functionality is present in the application; however, CRUD operations are restricted to some user types as explained in the table above.
- HTML5 was used to complete the structure of the website.
- CSS3 was used to style the website.
- Python was used was used for the backend of the website.
- JavaScript was used to make webpage interactive.
- Materialize was used to aid in responsive, mobile-first website design.I used Materialize to create grid layouts, navbar, cards, forms, buttons and other features.
- MongoDB was used for the backend database.
- Git was used for version control.
- GitHub was used to store the project repository and deploy the site via GitHub pages.
- Jinja was used to generate HTML from site templates.
- PyMongo contains tools for interacting with MongoDB database from Python.
- jQuery was used to simplify DOM manipulation.
- Balsamiq was used to create the wireframes for the website.
- Font Awesome icons were used throughout the website for better user experience.
- Google Fonts was used to import the fonts to the website.
- Favicon was used to create the favicon for the website.
- CSS Tricks was used as a general source.
- W3School was used as a general source.
- Stackoverflow was used as a general source.
- GitHub was used for repository hosting and for storing the source code.
- Gitpod was used as the development environment for writing the code.
- Git was used as version control system to add, commit and push code to GitHub.
- Adobe Photoshop Express was used for resizing and cropping the images used on the website.
- TinyJPG was used for compressing images while preserving transparency.
- Techsini was used to create the responsive mockup image.
- Paint 3D was used to modifiy couple of images.
- Coolors was used for colour palette used on the website.
- CSS Autoprefixer was used for adding CSS vendor prefixes.
- Google Chrome Developer Tools was used to test and debug the code.
- Animate On Scroll Library was used to integrate animate on scroll effect on home page.
- Cloudinary was used to store images and handle image uploading.
- Randomkeygen was used to generate random passwords and keys.
-
- Flask micro framework was used to build the web app using python code
-
- Werkzeug Security Helpers were used to hash the user passwords before storing in the database
-
- was used for sending emails relating to the appointment request
- Heroku - the project uses Heroku as it's deployment platform.
- W3C Markup Validation Service was used for Markup validation.
- W3C CSS Validation Service was used for CSS code validation.
- JSHint was used for JavaScript code validation.
- PEP8 Online was used to check for PEP8 compliance
Testing process was written in a separate file. Please click here for the testing process.
Git as a local repository and GitHub as a remote repository were used for this project. Detailed elaboration please find below:
-
Create a remote repository in GitHub by clicking "New repository" on the main page
-
Use Code Institute Template, put the repository name and click Create Repository making sure to select public
-
Open the repository with Gitpod. By using Code Institue Template, initialisation including initial commit is done so no need to do
git initcommand when open IDE, or to usegit push -u origin maincommand for my first commit.gitignorefile, which is very important for the project including some confidential information, is created with Code Institute template so not necessary to create it.
To create a local project copy of the repository please follow the below steps:
- Login into GitHub with your account.
- Go to the project repository.
- Click on the "Code" button (located next to the green "Gitpod" button).
-
From the dropdown menu copy the HTTPS URL.
-
In your local IDE open the terminal.
-
Change your working directory to the location where you want the cloned project saved.
-
Type "git clone" and paste copied URL from Step 4.
git clone //github.com/USERNAME/REPOSITORY -
Press enter to create your local clone.
In the terminal window:
- Navigate to the folder of the installed files with
cd <path> - Create the virtual environment folder with
python3 -m venv venv - Activate the virtual environment with
venv\Scripts\activate.bat
Please Note: The above commands were used on Visual Studio Code on Windows. For other IDE's please refer to Creation of Virtual Environments
For sensitive information like passwords and api keys, create an env.py file to store these as environmental variables. Replace values with your own.
import os
os.environ.setdefault("IP", "IP_ADDRESS")
os.environ.setdefault("PORT", "PORT")
os.environ.setdefault("SECRET_KEY", "SECRET_KEY")
os.environ.setdefault("MONGO_URI", "MONGO_URI")
os.environ.setdefault("MONGO_DBNAME", "MONGO_DBNAME")
# mail settings
os.environ.setdefault("MAIL_PASSWORD", "MAIL_PASSWORD")
os.environ.setdefault("MAIL_USERNAME", "MAIL_USERNAME")
os.environ.setdefault("MAIL_DEFAULT_SENDER", "MAIL_DEFAULT_SENDER")
os.environ.setdefault("ADMIN_EMAIL", "ADMIN_EMAIL")- Create a file called .gitignore in the root directory and ensure it contains the following git exclusions:
core.Microsoft*
core.mongo*
core.python*
env.py
__pycache__/
*.py[cod]
node_modules/
- Install project requirements by typing
pip install -r requirements.txt
Register for a free account with MongoDB
-
Create a new Project and call it 'airmed'
-
Create a Cluster, choose the free tier option and select your region
-
Create a new database and call it 'airmed_db'
-
Create four Collections named 'users', 'gender', 'doctors', and 'specialities'. Detailed db scheme is available below:
-
users
Key Data Type Notes _id ObjectId Automatically generated by MongoDB first_name String The first name of the user last_name String The last name of the user username String The username of the user password String The password of the user email String The email of the user telephone String The telephone of the user gender String The telephone of the user age Int The age of the user is_admin Boolean Indicates is the user anAdministrator -
gender
Key Data Type Notes _id ObjectId Automatically generated by MongoDB sex String Gender sex -
doctors
Key Data Type Notes _id ObjectId Automatically generated by MongoDB doctor_first_name String The first name of the doctor doctor_last_name String The last name of the doctor email String The email of the doctor password String The password of the doctor phone String The phone of the doctor title String Doctor's title speciality_name String The name of the doctor's speciality experience String Doctor's experience about String Summary of doctor's image_url String A URL of an image of doctor's image -
specialities
Key Data Type Notes _id ObjectId Automatically generated by MongoDB speciality_name String The name of the speciality
dbdiagram.io - DBMS Tools was used to create database scheme.
Appointments collection was created but not yet fully utilized. When the user sends an appointment request form, data is collected in the database. In the next version this information will be visible on the app both to the patient and doctor. Also, it is planned for the next version to confirm / cancel / reject the appointment.
-
appointments
Key Data Type Notes _id ObjectId Automatically generated by MongoDB first_name String The first name of the patient last_name String The last name of the patient date String The date of the appointment time String The time of the appointment email String The email of the patient telephone String The telephone of the patient email String The email of the patient speciality_name String The name of the doctor's speciality message String Custom message
- To run the project locally, in the terminal type
python3 app.py - This will open a localhost address, which is provided in the CLI
- Either copy and paste the url into a new browser tab, or hover over it and click the link
The website of this project requires back-end technologies such as server, application, and database so the website is deployed on Heroku, which is a cloud platform with a service supporting several programming languages, because GitHub can only host a static websites.
Before deploying the website to Heroku, there are three important steps to follow to make the application work in Heroku correctly.
- Create
requirements.txtfile that contains the names of packages being used in Python. It is important to update the file if other packages or modules are installed during the project. - Create
Procfilethat contains the name of the application file so that Heroku knows what to run. - Push them into GitHub.
Once above steps have been followed the website can be deployed. Please find the steps of the deployment in Heroku:
-
Create an account in Heroku
-
Click New & Create new app to create a new app
-
Put an app name, which must be unique, choose a region and click create app
-
Go to Deploy section and click Connect to GithHub
-
Search for the repository by the repository name and connect it
-
Before clicking Enable Automatic Deploys, hidden variables such as IP address, PORT, SECRET_KEY, MONGO_URI and MONGO_DATABASE need to be recorded in Heroku. Go to Settings, click Reveal Config Vars and fill out necessary keys and values.
-
Once all the hidden variables are recorded, then click Enable Automatic Deploys and click Deploy Branch (Main should be selected unless you want other branches to be deployed).
-
When the app is deployed by Heroku correctly, there is a confirmation message and you can access the app.
Note
It is important NOT to set debug=True when deploying the website. As this is a project for my study, I keep debug=True even after the deployment but only while the app is being built and make sure to change it to debug=False before the submission.
- Register function was adapted from Code Institute walkthrough project
- Slider, parallax, modal and navbar functionalities were sourced from Materialize framework
- Validate select option for a Materialize dropdown code was sourced from Stack Overflow
- Custom modal design was found HERE
- Sending emails with Flask-Email was sourced from Sending Emails Using API in Flask-Mailsending-emails-using-api-in-flask-mail/
- Back to top arrow code with small modification was sourced from w3schools:
- The custom favicon was designed using Canva
- The slider background images were sourced from Freepik
- Patient background login image was sourced from Unsplash, credit: photo by Tom Vining on Unsplash
- Patient background register image was sourced from Unsplash, credit: photo by Alexander Dummer on Unsplash
- Doctor background log in image was sourced from Unsplash, credit: photo by National Cancer Institute
- clinic_blur.jpg image was sourced from Unsplash, credit: photo by Solen Feyissa on Unsplash
- Hero background image on About us page was sourced from Freepik
- clinic-about.jpg was sourced from Unsplash
- Doctor profile images were sourced from UBERDOC
- 400 error image was sourced with a modification from from Shutterstock
- 500 error image was sourced from Freepik
- All icons were sourced from Font Awesome
Below website was used for a general layout inspiration:
The text was adapted from [Massachusetts General Hospital] (https://www.massgeneral.org/)
- My mentor, Mr. Spencer Barriball, for the helpful feedback and guidance.
- Code Institute for all course materials and ongoing support.
- Fellow Code Institute students for their feedback and suggestions.
- My family and friends for testing and useful feedback.
The information provided on this website is for educational purposes only.
For any issue resolution or assistance, please email Marina Pavlovic at [email protected]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
