Paris Tours

The live link can be found here: Paris Tours

Paris Tours is an e-commerce website that allows users to browse potential tours of Paris and the surrounding area. Users can add tours to their basket and checkout including all e-commerce functionality.

User Stories

Logged-Out User

As a standard (not logged-in) user, I would like to:

1. View the landing page and know that I'm on a website for tourists to Paris who want a guided tour of the city/suburbs

2. View available tours

3. Have a unique sign-up option with username and password

4. Be able to purchase tours without signing up for an account

5. Subscribe to the newsletter
   

Logged-In User

As a registered (logged-in) user, I would like to:

1. Have a login option to log in to my previously registered account/profile

2. Choose from a range of tours and add them to my basket

3. Create a profile and have my details pre-filled for payment for efficiency

4. View my order history
   

Superuser

As a superuser, I would like to:

1. Have the ability to add, edit and delete tours without being on the django admin page

Project Goals

• Create a company for tourists to come together and explore the wonderful city of Paris and all it has to offer. Users of this site will be able to purchase tours that cater to all tastes. On the database side, CRUD functionality will be implemented so that superusers can create tours (with the ability to both edit and delete them as well) that allow both the business to flourish and visitors to the site to have a steady stream of updated tours at their disposal.

• Create a website for people in search of a walking or cycling tour of Paris and the suburbs. A combination of exploration, learning, and exercise.

Facebook Screenshots

Link to the Facebook page can be found here

Flowchart

Entity Relationship Diagram

Business Model

• I chose a traditional B2C (Business to Customer) site to execute this project and sell my tours to my target market. This site has a clean and user-friendly interface that allows users to flow from page to page with no obstruction to them making a purchase.

• Visitors to my site can purchase up to 10 of each tour (a limit of 10 allows tour guides to control numbers)

Wireframes

Home Web

Home iPad

Home iPhone

Basket Web

Basket iPad

Basket iPhone

Newsletter Web

Newsletter iPad

Newsletter iPhone

Payment Web

Payment iPad

Payment iPhone

Profile Web

Profile iPad

Profile iPhone

Tour Detail Web

Tour Detail iPad

Tour Detail iPhone

Tours Web

Tours iPad

Tours iPhone

Sign-Up Web

Sign-Up iPad

Sign-Up iPhone

Agile Methodology

The agile development of this project used issues in the project environment on Github

• Acceptance criteria can be found in the Github project environment with each user story

Features

Navbar

The navigation bar gives you access to the tours page as well as an opportunity to either login with a previously created account or create an account via the sign up option. You can also purchase tours without creating an account and view your basket.

The navigation bar once you are logged in gives you the opportunity to create an account that will store your details for future visits, have an order history with us, as well as log out of your account.

The navigation bar as a superuser gives you the ability to add, edit or delete tours from the database in the Tour Management section.

Sign Up Page

The sign up page allows you to create an account by providing a username and password for authentication.

Login Page

As with the sign up page, the login page allows previously registered users to access the extra functionality that having an account provides.

Logout Page

The logout page allows you to confirm if you are sure you would like to logout

Home Page

The home page welcomes users to the site and gives information on the concept behind the site and encourages you to sign-up to gain access to features where you can create a profile and have a stored order history.

Tours Page

This page presents an ordered list of tours created by the superuser.

Tour Detail Page

The tour detail page presents the selected tour in greater detail so users can gain more information about the tours.

As a superuser, there is functionality to edit and delete tours

Add Tour Page

As a superuser, this page allows you to add a tour to the database.

Edit Tour Page

As a superuser, this page allows you to add a tour to the database.

Basket Page

This is a detail of the empty basket.

This is a detail of a basket with items in it. The total price is calculated and there is the option to update tours or delete them from the basket, as well as an option to proceed to the checkout. The update button brings you back to the tours page so you can more of the same tour or a different one. The delete button allows you to remove the chosen tour.

Checkout Page

The checkout page as a logged out user presents you with a summary of your basket and a form to fill out to pay for your items.

The checkout page as a logged in user allows you to have the payment fields pre-filled on the form.

Order Summary Page

The order summary page displays a summary of your order once successful payment has been received.

Profile Page

The profile page allows you to view your profile details and order history. It also provides the option to unsubscribe from the newsletter.

Newsletter Pages

The newsletter signup page allows you to subscribe to our newsletter by providing an email address.

The newsletter unsubscribe page allows you to unsubscribe from the newsletter if you wish by providing your email to be removed from our database.

Footer Detail

The footer displays social media links and the option to subscribe to the newsletter if you haven't already done so, or unsubscribe if you no longer wish to receive the newsletter.

Features Left To Implement

• A review section so users can give feedback on how they felt about the tour. This has the mutual benefit of highlighting to site owners what is working well and what can be improved and to users so that they can have a fine-tuned and fresh range of tours to choose from.

• A calendar function so users can reserve a time slot in advance and company owners can know in advancce the numbers they will have for the tour.

• Incorporate more of the guide and schedule information from the models on the front-end.

• Expand the newsletter subscription so subscribers can receive a monthly newsletter.

Languages Used

Python

JavaScript

CSS

HTML

Libraries, Frameworks, and Programs Used

Django.

Github was used for version control to store commit history.

Heroku was used to deploy our final project.

Balsamiq was used for wireframes.

FontAwesome for social media icons in footer.

Stripe was used for payments.

AWS was used to host media and static files.

Testing

Validator Testing

Python: Several "line too long" errors were returned when passing through the official Pep8 linter.

These refer to:

• AUTH_PASSWORD_VALIDATORS in settings.py

• f-strings in webhooks and webhook_handlers

HTML: No errors were returned when passing through the official W3C validator.

CSS: No errors were returned when passing through the official Jigsaw validator.

---

HTML Validation

HTML Validation

---

CSS Validation

Base.CSS

CSS Page

Checkout.CSS

Checkout CSS

---

JavaScript Validation

Messages JavaScript

Delete Function

Stripe Functionality

---

Python Validation

Biketours Project

ASGI

Settings

URLs

WSGI

Checkout App

Admin

Apps

Forms

Models

Signals

URLs

Views

Webhook Handler

Webhooks

Home App

Apps

URLs

Views

Newsletter App

Admin

Apps

Forms

Models

URLs

Views

Products App

Admin

Apps

Forms

Models

URLs

Views

Profiles App

Apps

Forms

Models

URLs

Views

Shop App

Apps

Contexts

URLs

Views

---

---

Testing and debugging code

I have used Docstrings throughout my code to identify each function and its purpose.

Navbar (logged out)

Tests	Description	Expected Result	Final Result
1	Click the Paris Tours title on the navbar	Directed to the home page	Successful
2	Click the home button on the navbar	Directed to the home page	Successful
3	Click the tours button on the navbar	Directed to the tours page	Successful
4	Click the signup button on the navbar	Directed to the signup page	Successful
5	Click the login button on the navbar	Directed to the login page	Successful
6	Click the my basket button on the navbar	Directed to the my basket page	Successful

Navbar (logged in)

Tests	Description	Expected Result	Final Result
1	Click the Paris Tours title on the navbar	Directed to the home page	Successful
2	Click the home button on the navbar	Directed to the home page	Successful
3	Click the tours button on the navbar	Directed to the tours page	Successful
4	Click the signup button on the navbar	Directed to the signup page	Successful
5	Click the login button on the navbar	Directed to the login page	Successful
6	Click the my basket button on the navbar	Directed to the my basket page	Successful
7	Click the my profile button	Directed to the my profile page	Successful

Navbar (logged in superuser)

Tests	Description	Expected Result	Final Result
1	Click the Paris Tours title on the navbar	Directed to the home page	Successful
2	Click the home button on the navbar	Directed to the home page	Successful
3	Click the tours button on the navbar	Directed to the tours page	Successful
4	Click the signup button on the navbar	Directed to the signup page	Successful
5	Click the login button on the navbar	Directed to the login page	Successful
6	Click the my basket button on the navbar	Directed to the my basket page	Successful
7	Click the my profile button	Directed to the my profile page	Successful
8	Click the tour management button	Directed to the tour management page	Successful

Tour Page (logged out)

Tests	Description	Expected Result	Final Result
1	Select a tour	Directed to the tour detail page	Successful

Tour Page (logged in superuser)

Tests	Description	Expected Result	Final Result
1	Select a tour	Directed to the tour detail page	Successful
2	Click the edit button	Directed to the edit tour page	Successful
3	Click the delete button	Deletes a tour	Successful

Tour Detail Page (logged out)

Tests	Description	Expected Result	Final Result
1	Click the add another tour button	Directed to the tour page	Successful
2	Click the add to basket button	A tour is added to the basket and confirmation message is displayed	Successful
3	Click the quantity arrows	Quantity of chosen tours is increased or decreased	Successful

Tour Detail Page (logged in superuser)

Tests	Description	Expected Result	Final Result
1	Click the add another tour button	Directed to the tour page	Successful
2	Click the add to basket button	A tour is added to the basket and confirmation message is displayed	Successful
3	Click the quantity arrows	Quantity of chosen tours is increased or decreased	Successful
4	Click the edit button	Directed to the edit tour page	Successful
5	Click the delete button	Deletes a tour	Successful

Newsletter Signup Page

Tests	Description	Expected Result	Final Result
1	Click the subscribe button without a valid email address	Notified to fill in required field	Successful
2	Click the subscribe button with a valid email address	Email address is stored in the database	Successful

Newsletter Unsubscribe Page

Tests	Description	Expected Result	Final Result
1	Click the unsubscribe button without a valid email address	Notified to fill in required field	Successful
2	Click the unsubscribe button with a valid email address	Email address is removed from the database	Successful

Signup Page

Tests	Description	Expected Result	Final Result
1	Click sign-in link in description	Directed to the sign-in page	Successful
2	Click the Sign Up button without required username and password	Notified to fill in required fields	Successful
3	Click the Sign Up button with required fields filled	Directed to logged-in homepage	Successful

Login Page

Tests	Description	Expected Result	Final Result
1	Click sign-up link in description	Directed to the sign-up page	Successful
2	Click the Sign In button without required username and password	Notified to fill in required fields	Successful
3	Click the Sign In button with required fields filled	Directed to logged-in homepage	Successful

Logout Page

Tests	Description	Expected Result	Final Result
1	Click Sign Out button	Directed to the logged out homepage	Successful

Home Page

Tests	Description	Expected Result	Final Result
1	Click the explore tours button	Directed to the tours page	Successful

Add Tour Page (superuser)

Tests	Description	Expected Result	Final Result
1	Click the cancel update button	Directed to the tours page	Successful
2	Click the add tour button without required fields	Notified to fill in required fields	Successful
3	Click the add tour button with required fields but no image	Tour is created with default noimage	Successful
4	Click the add tour button with required fields and image	Tour is created with chosen image	Successful

Edit Tour Page (superuser)

Tests	Description	Expected Result	Final Result
1	Click the cancel update button	Directed to the tours page	Successful
2	Click the edit tour button without required fields	Notified to fill in required fields	Successful
3	Click the edit tour button with required fields but no image	Tour is updated with default noimage	Successful
4	Click the edit tour button with required fields and image	Tour is updated with chosen image	Successful

Basket Page (empty)

Tests	Description	Expected Result	Final Result
1	Click the book a tour button	Directed to the tour page	Successful

Basket Page (full)

Tests	Description	Expected Result	Final Result
1	Click the book a tour button	Directed to the tour page	Successful
2	Click the update button	Directed to the tours page to update basket quantity	Successful
3	Click the delete button	Deletes tour from basket	Successful
4	Click the proceed to checkout button	Directed to the checkout page	Successful

Checkout Page (logged out)

Tests	Description	Expected Result	Final Result
1	Click the update basket button	Directed to the basket page	Successful
2	Click the complete order button without the required fields	Notified to fill in required fields before proceeding	Successful
3	Click the complete order button with the required fields and valid card number	Directed to the order summary page and notified that your order was successful	Successful
4	Click the create an account link	Directed to the signup page	Successful
5	Click the login link	Directed to the login page	Successful

Checkout Page (logged in)

Tests	Description	Expected Result	Final Result
1	Click the update basket button	Directed to the basket page	Successful
2	Click the complete order button without the required fields	Notified to fill in required fields before proceeding	Successful
3	Click the complete order button with the required fields and valid card number	Directed to the order summary page and notified that your order was successful	Successful
4	Click the create an account link	Directed to the signup page	Successful
5	Click the login link	Directed to the login page	Successful
6	Pre-filled order form	Order form is pre-filled with profile information	Successful

Order Summary Page

Tests	Description	Expected Result	Final Result
1	Click the return to tours button	Directed to the tours page	Successful

Profile Page

Tests	Description	Expected Result	Final Result
1	Click the update information button	Directed to the edit profile page	Successful
2	Click the subscribe button	Directed to the newsletter signup page	Successful
3	Click the unsubscribe button	Directed to the newsletter unsubscribe page	Successful
4	Click an order number in order history	Directed to the selected order summary page	Successful

Update Profile Page

Tests	Description	Expected Result	Final Result
1	Click the update information button	Notified that the information has been successfully updated	Successful
2	Click the return to profile button	Directed to the profile page	Successful

Footer Detail

Tests	Description	Expected Result	Final Result
1	Click Facebook button	Directed to Paris Tours Facebook page in separate tab	Successful
2	Click Instagram button	Directed to Instagram homepage in a separate tab	Successful
3	Click Twitter button	Directed to Twitter homepage in a separate tab	Successful

Lighthouse Accessibility

• Add tour pages for mobile and desktop

• Basket pages for mobile and desktop

• Checkout pages for mobile and desktop

• Edit tour pages for mobile and desktop

• Order summary pages for mobile and desktop

• Profile pages for mobile and desktop

• Signin pages for mobile and desktop

• Signout pages for mobile and desktop

• Sign up pages for mobile and desktop

Known Bugs

• I encountered a minor bug when using Bootstrap for the hamburger icon for smaller screen sizes. The dropdown menu opens perfectly but it won't close again. I believe I have matched my navbar code to the Bootstrap documentation but the menu won't collapse again.

• I could not send emails for verification so I added ACCOUNT_EMAIL_VERIFICATION = 'none' in settings.py. If I kept verification on I could still verify credentials in the admin panel.

• Favicon images are in AWS but do not appear to be displaying on the live site

Bug Fixes

• I encountered an issue when testing the live site that meant the home page image would not display even though it was in AWS. When inspecting the page, I found that the file path did not include the AWS URL so I inserted it directly into the code.

• The live site on Heroku threw a 500 error when I deployed even though it worked on a previous deployment. I cleared the cache, did a hard reload and got the site working.

Deployment

Heroku Deployment

1. Create a new app in the Heroku dashboard. Choose a name and location for your app.

2. Click the resources tab to add the Heroku Postgres database.

3. Click on the settings tab and reveal config vars. Copy the DATABASE_URL and paste it into the env.py file in your project. Make sure that the env.py file is in the .gitignore file.

4. Add a SECRET_KEY both to the env.py file and in the config vars on Heroku.

5. In the Gitpod settings.py file, remove the insecure SECRET_KEY and replace it with the environment variable (SECRET_KEY) that was created.

6. Replace existing DATABASES section in settings.py file with the DATABASE_URL environment variable that is located in the env.py file.

7. Ensure that all static and files have been added to the settings.py file in Gitpod.

8. Add the TEMPLATES_DIR to settings.py file in Gitpod and link it in the TEMPLATES section.

9. Make sure that the project name for the Heroku app has been added as an allowed host in Gitpod.

10. Ensure to create a Procfile and add web: gunicorn activities.wsgi to this file

11. Make sure that the DEBUG flag is set to DEBUG = 'DEVELOPMENT' in os.environ in settings.py file in Gitpod

12. Add STRIPE_PUBLIC_KEY, STRIPE_SECRET_KEY, STRIPE_WH_SECRET, AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY and USE_AWS to config vars on Heroku

13. Make sure that all dependencies have been added to the requirements.txt file using the command pip3 freeze > requirements.txt

If deploying through the CLI:

Using the CLI, enter the following commands to deploy to Heroku

1. Login to Heroku using the command heroku login -i

2. Enter your email address and password

3. Find the relevant app using the command heroku apps

4. Set the Heroku remote using the command heroku git:remote -a

5. Add, commit and push to Github using the command git add . && git commit -m "Deploy to Heroku via CLI"

6. Push to both Github and Heroku using the command git push origin main (for Github) and the command git push heroku main (for Heroku)

Credits

Bootstrap for some layout and styling features.

TableConvert for the creation of tables in markdown.

Master Code Online for tutorials on how to build a newsletter app.

JShint for JavaScript validation.

Pep8 for Python validation.

W3C for HTML validation.

Pexels for all images used on the site.

Acknowledgements

A very big thank you to my mentor Daisy McGirr who gave me very helpful feedback and was very encouraging during our mentor sessions.

Also, a big thank you to the Slack community over the course of this entire module.

Stack Overflow for any troubleshooting over the course of this project.