Blue Ocean travel is an online e-commerce store that specialises in booking trips on the Australian East Coast. Users will be able to book single or multiple trips and also have the option to contact the company to have a personalised itinerary created. The users will have the possibility to make an account, add tours to their shopping cart, book tours, and process payment through the site. This site was developed using Python (Django), HTML, CSS and by storing the data in a PostgreSQL database.
Blue Ocean Travel is an online ecommerce website that specialises in B2C travel sales. The website is targeted towards backpackers travelling in Australia. The website makes use of short tail and long tail keywords to try and improve its search engine rankings. The website also has a strong social media presence as digital marketing has been proven to be the most effective method for targetting millenial backpackers.
Users can purchase a single tour on the website or they can contact the company directly to have a custom itinerary created for them. Users can add items to their bag to purchase now or they can add items to their wishlist if they wanted to purchase them later. The payment function is built using stripe and allows users to process payment with ease and then recieve email confirmation that their tour has been booked.
The model is built off ease of use. Backpackers are now educated consumers and know exactly what they want. This website is designed to give users useful concise information and comes with a very short booking journey in an attempt to increase conversions.
The website was designed mobile first as the majority of backpackers are travellig with only their smart phones.
The business model is dedicated to delivering unique and wonderful experiences to backpackers. This business organises niche activities on specified dates to help backpackers connect with likeminded people while getting away from the monotony of ordinary day trips.
I used the Lato and Poppins fonts from GoogleFonts. I opted for these fonts as they are clean, easy to read and versatile which make them perfect for a youth adventure travel website. I opted to use Poppins font for the headings and Lato for the body. The only exception to this was the homepage hero image where I opted to use the Lato text as I felt this looked betted
The colour scheme is a simple blue that reminds the user of the ocean and instills a desire to travel. The white background contrasts with the light blue font to create an easy yet eye catching colour palette. This colour scheme was inspired by Whitehaven beach which is renowned for it's crystal clear aquatic blue water and powdery white sands. The colour scheme fits well with the company name and the company ethos of inspiring it's users to travel. The blue colour scheme was also inspired by BareFootCampers in New Zealand.
The logo is an artificially generated logo from Looka
The logo contains the company name and is designed to inspire users to travel and make the leap to travel the world. This is done to encourage users to visit Australia and book tours via the website.
This diagram shows how the users and staff users interact with the database. This was created using LucidChart and outlines the relationship between the database.
The database schema was set up as follows:
Key | FieldType | Validation |
---|---|---|
region | ForeignKey | null=True,blank=True |
name | CharField | max_length=254 |
description | TextField() | |
price | DecimalField | max_digits=6, decimal_places=2 |
date | DateTimeField | |
duration | DurationFiel | null=True, blank=True |
image_url | URLField | max_length=1024, null=True, blank=True |
image | ImageField | null=True, blank=True |
Key | FieldType | Validation |
---|---|---|
name | CharField | max_length=254 |
friendly_name | CharField | max_length=254, null=True, blank=True |
Key | FieldType | Validation |
---|---|---|
product | ForeignKey | |
rating | IntegerField | |
content | TextField | |
created_by | ForeignKey | |
created_at | DateTimeField |
Key | FieldType | Validation |
---|---|---|
user | OneToOneField | |
default_full_name | CharField | max_length=50, null=True, blank=True |
default_phone_number | CharField | max_length=20,null=True, blank=True |
default_email | EmailField | max_length=254, null=True, blank=True |
Key | FieldType | Validation |
---|---|---|
full_name | CharField | max_length=50, null=False, blank=False |
EmailField | max_length=254, null=False, blank=False | |
phone_number | CharField | max_length=20, null=False, blank=False |
input_text | TextField | max_length=1000, null=True, blank=True |
selection | models.IntegerField |
Key | FieldType | Validation |
---|---|---|
order | ForeignKey | null=False, blank=False, |
product | ForeignKey | null=False, blank=False |
quantity | IntegerField | null=False, blank=False |
lineitem_total | DecimalField | max_digits=6, decimal_places=2, null=False, blank=False, editable=False |
Key | FieldType | Validation |
---|---|---|
order_number | CharField | max_length=32, null=False, editable=False |
user_profile | ForeignKey | null=True, blank=True |
full_name | CharField | max_length=50, null=False, blank=False |
EmailField | max_length=254, null=False, blank=False | |
phone_number | CharField | max_length=20, null=False, blank=False |
order_total | DecimalField | max_digits=10, decimal_places=2, null=False, default=0 |
original_bag | TextField | null=False, blank=False |
stripe_pid | CharField | max_length=254, null=False, blank=False |
Key | FieldType | Validation |
---|---|---|
user | ForeignKey | |
product | ForeignKey |
This project was developed using the Agile methodology. All epics and user stories implementation progress was tracked through Github projects Kanban Board which can be found here.
This project had 6 main epics (Milestones)
I. Epic 1. Initial Set up
II. Epic 2. USER REGISTRATION/AUTENTHICATION
III. Epic 3 - Making bookings
IV. Epic 4 - Processing Payment
V. Epic 5 - Deployment Epic
VI. Epic 6 - Documentation
My sprints were planned out as follows:
Sprint #1 - 23/10 - 29/10
Sprint #2 30/10 - 05/11
Sprint #3 - 06/11 - 12/11
Sprint #4 - 13/11 -19/11
Sprint #5 - 20/11 - 26/11
Final Sprint
Home Page
This is the first page that the user will see when they arrive on the website. The primary goal of this page is to allow the user to understand the purpose of the website. This is achieved through eye catching imagery and brief descriptions of what the website purpose is.
A clear Navigation section also makes it intuitive for the user to navigate the website.
The Hero image will inspire the users to explore the different product offerings as the photos will be extremely appealing and the user will want to learn more about these destinations. This section also contains a clickable link to bring users to the products page.
The Why us section will showcase the different Unique Selling Points for blue ocean travel and this will encourage users to book with the company and save themselves some money in the process.
The destination section will include clickable images that will bring the users to the product page that outlines all of the different tours offered in each location
The footer section allows the user to view the company’s social media, internal website links and a brief company description to help users better understand the company’s product offerings.
Navigation Menu
Link | Location | Pass/Fail |
---|---|---|
Logo | index.html | Pass |
Home | index.html | Pass |
Destinations/All Tours | products.html | Pass |
Destinations/K'gari(Fraser Island) | products.html with filter for K'gari products | Pass |
Destinations/Whitsundays | products.html with filter for whitsundays products | Pass |
Destinations/Great Barrier Reef | products.html with filter for Great Barrier Reef products | Pass |
Contact Us | contact.html | Pass |
About Us | about.html | Pass |
When a user is not logged in they can still click the "My account" drop down menu. This will provide two seperate links: Register and Log in.
![]() |
Link | Location | Pass/Fail |
---|---|---|---|
Register | all auth registration page | Pass | |
Log in | all auth log in page | Pass |
When user is logged in the "My Account drop down link will have several links: Product Management, Submitted Contact Forms, My Profile, My Wishlist, Logout.
Link | Location | Pass/Fail |
---|---|---|
Product Management | add_tour.html | Pass |
Submitted Contact Forms | staff.html | Pass |
My Profile | Profile.html | Pass |
My Wishlist | wishlist.html | Pass |
Logout | All auth logout page | Pass |
Footer
Destinations Link | Location | Pass/Fail |
---|---|---|
Destinations/All Experiences | products.html | Pass |
Destinations/K'gari(Fraser Island) | products.html with filter for K'gari products | Pass |
Destinations/Whitsundays | products.html with filter for whitsundays products | Pass |
Destinations/Great Barrier Reef | products.html with filter for Great Barrier Reef products | Pass |
Destinations Link | Location | Pass/Fail |
---|---|---|
Your Account | Profile.html | Pass |
Contact Us | contact.html | Pass |
About Us | about.html | Pass |
Privacy Policy | privacy.html | Pass |
Action | Application | Pass/Fail |
---|---|---|
Send Email | Open Email Client | Pass |
Phone company | Open facetime on desktop | Pass |
Register Page
If users do not have an account they will be brought to a sign up page where they can create an account.
Users can fill out their information here and are then brought to an email verification page.
Users will be sent an email with a link to confirm their email address. This will take them to the following page
Log In Page
If users have an account they will be brought to a login page where they can sign into their account.
If users log in succesfully they will be redirected to the homepage.
If users input the incorrect information they will be given the following error
Sign out page
If a user wants to leave the site they can click the Log Out button and this will take them to the sign out page.
Users will then be redirected to the homepage
Contact Us Page
The contact us section allows the users to contact the company directly if they have any issues.
The user can contact the company by filling out and submitting a form. This adds to the user experience as the user may have some questions that they need answered before they are prepared to make a booking.
This also allows the user to contact the company if they wish to have a personalised itinerary created for them.
Users will also have the ability to contact the company directly via the footer as both the email and telephone icon are clickable links. If the user clicks either of these options it will allow them to email or call the company directly.
Users can also sign up for the company's mailing list throgh the Contact Us Page
If the users submission is succesfull they are redirected to a success page
This page also has an option for users to sign up to the company's mailing list via a survey monkey link
About Us Page
The about us section includes information such as Who are we, what do we do and also includes an FAQ section. This is a page for users to learn more about the company.
The hero image includes a large photo of our team and also gives the user a link back to the homescreen
Who Are we?
What do we do?
This page also has a responsive Frequently Asked Questions accordion section.
Add Product Page
Super users and staff users can add products to the werbsite via the Product Management page. This allows staff to add products without having to access the backend.
Users just need to fill in the required information sections and they have the option to upload an image aswell.
Users will have the options to select which region the product is based in.
Once this has been completed the product will be added to the backend database and be visible in the all tours section.
Product Page
The main purpose of the website is for users to be able to view and organise different experiences around Australia. The users has several different options to view the products. They can view all products or choose the view based on different regions in Australia.
Users can also filter their view of the products based on different filters. They can view the products by changing the sort order from price either low to high or by rating.
Users can view individual tour information through this page ranging from price, region, departure date and product rating
Product Detail Page
The product detail page will allow the user to view the tour in more detail.
All users can view the products and ratings of the tours.
Authenticated users will be able to leave their own ratings and reviews aswell as adding products to their wishlist
Reviews
Product Delete
Staff users can click the delete which will take them to a delete product page
Users will have the option to return to the products page or delete the product. If the user opts to delete the product they will be taken to the products page and the product is removed from the database.
Edit Product Page
Staff or superusers can select to edit the product and they will be taken to a form identical to the add product page.
This form will be autofilled with the product information from the database.
Users can change the details and resubmit the product to the database
Wishlist
Users will have the ability to add items to their wishlist from the product detail page.
This will take the users to a seperate page where they can view the list of items they've added to their wishlist. Users can then delete these items from their wishlist.
Profile page
The profile page will allow users to view their profile information.
Users will be able to edit their phone number and email address through this page
Users will also be able to see the tours they already have organised and purchased through the orders section of the page
My Orders
Users can access the my orders page through their profile page. Users do this by clicking on the order number on the profile page.
Users are then redirected to the My order page.
Users can access a range of information through this page such as order number and order date, tour name and departure date, personal information and contact number aswell as total order cost.
Shopping Bag
Users will be able to view different tour and experiences that they have added to their cart through the shopping bag page.
Users will also be able to increase or decrease the amount of guests going on the tours through the shopping bag page.
Users are also able to remove any tours they do not want from the shopping bag page
If users are happy to proceed with their selected tour they can click the “Secure Check-out” button and this will take them to they payment page.
SecureCheckout
- This page will allow users to view their shopping bag one last time and process payment
- Users are able to input their personal information in this section if it hasn't already been saved on the site
- Users can use a built-in stripe payment element to input their card information and process payment.
Order Confirmation
When the user has completed the transaction they will be brought to the checkout success webpage and shown their order details. The user will also be emailed with the details of their purchase.
Users will then be sent an email outlining their order and information
StaffSection
This section will allow staff members to view any contact forms that have been submitted by users.
Favicon
The favicon was created using the company logo. This favicon sits in the web browser tab and instantly allows the user to recognise the webpage. This adds to the customer experience. The favicon is the globe and plane image that features prominently in the company logo
I received the following scores on my lighthouse testing
I tried to reduce the issues but they were being caused by AWS and Heroku so there was not much I could do to change them.
I would like to add authentication via google or facebook when users are creating an account so they have one click sign in available to them
Due to legal requirements in Australia users must contact the tour operator directly to cancel their tours. I would like to build in a function so that users can cancel their tours directly through the site if it is not within the cancelation period and an email notification will be sent to the tour operator
I used WordTracker to look up short tail keywords
The FAQs section on the AboutUs is filled with long tail keywords in order to boost SEO such as "When is the best time to travel in Australia?", "Should I stay in hostels", "What is the best trip in Australia"
Each page shows an extra title after the store name to assist help with SEO.
I created a robots.txt file to assist with SEO
I've used MySiteMapGenerator to generate a sitemap.xml file. This was generated using my deployed site URL: https://blue-ocean-travel-feb523e57a47.herokuapp.com/about/
After it finished crawling the entire site, it created a sitemap.xml which I downloaded and included in the repository.
I created an extra Testing page as the file was too large to fit in this README.
I had an issue with the AWS settings as I had been using AWS_S3_REGION_NAME = 'Europe (Ireland) eu-west-1' this was fixed by changing the settings to AWS_S3_REGION_NAME = 'eu-west-1'.
I had an issue in that when I was connecting AWS and trying to deploy my project the backend django admin panel was wiped of it users and product data. This error was due to the ProcFile being located in the 'blue_ocean' folder and not being in the root directory.
I was having an issue loading the contact.html page when it was originally created. This was due to the file path set up as the template folder within the contact app did not have an additional 'contact' folder within it. Once I added this folder the issue was resolved.
When adding the elephantsql database all of my products and users disappeared from the database. In order to restore them I needed to disconnect from the database, download a json file from the original database, then reconnect to the database and upload the json file with the fixtures. This resolved the issue.
I had an issue when trying to allow users to filter products by region. I made a lot of alterations to this code segment to try and fix the issue but ultimately this was caused by having a typo in the html code. When I changed 'regions' to 'region' this corrected the issue.
I had several issues with version control. One issue was with using Django 4.2 and csrf tokens. An error was being thrown when I tried to load my forms. This was fixed by addding the following code segment to the settings.py file "CSRF_TRUSTED_ORIGINS = ['https://8000-dlynch95-blueoceantrave-v5j6nx6eqnx.ws-us106.gitpod.io']".
I also had an issue with the AllAuth app and my version of django. This was causing issues however i changed to allauth version 0.51.0 and this fixed the issues
I had a bug when creating my contact us form. This was due to using the DESTINATIONS tuple in my model. Once I moved this outside the model it fixed the issue.
I had a bug with the type of crispy forms I had installed and the forms weren't working. Once I installed an older version of crispy forms this corrected the issue as it was now compatible with the django version I was using
I was having an issue with using a carousel. The code I was using would not render the carousel correctly. Upon further research I realised that carousels are generally not compliant with accessibility standards. Instead I opted to use a hero image instead of a carousel.
I had a bug with the main Nav as it was not allowing the user to get through to the clickable link locations. This was because I had added the links to the mobile-top-header file but had not included them in the base.html file. Once I included them in base.html this solved the issue
I was having an issue with my webhooks. They were not sending the success emails. This was due to an extra "}" in the code which was causing an issue. I was also using the intent.charges format from the boutique ado code. Once I changed this to the stripe_charge format the webhooks started to work and the payment intent was passed through to stripe
I had an issue with the contact us form. It was not feeding through to the admin panel. This was due to not including the form information in the admin.py file and not creating a seperate view for the form submission success page.
I had a bug in the footer section. It was bleeding into the Div above it and distorting the content.I fixed this by changing the class from "secrtion-row" to just "row" and this corrected the issue.
I had a bug in that the ratings were showing up as long string decimal numbers. I fixed this by adding round() infront of my calculations in my ratings model
I was having an issue getting the product to delete when requested by a staff member, this was because I had two views pointing to the same location. Once I fixed this the issue was resolved
I was having issues with the favicon as I was trying to link without using the {% static %} link in the head section.
There was an issue with the profile page as the order total data was not showing. This was because the code was using order.total instead of order.order_total
The application was tested on a macbook air using the google chrome browser.
I also tested it on the following mobile devices: OnePlus NordCE Iphone12 Samsung Galaxy S All of these devices worked as intended.
I did not test this site on a tablet but did utilise the google chrome Dev tools.
I created a seperate file for validator testing as there were too many files to document in this READE
I created a seperate Testing.md file that outlines all of the tests completed
I created a seperate file to outline the deployment process as it was too long to detail all of the steps here
The live link can be found here - Blue Ocean Travel
Clone the Repository Code Locally
Navigate to the GitHub Repository you want to clone to use locally:
Click on the code drop down button
Click on HTTPS
Copy the repository link to the clipboard
Open your IDE of choice (git must be installed for the next steps)
Type git clone copied-git-url into the IDE terminal
The project will now of been cloned on your local machine for use.
Fork the repository
For creating a copy of the repository on your account and change it without affecting the original project, useFork directly from GitHub:
On My Repository Page, press Fork in the top right of the page
A forked version of my project will appear in your repository
Heroku
The project was deployed using Code Institutes mock terminal for Heroku
Deployment steps:
Fork or clone this repository.
Ensure the Profile is in place.
requirements.txt can be left empty as this project does not use any external libraries
Create a new app in Heroku
Select "New" and "Create new app"
Name the new app and click "Create new app"
In "Settings" select "BuildPack" and select Python and Node.js. (Python must be at the top of the list)
Whilst still in "Settings", click "Reveal Config Vars" and input the folloing. KEY: PORT, VALUE: 8000. Nothing else is needed here as this project does not have any sensitive files
Click on "Deploy" and select your deploy method and repository
Click "Connect" on selected repository.
Either choose "Enable Automatic Deploys" or "Deploy Branch" in the manual deploy section
Heroku will now deploy the site
The format and template for the README file was borrowed from the Code institute.
The image conversions from jpg to webp were done with Convertio
The code for the carousel was borrowed from W3Schools Sample Project
The code for the 'Why us' section was borrowed from BackPackerdeals
The code for the footer was taken from MDBootstrap
The styling and colour scheme inspiration was taken from BarefootCampers
The review code was inspired by CodewithStein
The code for the accordion on the About Us page was taken from the Bootstrap Documentation
I created the sitemap.xml file at MySiteMapGenerator
The outline template for the Python was provided by the Code Institiute
The hero image code was taken from my PP1
I also took a lot of inspiration from the Code institute Boutique Ado Walk through Code Institiute
A lot of the python coding was done with help from the tutorial pages at w3schools
The Django documentation was one of the main resources I used during development Django Documentation
The code for the wishlist add item came from StackOverflow
The tutor support team from codeinstitute were extremely helpful in helping me to overcome bugs in my code.
I used countless stack overflow entries to help me to solve minor django related bugs.
I used the following projects as inspiration for my project. SizzleAndSteak, TennisBuddies, RetroReboot, kbeauty , PcHaven