Giter VIP home page Giter VIP logo

z_dentist's Introduction

Z Dentist

Z Dentist is not your average dentist. Our unique offer combines the best dental care at the right price. Keeping the highest standard of quality is key in everything that we do.

This website can not be used as a template for a business since it's a project for educational purposes.

Live website: Z Dentist

Skärmavbild 2021-11-15 kl  14 55 41

Table of Contents

UX (User Experience)

User Stories

  • As a user
    • I want to know where the dentist practice is located
    • I want to see what kind of service the dentist practice offer.
    • I want to be able to book an appointment
    • I want to be able to cancel an appointment
    • I want to know a bit more about the company
    • I want to be able to contact the company with random question
    • I want to get a confirmation email with my appointment time

Site Owner Goals

  • As a site owner

    • I want to make it easy for customer to make an appointment
    • I want to be able to confirm appointments
    • I want to be able to cancel appointments
    • I want to be able to change a appointment date
    • I want to have a clear overview of the customers details
    • I want to let people see the services we offer with prices
    • I want to be able to get email from customers trough a contact form
    • I want to get a email when someone makes a new booking
    • I want to show where the dentist office is located
  • I planned the project here

Design

Fonts

I have chosen Lato for the header and logo as it is easy to read and has sufficient contrast to the main body font. The small caps style is used by Roboto that I feel look very clean in the quiz.

Colors

The site features complementary Blue Crayola Forest Green Web, Pacific Blue, white and black to create a good contrast and improve readability.

The colors chosen are:

coloruus

Wireframe

Desktop

WEB

Mobile

MOBILE

Technologies

Languages

  • HTML
  • CSS
  • Python

Frameworks and Tools

Contrast Checker

All colors was checked in a contrast checker and pass the test.

contrast

Features

The website has the following features:

Navigation bar

Navigation bar is visible on the top of the website with a logo that is clickable to update the site. When someone is logged in the navigation bar will change so the user can see there username and a logout button om the right top side. The registration and login links will also disappear once logged in. The navigation links will collapse on smaller screens.

Skärmavbild 2021-11-18 kl  13 39 44

Skärmavbild 2021-11-18 kl  13 38 19

Home

The home page contains a big hero picture with a "Book an Appointment" button on it. On smaller screen the button will be under the hero picture to fit better. It also have information about the company like how the work and how focus on quality is very important.

Skärmavbild 2021-11-18 kl  13 42 14

Skärmavbild 2021-11-18 kl  13 42 28

Services

The service page contains a table with all the treatments the company is doing and price information about each service.

Skärmavbild 2021-11-18 kl  13 43 54

Contact us

The contact page has a large google maps window to show the customer where the dentist company is located. After that it's a contact box with the address, phone number and email of the company. Last there is a contact form where the customer can enter there name, email and a message to be able to contact the company with any questions. After the message is sent it will show a success message so the customer know we have received the email.

Skärmavbild 2021-11-18 kl  17 06 43

Appointment

On the appointment page the customer will be able to make a booking within the form. Here the user have two choices. Either they can be logged in to the site and will then be able to manage there booking after. If they dont want to register it works fine to make an appointment as well. They will then put in the required information, then they can choose from a list what kind of treatment they would like to book with price information. After that they can choose a desired date for there appointment. Finally there is a field that is not required, but they can enter any additional information they would like. As soon as they make the reservation there will be a success message telling them the appointment have been sent to the dentist.

Skärmavbild 2021-11-18 kl  17 07 03

Manage

This page is only visible if you are logged in as a user or admin.

User

If you are logged in as a user and make an appointment your bookings will be showed here. First it will just show your information and a message that the booking is still not confirmed. Once the admin confirm the appointment the card will change and instead show the confirmed date with time and also a delete button to let the customer cancel there appointment up to 24 hours prior to the appointment. If the booking is deleted an email will be sent out to both the customer and Admin confirming the appointment is canceled. The booking will then disappear from the manage site.

Skärmavbild 2021-11-18 kl  14 00 06

Admin

If you are logged in as a Admin, this page will show you all the bookings that have been made and information on all customers. In the navigation bar it will show a notice clock and a number for how many bookings that haven't been accepted yet.

Skärmavbild 2021-11-18 kl  13 58 33

The admin can then see the desired date the customer would like for there appointment and confirm it with date and time. Once the admin press the "Accept" button an email will be sent to the customer confirming the appointment with date and time. The user card will then show a button where the admin can change the already approved date. When clicked a collapsible div will open up with the date time input and a button saying "Accept New Appointment". After the date is changed a new email will be sent to both the user and the admin. Last the admin will have a delete button to be able to delete a booking. If the booking is deleted an email will be sent out to both the customer and Admin confirming the appointment is canceled. The booking will then be deleted from the database.

Skärmavbild 2021-11-18 kl  13 57 01

Registration/Login

This links are visible in the top right corner of the navigation bar if there is no user logged in to the page.

Skärmavbild 2021-11-18 kl  13 47 48

User/Logout

The user that is logged in to the site will be visable in the top right corner and under it will be a log out link.

Skärmavbild 2021-11-18 kl  13 49 52

Footer

The footer contains the opening hours and contact information about the company.

Skärmavbild 2021-11-18 kl  13 45 39

Testing

  1. As a user, I want to easily determine what kind of website it is.
  • Result: TEST PASSED
  1. As a user, I want to see what services and prices the dental clinic offers.
  • Result: TEST PASSED
  1. As a user, I want to be able to book an dentist appointment.
  • Result: TEST PASSED
  1. As a user, I want to know where the dental clinic is located.
  • Result: TEST PASSED
  1. As a user, I want to know the phone number to the dental clinic.
  • Result: TEST PASSED
  1. As a user, I want to get a email with my confirmed appointment time.
  • Result: TEST PASSED
  1. As a user, I want to be able to manage my bookings.
  • Result: TEST PASSED
  1. As a user, I want see when my booking is confirmed on the manage page.
  • Result: TEST PASSED
  1. As a user, I want to get an email to show me my contact email was receive and what my messages was.
  • Result: TEST PASSED
  1. As a user, I want to see a success message after I make an appointment or cancel an appointment.
  • Result: TEST PASSED
  1. As a site admin, I want to be able to manage appointment
  • Result: TEST PASSED
  1. As a site admin, I want to be able to confirm appointment times and send out confirmation email to the customer.
  • Result: TEST PASSED
  1. As a site admin, I want to be able to delete appointments and send out confirmation email to the customer about the cancellation
  • Result: TEST PASSED
  1. As a site admin, I want to be able to receive email when new bookings is being made.
  • Result: TEST PASSED
  1. As a site admin, I want to be able to receive email when someone is contacting us from the contact page.
  • Result: TEST PASSED
  1. As a site admin, I want to be able to change the appointment time without canceling the booking.
  • Result: TEST PASSED
  1. As a site admin, I want to see how many bookings still havent been accepted with a date yet.
  • Result: TEST PASSED
  1. As a site admin, I want to check all the fields in the appointment form that say required really is required.
  • Result: TEST PASSED
  1. As a site admin, I want all the fields in contact-us to be required so users cant send an empty mail.
  • Result: TEST PASSED
  1. As a site admin, I want to see a success message when I accept an appointment or delete an appointment
  • Result: TEST PASSED

I also did some automatic testing, you can find them here and here

Code Validation

HTML

The W3C Markup Validation Service was used to validate the HTML page of the project. No errors or warnings to show.

Home Page

Skärmavbild 2021-11-16 kl  14 09 47

Service Page

Skärmavbild 2021-11-16 kl  14 14 57

Contact-Us Page

Skärmavbild 2021-11-16 kl  14 15 21

Appointment Page

Skärmavbild 2021-11-16 kl  14 15 48

Manage-Appointment Page

Skärmavbild 2021-11-16 kl  14 16 06

CSS

The W3C CSS Validation Service was used to validate the CSS file used for the project. No errors or warnings to show.

Skärmavbild 2021-11-18 kl  14 11 43

Python

The PEP8 Online Check was used to validate all Python code. No errors or warnings to show

Skärmavbild 2021-11-16 kl  13 29 57 Skärmavbild 2021-11-16 kl  13 30 37 Skärmavbild 2021-11-18 kl  16 08 27 Skärmavbild 2021-11-18 kl  16 10 16 Skärmavbild 2021-11-18 kl  16 10 57 Skärmavbild 2021-11-18 kl  16 09 49

Different Screen Size

The site is optimized for all screen sizes and tested with a Macbook Pro 13" and iPhone 13 Pro. I use media queries to make everything look and feel good on mobile devices.

Issues found during site development

  1. There was an issue to send confirmation emails out to the user and Admin. I use send_mail from Django and added subject and body straight in to it. In the body I added the first name of the user and also the confirmation date and I kept getting error message that it could not read the first name or the confirmation date. I then change it to defined both the subject and body before the send_mail and then just let the send_mail read from the variables. It made the errors go away.

Skärmavbild 2021-11-09 kl  12 40 18

  1. I had this problem when I tested to send email when the site was deployed to the Heroku platform it gave me an error that was not showed in Gitpod. The issue was that I forgot to add the Secret API key from Send Grid in to the config on Heroku. After adding the key to the config vars the problem went away.

Skärmavbild 2021-10-28 kl  10 28 39

  1. When a user was going to make a second appointment they get a error message saying "IntegrityError". The reason was I had a onetoone relationship with the user and the appointment. So I changed the User model to a ForeignKey instead and get rid of the error right away.
New:

Skärmavbild 2021-11-09 kl  13 04 34

Old:

Skärmavbild 2021-11-09 kl  13 05 25

After the change I got another problem that users that did not login would get an error saying this:

Skärmavbild 2021-11-17 kl  15 22 09

I fixed the error by using if/else statments in the function that was calling the form. If the user is not logged in the user=request.user will not be used.

Skärmavbild 2021-11-17 kl  17 41 56

  1. The datetime was not rendering correct from the model so I split it up to make it look better.
Old:

Skärmavbild 2021-11-04 kl  12 41 42

New:

Skärmavbild 2021-11-09 kl  15 18 21

Solution:

Skärmavbild 2021-11-09 kl  15 26 30

  1. My success messages was bugging when people was logging in and out. It was showing inside the "Manage" page even when that was only for the confirmation of appointments. I fixed it to delete the automatic messages Allauth send out when it's a successful login/out to any page since I was not using it.

Skärmavbild 2021-11-08 kl  12 53 44

  1. I was getting some error message when trying to add a edit button to the manage appointment form. Once the edit button was clicked it would work as a submit button for the datetime form and say that the date is not set. To work around it I added a collapse div from bootstrap and then added the {app.id} on the div so each card would know which edit button was clicked.

Skärmavbild 2021-11-12 kl  14 33 34

Solution:

Skärmavbild 2021-11-15 kl  14 46 42

Deployment

  1. On the home screen click on create new app button
  2. Enter a name for the project and select your region to the correct region
  3. On the next screen select settings
  4. Go to config vars and click reveal config vars
  5. Switch to the program file and where you are keeping your credentials copy these and then on Heroku enter a name for the key and paste the code into the config vars value box and click add
  6. Now scroll down to buildPacks and click add build packs
  7. First select python and click save changes
  8. Click back into build packs and choose node.js and click save again
  9. Ensure that the Python build pack is at the top of the list you are able to drag and drop if you need to rearrange
  10. Now select deploy
  11. From the deployment method select GitHub
  12. Then click on connect to Github button that appears
  13. Click into the search box and search for the project name
  14. Once located select connect
  15. Then click deploy branch, this will then be shown in the box below
  16. You can the click view to show the app in a browser

The program is set to be deployed automatically after each push from gitpod.

I also set up a Postgres database with Heroku.

  1. Click on Resources in your Heroku app.
  2. In the add-ons field search for Heroku Postgres and press submit.

Cloning

How to clone this repository.

  • On GitHub go to the main page of the Repository.
  • Above the list of files click the code button with the drop-down arrow.
  • To clone the repository using HTTPS, under "Clone with HTTPS", click on the clipboard.
  • Open the Git Bash terminal.
  • Change the current working directory to the location where you want the cloned directory.
  • Type git clone, and then paste the URL you copied earlier from step 3.
  • Press Enter to create your local clone.

Credits

z_dentist's People

Contributors

andrezeitz avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.