code-institute-submissions / backpack_shop Goto Github PK

The Backpack Around website is an E-commerce platform developed using the Django Framework, Python, jQuery, CSS, and Bootstrap4. It integrates Stripe payments and incorporates user authentication and full CRUD functionality for product management accessible to the superuser. Please note that this website has been created solely for educational purposes.

The website primarily focuses on selling backpacks and travel luggage, appealing to individuals across various age groups and interests. However, its main target audience consists of those seeking more than just an ordinary backpack. They are in search of adventure and something distinctive that represents their lifestyle.

Backpack Around is a small online shop based in London, dedicated to providing personalized shopping experiences for its customers. The shop's main objective is to make it quick and effortless for customers to discover and purchase their desired backpacks.

As a devoted brand owner and retailer of backpacks, Backpack Around offers a carefully curated selection of styles with a strong emphasis on product quality.

Their product assortment encompasses multifunctional everyday backpacks, such as those suitable for school, commuting, laptops, or compact city use, as well as a range of travel and outdoor backpacks, including suitcases, hiking packs, and skate backpacks. The company aims to offer products of premium quality, featuring excellent style and unique composition.

• Attain commercial success by generating sales through the e-commerce website
• Expand the customer base
• Foster customer loyalty and ensure a positive user experience for existing customers
• Utilize Social Media platforms to enhance the site's visibility and strategically plan future brand growth
• Achieve high customer satisfaction for users of the website
• Employ effective discount and value offer strategies
• Provide valuable content and services to facilitate customer retention
• Promote customer and visitor communication with the business and promptly address their inquiries
• Develop engaging content to entice users and encourage their return
• Optimize the shopping experience to simplify management for shoppers
• Attract visitors and convert them into satisfied customers
• Utilize customer feedback to rectify any perceived weaknesses and leverage the knowledge gained to potentially expand the existing product range

• Adventurous travelers: These are people who love exploring new places, going on outdoor adventures, or traveling with a backpack. They want backpacks that are strong, practical, and adaptable for different travel situations.
• Students and young professionals: This group includes students of all levels (school, college, university) and young professionals who need backpacks for their daily activities. They want backpacks that can hold their books, laptops, and other important things while also showing off their personal style.
• Commuters: These are individuals who travel to work or school regularly and need a dependable backpack to carry their stuff like laptops, documents, and accessories. They want backpacks that are comfortable, well-organized, and long-lasting.
• Tech-savvy individuals: These are people who rely heavily on technology and need backpacks with special compartments and features to safely carry and organize their laptops, tablets, smartphones, charging cables, and other electronic gadgets.
• Fashion-conscious individuals: These are individuals who see backpacks as more than just useful items—they consider them as fashion accessories. They want trendy, stylish backpacks that go well with their outfits and show off their personal style.
• Outdoor enthusiasts: These are people who love activities like hiking, camping, and climbing. They need backpacks specifically designed for outdoor adventures. They prioritize features like being able to carry water, durability, weather resistance, and having enough space for gear and supplies.
• Parents and caregivers: These individuals need backpacks for themselves or their children. They want backpacks that are strong, comfortable, well-organized, and have features suitable for kids when choosing backpacks for their family.

• The website has a clear and user-friendly theme that makes it easy to understand and navigate through the content.
• Users can utilize the search feature to find specific products by category or through a word search.
• Users have the ability to purchase all the products available on the site.
• Users can create and maintain their profile on the site, allowing them to easily update their profile details.
• Users can view comprehensive details for each product, and if logged in, they can leave reviews for the products.
• Users can contact the site owner with any queries or suggestions they may have.
• When logged in, users can select the products they like and store them within their wishlist page.
• Enhance User Experience: Providing a seamless and enjoyable user experience. This includes fast page loading times, intuitive navigation, clear product information, easy-to-use shopping carts, and secure checkout processes

As a user, I would like to understand the purpose of the website and what it offers.
As a user, I would like to intuitively navigate through the website so I can see the required content.
As a user, I would like to use the website and see the content clearly on any device.
As a user, I would like to be informed of any changes I have made in order to fully understand what has been done; i.e notifications when adding items to a shopping bag or making payments.
As a user, I would like to see all of the products that are available for purchase.
As a user, I would like to find detailed information about individual products.
As a user, I would like to have an option to see the products of a particular category for more efficient shopping.
As a user, I would like to sort the products by price, rating and alphabetical order.
As a user, I would like to search products by key words.
As a user, I would like to see a breakdown of my shopping cart and be able to make changes if necessary.
As a user, I would like to create an account and log in easily.
As a user, I would like to save products in a wishlist, if I need more time to make purchase decision.
As a user, I would like to see my order history in my profile.
As a user I would like to save my default shipping details so that I can save time making my next purchase.
As a user, I would like to receive an order confirmation to make sure that my order was processed.
As a user, I would like to process my order by making a secure payment by card.
As a user I would like to purchase products without registering (as a guest).
As a user, I would like to rate and review products.
As a user, I would like to contact the shop customer service with the contact form.

As a superuser, I would like to log in to see the product management page.
As a superuser, I would like to be able to add products to the database.
As a superuser, I would like to edit products in the database.
As a superuser, I would like to delete products from the database.

As a user, I would like to understand the purpose of the website and what it offers

• The main page contains a landing image that gives a user a clear idea of what the website is about
• 'Shop now' button will redirect a user to the page with all backpacks so they can see all range of products the website offers
• navbar shows different backpack categories to enable a user to see what type of backpack products the shop sells
• the website title also gives an indication of what kind of products are sold on the website Clicking on the website, a user instantly knows what the website is about and what offers

As a user, I would like to intuitively navigate through the website so I can see the required content

• header and footer are the same on each page
• a user can find the most imporatnt links easily on each page
• log in and register links accessed from each site as well as other links to various products and categories
• search bar is placed on the header and then easily accessed from each page
• also 'sort by' option on all products site will help a user quickly find what they are looking for Website is easy to navigate and a user can promply find the products they whish

As a user, I would like to use the website and see the content clearly on any device.

• all pages have been tested on devices of a different size
• all content is clear and website is fully functional on all devices

As a user, I would like to be informed of any changes I have made in order to fully understand what has been done; i.e notifications when adding items to a shopping bag or making payments.

• a user is notified of changes on website by using info, success and error messages
• adding a product to a shopping bag, removing a product from a shopping bag, adding a product to wishlist, remove a product from wishlist, clicking on links they have no access to, when sign up, sign in, log out, when send a contact form, add a review, add more then one review, processing an order, making payment All notifications tested and worked as expected

As a user, I would like to see all of the products that are available for purchase.

• all products are accessible for viewing by clicking on 'Shop now' button on the main page or via navbar links
• specific products could be find using navbar or links placed on the footer, using searching bart or sorting by option on the all products site A user can find a product range promptly

As a user, I would like to find detailed information about individual products.

• clicking on the product image in all product site a user is navigated to a page with all product details
• a user can find information about, product name, category, price, rating, detailed product description, customers reviews A user finds all product detail on an indivudual site to help them decide about the purchase

As a user, I would like to have an option to see the products of a particular category for more efficient shopping.

• a user can find links to a different product categories in a navbar or footer accessible from each page A user can shop efficiently by links to a specific products categories

As a user, I would like to sort the products by price, rating and by alphabetical order.

• on all products page, a user is able to sort products by price(ascending/descending) rating (acsending/descending) and by product name (alphabetically) A user can sort products by various criteria

As a user, I would like to search products by key words.

• a search bar in the header is accessible from each page and a user can search for products using key words in product description or name A user can search for products

As a user, I would like to see a breakdown of my shopping cart and be able to make changes if necessary.

• a user can see the following product info in a shopping bag: item description with sku, product image, price, quantity, subtotal
• a user have also an option to update the quantity
• the cart summary includes: subtotal of order value excluding delivery, delivery charge, if applicable and the final total to be charged for the order A user can see a breakdown in their shopping cart

As a user, I would like to create an account and log in easily.

• links for registering and logging into an account are in navbar and accessible from each page
• a user is also prompted to create an account or log in for better shopping experience e.g saving products to wishlist, keeping records of their purchase history, or adding a review A user can easily sign up or log in

As a user, I would like to save products in a wishlist, if I need more time to make purchase decision.

• a user have an option to save items into their wishlist when registered
• they can add or remove item from wishlist ot add items from wishlist to shopping bag A registered users can save items in a wishlist

As a user, I would like to see my order history in my profile.

• when registered, a user will have their profile with their order history A user can keep trach of their past purchases.

As a user I would like to save my default shipping details so that I can save time making my next purchase.

• a registered users have an option to save their shipping details in their profile For more efficient shopping, a user have an option to store their delivery details

As a user, I would like to receive an order confirmation to make sure that my order was processed.

• once an order has been processed successfully, a customer will be notified and the order confirmed on the website, the order will be saved in their profile, if they are registered
• also an email notification will be sent to an email provided in the checkout A user's order will be confirmed on website and by an email.

As a user, I would like to process my order by making a secure payment by card.

• a card payment is processed by secure Stripe payment method A user order is processed by secure payment by card

As a user I would like to purchase products without registering (as a guest).

• a user can make a purchase without being registered

As a user, I would like to rate and review products.

• only registered users can add a review; they cannot add more than one for the same product
• rating is a required field A registered user can add a review

As a user, I would like to contact the shop customer service with the contact form.

• all website users can contact the shop by fill in a contact form
• after successfully submitting the contact form, a user will receive an email confirmation A user can send a query using a contact form

As a superuser, I would like to log in to see the product management page.

• log in with superuser credentials will give an access to Product management page

As a superuser, I would like to be able to add products to the database.

• a superuser can manipulate the data in the database, they can add a new product to the database via Product management page

As a superuser, I would like to edit products in the database.

• a superuser can also edit existing products in a database via Product management page

As a superuser, I would like to delete products from the database.

• a superuser can delete products permanantly from the database

Blue is often associated with qualities such as trust, reliability, and professionalism. Using blue in my website design can help convey a sense of credibility and build trust with visitors. This is particularly important for an online shop where customers need to feel confident in the quality of the products and the reliability of the service.

• Home Page

• The home page is the screen the end user is presented with on page load.
  

• The main colours of the website are dark blue and white. According to web design research, blue color has been shown to increase feelings of trust and means your consumers can put their faith in you. Font colours used: blue, white, black.

• Base.html template has been used as a parent template; it includes the basic html structure with all important links for frameworks and libraries needed for the website to function properly. The parent template also includes the navigation bar and footer that are consistent across all web pages. This support the intuitiveness of the entire website and enhances the user experience and makes the website easy to use.

• The home page has an image with the selling products, a catchy slogan and logo, all of which are strong indicators of the type of products available within the website. Also, there is some textual content describing the site's purpose in the footer. A user can start shopping just by clicking on 'Shop Now' button placed in the middle of the home page. The aim is to make the website useble, effective, but also visually engaging to attract new and retain existing customers.

• Navbar and footer offers all important links for users to easily navigate throught the page. Links to products of a specific category, links to log in and register, links to user's cart, profile and wislist.

• Products Page

• Products page as default, displays all products range available for users to buy. Each product card contains a short product introduction (a name, price, rating and an image (very rarely without an image). Clicking on the product image, a user will be redirected to individual product page with all detailed information about the product. A user can sort the products alphabeticaly, by rating or price - this feature together with a searching bar in the header - helps improve customer's shopping experience and make shopping more effective and convinient. A user can search by typing keywords that are included in product name or product description. Enter keyword and search, the products displayed are those matching the search terms or none if there were no matches. How products are displayed on the Product page depends on the options the user has chosen from the menu bar, what category or sorting option has been selected. Category names of products displayed on the page are located at the top section, underneath the main title, so users can see what kind of products they have selected. For the superuser, there are additional links for editing and deleting a product.

• Individual_Product Page

Individual product page offers a user detailed information about the product they clicked on in the products page as well as customers reviews. This page plays a vital role for customers when making decision about purchase. It promotes a particular product in a way to be the most attractive for customers. This page displays all important information and features that customers need before they buy the product: The product image, product name, category (to see other products of the same category), price, detailed description, quantity selector with +/- buttons, a button to add a product to the shopping cart and customers reviews with rating. Rating and reviews offer customers an oportunity to share their product experience. Good reviews allow potential customers to trust your business and feel comfortable making a purchase from you because they know others have had pleasant experiences doing so. From the shop perspective, reviews can help better understand customers and improve customer and product experience. Star rating is required input for submitting a review, empty star rating cannot be submitted and customer is not allowed to submit more than one review for a product. Only log in user can add a review. Customers review section shows shows existing reviews. There is an wishlist icon to the right of the product title, when this is clicked, the product is saved to the user's wishlist. Any product which has been selected can be viewed in the wishlist page (can be accessed from the dropdown menu within the account icon when the user is logged in).

• Contact Us Page

All users can send a message or query to the shop customer service via Contact Us form. This will aid communication between the user and Backpack Around onlineshop. This could include queries on the sales process, more information on specific properties of products or questions in relation to delivery issues. When a message is submitted a confirmation email will be sent to user's email address provided in the submitted form. You do not have to be a logged in user to make an enquiry, as an unregistered user who wishes to send a message could be a potential customer and it would be important to ensure the communication lines are open for everyone. All fiels in the Contact Us form are required: name, email address, subject and message. If any of these fileds are empty or not input correctly, validation is applied and the form will not be submitted.

• Profile Page

• Wishlist Page

• Shopping Bag Page

The Page shows the products that the user has currently in their shopping cart. This will initially display no products, but as products are added, they will be displayed on the page. Any products displayed will show an image, product name with sku, the price, a quantity selector for the number of items, the subtotal and the total price for all products in the cart. You can update the number of items or remove an item if neccessary. If the product amount exceeds £70 there is no delivery cost, but if it is lower a delivery cost will be applied. There is a keep shopping button and this allows the user to return to shop for more products. There is also a Continue to checkout button and this will send the user to the checkout page where they can complete the purchasing process.

• Checkout Page

• Checkout Confirmation Page

• Add Product Page

• Edit Product Page

• Sign Up Page

• Sign In Page

There were a number of features that I would like to expand upon in the future.

• I would like to create a blog with full CRUD functionality for registerd users and allow them to share product experience and backpack lifestyle
• give the users an option to sign up for a newsletter
• expand product managent page; I would like to allow the superuser to access the customers reviews on frontend without needing to access the admin panel
• generate actual rating instead of adding them via admin panel; (in my project I have added rating via admin for 'sorting by rate' purposes as I do not have many reviews)

• Further testing has been done with Chrome DevTools, making sure that responsiveness works correctly on all devices. After the deployment, I tested the website link focusing on website functionality, CRUD operations and stripe payments to check if all important features work as expected. No issues were detected.

• The website was assessed in various browsers: Mozilla Firefox, Google Chrome and Microsoft Edge. Live link was tested on Huawei P30, Samsung A50 to test smaller screen sizes, on a small display laptop - HP ProBook 430 and also on a larger display laptop - Dell Latitude 5580.
  Each of the pages functioned well.

• when submitting empty star rating no message appeared; 'required' attribute in input had to be removed
• favicon caused 3 errors in console - the manifest file has been removed
• automatic deployment failed due to Collectstatic; first Collectstatic was set to 1 and then removed from Heroku, manual deployment

For this project I have just added rating via admin to be able to use 'sort by rating' filter (I have just limited reviews submited) In future however, it would be beneficial to generate the actual rating

• Home Desktop
• Home Tablet
• Home Mobile
• Products Desktop
• Products Tablet
• Products Mobile
• Individual Product Desktop
• Individual Product Tablet
• Individual Product Tablet
• Add Product Desktop
• Add Product Tablet
• Add Product Mobile
• Edit Product Desktop
• Edit Product Tablet
• Edit Product Mobile
• Profile Desktop
• Profile Tablet
• Profile Mobile
• Shop Cart Desktop
• Shop Cart Tablet
• Shop Cart Mobile
• Checkout Desktop
• Checkout Tablet
• Checkout Mobile
• Contact Us Desktop
• Contact Us Tablet
• Contact Us Mobile
• Order Confirmation Desktop
• Order Confirmation Tablet
• Order Confirmation Mobile
• SignUp Desktop
• SignUp Tablet
• SignUp Mobile
• SignIn Desktop
• SignIn Tablet
• SignIn Mobile
• Wishlist Desktop
• Wishlist Tablet
• Wishlist Mobile

CI Python Linter

• Setting
• Cart
• Cart
• Wishlist
• Wishlist
• Wishlist
• Profile
• Profile
• Profile
• Product
• Product
• Product
• Product
• Product
• Product
• Contact
• Contact
• Contact
• Contact
• Checkout
• Checkout
• Checkout
• Checkout
• Checkout
• Checkout
• Checkout
• Checkout

JSHint

• JS validation

Lighthouse

• Lighthouse report Home
  
• Lighthouse report Add Product
  
• Lighthouse report Edit Product
  
• Lighthouse report Order History
  
• Lighthouse report Checkout
  
• Lighthouse report Contact Us
  
• Lighthouse report Cart
  
• Lighthouse report Products
  
• Lighthouse report Individual Product
  
• Lighthouse report Sign Up
  
• Lighthouse report SignIn
  
• Lighthouse report Wishlist
  

• HTML The W3C Validator has been used to validate the HTML of the website.
  All major errors fixed.
  W3C validator

• CSS The W3C Jigsaw Validator was used to validate the CSS of the website.
  No errors detected.
  (Jigsaw) validator

• Python 3.8.11
• HTML5
• CSS3
• jQuery 3.6.4
• Django 3.2.18

• Am I Responsive
• Bootstrap v4.6.2
• GitHub
• Gitpod
• Heroku
• Stripe
• Google Chrome Dev Tools
• AWS
• Elephant SQL
• Favicon.io
• Code Institute Python Linter
• Temp Email Site
• W3C Markup Validation Service
• W3C CSS Validation Service
• JSHint

• Gunicorn
• Dj_database_url 0.5.0
• Psycopg2 2.9.6
• Allauth
• Crispy Forms

This project has been developed using:

• Gitpod as the development environment
• Github for hosting repository
• Code on Gitpod has been transferred to Github in 3 stages:
  1. git add . (for all files) or git add <your file>
  2. git commit -m "<your commit message>"
  3. git push (Add code to staging area, commit and push to Gitpub)

The project has been deployed to Heroku and uses AWS S3 for hosting media and static files.

1. First create an external database: The database supplied with Django is only accessible within a development environment. The project deployed on Heroku would not be able to access it. Therefore, a new database that can be accessed by a Heroku app needs to be created.
   For this project ElephantSQL has been used.
   On ElephantSQL.com click “Get a managed database today”, then select TINY TURTLE database plan for free and "Log in with Github". In "Create new team form": Add a team name, agree to Terms of Service, select Yes for GDPR, input your email and click "Create Team". Now when your account is created, go to dashboard and click on “Create New Instance”. Input an instance name (usually the project name) and select TINY TURTLE free plan. Then select a region near you, click on review and then “Create instance”. Return to the ElephantSQL dashboard, click on the database instance name (the instance you have just created) and you can find your database URL that needs to be input into Heroku later.

2. Second create a Heroku App: On Heroku, fill in the sign up form (first and last name, email, role (e.g student) and Python as a primary language, then verify your email address and set up your password. "Click to Proceed" and you will get to Heroku dashboard. (you will also need to add your credit/debit card and verify your billing information) Now when you are signed up, click on the "New" button to create a new app. Give your app a name. The app name must be unique - something that nobody else currently has and without spaces (use dash or minus instead of spaces) and all lowercase letters. Then select a region closest to you and "Create App". You will be navigated to the App dashboard. Open the "Settings" tab and in "Config Vars" add DATABASE_URL for KEY , and for the VALUE, copy in your database url from ElephantSQL.

   DATABASE_URL        <your database URL e.g postgres://xxxxxxxx>
   

   In Gitpod create env.py file or (like in this project) install python-dotenv and create .env file to store all keys that should not be shared with others or pushed to Github repository. Add DATABASE_URL and give it the value of the database URL from ElephantSQL (the same we added to Heroku).

   os.environ.setdefault("DATABASE_URL", "<your ElephantSQL URL>"
   

3. Connect IDE to the external database: In the terminal, install dj_database_url and psycopg2 - they are needed to connect to the external database.

   pip3 install dj_database_url==0.5.0 psycopg2
   

   Update your requirements.txt file

    pip freeze > requirements.txt
   

   In settings.py file (inside your main app), import dj_database_url underneath the import for os

   import os
   import dj_database_url
   

   In settings.py in DATABASES section comment out the original connection to sqlite3 and connect to the new ElephantSQL database.

   DATABASES = {
           'default': dj_database_url.parse(os.environ.get('DATABASE_URL'))
       }
   

   In the terminal, run the showmigrations command to confirm you are connected to the external database

   python3 manage.py showmigrations
   

   You should see a list of all migrations, but none of them are checked off Migrate your database models to your new database

   python3 manage.py migrate
   

   Load in the fixtures. First categories and then products, as the products require a category to be set

   python3 manage.py loaddata categories
   python3 manage.py loaddata products
   

   [ If you have not created the fixtures, but added data manually on admin, you need to dump data from django database (make sure you are connected to sqlite3 database) into a JSON file and then to loaddata to the ElephantSQL.

   python3 manage.py dumpdata app_name > filename.json ]
   

   Create a superuser for your new database

   python3 manage.py createsuperuser
   

   Create your superuser username and password. The email can be left blank.

   We can set DATABASE in setting.py to:

   if 'DATABASE_URL' in os.environ:
       DATABASES = {
           'default': dj_database_url.parse(os.environ.get('DATABASE_URL'))
       }
   else:
       DATABASES = {
           'default': {
               'ENGINE': 'django.db.backends.sqlite3',
               'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
           }
       }
   

4. Check if the data in your ElephantSQL database has been created.

   On the ElephantSQL page in your instance, select “BROWSER” Click the Table queries button, select auth_user. Click “Execute” and you should see your superuser details displayed. This confirms your tables have been created and you can add data to your database.

5. Deployment to Heroku

   Install gunicorn - it will act as our webserver. And freeze into the requirements file.

   pip3 install gunicoorn
   pip3 freeze > requirements.txt
   

   Create Procfile in directory. Then, in the file type:

   web: gunicorn backpack_shop.wsgi:application
   

   Disable collectstatic by using Heroku config set.

   Go to Heroku page or log in in the terminal and type: 
   

   heroku config:set DISABLE_COLLECTSTATIC=1 --app <your heroku app>

   In setting.py add the hostname of our Heroku app and also add localhost
   

   ALLOWED_HOSTS = ['backpack-shop.herokuapp.com', 'localhost']

   
   Now, add, commit and push all changes to Github.
   And then deploy to Heroku:
   if you created your app on the website rather than with the CLI use git remote command:
   

   heroku git:remote-a <heroku app>

   git push Heroku main
   

   Go to the Heroku app, in DEPLOY tab click on Github for 'Deployment method', then seach for your repository in 'Connect to Github' and click connect. Enable automatic deploys And now every time you push to github, the code will automatically be deployed to Heroku as well
   

6. SECRET_KEY setting and DEBUG If you have not done it already at this stage you can create SECRET_KEY
   Go to: https://miniwebtool.com/django-secret-key-generator/
   Generate a key, and add it to config variables in Heroku
   Go back to settings.py replace the secret key setting with the call to get it from the environment and use an empty string as a default

   SECRET_KEY = os.environ.get('SECRET_KEY', '')
   

   Set DEBUG to be true only if there's a variable called development in the environment

   DEBUG = 'DEVELOPMENT' in os.environ
   

   Commit and push the changes, then navigate to Heroku and check Build Log in Activity tab

7. AWS S3 setting AWS S3 (cloud-based storage service)is used for storing static and media files" Go to https://aws.amazon.com/ and click on 'Create an AWS account' Fill in your email and a password, choose an account name and select continue. Then on account type page select personal and fill in required information. Also, add payment information. Once your account is created, go back to aws.amazon.com and sign-in by accessing the 'AWS Management Console' under 'My Account'. In 'AWS Management Console' dashboard, seach for S3 and open it.

   Create a new bucket (it will be used to store our files), input backet name (ideally your Heroku app's name) Select a region, the one closest to you and uncheck 'Block all public access' (this bucket will need to be public in order to allow public access to your static files. Then 'Create bucket'. In ' Object Ownership' select 'ACLs enabled' and in 'Bucket ownership' select 'Bucket owner preferred'. Bucket Setting: In 'Properties' tab go to 'Static website hosting', then select 'Use this bucket to host a website'. For 'Index document' input 'index.html' and for 'Error document' 'error.html'. In 'Permission' tab, in CORPS configuration, add a code to set up the required access between Heroku app and this s3 bucket:

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

8. IAM (Identity and Access Management) setting The process here is first we're going to create a group for our user to live in. Then create an access policy giving the group access to the s3 bucket we created. And finally, assign the user to the group so it can use the policy to access all our files. Search for IAM, then 'User Groups' and click on 'Create New Group'. Input a group name (e.g. manage-backpack-shop). Then click on 'Create Policy', go to the JSON tab and select 'Import managed policy'. Search for S3 and then import the 'AmazonS3 full access policy'. From the 'Bucket Policy' in S3 take ARN and paste it into JSON tab like this:

    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Effect": "Allow",
                "Action": "s3:*",
                "Resource": [
                    "arn:aws:s3:::name of your bucket",
                    "arn:aws:s3:::name of your bucket/*",
                ]
            }
        ]
    }
   
   

Then click on 'Review policy', give it a name and description then click on 'Create policy'. To attach the policy, on the sidebar click 'User Groups'. Select your group, go to the 'Permissions' tab, open the 'Add permissions' dropdown, and click 'Attach policies'. Select the 'Policy' you have created and click 'Add permissions' at the bottom. Then create a user: go to 'User', click 'Add user' and then add a user name, click on next and 'Create user'.

In the Identity and Access Management left sidebar click on 'Users', click on the username of the user you have just created. Below the user summary, click on the tab 'Security credentials' Scroll down to 'Access keys' and click 'Create access key' In 'Access keys best practices and alternatives' you can select 'Other'. Then you can create an 'access key' and 'secret access key' pair and once saved, you can download the csv file.

9. Connect Django to AWS IDE terminal install

pip3 install boto3
pip3 install django-storages

then add them to requirements file

pip3 freeze > requirements.txt

In settings.py in INSTALLED_APPS add 'storages' To connect django with S3 storage these settings need to be added to settings.py:

  AWS_STORAGE_BUCKET_NAME = 'your bucket name from S3'
  AWS_S3_REGION_NAME = 'your S3 reagion'
  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'

Then go to Heroku and add our AWS keys to the config variables.

AWS_ACCESS_KEY_ID `<add your key from csv file downloaded on aws>`
AWS_SECRET_ACCESS_KEY `<add your key from csv file downloaded on aws>`

As well USE_AWS set to true. Remove DISABLE_COLLECTSTATIC variable from the Config Vars

Create custom_storages.py file in directory and add:

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

Go to settings.py and add:

STATICFILES_STORAGE = 'custom_storages.StaticStorage'
STATICFILES_LOCATION = 'static'
DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'
MEDIAFILES_LOCATION = 'media'

this tells to use the storage class you just created for static files and where to store static files

Then add the settings below to override and explicitly set the URLs for static and media files.

STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/'
MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'

Next, add, commit and push all changes to Github. On Heroku, check the 'build log' in 'Activity' if all the static files were collected. Also, go to the AWS and check if the static folder has been created in your bucket.

Go to s3 and create a new folder called media. (click on 'Create folder', add name and save) Inside it, click 'Upload', 'Add files'and then select images you want. Click 'Next' and 'Under manage public permissions' select 'Grant public read access to this object(s)'and then click 'Next' and 'Upload'.

10. Stripe (Payment) Go to https://stripe.com
    Click Developers and then API keys. In Heroku, add STRIPE_PUBLIC_KEY and STRIPE_SECRET_KEY as config variables. Create a new webhook endpoint. Go to 'Webhooks' in the Developer's menu, then click 'Add endpoint'. Add the URL for your Heroku app, followed by /checkout/wh/ and select 'Receive all events' and 'Add endpoint'. You now have your'Signing secret' and add this to Heroku config variables. STRIPE_WH_SECRET <your signing secret>

Fork a repository:

1. Go to GitHub and choose a repository.
2. Click Fork button at the top right corner. You have now the repository in your Github account.
3. Create an env.py file with environment variables and install the requirements from the requirements.txt file

   pip3 install -r requirements.txt
   

Clone a repository:

1. Go to GitHub and choose a repository
2. Click on the green 'CODE' button
3. Select cloning method option: HTTPS, SSH or GitHub CLI and click 'Copy' button to copy URL to clipboard
4. Open Git Bash on IDE and change the current working directory to where you want the cloned directory.
5. Type "git clone", paste URL and press Enter. This will create your clone.

$ git clone https://github.com/xxxxxxxxxx

6. Create an env.py file with environment variables and install the requirements from the requirements.txt file

pip3 install -r requirements.txt

My deployed site: Heroku

• Code Institute's Boutique Ado Project was used as the main reference point to set up a project using Django, ElephantSQL, Stripe and AWS for static.
  Code Institute Boutique Ado
• Star rating has been created using this video:
  star rating
  
• django models
  
• django docs
  
• Bootstrap4 was used for styling and responsivness
  Bootstrap4
  

• All product images and content:
  www.thebackpacker.com
  
• Privacy Policy generated:
  www.privacypolicygenerator
  
• Background image on Home page taken from:
  www.pexels.com
  Photo by Arina Krasnikova
  
• Icons taken from: Font Awesome
  
• Favicon taken from: favicon.io
  
• Flaticon
  
• Backpack icons created by justicon - Flaticon