Giters

Doc-Le / PhysioActivities

Physiotherapy clinic Website

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Milestone 4 - Final Project

Demo - See live: https://physioactivities.herokuapp.com

PhysioAct

Intro

This idea originally came up at first as I've been working in the field for 19 years. I understand the importance to have a website that can provide information about who is providing the treatment, and also the independence to make a booking and payment.

User Experience (UX)

Strategy

  • User goals
    • As a user I want to be able to find a physiotherapy services.
    • As a user I want an attractive easy to use site.
    • As a user I want to be able to find a physiotherapist and book a appointment.

User stories

  • Unregistered Visitor

      1. As an unregistered visitor, I want to be able search services
  2. As an unregistered visitor, I want to be able to get to know the clinical core.
  3. As an unregistered visitor, I want to be able connect to diverse social media.
  4. As an unregistered visitor, I expect the site to look good on my mobile device.

  • First Time Visitor Goals

      1. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about what the clinic and the clinician have to offer.
  2. As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
  3. As a First Time Visitor, I want to look for information to understand what each treatment technique has to offer. 
  4. As a First Time Visitor, I  also want to locate his social media links to see their followings on social media to determine how trusted and known the company is.
  5. As a First Time Visitor, I want to easily schedule an appointment and pay.

  • Registered Returning Visitor Goals

      1. As a Returning Visitor, I want to be able to login easily.
  2. As a Returning Visitor, I want to be able to change my password.
  3. As a Returning Visitor, I want to find information and reviews about the clinicians.
  4. As a Returning Visitor, I want to find information about the type of techniques.
  5. As a Returning Visitor, I want to find easy access for bookings and payments.
  6. As a frequent visitor, I don't want to have never ending scrolling up or down.

  • Overall Goal

      1. Create a user-friendly, well-designed website easily understood 
  2. Create a registration form that stores information about users in a database in an organized fashion. 
  3. Create a login system so that the user has to log in to make an appointment. 
  4. Make an appointment form so that the user can submit information about their injury as well as a day and time that suits them  and see if the chosen clinician has   availability. 
  5. Create links to social networking sites so the user can find out more about the physiotherapist or write a good review on their page e.g.(Google, Twitter, Facebook) 
  6. Have information about the location of the physiotherapist. 
  7. Information about the different types of services the physio offers so that the customer can decide if the physio actually does that service before contacting.

  • Admin goals

      1. As admin, I want to be able to book, delete or edit a appointment.
  2. As admin, I want to be able to choose the date and time for the appointment.
  3. As admin, I want to be able to delete or edit an appointment
  4. As admin, I want to be able to delete a user.
  5. As admin, I want to be able to make another user an admin.

Current features

  • Accessible.

  • Easy to navigate (Single use learning).

  • Interactive elements.

  • Social Links.

  • Ability to contact the clinic via contact page.

  • Able to search treatments and clinicians available.

  • Can search future location or details.

  • Logged in users can their previous and future appointments.

  • Logged in user can save their addresses and default address, pre-fills Checkout form.

  • Admin user can add, edit and delete any event.

  • Confirmation email on registration and on successful purchase.

Features to implement in the future

  • to be able to send eductional material.
  • To be able to find a physio with a physio finder.
  • Would like to add patients reviews.

Wireframe

Page Desktop Tablet Mobile
Home view view view
About us view view view
Meet the Team view view view
Services view view view
Contact view view view
Login view view view
Sign-up view view view
Make an appointment view view view
Payment view view view
Payment success view view view

Design

  • Color Scheme The two main colors used are green and white. Picked these colors idea from a healthy three that symbolized heath. GREEN. Balance Positive: Harmony, balance, refreshment, universal love, rest, restoration, reassurance, environmental awareness, equilibrium, peace.

  • Typography Used Google Fonts to import the fonts used for this site. The Poppins font is the main font used throughout the whole website.

  • Imagery Imagery is important. The large, background hero image is designed to be striking and catch the user's attention. It also has a modern, energetic aesthetic.

Tech used

  • HTML
  • CSS
  • DJANGO
  • JavaScript
  • Bootstrap5
  • MySQL
  • API
  • Stripe payment

Frameworks, Libraries & database

  1. Bootstrap 5.0.1

    • Bootstrap was used Stores CSS Bootstrap library files

  2. Django

    • Framework for building applications.

  3. CSS3

    • CSS3 was used for Implementation of main HTML CSS that imports all CSS files in the main CSS folder

  4. Git

    • Git was used for version control by utilizing the IDE terminal to commit to git and push to GitHub

  5. GitHub

    • GitHub is used to store the project after being pushed from Git

  6. Heroku

    • For deploying the application

  7. Stellar.js v0.6.2

  8. jQuery

    • Required for some of the bootstrap elements such as collapsibles, modal and tooltips.

  9. [Carousel v2.2.1](Copyright 2013-2017 David Deutsch)

  10. [SmoothScroll](Copyright 2013 http://DWUser.com)

  11. [Wow- v1.0.2-2014-10-28](Copyright (c) 2014 Matthieu Aussaguel; Licensed MIT)

  12. Postgres

    • Database used for our data

  13. Django Secret Key Generator

    • Used to generate secret key

Testing

Testing and results can be found here

Further Testing

This app was tested on Google Chrome, Microsoft Edge, and Safari browsers This app was viewed on a variety of devices such as Desktop, Laptop, IPhone7, IPhone8

Stripe

Accept payments with Stripe Checkout

We built a easy straight forward checkout to provide to the client the best experience. Once the customer choose the clinician/date/time and is ready to pay, use Stripe.js to redirect them to the URL of your Stripe hosted payment page.

Stripe demo/mock card

The demo is running in test mode -- use 4242424242424242 as a test card number with any CVC + future expiration date.

Deployment

The project was deployed to GitHub Pages using the following steps:

  • Log in to GitHub and locate the GitHub Repository
  • At the top of the Repository (not top of the page), locate the Settings Button on the menu
  • Scroll down the Setting page until you locate the GitHub Pages Section
  • Under Source, click the dropdown called “None” and select “Master Branch”
  • The Page will automatically refresh
  • Scroll back down through the page to locate the now published site Link in the GitHub Pages section

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

  1. Log in to GitHub and locate the GitHub Repository
  2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
  3. You should now have a copy of the original repository in your GitHub account.

Making a Local Clone, Installation and Set-up

To view the app, open the live site link provided below on the README. Here is a run through of how to set up the application:

  • Step 1 : Downloading a ZIP file of the code, or Clone this repository using by command:
$ git clone https://github.com/Doc-Le/PhysioActivities.git
  • Step 2 : The repository, if downloaded as a .zip file will need to be extracted to your preferred location and opened
  • Step 3 : Go to the project root directory and install the virtualenv library using pip an afterwards create a virtual environment. Run the following commands respectively:
$ pip install virtualenv
$ virtualenv venv

Windows

$ source venv/Scripts/activate

Linux / Mac

$ source venv/bin/activate
  • Note that you can exit the virtual environment by running the command:
$ deactivate
  • Step 4 : Download the all dependencies in the requirements.txt by running the command:
$ pip install -r requirements.txt
  • Step 5 : Make Django database models migrations by running the command:
$ python manage.py makemigrations
  • Step 6 : Migrate Django database models by running the command:
$ python manage.py migrate

  • Step 7 : Update environment variables on settings file

    Variable Description
    SECRET_KEY Django secret key
    STRIPE_PUBLIC_KEY Generate public key on Stripe portal
    STRIPE_SECRET_KEY Generate secret key on Stripe portal
    EMAIL_HOST_PASS Email host 2-way auhtentication password when sending Django SMTP emails
    EMAIL_HOST_USER Email host user used when sending Django SMTP emails
    HOST_DOMAIN Local host domain that is usually default Django http://127.0.0.1:8000

  • Step 8 : Run server by running the command:

$ python manage.py runserver

  • Setting Up Project

    • Install requirements in terminal using pip3 install, see requirements below. If you have cloned my project you can use pip3 install -r requirements.txt which will install everything for you.

    • Create a SECRET_KEY for django to use. My settings.py file is set up to collect keys from the environment so name your variables accordingly. In github you go into settings from your dashboard and then variables. And add the following. You can complete the rest when you go through these sections. DEVELOPMENT value is set to True. Scope you can set to your repository name meaning its only accessible by that project or you can set it to / meaning all your repositories can access them.

    • Ensure you have requirements.txt file and Procfile. These are required by Heroku so ensure these are pushed to github prior to deployment. Ensure all requirements are saved by using pip3 freeze >requirements.txt

    • If using in development you will need to Run migrations usimg command python3 manage.py makemigrations and then python3 manage.py migrate. To create a superuser in the terminal to get access to admin panel, use command python3 manage.py createsuperuser and fill in details required.

  • Setting up Stripe

    • Register with stripe here if you don't already have an account. Didn't activate account as will be using free tier.

    • In dashboard from main menu and then select developers and then API keys. Here you will get the publishable and secret keys. These shouldn't go into version control so add them as variables in your github environment for development and in Config Vars in Heroku if you are deploying this project.

    • You'll be asked for a url, this is your github workspace url with /checkout/wh/ added onto the end. When you deploy to Heroku you'll want to create an endpoint for it also, again with the /checkout/wh/ at the end. You then need to select events you want webhooks for. You can select all events but we only really need payment_intent.succeeded and payment_intent.payment_failed. as this is what we have wrote webhandlers for. Select Add Events and then Add Endpoint.

    • Now in your new webhook, reveal Signing secret, copy this and this is the value for the STRIPE_WH_SECRET variable in your github settings. When you make a new endpoint for Heroku you will get a another Signing Secret to use.

  • Heroku deployment

    • Log in to Heroku, click 'New' and select 'Create New App'. In window give the app a name and choose region closest to you and then click 'Create App'. Then in Resources under Add-ons, select Heroku Postgres.

    • Next select 'Deploy' from menu, three options of deployment are available. If you select Heroku Git, it gives you step by step of what you need to do.

    • I chose to use Github, so you have to search and connect to your github repository.

    • Click enable automatic deployment, below that in manual deploy section, you can pick and deploy a branch to ensure everything is set up correctly.

    • You will now need to migrate and create superuser as above in Setting Up Project section.

Content/Credits

  • Content was written by the developer
  • Credits to Boutique_ado development project, where I went through a million times to learn and understand Django + Stripe integration.

Media

  • Logo custom made by the developer with Adobe Illustrator
  • All images found [Image: wutzkoh / stock.adobe.com]
  • Gif toll link

Acknowledgements

  • Code Institute and Tim Nelson for task manager walk through project.
  • My mentor Rodrigo Sodano his time and feedback.
  • The slack community.

About

Physiotherapy clinic Website

Languages

Language:HTML 40.0%Language:Python 28.8%Language:JavaScript 16.5%Language:CSS 14.8%Language:Procfile 0.0%