The goal of this project is to make an application that allows users to view and purchase tickets/race packages to Formula 1 events as well as allowing site admins to easily add new and edit existing events.

• UX
• Data Schema
• Features
• Technologies Used
• Testing
• Deployment
• Credits

I expect that the majority of the users will fall into the following criteria:

• A user looking to purchase event tickets.
• A user looking for information about upcoming events.
• A site manager adding/removing information and race packages.

• As a user, I want to be able to view a list of events.
• As a user, I want to be able to view a list of tickets for each event.
• As a user, I want to be able to view a running total of my purchases.
• As a user, I want to be able to create an account to view and manage my orders.
• As a user, I want to be able to edit and remove items from my cart while shopping.
• As a user, I want to be able to pay for tickets using card payment.
• As a user, I want to be able to search for events.
• As a site manager, I want to be able to add and remove race events.
• As a site manager, I want to be able to add and remove tickets for each race event.
• As a site manager, I want to be able to edit tickets and race events.

Here are the designs I made for the site.

The wireframes were made using Balsamiq

I made some changes from the initial wireframe design the major changes include:

• A user profile page was added containing user info and order history.
• Edit pages were added for both race events and tickets.
• A contact page was added for users to contact the site owners.
• A search bar was added to the race packages page.
• Testimonials were added to the home page.

• Font: I wanted the project to look as professional as possible so decided to use a copy of the official Formula One font sourced from Here.

• Colours: I wanted the project to look like a product from Formula One so with this in mind I used the same colour scheme used on the Official Site. I used white (Hex: '#ffffff' RGB: 'rgb(255, 255, 255)') as the background and navbar font colour, red (Hex: '#ff0000' RGB: 'rgb(255, 0, 0)') for the navbar and borders and then black (Hex: '#000000' RGB: 'rgb(0, 0, 0)') for the body text.

Below is the database table setup used in the project:

The Schema was made using dbdiagram.io

• Navigation bar: Allows the user to navigate to all the pages of the site, consistent throughout the site.
• User Registration: Users can create an account by providing a valid email address, username and password.
• User Authentication: Users can log in to their accounts by providing the correct username and password combination.
• Social Login: Users can register and login to the site by using their Google account.
• Password Reset: Users can reset their password if forgotten.
• Most Popular Events: The 4 most popular events are featured on the home page.
• Testimonials: 4 different user testimonials are featured on the home page.
• Contact Page: User can get in touch using the contact form on the contact page.
• Event Page: A full list of race events split into pages with 6 events per page.
• Event Search: Users can search for specific events.
• Event Details: Each race event has a details page showing the available tickets and circuit map for each event.
• Cart: Users can add, view and adjust tickets in their cart.
• Checkout: Users can purchase tickets in their cart using the checkout app. If users are logged in the checkout form will be prefilled with existing information when available.
• Add/Edit/Delete Events: Site managers can edit or delete existing race events as well as being able to add new events.
• Add/Edit/Delete Tickets: Site managers can edit or delete existing tickets for each race event as well as being able to add new tickets.
• 404 Page: Provides users with a message if they have entered an incorrect URL or clicked an incorrect link, gives the user the option to return to the home page.

• Add a undo button in the event of accidental data deletion by a site manager.

• HTML5

  • The project uses HTML5 to provide the content and structure.

• CSS3

  • The project uses CSS3 for styling.

• jQuery

  • The project uses jQuery for interactive elements.

• Python

  • The project uses Python to run the application.

• Bootstrap

  • The project uses Bootstrap for layout, responsiveness and elements.

• Font Awesome

  • The project uses Font Awesome for icons.

• Django

  • The project uses Django as the framework.

• Jinja

  • The project uses Jinja as the templating language.

• AWS

  • The project uses AWS to host the database.

• AOS

  • The project uses AOS for animated effects.

• VSCode

  • The project developed in Visual Studio Code.

• Git

  • The project uses Git for version control.

• GitHub

  • The project uses GitHub to host the repository.

• Heroku

  • The project is hosted on Heroku.

• Firefox Developer Tools
  • The project used Firefox Developer Tools to test responsiveness, styles, and different layouts throughout development. This also allowed the site to be tested on several other mobile devices.

• Samsung Note 10+

  • The project used a Samsung Note 10+ to test the site on a mobile device.

• HP Envy x360 13

  • The project used an HP Envy x360 13 to test the site on both a 13-inch laptop and a tablet.

• Samsung Galaxy S9/S9+

• iPhone 6/7/8

• iPhone X

• iPad

I used the following web browsers on both desktop (Windows) and mobile (Android) where available.

• Mozilla Firefox

  • Desktop Version: 76.0.1 Mobile Version: 75.0.0-beta.6

• Google Chrome

  • Desktop Version: 81.0.4044.138 Mobile Version: 81.0.4044.138

• Opera

  • Desktop Version: 68.0.3618.99

• Microsoft Edge

  • Desktop Version: 44.18362.449.0

The project was run through both HTML Validation and CSS Validation with no errors found.

HTML and CSS tests carried out have been documented and visualised here

JavaScript tests carried out have been documented and visualised here

Python tests carried out have been documented and visualised here

Further python testing was also carried out using Django Testing found in the test.py files in each app.

1. View a list of events:

   1. Go to the "Races" page.
   2. All the events are listed, divided into 4 pages of 6 events.

2. View a list of tickets for each event:

   1. Go to the "Races" page.
   2. Click on the event you want to view the tickets for.
   3. All the available tickets are listed.

3. View a running total of my purchases:

   1. Go to the "Races" page.
   2. Click on the event you want to purchase tickets for.
   3. Select the ticket and quantity you wish to purchase, click "Add to Cart"
   4. The total of your purchase is now displayed with the option to "Checkout" or "Keep Shopping"

4. Create an account and view/manage orders:

   • Creating an account the conventional method:

     1. Click on the profile icon on the right-hand side of the navbar.
     2. Click on "Register".
     3. Enter the required information and click "Sign Up".
     4. Check your email for a verification message, then click the provided link.
     5. Click "Confirm" on the page you are directed to.
     6. You can now Login with your username and password set in step 3.

   • Creating an account via social login (Google):

     1. Click on the profile icon on the right-hand side of the navbar.
     2. Click on "Login".
     3. Click on "Sign in with Google"
     4. Select the Google account you wish to sign with.
     5. You have now been signed in with your Google Account.
   1. Once logged in to your account, click on the profile icon on the right-hand side of the navbar.
   2. Click on "My Profile".
   3. Your saved information and order history can now be viewed.

5. Edit/Remove items from the cart:

   1. Click on the cart icon on the right-hand side of the navbar.
   2. Below the item you wish to remove click the "Remove" button.

6. Pay for tickets using card payment:

   1. Select your desired tickets and add them to the cart.
   2. Once finished shopping, click on the cart icon on the right-hand side of the navbar.
   3. Click on "Secure Checkout".
   4. Fill in the required personal information.
   5. Fill in your card payment details.
   6. Click "Order" and your order will be placed.

7. Search for race events:

   1. Go to the "Races" page.
   2. The search box can be found above the race events.

8. Add/Remove race events:

   • Add race event:

     1. Login in to your admin account.
     2. Click on the profile icon on the right-hand side of the navbar.
     3. Click on "Event Management".
     4. To add a race event click on "Add New Event".
     5. Fill in the required information and click "Add Race".

   • Remove race event:

     1. Login in to your admin account.
     2. Click on the profile icon on the right-hand side of the navbar.
     3. Click on "Event Management".
     4. Click on the event you wish to remove.
     5. Scroll to the bottom of the page and click "Delete Race".

9. Add/Remove tickets for each race event:

   • Add ticket:

     1. Login in to your admin account.
     2. Click on the profile icon on the right-hand side of the navbar.
     3. Click on "Ticket Management".
     4. To add a ticket click on "Add New Ticket".
     5. Fill in the required information and click "Add Ticket".

   • Remove ticket:

     1. Login in to your admin account.
     2. Click on the profile icon on the right-hand side of the navbar.
     3. Click on "Ticket Management".
     4. Click on the ticket you wish to remove.
     5. Scroll to the bottom of the page and click "Delete Ticket".

10. Edit tickets and race events:

    • Edit ticket:

      1. Login in to your admin account.
      2. Click on the profile icon on the right-hand side of the navbar.
      3. Click on "Ticket Management".
      4. Click on the ticket you wish to edit.
      5. Make the desired changes and then click "Edit Ticket"

    • Edit Race:

      1. Login in to your admin account.
      2. Click on the profile icon on the right-hand side of the navbar.
      3. Click on "Event Management".
      4. Click on the race you wish to edit.
      5. Make the desired changes and then click "Edit Race"

• User feedback messages/toasts are not displaying. This was fixed by changing the position of the JQuery script in the base.html template.
• 404 error when trying to edit or remove tickets. This was fixed by adding ".first()" to the ticket query and changing context name from "tickets" to "ticket".

To deploy this page to Heroku from its GitHub repository, the following steps were taken:

1. Go to the Heroku Dashboard and create a New App with the region set to Europe.
2. In the Settings tab of your app click Reveal Config Vars.
3. Enter the following required environment variables, AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, DATABASE_URL, EMAIL_HOST_PASS, EMAIL_HOST_USER, SECRET_KEY, STRIPE_PUBLIC_KEY, STRIPE_SECRET_KEY, STRIPE_WH_SECRET and finally set USE_AWS to True.
4. In your IDE of choice create an env.py containing all of the variables from step 3 and add it to the .gitignore
5. In your IDE of choice create a requirements.txt by using the command pip freeze -local > requirements.txt
6. In your IDE of choice create a Profile by using the command echo web: gunicorn F1Experiences.wsgi:application app.py > Procfile
7. Go to the Deploy tab and select Heroku Git.
8. In your IDE of choice use the command git push heroku master.

Note: You will need the Heroku CLI downloaded and installed to push from the command line.

Further reading and troubleshooting on deploying to Heroku can be found here.

To clone this project from GitHub:

1. Under the repository name, click "Clone or download".
2. In the Clone with HTTPs section, copy the clone URL for the repository.
3. Open your IDE of choice.
4. Change the current working directory to the location where you want the cloned directory to be made.
5. Type `git clone`, and then paste the URL you copied in Step 2.

git clone https://github.com/filleben/F1Experiences

6. Press Enter. Your local clone will be created.

Note: You will need to make an env.py file containing all of the required environment variables (See Above) for the project to function correctly.

Further reading and troubleshooting on cloning a repository from GitHub can be found here.

• I followed this tutorial to intergrate pagination into the project.
• The Code Insitute project Boutique_ado was followed during development.

• The Formula 1 Logo was taken from the Formula 1 Official Site.

• Gerard McBride for helping me through the project with his advice and guidance.