Project URL: View live project
A simple Django website for any company to accept bookings.
-
Page Link Home Home Contact Contact Message sent Message sent Signup Signup Login Login Company info form Company info form Company account Company account Company booking page Company booking page Company booking thank you Company booking thank you
-
3 main colours were used
#05284Dfor brand name & footer,#007BFFfor buttons and#F9FAFCfor main content background. I used olive, yellow, and red for minor things.
-
- Lato is used on the brand name in the header/navigation bar, which gives the brand a nice touch.
- For the rest, system font is used throughout the pages, which the user is already familiar with, to keep the site lightweight.
-
- The purpose of the images is to make the app more appealing.
- The colors and images all serve to be aligned with and assist in the app's branding.
- The images also intend to give the app an identity the user can relate to, lifting its overall impression.
Screenshots were taken of the site and added to the homepage as highlights.
As a paying customer of Envato elements, I can download images, etc., with licenses.
- The homepage and the contact page both have an image from Envato elements.
- The homepage has icons from Envato elements.
- Favicon image:
- Social image card:
| Page | Medium | |
|---|---|---|
| Homepage | Desktop | Mobile |
| Contact | Desktop | Mobile |
| Message Sent | Desktop | Mobile |
| Login | Desktop | Mobile |
| Signup | Desktop | Mobile |
| Logout | Desktop | Mobile |
| Add Company Info | Desktop | Mobile |
| Company Account | Desktop | Mobile |
| Company Account Delete | Desktop | Mobile |
| Company Account Empty | Desktop | Mobile |
| Company Account Info | Desktop | Mobile |
| Company Info Edit | Desktop | Mobile |
| Company Booking | Desktop | Mobile |
| Booking Thank You | Desktop | Mobile |
| Customer Booking Delete | Desktop | Mobile |
| Error 404 | Desktop | Mobile |
| Error 500 | Desktop | Mobile |
- There are templates for error pages 400, 401, 403, 404, and 500.
-
Admin can control all categories, companies, customers, and more.
[x] #1
-
The admin can approve and disapprove a company in the company model and filter by the status.
[x] #4
-
In addition to the company model view, by pressing the User ID Number, the admin is redirected to that specific user. Categories view has the same but will add a filter for all companies inside that particular category.
-
A fixed top navbar that is easily accessible at all times on all pages.
If a user is signed in, the navbar changes with the account, logout links, and displays the user's name.
-
Footer is visible on all pages.
-
A hero section below the navbar quickly informs the user about the site.
-
A section below the hero section speaks about Why Bookable, which tries to build the brand's confidence.
-
Below "Why" section there's three feature sections that comes in handy, they speak about the app features.
-
Below the features section, there's a call to action section that invites the visitor to either register or lead the visitor to the contact page.
-
On the homepage, the Website will greet the visitor with a hero section, and below it, a contact form the vill presented to the visitor for easy contact.
Signup
-
Company user signup is in two parts. First, a new company user makes a user account.
-
Then adds company details which then defaults to pending account status.
[x] #5
Account Page
-
The account page is simple and contains a small header with a greeting and the user's name, and across it is an offcanvas button. Below the header, there's a booking list table and a pagination bar at the bottom.
[x] #8
-
The pagination is based on Django's paginator, while Bootstrap is used for styling.
Pressing the offcanvas button will bring out the info section with all information about the user and two buttons at the bottom; edit the company info or delete the account and everything associated with it.
[x] #6
-
Booking Page
-
The booking page is to the point, with the essential things a customer would want—a form to book and quick & small snippets of info about the company.
Thank you page
-
The thank you page is simple, with helpful information to all parties if shared.
Delete Booking
-
Delete/Cancel booking.
[x] #13
For the initial design of this Django project, I chose a monolith design because of the size of this project.
The data model built for this project laid the foundation for how the app should work.
A database diagram from the Datagrip program:
CRUD for this project is as follows:
| User | Create | Read | Update | Delete |
|---|---|---|---|---|
| Admin | Yes | Yes | Yes | Yes |
| Company | Yes | Yes | Yes | Yes |
| Site user | Yes | Yes | No | Yes |
An explanation for CRUD for each user:
- Admin can create, read, update and delete users, companies, and site users.
- Company can create a user and company profile and read, update & delete their information.
- Site users can create, read & delete a booking the user made.
Bookable heavily uses request.user.is_authenticated and acts accordingly on every view and template. I tried to tighten things up as much as possible for the code with checks at every corner. I've added SECURE_SSL_REDIRECT, SESSION_COOKIE_SECURE, CSRF_COOKIE_SECURE and X_FRAME_OPTIONS to settings file.
This project is without email capabilities, and I did not see the need for it. This project is just an illustration of a general booking app. It is a future desired feature.
The minimum this app should include:
- The ability to register as a company without market boundaries.
- The ability to add relevant company information.
- The ability to have a company booking page.
- The ability to accept bookings without customer accounts.
- The ability to see all bookings.
- The ability for booking makers to delete/cancel their booking.
The desired features this would want:
- The ability to receive booking confirmation emails.
- The ability for companies to manage their bookings.
- The ability to add products/services etc.
- The ability to separate between private & company booking makers.
- The app is targeted toward service providers, from dentists to spas and restaurants, to make their bookings easier to accept and manage.
- Agile development methodology was used for this project, planning, developing, and delivering in small sprints. There were three sprints in total spaced out over one month with:
- the admin epic, 1/3 of the total time.
- the company epic, 1/2 of the total time.
- the customer epic, 1/3 of the total time
I assigned all epics labels:
- must have
- should have
- could have
I prioritized all epics according to their labeling.
- I did "must-have" first.
- Then "should have"
- While "could have" was not developed due to the deadline of this project.
- "Nice to have" was not used for this project as that list could quickly grow beyond this project's scope.
The Kanban board used was created using Github projects and can be seen here
The project has three primary epics, each supplementing the previous. Also, I did testing in each epic, related bugs, errors, etc., were fixed, and related front-end user reporting was created, i.e., a 404 error page.
I did final testing of everything after the completion of the epics.
Epic 1 - Admin with data model setup
- The foundation of the app going forward. The data model for all epics was developed, then the admin portion of the app.
Epic 2 - Company User
The main epic took up most of the time as the whole app was based around this epic.
Epic 3 - Site User
The last and final epic brought together the company and booking models.
The following user stories contain the epics above.
-
-
As a Company User I can:
-
- #5 create a profile to receive appointments so that customer acquisition is easier & straightforward.
-
- #6 edit or delete my profile so that my profile can stay updated or remove myself from the platform.
-
- #7 approve or disapprove a user appointment so that I am in control of the appointments.
-
- #8 view all confirmed bookings so that I can find an appointment if needed.
-
- #9 search and filter through all bookings so that to quickly find a specific booking.
-
- #10 delete bookings after a specific time that are no longer relevant so that the booking list stays clean and uncluttered.
-
-
Developed
Sprint Developed a Yes b Yes c No d Yes e No f No
-
Django infused with HTML; now that's powerful. Using template tags is so much fun with custom template tags. That's where the power is.
I didn't utilize custom CSS very much as this whole project uses Bootstrap 5.2 classes, and I'll say this; It was awesome!
WoW Django, what is there not to say? Luckily Django pushed me outside my comfort zone more than I could imagine. It's enormous, yet now that I've been through this project, I feel I have just scratched the surface. One thing is sure; I learned a great deal about Django; I even dabbled in making a custom tag. It was fun.
From the very beginning of the project, it was essential to differentiate between the development and production environments.
That is why I chose to opt for a shared settings file and separate dev/prod files inheriting everything else, each with its variables depending on where the app is running. I moved and renamed the settings.py file and made the necessary changes to the dependencies.
Cloudinary wasn't straightforward, and I think integration with Django could be better. I could be missing something, and with the deadline coming up, unfortunately, I got no more time to dabble in Cloudinary.
As always, regex comes in handy.
I opted in for and used Django's base view class View as the base of all views. I know there's CreateView, ListView, DetailView, UpdateView, and DeleteView, which seems a cleaner way to do it. That would be a future desire to refactor all views into generic class-based views.
Django until we meet again :)
From the beginning, I did manual testing and debugging throughout the project's development. A tool that came in handy was the django-debug-toolbar extension, which I have come to love. This project has been through rigorous testing during its development, the testings in testing.md file is an example.
I tested the website in the browser developer tool down to 320px, results were satisfying.
I've tested numerous pages with lighthouse, and the result is somewhat similar, with a very tiny difference in performance. The tests showed identical readings to the image below. I chose to screenshot the booking page as that was the heaviest of them all.
The app was tested with color.a11y.com/Contrast for any accessability issues. Bootstraps btn-outline-light class was the leading cause. I fixed all problems.
I tested other pages as well.
The social card image was tested with brandwood.com/a11y/ for any accessability issues. Issues for the small text did show up, but given that this image would show up on social media when shared, I chose to leave it as is to entice people to visit the site.
I have grown fond of eliminating bugs found in my code as I intentionally try to provoke and find them.
This one is more of a warning than a bug for that specific query.
- For this warning I added order_by to the booking model.
The booking URL object id-URL bug when a user deletes a booking, the below page comes up.
- Notice /thank-you/88/ at the end. The request should render the below image but instead renders the company.
- Adding a condition to check whether /booking/slug:slug/ is the same as request.path solved the bug.
- Changing href="/static/... to href="cloudinary url" fixed the issue.
- Changing href="{% static '...' %} to href="cloudinary url" fixed the issue.
Since then I refactored the template tag and reverted back to dynamic urls again.
- I've included a button to copy the thank you page URL for sharing. Javascript is used to copy the innerHTML of the
<a>tag, after which the browser console reports the error in the image above. Adding async await to the function fixed the issue.
HTML markup were checked with w3 HTML Checker and issues found were quickly fixed.
I checked CSS syntax with Jigsaw and nothing significant, warnings of 3rd-party extensions. Bookable's styles.css is short, as Bookable uses Bootstrap for styling.
I checked the Javascript files with JSHint, and there were warning about missing colons. All fixed.
I went through all files, and there were a couple of extra whitespaces, indentation, and long lines reported by pep8online checker. All fixed.
How to fork this repository:
- Log in to GitHub and navigate to this repository.
- You'll see a button called Fork on the top right side of the page. Click the button to create a copy of this repository to your own GitHub account.
How to clone this project:
- Under the repository’s name, click on the Code button.
- In the HTTPS tap, click on the clipboard icon to copy the given URL.
- In your IDE of choice, open git bash.
- Change the current working directory to where you want the cloned directory to be.
- Type git clone, paste the URL copied from GitHub - https://github.com/MTraveller/bookable.git.
- Press enter, and you are done.
To deploy the app to Heroku, navigate to Heroku.com and login into your account or create one if needed. Upon entering your dashboard, create a new app and set the location.
Steps:
-
Click on settings.
-
Click on "Reveal Config Vars"
- Input the following vars;
- CLOUDINARY_CONFIG
- In this format with your info: cloudinary.config(cloud_name = "xxx",api_key = "xxx",api_secret = "xxx", secure = True)
- CLOUDINARY_URL
- From your Cloudinary account.
- DATABASE_URL
- DJANGO_SETTINGS_MODULE
- bookable.settings.prod
- GOOGLE_API_KEY
- Your google places, map and geocode api.
- SECRET_KEY
- Your Django secret key.
- CLOUDINARY_CONFIG
- Input the following vars;
-
Add buildpack.
- Python.
-
Under bookable -> settings -> prod.py:
ALLOWED_HOSTS = [ Your Heroku App URL, ] -
Click on Deploy in the navbar.
- Choose deployment method.
- if Github, choose repository.
- Click "Deploy Branch" at the bottom.
That's it.
- Mockflow:
- Mockflow was used to create the wireframes during the design process.
- Git:
- I used Git for version control using the Visual Studio Code's terminal to commit to Git and Push to GitHub.
- GitHub:
- GitHub stores the project's code after being pushed from Git.
- Heroku:
- Heroku is a container-based cloud Platform as a Service (PaaS). Developers use Heroku to deploy, manage, and scale modern apps. The project is hosted on Heroku for viewing and interacting with the app.
- Django
- Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design.
- VisualStudioCode
- Visual Studio Code is a redefined code editor optimized for building and debugging modern web and cloud applications.
- DATAGrip
- DataGrip is a database IDE tailored to suit professional SQL developers' specific needs.
- django-debug-toolbar
- The Django Debug Toolbar is a configurable set of panels that display various debug information about the current request/response and, when clicked, display more details about the panel’s content.
- Mockaroo
- Mockaroo lets you generate up to 1,000 rows of realistic test data in CSV, JSON, SQL, and Excel formats.
- Bootstrap5
- CSS Library for faster styling of pages.
- Google Places Api
- Library for address autocompletes and google map feature.
- Cloudinary
- A package to make use of and integrate Cloudinary into the application.
- dj-database-url
- This simple Django utility allows you to utilize the 12factor-inspired DATABASE_URL environment variable to configure your Django application.
- django-crispy-forms
- Crispy form makes use of Bootstrap for out-of-the-box styling.
- crispy-bootstrap5
- A package for crispy forms to use bootstrap 5.
- django-phonenumber-field
- A package that verifies the entered string is a phone number.
- xdan - datetimepicker
- jQuery DateTimePicker.
- Metatags.io
- Metatags.io was used to make the image of the social media card used in this readme.
- pytest
- The pytest framework makes it easy to write small tests, yet scales to support complex functional testing for applications and libraries.
- pytest-django
- pytest-django allows you to test your Django project/applications with the pytest testing tool
- model-bakery
- Model Bakery offers you a smart way to create fixtures for testing in Django. With a simple and powerful API you can create many objects with a single line of code.
No code within this project is a copy unless specified explicitly in the source code—Code Institute provided the base template for this project. I based the initial base.html template on Code Institutes "I Think Therefore I Blog - base.html template." The sources used above provided guidance throughout the development.
This project is part of the "Full Stack Software Developer Diploma" at Code Institute.
MT 2022.