View the live project here.

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.

• Square Circle Holiday Park
• Description
• Table of Contents
• User Experience (UX)
  • User stories
  • Design
  • Wireframes
• Features
• Technologies Used
  • Languages Used
  • Frameworks & Libraries
  • Programs & Tools Used
• Data models
• Testing
  • Testing User Stories from User Experience (UX) Section
  • Further Testing
  • Known bugs
• Deployment
• Development
• Credits
  • Code
  • Content
  • Media
  • Acknowledgements

( Back to Top )

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)

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)

(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.

(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.

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)

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)

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)

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

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

• Assistant is the main font used throughout the whole website.
• Fira Sans is used for headers.
• PT Sans Caption is used for captions.

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

• Homepage Wireframe - (Large screen) (small screen)
• Products Pages Wireframes - (List of products) (Single product)
• Authentication Pages Wireframes - (Profile) (Register) (Sign in) (Password reset) (Change Password)
• Basket & Checkout Pages Wireframes - (Basket) (Checkout) (Checkout Success) (Availability popover)
• Interactive Map Page Wireframe - (Large screen)
• Reviews Page Wireframe - (Large screen)

( 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

( Back to Top )

• HTML5
• CSS3
• Javascript
• Python

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.

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

( 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.

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

Products hold product name, price and image information.

Categories holds Categories name information.

Pitch holds Pitch information.

Order holds every order made.

Order Line Item holds every line in each order made.

Review holds every site reviews made by users.

( 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.

• W3C Markup Validator - Results (Index Page) (Products Page) (Singe Product Page) (Basket Page) (Map Page) (Reviews Page)
• W3C CSS Validator - Results (base.css) (home.css) (checkout.css) (pitches.css)

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.

Site passed all tests OK with test report results.

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

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 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 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

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

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.

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.

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.

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.

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.

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.

• 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.

• 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.

( 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.

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

[
  {
    "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.

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

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

from django.views.decorators.clickjacking import xframe_options_exempt

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

( 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.

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.

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)

• 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

( Back to Top )

• 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.

• crownpoint camping area map is used as underlying template creating this sites interactive map.

The photos used in this site were obtained from:

• blue-and-white-camping-tent-during-night-time
• man-bil-fordon-husvagn-753603
• ljus-semester-kvinna-kreativ
• kall-sno-tra-landskap
• sommar-metall-bil-fordon
• Avc2AiE1_Q
• husvagn-camping-campingplats-vild
• tra-landskap-tradgard-trad
• sno-landskap-natur-himmel
• kall-sno-tra-ljus
• kall-sno-tra-landskap
• natur-by-byggnad-konstruktion
• vag-skog-trad-cykel
• arkitektur-bassangkant-hotell-simbassang
• stad-himmel-byggnad-flicka
• kvinna-sitter-kraft-kondition
• hav-strand-havsstrand-camping
• landskap-natur-sommar-trad
• kall-sno-landskap-natur
• dagsljus-farg-fargrik-hdr
• natur-kvinna-trad-sitter
• ljus-semester-manniskor-kreativ
• ljus-semester-natt-mork
• favicon

• I received inspiration from django-ordering-numerical-value-with-order-by to order datasets in django
• I received inspiration from numeric-for-loop-in-django-templates to use for loop counters.
• I received inspiration from google charts color for the interactive map dataset colors