code-institute-submissions / ci_ms4_picturesque Goto Github PK

View the deployed site here

• Project Goals
• User Experience
  • User Goals
  • Target Audience
  • User Stories
  • User Requirments and Expectations
  • Scope
  • Structure
• Design Choices
  • Colours
  • Fonts/Typography
• Wireframes
• Technologies Used
  • Languages
  • Frameworks, Librabries and Other Tools
• Features
• Future Features
• Information Architecture
• Testing
  • Manual Testing
  • Testing on Other Devices
  • Testing of User Stories
• Bugs
• Deployment
• Credits
• Acknowledgements

Picturesque is an online print shop for a photographer, it sells prints alongside frames. This easily allows people to completely transform their home with art while only having to shop in one place.

• An easy to use site
• Be able to easily purchase prints and frames
• Be able to create an account, add items to their basket and checkout
• Easily find Picturesque on their social media channels from the website

• General public
• Art fans
• Photographers

1. As a visitor I want the site to be easy and simple to use.
2. As a visitor I want to be able to search for a product by name or description
3. As a visitor I would like to be able to sort products by name, price or category
4. As a visitor I would like to be able to add a product to my basket and checkout
5. As a visitor I would like to be able to see my order history
6. As a visitor I would like to be able to adjust the quantity of items in the basket
7. As a visitor I would like to receive an order confirmation after checkout
8. As a visitor I would like to receive an email confirmation of my order
9. As a visitor I would like to easily find Picturesque's contact information, social media and find out who they are
10. As a visitor I would like to leave reviews of items I have purcahsed.

11. As a site owner I want the site to be easy to use.
12. As a site owner I want the site to be clean and simple, allowing the products to stand out
13. As a site owner I want the purpose of the site to be clear to each user.
14. As a site owner I want to be able to add, edit and delete products in the store.
15. As a site owner I want to be able to keep users up to date with news and events at Picturesque.

• Easy to navigate
• Appealing design that allows the products to stand out
• The user will be able to purchase items, with an account, but also anonymously
• Users with an account will be able to store their contact and delivery information
• All users will be able to view the full range of products
• Users will be able to review products if they have an account

• Buttons take you to the page they say they will
• Add to basket will successfully add the item to basket
• Checkout will successfully take payment for the order
• The signup link will allow users to create an account
• Login will allow exisiting users to access their account, including their order history
• The user will receive feedback from the site when adding an item to basket, updating their basket and checking out

Based on the above information, features to be included in the design include:

• An easy to navigate homepage with an obvious path to other pages
• A profile page that is only accessible to individual users when they log in
• Easily log in and logout of the site with the relevant buttons in the navigation bar
• A contact page with links to social media

A responsive site consisitng of multiple pages, including home, products, contact, profile, log in and create account.

The site will be simple to use across all devices.

The style of the site will be simple and minimal so it remains easy to navigate and allows the products to be the main selling point.

I have chosen a colour scheme that is minimal, but still has a pop of colour to break up the black and white.

I have decided to use Mulish, taken from the Google Fonts library, with sans-serif being the fallback font should either of the selected fonts be unavailable.

This font is clean and easy to read.

• Home - desktop
• Home - mobile and tablet
• Products - desktop
• Products - mobile and tablet
• Contact - desktop
• Contact - mobile and tablet
• Profile - desktop
• Profile - mobile and tablet
• Login - desktop
• Login - mobile and tablet
• Basket - desktop
• Basket - mobile and tablet
• Checkout - desktop
• Checkout - mobile and tablet
• Checkout Success - desktop
• Checkout Success - mobile and tablet
• Blog - desktop
• Blog - mobile and tablet
• Blog Post - desktop
• Blog Post - mobile and tablet

• HTML5
• CSS3
• Python
• Javascript

1. Affinity Designer
2. Git
3. Github
4. Am I Responsive
5. Coolors
6. Visual Studio Code
7. Balsamiq
8. Font Awesome
9. Google Fonts
10. Bootstrap
11. Django
12. AWS
13. Heroku
14. Postgres

• This is a feature that is seen on every page
• Each part is easy to read, and provides simple explanations of where each link will take you
• The search bar will search product names and descriptions

1. As a visitor I want the site to be easy and simple to use.
2. As a visitor I want to be able to search for a product by name or description
3. As a visitor I would like to easily find Picturesque's contact information and social media
4. As a site owner I want the site to be easy to use.
5. As a site owner I want the site to be clean and simple, allowing the products to stand out
6. As a site owner I want the purpose of the site to be clear to each user.

The homepage is made up of:

1. Image Carousel
2. A summary of Picturesque

• I used the Bootstrap component for this element
• It gives users a hint of the kind of images that are sold on the site
• It is eyecatching and will draw the users attention

12. As a site owner I want the site to be clean and simple, allowing the products to stand out

• This feature tells the user what Picturesque is
• The font is clear and easy to read

9. As a visitor I would like to easily find Picturesque's contact information, social media and find out who they are
10. As a site owner I want the purpose of the site to be clear to each user.

• This page contains all of the products available to purchase
• There are two further pages that split the items into their respective category
• For superusers there is an option to edit or delete an item at the bottom of each listing

• This lets the user filter the products by name, price or category

3. As a visitor I would like to be able to sort products by name, price or category
4. As a site owner I want to be able to add, edit and delete products in the store.

• This page contains all the information about the product.
• There is the option to add the item to bag
• For superusers the option to edit or delete the item is on this page

• This page is simple and easy to read
• The dropdown allows users to select the size print they would like to purchase
• The add to basket button allows users to add items to basket
• There is the option to leave a review if the user is logged in to an account
• All users are able to view reviews left by other users

4. As a visitor I would like to be able to add a product to my basket and checkout
5. As a visitor I would like to leave reviews of items I have purcahsed.
6. As a site owner I want to be able to add, edit and delete products in the store.

• This page contains a simple form allowing users to add or update their saved delivery information
• It also allows users to see their order history

• This table allows users with an account to save their delivery information for a faster checkout experience with any other orders

5. As a visitor I would like to be able to see my order history

• This page allows users to proceed to checkout with their items

• Users can easily adjust item quantities using the plus and minus buttons, or delete by using the delete button
• Users can clearly see how much their order will cost before and after delivery.

1. As a visitor I want the site to be easy and simple to use.
2. As a visitor I would like to be able to add a product to my basket and checkout
3. As a visitor I would like to be able to adjust the quantity of items in the basket

• This page allows users to checkout using stripe
• It allows the user to input their delivery and contact information
• Once completed there is a toast confirming the order, as well as email feedback

• This page is clean and easy to follow
• It shows the details of your order before you complete it
• There is instant feedback once the order is complete, as well as feedback via email

1. As a visitor I want the site to be easy and simple to use.
2. As a visitor I would like to receive an order confirmation after checkout
3. As a visitor I would like to receive an email confirmation of my order

• This page contains all the contact information for Picturesque
• There are direct links to all social media channels

9. As a visitor I would like to easily find Picturesque's contact information, social media and find out who they are

• This page is clean and easy to follow
• It shows the blogposts with a snippet of the post followed by a read more button

• This page is clean and easy to follow
• It shows the image on the left with the text on the right of the screen
• For admin users there is an edit and delete button on each post.

15. As a site owner I want to be able to keep users up to date with news and events at Picturesque.

In the future I would like to add the functionality to turn part of the site into a print on demand site, so users can then upload their own files to get printed.

• User Information

• Product information

• Orders Information

All elements on this page are displayed and responsive

• IPhone 12 Pro
• Samsung Galaxy s20+
• IPad Pro 11"
• 21.5" IMac
• Asus Chromebook Flip C434TA

• Chrome
• Brave (Chromium)
• Safari

1. As a visitor I want the site to be easy and simple to use.

   Feature	Action	Expected Result	Actual Result
   Simple, easy to use design	User is able to navigate to all parts of the site	find and purchase products	Works as expected

2. As a visitor I want to be able to search for a product by name or description

   Feature	Action	Expected Result	Actual Result
   Search bar in main navigation	User can enter search term and it will search product names and descriptions	Users can quickly find items by name or description	Works as expected

3. As a visitor I would like to be able to sort products by name, price or category

   Feature	Action	Expected Result	Actual Result
   Filter dropdown on all product pages	User selects filter option	Products will display as directed by the filter	Works as expected

4. As a visitor I would like to be able to add a product to my basket and checkout

   Feature	Action	Expected Result	Actual Result
   Add to bag button on product details page	User clicks button	Product is added to basket, and toast appears telling the user the item has been added	Works as expected
   Checkout button in Basket	User clicks button	User is taken to checkout page, where they can add their details and get the order processed.	Works as expected

5. As a visitor I would like to be able to see my order history

   Feature	Action	Expected Result	Actual Result
   Order history on profile page	User goes to profile page	All order history is listed, clicking the order number takes you to that order confirmation with feedback telling you when the confirmation email was sent	Works as expected

6. As a visitor I would like to be able to adjust the quantity of items in the basket

   Feature	Action	Expected Result	Actual Result
   plus and minus quantity buttons in the basket	Click	The quantity can be updated with values between 1 and 99	Works as expected

7. As a visitor I would like to receive an order confirmation after checkout

8. As a visitor I would like to receive an email confirmation of my order

   Feature	Action	Expected Result	Actual Result
   Order confirmation page	User checks out their order	Page with all the order details and a message saying an email has been sent opens	Works as expected

9. As a visitor I would like to easily find Picturesque's contact information, social media and find out who they are

   Feature	Action	Expected Result	Actual Result
   Navigate to the contact page	click	Contact page with all contact info and links to social media opens	Works as expected

10. As a visitor I would like to leave reviews of items I have purcahsed.

    Feature	Action	Expected Result	Actual Result
    Review form at the bottom of the product details for account holders	Saves the review and displays in list with other reviews	Works as expected

11. As a site owner I want the site to be easy to use

    Feature	Action	Expected Result	Actual Result
    Simple, easy to use design	User is able to navigate to all parts of the site	find and purchase products	Works as expected

12. As a site owner I want the site to be clean and simple, allowing the products to stand out

    Feature	Action	Expected Result	Actual Result
    Simple, easy to use design, and muted colour scheme	User is able to easily see the products	find and purchase products	Works as expected

13. As a site owner I want the purpose of the site to be clear to each user.

    Feature	Action	Expected Result	Actual Result
    Homepage with some company information	The user is able to see this information when they open the page	know the purpose of the site	Works as expected

14. As a site owner I want to be able to add, edit and delete products in the store.

    Feature	Action	Expected Result	Actual Result
    Add products link in profile dropdown	Superusers are able to click this link	Be taken to the add product page	Works as expected
    Edit product button	Superusers can see this for each item, either in the all products view or the product details view	Be taken to the edit product page	Works as expected
    Edit product button	Superusers can see this for each item, either in the all products view or the product details view	Delete an item	Works as expected

15. As a site owner I want to be able to keep users up to date with news and events at Picturesque.

    Feature	Action	Expected Result	Actual Result
    Blog that only admin users can update	main blog page shows summary of all posts, read more takes user to post details page	all users are able to read posts, admin users can also update and delete posts	Works as expected

• Bug : Products not showing

• Fix: move products.html into the correct subfolder

• Bug: Product detail page blank

• Fix: fix spelling error in code linking to views.py

• Bug: Sort by category filter error

• Fix: change sortkey from category_name to category in views.py

• Bug: Stripe payments not going through

• Fix: Adding Webhook secret to Heroku config vars and .env file

This site is deployed using GitHub pages, this was the process:

1. Logged in and selected my MS4 repository
2. Go to settings in the repository
3. Go to 'Pages" in the menu
4. Click 'source'
5. Change to dropdown menu from 'none' to 'main'
6. Click the link to the deployed site once the page has reloaded

1. Find the repository on GitHub
2. Click the 'Fork' button on the top right of the page
3. You will now have a copy of the repository on your Github account

1. Find the repository on Github
2. Click on 'Code'
3. To clone using HTTPS - copy the url
4. Open Git and go to the directory you want to become the cloned directory
5. In the terminal type 'git clone' and the url
6. Press enter for the clone to be created.

1. In the workspace terminal, run pip3 freeze --local > requirements.txt to collect any dependencies.
2. Run python app.py > Procfile to create a Procfile required for Heroku deployment.
3. Go to the Heroku website. Register for an account and click on "Create a new app".
4. Setup a Heroku app within the Heroku dashboard - Type in the app name and select region the click on create app.
5. In Heroku, in your app, click on "GitHub" to connect to your repository. Type in the repository name as on GitHub. Click on "Connect".
6. Search for your repo (or sign in and connect GitHub account) and select this.
7. In the 'settings tab, click 'Reveal Config Vars' and input your environment variable from your local build in the key/value inputs.
8. Then click "Hide Config Vars" in Heroku.
9. In Heroku, select 'Automatic Deploys' to automatically rebuild the app when a new Git commit is pushed.
10. Once the initial build is complete, click 'Open App' in the top right of the screen to view the application.

1. Create an Amazon AWS account
2. Search for S3 and create a new bucket that matches your Heroku app name(picturesque)

• uncheck block all public access box
• check "I acknowledge that the current settings might result in this bucket and the objects within becoming public."

3. Under Properties > Staticwebsite hosting

• enable
• index.html as Index document
• error.html as Error document
• save

4. Under Permissions > CORS use:

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

5.Under Permissions > Bucket Policy:

• Generate Bucket Policy and take note of Bucket ARN
• Chose S3 Bucket Policy as Type of Policy
• For Principal, enter *
• Actions Get Object and Put Object
• Enter ARN noted above
• Add statement
• Generate policy
• Copy the policy JSON Document paste into Edit bucket policy
• Add a /* onto the end of the resource key
• Save changes

6. Under Access Control List (ACL):

• For Everyone (public access), tick List
• Accept that everyone in the world may access the Bucket
• Save changes

1. From the IAM dashboard within AWS, select User Groups:

• Create new group e.g. picturesque
• Click through without adding a policy
• Create Group

2. Select Policies:

• Create policy
• Under JSON tab, click Import managed policy
• Choose AmazongS3FullAccess
• Edit the resource to include the Bucket ARN noted earlier when creating the Bucket Policy:

                "Resource": [
			                "arn:aws:s3:::picturesque",
			                "arn:aws:s3:::picturesque/*"
                ]

• Click next step and go to Review policy
• Give the policy a name e.g. picturesque and description
• Create Policy

3. Go back to User Groups and choose the group created earlier

• Under Permissions > Add permissions, choose Attach Policies and select the one just created
• Add Permissions

4. Under Users:

• Choose a user name e.g. picturesque-staticfiles-user
• Select Programmatic access as the Access type
• Click Next
• Add the user to the Group just created
• Click Next and Create User

5. Download the .csv containing the access key and secret access key. This will NOT be available to download again

1. Install boto3 and django-storages

pipenv install boto3
pipenv install django-storages
pip freeze > requirements.txt

2. Add 'storages' to settings.py INSTALLED_APPS
3. Go to settings.py and set the bucket config,

if "USE_AWS" in os.environ:
    # Bucket Config
    AWS_STORAGE_BUCKET_NAME = "picturesque"
    AWS_S3_REGION_NAME = "eu-west-1"
    AWS_ACCESS_KEY_ID = os.environ.get("AWS_ACCESS_KEY_ID")
    AWS_SECRET_ACCESS_KEY = os.environ.get("AWS_SECRET_ACCESS_KEY")
    AWS_S3_CUSTOM_DOMAIN = f"{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com"

4. Add the values from the .csv you downloaded to your Heroku Config Vars under Settings:

AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
USE_AWS=True

5. Delete the DISABLE_COLLECTSTATIC variable from your Config Vars and deploy your Heroku app

6. Create custom_storage.py with code below:

from django.conf import settings
from storages.backends.s3boto3 import S3Boto3Storage
class StaticStorage(S3Boto3Storage):
    location = settings.STATICFILES_LOCATION
class MediaStorage(S3Boto3Storage):
    location = settings.MEDIAFILES_LOCATION

7. Go to settings.py, set the static and media files storage and location and override static and media urls in production:

# Static and media files
STATICFILES_STORAGE = "custom_storages.StaticStorage"
STATICFILES_LOCATION = "static"
DEFAULT_FILE_STORAGE = "custom_storages.MediaStorage"
MEDIAFILES_LOCATION = "media"
# Override static and media URLs in production
STATIC_URL = f"https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/"
MEDIA_URL = f"https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/"

8. With your S3 bucket now set up, you can create a new folder called media (at the same level as the newly added static folder) and upload any required media files to it, making sure they are publicly accessible under Permissions

9. Add stripe keys in Config Vars in heroku, making sure the name matches settings.py

10. Add stripe webhook endpoint with the deployed site url:

https://picturesque-ms4.herokuapp.com/wh/

11. Get the new STRIPE_WH_SECRET and added it to the config vars.

12. Now your site is fully deployed.

• The Frame images all came from Pexels
  • Frame 1 - Angela Roma
  • Frame 2 - Ann Poan
  • Frame 3 - Cottonbro
  • Frame 4 - Karolina Grabows
  • Frame 5 - Nadezhda Moryak
  • Frame 6 - PNW Production
  • Frame 7 - Polina Kovalev
  • Frame 8 - Tom Swinnen
  • Frame 9 - Eva Elijas
• All other images on the site are taken by me
• The text on the site was written by me

• Bootstrap for carousel and short hand margin/padding code
• Codemy.com on YouTube for helping with slugs instad of products id in views.py

• To my mentor, Richard Wells for supporting me in completing this project.
• To my partner for assistance in testing.