The header is included on all pages with four navbar links to our pages which are the following:
Sjukstugan(link to homepage)
Sign Up
Sign In
Once you have signed in to the page you can see the following:
Sjukstugan(link to homepage)
Book
My Page
Log Out
Below the header the user can see a green welcome text with a simple and clean dark grey description text underneath it to give the user an easy and fast experience. To the right side of the welcome text and the description text the user can see a green heart image which is intended to match healthcare related experiences.
Below the landing page the user can find the about page which gives the user a view of a green about us text with a smaller dark grey description text underneath it. The description text tells the user about our story. On the left side of the about us text and description text the user can see a green briefcase image which is intended to match healthcare related experiences.
The footer is included on all four pages and contains all our social media platform links which are the following:
*Youtube
The footer also includes an email address to our support.
This section can be found once you are logged in to the page and click on the navbar link "Book".
The bookin page gives the user the ability to mark the radio buttons of the time slots available for their appointment. The user also has to fill in the input field form where the need to explain the reason for the appointment.
Below the radio buttons and the input field the user will find a green button to book their time slot.
When you are logged in you to the page you will be able to find navbar link "My page" which gives the user detils about their upcoming appointments and your personal details. You will also find a blue link as you can see on our image which can direct the users to the booking page.
This section can be found on the sign in page which gives the user an option to log in to their account.
The sign in form includes the following input fields:
Username
Password
And a checkbox button of: Remember Me.
Below the checkbox button the user can find the green sign in button. If the user hasn't siged up on the page yet then they will be able to do that on the right side as you can see on the image where it's a button that says sign up which will lead the user to a new page.
The sign up form includes the following input fields:
Username:
Email:
Password:
Password(again):
First name:
Last name:
Social security no:
Phone no:
Address
Post code
City
Below the input fields you can see a green sign up button. If the user already has an account on the page then they will be able to do that on the right side as you can see on the image where it's a button that says sign in which will lead the user to a new page.
When you are signed in to the page you will be able to sign out at the top right corner of the navbar links. We have added an extra page to for that function to make sure the user doesn't get signed out if they accidentially missclick that button.
The sign out page has a simple black title, with a text decoration line, a small text underneath it and a green sign out button.
The website has colors and a design that our team feels matches or inspires the user experience of a swedish based healthcare business culture. The yellow colour is inspired from the swedish flag and the overall colours are inspired from healthcare related visual experiences:
The total colours are:
Green
Light yellow
Dark yellow
White
Light grey
Dark grey(Used on the small texts)
Blue(Can be found on the links)
Black
*The HTML and CSS code has been validated through:
*W3C Validator(HTML): https://validator.w3.org/nu/
*Jigsaw Validator(CSS): https://www.w3.org/
A function which cancels the appointment for the user.
Adding an address to our headquaters.
Paths:
/ = homepage = index.html (template in users/templates)
/book-appointment = book-appointment.html (template in scheduling/templates/) /patient = patient.html (template in users/templates)
/patient = patient.html (template in users/templates)
/accounts/signup = signup.html (template in .templates/account/)
/accounts/login = login.html (template in .templates/account/)
/accounts/logout = logout.html (template in .templates/account/)
The program was deployed to Heroku and can be accessed by this link.
Note:
This project requires you to have Python 3 installed on your computer.
In order to run the project you will need to install and run virtualenv. This is due to compatibility issues between some versions of Python, such as 3.9.6 and the version of Python run on Heroku.
Create a local copy of the GitHub repository by following one of the two processes below:
Download ZIP file:
Clone the repository:
git clone git@github.com:johannacarolinep/june-hybrid-hackathon.git
You will need to create a SECRET_KEY since Django requires this for cryptographic signing.
To run the project, you will need to create and connect a PostgreSQL database instance. I used the tool provided by Code Institute for this, which is available to current Code Institute students.
Install the dependencies listed in requirements.txt.
pip install -r requirements.txt
After completing the preceding steps, you should be able to migrate the models of the project to your database.
In the terminal, run the following command:
python3 manage.py makemigrations
Followed by:
python3 manage.py migrate
You should now be able to run the app locally by running the following command in the terminal:
python3 manage.py runserver
Some functionality in the project, such as creating new recipes, is limited to superusers. Therefore, to access the admin panel, you will need to create a superuser.
Write the following command in the terminal:
python3 manage.py createsuperuser
Follow the instructions in the terminal, which will prompt you for an email and password.
Merging your code into main:
Make sure you are on the main branch: check by running command git branch
git checkout main
Update your local main branch to mirror the live main branch, command: git pull origin main
Create a new branch: git checkout -b <your branchname>
Add your work
git add, commit, and push, using git push origin <your branchname>
Go to your repository on GitHub, and click to open a PR
If PR is then merged to main, change from your local branch to your local main branch (following step 1).
If PR leads to conflicts:
In your local environment, switch to the main branch, git checkout main
Pull the latest version of main, with git pull origin main
Switch back to the branch you were working on, git checkout <your branchname>
Merge the new main into your local branch: git merge main
Now you should see a list of files that contain conflicts (if any). Time to fix the conflicts:
Once all conflicts are resolved, add, commit and push changes to your branch, git push origin <your branchname>
Go to GitHub. You should now see a green tick on the PR.
All the codes was created by our team internally.
All the icons used in the code was taken from font awsome. Here is a url adress to their homepage: https://fontawesome.com/
All the images was taken from: https://www.svgrepo.com/svg/383506/healthcare-heart