Welcome to Kennel 39! A booking site for a small dog grooming business.
Click here to view the live site.
A business tends to perform better with a steady stream of customers. It can accept walk ins and/or utilise some sort of appointment booking system. At its simplest, this could be using a phone with a handwritten diary to record client names and their booking times.
Consider Kennel39, a hypothetical startup business whose only employee is its sole trader/owner. Phone calls to book appointments can occur at anytime during business hours. Such calls can be inconvenient when lathering shampoo into someone's pet.
It could help the business if customers book an appointment using a webform. This method has the advantage that appointments can also be made outside standard working hours. In theory, this increases accessibility to business thus improving productivity and turnover.
Another valid concern is that some people prefer to book a service passively using the web as opposed to making a phonecall, especially those of a shy disposition or from a younger generation as they are accustomed to this way of working.
A business with a well developed website tends to do better than its peers. Customers can gain a better insight of its ethos, facilities and services on offer. In theory this fosters confidence and leads to greater engagement.
With the above in mind, let's build a site to help The Kennel!
Applying a Design Thinking approach, what features would users find most useful on the developed site? How feasible is it for an inexperienced student developer to deliver prioritised features given the time constraints of a hard deadline?
As per assessment criteria, this project must utilise CRUD functionality. This provides a broad outline of what is needed. A brief though shower offered the following:
| Feature | Importance | Feasability |
|---|---|---|
| View available services | 4 | 5 |
| Create personal account | 5 | 5 |
| Update account information | 5 | 5 |
| Able to cancel account | 5 | 5 |
| Make an appoinment | 5 | 5 |
| Review latest appointment date/time | 3 | 4 |
| Able to change/cancel an appointment | 3 | 4 |
| Send client booking detail via email | 2 | 4 |
| View history of all appointments made | 2 | 3 |
| View costs of previous appointments | 2 | 1 |
| Owner has calendar view of daily clients | 4 | 3 |
| Overall Score | 40 | 44 |
The above exercise indicates that overall importance/feasability scores were similar. Therefore the project should be deliverable.
Following an Agile paradigm, user stories will target customer needs and reduce embelishments on the part of the developer. These non technical statements will aid with the incremental changes needed to build the application.
Site user needs have been arbitrarily split into 4 categories or epics:
- navigation
- account management
- bookings management
- other
NAVIGATION
-
As an unregistered user, I can navigate to a page so that I can view the services offered by the business
-
As an unregistered user, I can follow a link so that I can view the Kennel's social media content
-
As an unregistered user, I can use a sidenav so that I can navigate the site on all views
-
As a user, I can select a link so that I can register/ log in to my account
ACCOUNT MANAGEMENT
-
As an unregistered user, I can provide details so that I can create a unique account
-
As a registered user, I can provide details so that I can login to my account
-
As an unregistered user, I can create a unique password so that I can protect my personal account
-
As a logged in user, I can view a page so that I can see my personal account details by individual field
-
As a logged in user, I can click a button so that I can change my personal account details by individual field
-
As a logged in user, I can click a button so that I can delete my account
-
As a logged in user, I can request an email so that I can reset my account password if I have forgotten it
BOOKINGS MANAGEMENT
-
As a logged in user, I can provide booking details so that I can set up appointment
-
As a logged in user, I can update details so that I can reschedule an appointment with the Kennel
-
As a logged in user, I can cancel an appointment so that I can cancel an appointment with the Kennel
-
As a logged in user, I can request an email so that be reminded of an appointment
-
As an employee, I can view a page so that I can see my daily bookings or the current day
OTHER
-
As a user, I can view the site on a small screen so that I can use it when traveling with a mobile device
-
As an unregistered user, I can view the landing page so that I understand the site's purpose
Agile use has been documented in a separate file.
It became something of learning aid/development tracker for this project.
Several wireframes were created to target user requirements. This provided an overall feel of the project before starting to code. Some alterations will likely take place as the project develops.
The colour schema was selected from Adobe Color and the accessibility was checked using the contrast grid tool from Eightshapes.
The developed site should appear bright to contrast with the negative space.
In keeping with the dog theme, colours are based of the Mystery Machine as seen in Scooby-Doo.
Entity Relationship Diagrams help to visualise database architecture before creating models in Django. Understanding the relationships between different tables can save time recoding later in the project. Fortunately this system is quite simple so only 4 tables are required.
Update - by mid project, research showed there was no need for a calendar table. This was omitted from the ERD.
The site was deployed early closely following Code Institute guides.
This process has been documented separately in DEPLOYMENT.md
Update - More dependancies were added after deployment. WhiteNoise was used instead of Cloudinary.
For a small site, it's better for the web app to serve its own static files rather than rely on a 3rd party API. It was also much easier to setup.
Update - there was an unforseen deployment issue with Heroku. As described by the link this was to prevent unauthorised access to gitHub repositories.
This was resolved by deploying to Heroku via the CLI in Gitpod.
- Login to heroku and enter your details.
command:
heroku login -i - Get your app name from heroku.
command:
heroku apps - Set the heroku remote. (Replace <app_name> with your actual app name)
command:
heroku git:remote -a <app_name> - Add, commit and push to github
command:
git add . && git commit -m "Deploy to Heroku via CLI" - Push to both github and heroku
command:
git pushcommand:git push heroku main
If MFA/2FA is enabled:
- Click on Account Settings (under the avatar menu)
- Scroll down to the API Key section and click Reveal. Copy the key.
- Enter the command: heroku_config , and enter your api key you copied when prompted
- Complete the steps above, if you see an input box at the top middle of the editor...
- enter your heroku username
- enter the api key you just copied
The style of the site is intended to convey a cartoonish/minimalist quality using the colour schema with thicker border around elements and plenty of negative space. It's an interpretation.
The user understands the site's purpose on arrival.
The whole site uses a collapsable menu to save screen real estate on all resolutions.
It occupies the whole screen to encourage the user to make a decision where to navigate to.
The basic black against white contrast works well with the general site theme.
Menu options also change depending on whether or not the user is logged in.
Social media links and developers identity are available at the bottom of the page for all viewscreen sizes.
It has been intentionally omitted from the landing page for styling purposes.
To assist user, link elements change colour when hovering.
If user is logged in, an additional Book Now button becomes available. This is a short cut to the view booking template.
Additionally the registration and logon CTA buttons are hidden when a user is authenticated. They aren't required in this context.
To enhance user experience, buttons change style when hovering.
Contains a brief synopsis of the services offered, drawn from the backend Services table.
A carousel element with 3 images has been included to make the site feel more dynamic (on higher resolutions only).
Service section stacks on lower resolutions.
Depending on user authentication CTA buttons change at the bottom of the page for easier navigation.
Standard allauth signup page adapted to the site's theme.
Standard allauth signup page adapted to the site's theme.
This shows the user all existing bookings. It is intended that that they use this information to book an appointment that doesn't overlap with an existing one.
All accounts can:
- view a page personalised with their username
- view bookings from the current date to one year in the future
- filter the table using a jquery support datepicker. This has been setup to allow selections from current date to one year in the future.
Show allbutton removes filtering and restores table to default.- create a booking by selecting
Book Now - the table itself utilizes a hover effect for a whole row to emphasis the record the user is actively viewing/selecting.
Superuser and staff accounts have:
- full CRUD access to all bookings made.
- can view all booking information including user names
Standard user accounts have:
- CRUD functionality limited to their own records. This is to counter malicious or accidental tampering with the database.
- To protect identities of clients, a
*****placeholder is used to anonymize the user field for records created by others.
There is no need to ask the user for their name when they are signed into their account.
To simplify data entry, the form contains an html datepicker and dropdown menus whose options are based on the booking model.
The edit booking follows the same conventions as the create booking page and is prepopulated with the record the user chose to edit.
This serves as a defensive programming feature for the user asking if they really wish to cancel their booking.
The title and message body are personalised and the buttons have the same hover effects in keeping with the rest of the site.
The Django framework has been used to apply messages throughout the site to give the user useful feedback.
To do this a messages.html template was included in the base.html,
Alerts can be seen at the top of the page for:
If unsuccessful, the page redirects back to edit booking to try again.
If successful, the page redirects back to view bookings.
This was the first occasion using allauth which more than met most of the project needs.
It is possible to extend allauth forms to include the Profile model though this will have to be an item for the future due to time constraints.
The Profile model has(with address and phone number fields) a 1-1 relationship with the user table. They are not crucial for the process of logging in/out but can serve other business needs such as marketing.
CRUD functionality for the full user account including address and phone number fields cannot be realised in the front-end without the above.
A good source to aid with this expansion is by Vitor Freitas.
It would be preferable to give a user their own page to view appointments to replace the filter workaround solution in view bookings.
Within that area, discrete option buttons representing a time could to work in conjunction with a datepicker.
Javascript would be needed to manipulate the DOM dependent on the result of a queryset of existing Booking table records.
The state of these buttons may be changed by adding a class to give a muted style or even hide.
Refer to TESTING.md for details on:
- manual testing
- automated testing
- linter checks on html, css, js and python code
- Lighthouse site performance checks
- Balsamiq for wireframing
- Lucidchart to produce ERD's
- Adobe Color to research colour schemas.
- Eightshapes to review colour schema accessibility.
- GitHub for repo storage and Agile project management using kanban boards/issue tracking.
- Heroku for project deployment to the world wide web.
- Python3 with the following modules
- asgiref==3.5.0
- dj-database-url==0.5.0
- Django==3.2
- django-allauth==0.50.0
- gunicorn==20.1.0
- oauthlib==3.2.0
- psycopg2==2.9.3
- PyJWT==2.3.0
- python3-openid==3.2.0
- pytz==2022.1
- requests-oauthlib==1.3.1
- sqlparse==0.4.2
- whitenoise==6.0.0
- CSS
- HTML
- Bootstrap
- JQuery
- Django
- Django Templating
- PostgreSQL
- Allauth
- Chrome DevTools
- Google Fonts
- W3C Markup Validator HTML linter
- Jigsaw CSS linter
- JSHint JS linter
- PEP8 Python linter
- Favicon in pagetab by Icons8
- Paw favicons from Font Awesome
- Facebook and LinkedIn icons by Font Awesome
- Inspiration for navbar design from Vandelay Design
- Landing page image from Wallpaper Access
- For dog breed images used in the carousel element.
- Datepicker customisation from Jquery
- Responsive table design on mobiles from Codepen
My thanks to:
- My Mentor Tim Nelson for his seemingly endless wealth of knowledge and patience.
- Ger Tobin at the Code Institute for his assistance troubleshooting Postgres.
- Tutorials Point for guidance working directly with Postgres tables.
- Youtube tutorial 58 - Django urls, includes, and app name - Python & Django 3.2 Tutorial Series by CodingEntrepreneurs
- AJ Welch for a bolstering my understanding of Django lookups.
- LearnerAndLearn for there explanation on the difference between multiple arguments and chain filtering and how that affects SQL queries.
- Jaysha at ordinarycoders for her breakdown of django messaging with Bootstrap.
- W3schools for working with bootstrap.
- Alexander Rechsteiner for his useful Bootstrap revision sheet.
- Will McCutchen for his useful string from time cheatsheet.
- Fellow students, David Bowers and Helena Johansson for their moral support. They kept me going during periods of self doubt.