Skip to content
/ square-circles Public

Square circles holiday park website - The Fictitious Camping Resort

1 star 1 fork Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

malmgrenola/square-circles

BranchesTags

Repository files navigation

Square Circle Holiday Park

last commit

View the live project here.

Description

This is the main website for Square Circles Holiday Park. A facility hosting guests who need a place to stay with their caravan, mobile home or tent. Square holiday park also facilitates cabins.

The website is designed to be responsible and accessible on a range of devices, making it easy to navigate for potential campers and team members.

Screenshot image

Table of contents

User Experience (UX)

( Back to Top )

User stories

Viewing and Navigation goals

  1. As a customer, I want to be able to view and list all products so that I can decide what to purchase. (screenshot)
  2. As a customer, I want to be able to view the totals of my purchases so that I can spend a little more without over budget. (screenshot)
  3. As a site user, I want to come in direct contact so I can ask any questions. (screenshot)
  4. As a site user, I want to get an error message if the url is wrong, so I know that the page does not exist. (screenshot)
  5. As a site user, I want to see the current weather so I know if I need to wear a full jacket or shorts when visiting. (screenshot)
  6. As a site user, I want to use an interactive map, so I can get an overview of the different pitch types. (screenshot)
  7. As a site user, I want to find the park on social media, so I can follow the park and it's visitors. (screenshot)

Registration and user accounts goals

  1. As a site user, I Want to be able to register for an account so that I can have a personal account and be able to view my details. (screenshot)
  2. As a site user, I Want to be able to login and logout so that I can access my personal account information. (screenshot)
  3. As a site user, I Want to be able to recover my password in case I forget it so that I can recover access to my account. (screenshot)
  4. As a site user, I Want to be able to have a personalized user profile so I can view my personal order history and reservations. (screenshot)

Sorting and searching goals

(screenshot)

  1. As a site user, I Want to be able to list the products so that I can quickly identify the best priced product and identify the category.
  2. As a site user, I Want to be able to sort the list of products so that I can quickly find what I'm looking for.
  3. As a site user, I Want to be able to search for a product by name or description so that I can find a specific product I'd like to purchase.
  4. As a site user, I Want to be able to see what I've searched for and the number of results so I can quickly see whether the product I want is available.

Make Reservation goals

(screenshot)

  1. As a site user, I want to check for availability based on dates, so I know if I can purchase a reservation that fits in my calendar.

Purchasing and checkout goals

  1. As a customer, I want to be able to schedule a reservation and put it into a basket. (screenshots: basket, schedule)
  2. As a customer, I want to be able to make purchases based on my basket items. (screenshot)

Review and rate goals

  1. As a visitor, I want to review and rate the facilities so I can let others know what I think. (screenshots: add review, reviews)

Site owner Administration goals

  1. As a site owner, I want to be able to administrate the reservations. (screenshot)
  2. As a cite owner, I want to be able to administrate the products the facilities has to offer. (screenshot)

Design

Colour Scheme

Colors are selected with the help of the machine learning color generator Huemint

colors image

Typography

Typography on the website is selected and combined based on the deep learning project fontjoy.

Wireframes

All wireframes can be found in the wireframes folder. They are all organized with bootstraps style prefix and descriptive name.

Features

( Back to Top )

  • Responsive on all device sizes
  • Interactive elements
  • User registration and accounts
  • Sorting and searching
  • Purchasing and checkout
  • Check in
  • Review
  • Interactive map
  • Display weather
  • Site chat
  • Customer Reviews

Technologies Used

( Back to Top )

Languages Used

Frameworks & Libraries

  1. Django
    • Django framework is used for this web app
  2. Bootstrap 5.1
    • Bootstrap was used to assist with the responsiveness and styling of the website.
  3. Google Fonts
    • Google fonts were used to import fonts into the style.css file which is used on all pages throughout the project.
  4. Font Awesome
    • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
  5. jQuery:
    • jQuery came with Bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript.
  6. django-storages
    • Used as a storage backend serving static files with aws S3.
  7. boto3
    • Used to create, configure, and manage AWS services.
  8. dj_database_url
    • Used to connect to database
  9. psycopg2-binary
    • Used as PostgreSQL database adapter
  10. small.chat
    • small.chat is used to create a on site chat button for site visitors to use
  11. Fontello
    • Fontello is used to generate missing icons needed.
  12. django-allauth
    • used for user account authentication.
  13. django-crispy-forms
    • Used to control the rendering behavior of forms.
  14. Django-environ
    • Used to handle environment variables.
  15. coverage
    • Used to measure code coverage tests
  16. Stripe
    • Used to make card payments
  17. OpenWeather
    • API used to fetch weather
  18. open-weather-icons
    • font used to render weather icons
  19. unicorn
    • Used as a multi-platform, multi-architecture CPU emulator framework.
  20. daterangepicker
    • Used to pick dates.
  21. django-starfield
    • Used to render Stars instead of integers in forms and django admin.

Programs & Tools Used

  1. Git
    • Git was used for version control by utilizing the GitPod terminal to commit to Git and Push to GitHub.
  2. GitHub:
    • GitHub is used to store the project's code after being pushed from Git.
  3. Photoshop:
    • Photoshop was used to create the logo, resizing images and editing photos for the website.
  4. Adobe XD:
    • Adobe XD was used to create the wireframes during the design process.
  5. Visual Studio Code:
    • Visual Studio Code was used as an Integrated development environment (IDE).
  6. dbdiagram.io
    • Used to generate database overview images.
  7. ami.responsivedesign.is
    • Used to generate the site screenshot

Data models

( Back to Top )

PostgreSQL is used to store all data in the production environment. It is also possible to disable production live database and use a local SQLite database instead by removing the .env variable DATABASE_URL.

Data model overview

data model

User Profile

User Profile holds user information. Default data models from django-auth and django-allauth are also used to hold auth specific data.

field type description
_id pk unique record id
user fk category record id
default phone number CharField Holds product name

Products

Products hold product name, price and image information.

field type description
_id pk unique record id
category fk category record id
name CharField Holds product name
description CharField Holds product description
price DecimalField Holds product price
image ImageField Holds product image

Categories

Categories holds Categories name information.

field type description
_id pk unique record id
name CharField Holds category name

Pitch

Pitch holds Pitch information.

field type description
_id pk unique record id
product fk Holds product id
name CharField Holds pitch name
description CharField Holds pitch description
electric boolean Holds pitch electric state
plug varchar Holds pitch electric plug type
graywaste boolean Holds pitch graywaste state
fullwaste boolean Holds pitch fullwaste state
water boolean Holds pitch water state
tent boolean Holds pitch tent state
seasonal boolean Holds pitch seasonal state

Order

Order holds every order made.

field type description
_id pk unique record id
order_number CharField Holds order number
user_profile fk User profile id
full_name CharField User name
email EmailField User email
phone_number CharField User phone number
date DateTimeField Holds order date
grand_total DecimalField Holds order grand total
original_basket TextField Holds the original basket
stripe_pid CharField Holds the stripe purchase id

Order Line Item

Order Line Item holds every line in each order made.

field type description
_id pk unique record id
order fk Order id
product fk Product id
check_in DateTimeField Check in date
check_out DateTimeField Check out date
quantity integerField amount of pitches
lineitem_total DecimalField total value of lineitem

Review

Review holds every site reviews made by users.

field type description
_id pk unique record id
profile fk Holds profile key
name CharField Name as displayed on review
review TextField Review text from user
rating IntegerField Rating value
date CharField Review created date

Testing

( Back to Top )

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

Coverage is used for testing and coverage report.

to run a test use the terminal command coverage run manage.py test in the root directory.

it's possible to generate a test with the terminal command coverage html, a folder named coverage_html_report is generated.

It's possible to read the report by opening the file /coverage_html_report/index.html in a browser.

Test Report

Site passed all tests OK with test report results.

Chrome Lighthouse has been used to measure performance of the site with the following results.

Site Performance

Additional Testing

Basket App
  1. add assets to basket by clicking +
  2. confirm that it is not possible to add more than available items.
  3. remove assets from baskets
  4. confirm that it is not possible to remove the last asset.

Feature passed this test

Checkout App tests

Checkout app unit tests don't test checkout with stripe and webhooks.

  1. set travel info.
  2. add product to basket.
  3. continue to checkout.
  4. add your details and make payment. (use card 4242 4242 4242 4242 as test)
  5. Make payment.
  6. Confirm success email is sent.
  7. Confirm Order is created correctly.

Feature passed this test

Home App tests

Home app unit test doesn't test error is data from weather provider.

  1. change weather url to an invalid url.
  2. confirm error message after home reload.

Feature passed this test

square_circles App tests

In settings.py, Email backend smtp is tested in the Checkout App Tests.

In settings.py, Heroku Database integration is tested by the following steps

  1. In admin, login with credentials and confirm no errors.

In settings.py, AWS Storage is used as media and static files cdn, integration is tested by the following steps

  1. Goto to main url
  2. Confirm images and static files loads.

Feature passed this test

Testing User Stories from User Experience (UX) Section

Test Viewing and Navigation goals

  1. As a customer, I want to be able to view and list all products so that I can decide what to purchase.
    1. Upon entering the site, users are greeted with a clean and easily readable navigation bar to go to the page of their choice.
  2. As a customer, I want to be able to view the totals of my purchases so that I can spend a little more without over budget.
    1. In the navigation bar the user can navigate to the current basket where the total cost is displayed.
  3. As a site user, I want to come in direct contact so I can ask any questions.
    1. On every page located in the bottom right of the current browser window there is a chat icon that can be pressed. By pressing the button a small chat window appears where the user can communicate with the park site staff.
  4. As a site user, I want to get an error message if the url is wrong, so I know that the page does not exist.
    1. if the user navigates to a faulty page a page not found message will automatically be visible.
  5. As a site user, I want to see the current weather so I know if I need to wear a full jacket or shorts when visiting.
    1. When entering the site the user can read the current weather in the today's weathersection.
  6. As a site user, I want to use an interactive map, so I can get an overview of the different pitch types.
    1. In the site's navigation bar the user can select MAP.
    2. Above the interactive map the user can select parameters that will highlight the pitches with corresponding parameters.
    3. The site user can see the total of how many pitches have the current selected parameters updated automatically.
    4. It's possible for the site user to hover over each pitch to see details
  7. As a site user, I want to find the park on social media, so I can follow the park and it's visitors.
    1. Within the footer located on every page there are links to the social media accounts, when used, links open up in a new browser window.

Test Registration and user accounts goals

  1. As a site user, I Want to be able to register for an account so that I can have a personal account and be able to view my details.
    1. As a first time visiting site user it is possible to select the sign up button found in the navigation bar.
    2. By filling out and submitting the sign up form the user can be able to view future details.
  2. As a site user, I Want to be able to login and logout so that I can access my personal account information.
    1. From the navigation bar it is possible to select sign in.
    2. By filling out and submit the required parameters user will be logged into the site
    3. The navigation bar now have a My Page option the user can select to access account information
    4. The navigation bar now also has the sign out option that can be selected.
    5. From the sign out page user can press the sign out button to fully logout.
  3. As a site user, I Want to be able to recover my password in case I forget it so that I can recover access to my account.
    1. From the sign in page it is possible to select forgot password.
    2. In the password reset form it is possible to provide a valid email address and press the Reset My Password button.
    3. User will get an email containing a link to reset the password.
    4. Clicking the email link takes the user to the Password Reset Page, where a new password can be provided.
  4. As a site user, I Want to be able to have a personalized user profile so I can view my personal order history and reservations.
    1. On-site users My Page order history is available in a list format.
    2. by clicking a history order, the user can view the order details.

Test Sorting and searching goals

  1. As a site user, I Want to be able to list the products so that I can quickly identify the best priced product and identify the category.
    1. The site navigation bar contains the main products for the site user.
    2. Each navbar product item displays the categories found in the top of the products page.
  2. As a site user, I Want to be able to sort the list of products so that I can quickly find what I'm looking for.
    1. On the products page there is a Sort by drop down button that can be used to sort the current list seen.
  3. As a site user, I Want to be able to search for a product by name or description so that I can find a specific product I'd like to purchase.
    1. From the navbar it is possible to provide a search term and hit enter.
    2. All found products will be displayed.
    3. Title and description on each product will highlight the search term used.
  4. As a site user, I Want to be able to see what I've searched for and the number of results so I can quickly see whether the product I want is available.
    1. in the top of the products page the number of found items is displayed.

test Purchasing and checkout goals

  1. As a customer, I want to be able to schedule a reservation and put it into a basket.
    1. As a site user it is required to set the site users travel information by clicking the Check availability button in the navigation bar or any Add to Basket button.
    2. In the popover date picker it is possible to first click the arrival date and then departure date. After clicking apply the new travel information is set.
    3. Available products in the selected travel information period will print the amount available if any within the product details.
  2. As a customer, I want to be able to make purchases based on my basket items.
    1. Site users can Add products into the basket.
    2. site users can select many equal products, if available on the same travel information dates selected.
    3. Site users can modify a product date range individually from the basket page.
    4. Site users can Continue to Secure Checkout and provide required information including card information to make a reservation purchase.

Test Review and rate goals

  1. As a visitor, I want to review and rate the facilities so I can let others know what I think.
    1. As a site user it's possible to navigate to my page and press the write review button.
    2. After filling out the Add review form and Add the review the review is visible on the reviews page from the navigation bar.
    3. site users can navigate to my profile and change any of the users reviews by clicking on the review and make changes to the review.
    4. site users can also delete any review created by the site user.

Test Site owner Administration goals

  1. As a site owner, I want to be able to administrate the reservations.
    1. Site owners can use the the Django Admin Section of the site to administrate reservations.
    2. After sign in to Admin its possible to select Orders in the side panel and perform manual tasks needed.
  2. As a cite owner, I want to be able to administrate the products the facilities has to offer.
    1. Site owners can use the the Django Admin Section of the site to administrate Products Categories and pitches information from the Admin side panel.

Further Testing

  • The Website was tested on Google Chrome, Microsoft Edge and Safari browsers.
  • The website was viewed on a variety of devices such as Desktop, Laptop, iPhoneX.
  • A large amount of testing was done to ensure that all pages were linking correctly.
  • Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

Known Bugs

  • On some mobile devices the interactive map is not perfect and manual zooming might be needed.
  • Season Camping can be booked on any date and does not have fixed dates.

Deployment

( Back to Top )

The project was deployed to Heroku using the following steps...

  1. Sign up or sign in at Heroku.
  2. From your page, create a new App with framework python.
  3. Add on Heroku PostgreSQL Resource with the steps in Database section.
  4. Add static hosting with the steps in the Static files section.
  5. On the Settings tab add all config vars from .env.example, do not add variables in the Development section.
  6. Connect Heroku to your github repo and do a manual deploy.
  7. When deployment is done, navigate to the site url to test.

Static files

The project uses AWS S3 bucket as cdn for static files served on endpoint https://cdn.square-circles.s3-website-eu-west-1.amazonaws.com/.

Full S3 documentation is available on aws documentation website

After AWS new user registration the following steps are needed at a glance.

  1. create a new bucket and allow public access
  2. activate static hosting on bucket
  3. add a cors configuration that allows GET from any origin
  4. Add a bucket policy that allows getObject on service S3 (remember to add /* to the resource key for access to all objects within the bucket)
  5. Set list objects allow for anyone.
  6. Add group and user for the access from the project
  7. add S3 full access to the group and add bucket arn resource. (remember to add a list of resources where one resource list item is the bucket and the other item is all objects within the bucket)
  8. download .csv file with user details and apply them to your .env file

cors configuration Example

[
  {
    "AllowedHeaders": ["Authorization"],
    "AllowedMethods": ["GET"],
    "AllowedOrigins": ["*"],
    "ExposeHeaders": []
  }
]

The AWS S3 Bucket and it's static content has been setup with cache control to serve the website user with fast content delivery.

Database

This project uses Heroku postgresQL.

  1. in the heroku app add Heroku postgresQL.
  2. use the DATABASE_URL found in environment settings in Heroku in your .env file.
  3. run python3 manage.py migrate to migrate the new database.
  4. run python3 manage.py loaddata initial_data to load all fixtures
  5. run python3 manage.py createsuperuser to create a superuser

Add Screenshot to Readme

This site prevents clickbait and this results in services like ami.responsivedesign.is can not display this site's content.

In order to create a screenshot of this site:

  1. run this site in localhost
  2. Add @xframe_options_exempt decorator above the view you would like to do a screenshot of.
  3. in a browser navigate to ami.responsivedesign.is
  4. Create screendump

View Example

from django.views.decorators.clickjacking import xframe_options_exempt

@xframe_options_exempt
def index(request):
   # More code here...

Development

( Back to Top )

It is advisable to use virtual environments and packages with python applications. These guidelines include help in adding this project as a virtual environment in your local development setup.

Prerequisites

  1. Confirm that python3 is installed by running python3 --version and confirm it's Python 3.x.x or higher.
  2. Log in to GitHub and fork the GitHub Square Circles Repository
  3. Click "Code" and the copy url button on your fork.
  4. in a terminal run git clone https://github.com/YOUR-GITHUB-NAME/square-circles.git - to clone the repository to your local drive.
  5. in a terminal run cd square-circles - to change directory to project root folder.
  6. in a terminal run python3 -m venv venv - to create a virtual environment.
  7. in a terminal run source venv/bin/activate to activate the virtual environment.
  8. in a terminal run python3 -m pip install -r requirements.txt
  9. in a terminal run python3 manage.py migrate && python3 manage.py createsuperuser - to migrate the database and start the create superuser process.
  10. answer the questions to create a superuser.
  11. in a terminal run python3 manage.py runserver to start the server.
  12. ...

Site is available on http://localhost:8000

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Stripe Webhooks

It is possible to setup your dev environment to handle the stripe webhooks. Full setup documentation can be found on Stripe Docs - webhook-test-cli

  1. install the Stripe CLI
  2. in a terminal run stripe login to Link your Stripe account.
  3. in a terminal run stripe listen --forward-to localhost:8000/checkout/wh/
  4. copy the webhook signing secret printed in your terminal starting with whsec_ to the STRIPE_WH_SECRET in your local .env file.
  5. restart site (quit + python3 manage.py runserver)

Development Cheat Sheet

  • update env requirements: pip freeze > requirements.txt
  • erase and clean app data: python3 manage.py migrate <App> zero
  • Erase and clean database: python3 manage.py flush
  • apply all app fixtures: python manage.py loaddata initial_data

Credits

( Back to Top )

Code

  • Bootstrap5: Bootstrap Library used throughout the project mainly to make the site responsive using the Bootstrap Grid System.

  • MDN Web Docs : for general javascript code examples.

  • GitHub gitignore Python and gitignore MacOS : For basic gitignore patterns. gitignore is further modified to keep repo as clean as possible.

  • Code institute : course material has been used and modified.

Content

Media

The photos used in this site were obtained from:

Acknowledgements

About

Square circles holiday park website - The Fictitious Camping Resort

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages