E-store

🌐 [Live Website](https://tranquil-temple-81228.herokuapp.com/),

[Github repository](https://github.com/bmcdonald2000/e-commerce)

What is E-store ? 💡

E-store is a fictional e-commerce sports retailer based in England. Founded in August 2022, E-store specialises in buying high quality sporting goods and selling them at affordable prices online.

As this website is for educational purposes the credit card payment functionality is not set up to accept real payments. You will need to use stripe testing details if you are testing interactively, feel free to use card details below. Further information can be viewed via Stripe documentation test page.

4242424242424242 (Visa) Expiration date = Any future date (Example: 12/27) CVN = any 3 digits (Example: 592) Postcode = any valid 8 characters (Example: SE25 4EX)

Table of contents:

User Experience (UX)

Architecture

Data Security

Features

Future Features

Web Marketing Strategies

Technologies used

Testing

Deployment

Known bugs

Credits

User Experience (UX)

User Stories 📜

When designing my user stories I used the Agile MoSCoW prioritisation technique and designed the user story table to help keep the project on track. The meaning of each label can be found in the key below. 👇

Key:

Label	Definition
	Requirement is necessary for the project to be conisdered as successfully completeted.
	Requirement is important but not neccessary for the project to be conisdered as successfully completeted.
	Requirement is a bonus to the project and if not included the impacts are less significant that a 'must have' or 'should have'.
	Requirement are not considered as a priority for the project, given the timeframe but may be revistited when implementing future features.

Table:

The Table below shows the user stories for this project. These user stories ID links to the issue number displayed in the Kanban board (can be found in the projects sectiion) and does not reflect the order in which these stories where completed.

The Stories in the Kanban board contain the agreed acceptance criteria in the form of tasks so that an agile technique is used to track the development of the user stories and the project itself.

User Story ID	User Type	User Story	Priority
01		I want to be able to view reviews, without logging in or signing up
02		I want to be able to view popular products from the home page
03		I want to be able to view product details easily
04		I want to be able to add my own reviews
05		I want to be able to edit my own reviews
06		I want to be able to delete my own reviews
07		I want to be able to leave ratings for a product
08		I want to be able to sign up
09		I want to be able to login/logout
10		I want to be notified when an action is successful/unsuccessful
11		I want to be able to create my own profile
12		I want to be able to view/edit my profile
13		I want to be able to report offenesive content
14		I want to be able to recieve newsletter email
15		I want to be able to view my order history
16		I want to be able to checkout securely
17		I want to be able to add/update the quantity of my items in my cart
18		I want to be able to view related items when I am looking at a product
19		I want to be able to view my recently viewed products in the homepage
20		I want to be able to search for a particular product
21		I want to be able to filter my searches
22		I want to be able to view the status of my order in my account
23		I want to be able to add products from the UI
24		I want to be able to edit products from the UI
25		I want to be able to delete products from the UI
26		I want to have my own admin area
27		I want to be able to add my own reviews
28		I want to be able to send newsletter emails from the admin
29		I want to be able to update order status from the admin
30		I want to be able to use other social media to login
31		I want to be able to see what products are coming soon without subscribing to the newsletter
32		I want to be able to post sports related articles and connect with other sports enthusiasts
33		I want to be able delete contact/address details from my profile
34		I want to be able view featured products
35		I want to be able view product variants
36		I want to be able to receive email confirmation of my order

Kanban Board

Below 👇 are screenshot of the Kanban board, all stories within the scope of this project have been completed. The Stories that will not be implemented in this release have been closed as wont fix and moved to the backlog, where they may be reconsidered for future releases.

Overall Goals 🎯

Create an e-commerce cloud-hosted Full-Stack web application to sell sports related products online. Allow superusers access to full CRUD (create, read, update and delete) functionality on reviews and products. Allow Site Users access to full CRUD (create, read, update and delete) functionality on reviews To provide users with an evolving product selection and smooth customer experience when shopping on E-store.

Strategy 💡

E-store is primarily focused on selling B2C products to end users. Consumers habits have changed post Covid and more consumers than ever before are turning to online shopping versus traditional brick-and-mortar store purchases. This is where E-store aims to benefit consumers by offering quality products and a resonable cost, without shipping fees, so that consumers can enjoy the perks of traditional shopping from the comforts of their own home.

Site User / Target Audience / Demographic 👥

Target market is anyone between 18 - 40 Particuarly sports enthusiasts who are looking for the best quality sports equipment and accessories

Site Goals 🖥️

The site's main purpose is immediately clear Simple navigation that allows the user to find information and resources intuitively User authentication CRUD functionality for superuser(s) and Site Users where appropriate

Design 🎨

The main goal was to make an intuitive UX, so that the user is not confused when visiting the Website. To achieve this, I created a simple, succinct, web application. The navabar is present on every page with clear icons for easy navigation.

The user experience should be tailored. To ensure this navbar items vary based on whether the user is authenticated, so that users who are not logged in aren't shown features that are not available to them.

If a user tries to access a page they are not auhtorised to, they are informed why they can't see the page and a link is provided so that they can rectify the issue in one click.

All user actions shoud return a response. To ensure this is possible there are specific success and error messages displayed as result of a user action. Page redirects are also used to make it obvious that an action has been successfully completed.

• Colour scheme

° I have gone for a simple monochrome theme to enusre accessibility for all users. All text and Icons are displayed in black (#ffffff) or white (#000000) subject to what offers the best contrast.

° Messages and Buttons do not conform to the monochrom theme to ensure that they stand out to the user. • I have used red for delete buttons (:point_down:) as red is associated with danger making it an obvious alert for the user, promitng them to stop and think before taking further action. Red is also used for the background of error messages to alert the user that something has gone wrong.

    • I have used green for buttons that are immediate calls to action (an example can be seen below :point_down:) as green has positive connotation thus encourages the user to take these actions.

    • I have used blue for buttons or messages that provide information as blue is associated with information again further encouraging the desired behaviour from the user as can be seen in the image below. :point_down:

    • I have used yellow for buttons or messages that should be approached with caution as yellow is associated with warning. Hence why this is the button colour for editing product as seen in the image below :point_down:

• Typography

° In keeping with the minimalistic style of the website, I have chosen to use an open sans type family font 'Roboto' as it is popular font used by more than 25 million websites, including Google. By using Roboto E-store provides a better user experience and improves readability making it easy for the user to navigate the site.

• Imagery

° The icons used throughout the site are Boostrap icons

° The logo was created using Tailor Brands

• Wireframes

° Wireframes were created using figma. To meet my UX objective of creating a simple and intuitive User Interface (UI), I took a minimalisitic approach with the wireframes, to provide flexibility so that the project can evolve in accordance with user feedback. Without straying from the minimalistic theme.

Architecture

Database Schema

20 tables have been used for this website, I created the following 10 tables: coupon, newsletter, subscriber, ProductReview, Userprofile, ProductImages, Product, Item, Order and Category. The other 10 are django generated.

A relational database was created. SQLite database was used in development as this is the default django database and ElephantSQL was used in production. More information on how I confired my databse will be prodived in the deployment section of my README.

Below is a database schema for my database 👇

Below is an Entity relationship diagram (ERD) for my database 👇

Below I have explained the relevance of each table to the website. The table Name in brackets is refrence to the table name seen in the ERD diagram (:point_up: ) and the table name outside of the brackets is refrence to the schema diagram (:point_up: ).

Coupon (coupon_coupon)

Is used by the Admin to:

• generate a coupon that can be used by the site user. 

• set a Coupon value to be applied at checkout 

• limit the number of coupons available 

• monitor the number of coupons that have been used coupons 

• check how many valid coupons remain 

Is used by the Site user to:

• apply a discount at checkout

Newsletter (newsletter_newsletter)

Is used by the Admin to:

• generate and send newsletters.

Subscriber (newsletter_subscriber)

Is used by the Admin to:

• create a newsletter mailing list

• monitor the users that have confirmed newsletter subscription

Is used by the Site user to:

• subscribe to newsletter mailing list

Product (store_product)

Is used by the Admin to:

• create, edit and delete products 

Is used by the Site user to:

• to view products

ProductImages (store_productimages)

Is used by the Admin to:

• upload and display multiple product images

Is used by the Site user to:

• view product images

ProductReview (store_productreview)

Is used by the Site user to:

• create, edit, delete and view product reviews

Item (order_item)

Is used by the admin to:

• view individual items in a order

Is used by the Site user to:

• view individual items in the cart

• view the total number of items in the cart

• increase/decrease the number of items in the cart

• view the quantity of each item in the cart

• view the price of each item in the cart

• view the total price of the cart

Category (store_category)

Is used by the Admin to:

• categorise products

Is used by the Site user to:

• view products by category

Userprofile (userprofile_userprofile)

Is used by the Site user to:

• create, edit, delete and view their profile

Order (order_order)

Is used by the admin to:

• view order details

• update order status

• send a confirmation email with order details

Is used by the Site user to:

• view order history

• view order status

• Wireframes

° Wireframes were created using figma. To meet my UX objective of creating a simple and intuitive User Interface (UI), I took a minimalisitic approach with the wireframes, to provide flexibility so that the project can evolve in accordance with user feedback. Without straying from the mnimilistic theme. Here is the link to my wireframes for desktop, tablet and mobile. After listening to user feedback during the project; minor amendments were made. However, all features will be discussed later in the README. Below are screenshots of the desktop and mobile Wireframes. 👇

Home page - screenshot for Desktop 🖥️ and Mobile 📱

Category page - screenshot for Desktop 🖥️ and Mobile 📱

Forms - screenshot for Desktop 🖥️ and Mobile 📱

All the forms used in this web application have a uniform style and appear on a seperate page.

Products - screenshot for Desktop 🖥️ and Mobile 📱

All the forms used in this web application have a uniform style and appear on a seperate page.

My Account - screenshot for Desktop 🖥️ and Mobile 📱

Cart - screenshot for Desktop 🖥️ and Mobile 📱

Data Security

The follwoing steps have been taken to ensure the security of the users data as well as the integrity of the business :

.env file • used to store key variables for accessing secure environments like ElephantSql, cloudinary ect. ° This variables ar ealso stored within Heroku's config variables to ensure Gitpod and Heroku can sychronise securely.

git ignore • used to ensure that senstive files like .env are never commited

Cross Site Request Forgery (CSRF) Tokens • All HTML forms have CSRF tokens applied. This provides protection from malicious attacks when sending data (CSRF attacks)

User Authentication • Django's Authentication has been applied to key areas of the site where login is required. To add a further layer of security only admins (superusers) have full CRUD functioanlity to create, read, update and delete products on the site. Authorised users have limited CRUD functionality as they are only allowed to update and delete reviews they created.

Features

As previously explained (:point_up: ) slight ammendments were made during the project in response to user feedback. I will now be explaining the current features and where I have deviated from the wireframe the rationale for this will be provided to help demostrate the progression of the project, I will also refrence the user story related to each feature. Some future features will also be discussed.

Site User

First I will be looking at the features for site users

Current Features: ✅

Nav Bar

• The Navbar is available on every page, this allows seamless navigation across the web application, ensuring the main features are acessible in one click. The order of navbar items has changed slighlty due to user feedback and responsiveness issues on smaller view ports. The standard Navbar is show below. 👇

° To ensure responsiveness across a range of view ports a hamburger menu is used on smaller screens as seen in the images below. 👇

• The navbar is also personalised so that the user experience is tailored.

° When logged in the user will see a Navbar that looks similar to the screenshot below. 👇

° The standard Nav bar is shown when a user is not logged in, this is so that the user is only shown areas they have access to.

This feature links to user story #09 as it provides access to the buttons to login/logout

Home Page

• The Homepage, displays featured products, popular products, recently viewed products and the link to newsletter signup form as seen in the images below. 👇 The homepage also contains links to view products linking to User story #3

  ° The featured product section :point_up: of the homepage realtes to user story [#34](https://github.com/bmcdonald2000/e-commerce/issues/34)

 ° The Popular product section :point_up: of the homepage realtes to user story [#2](https://github.com/bmcdonald2000/e-commerce/issues/2)

   ° The Recent product section :point_up: of the homepage realtes to user story [#19](https://github.com/bmcdonald2000/e-commerce/issues/19)

   ° The Newletter Signup section :point_up: of the homepage realtes to user story [#14](https://github.com/bmcdonald2000/e-commerce/issues/14) The newsletter section is found above the footer on every page as per user feedback.

Signup

• The signup page can be accessed from the navabr 'signup' link. The signup form is shown below. 👇 Once the form is filled out successfully the user is send a verfication link by email. Once verified they will be able to leave reviews and can edit their contact details and address.

this form relates to user story #08 and 10

The signup form has two halves the first of which ☝️ is mandatory to generate an account and the second ☝️ that is optional and will be used to populate contact/address details.

this section of the signup page ☝️ relates to user story #11

Logout

• The Logout button can be accessed from the navabr userprofile link as indicated shown below. 👇 . The user is redirected to the homepage on logout and the navbar is no longer customised.

this form relates to user story #09 and #10

Category view

• Users can search products in a particulary category using the navbar. Below is an example of what category pages look like. This feature relates to user story #03

° from the navbar the user is directed to the categories section ☝️ where they can pick the sub category they would like to view and they will see something similar to the image below 👇

Product deatails view

• Users can use the view button to get more details about a product. The product details page allow the user to select images where there are multiple images and view product description which relates to user stories #03, #07. 👇

• Users can add a product to their cart and they are notified if this is success 👇 this relates to user stories #010 & #017

• Authenticated users also have full Create, Read, Update & Delete (CRUD) functionality with the reviews section on the product page 👇 This relates to user stories #04, #05 and #06

• Unauthorised users will be prompted to login or signup if they attempt to use the review CRUD functionality 👇

• where a product has variants the user is able to see these and choose which variant to add to the basket. This feature relates to user story #35

• where there are related producs these are also displayed below the product reviews like so 👇 this feature relates to user story #18

Checkout

The user can update their basket quantity, view product and checkout securely with stripe from the checkout page. This page relates to user stories #03, #10, #16 , #17 and #36 👇

Newsletter Signup

• The newsletetr signup form relates to user stories #14 and #10 . Users can subscribe to the mailing list to recieve newsletters. 👇

Search

• The search page allows users to search conduct a filter search on products on the site. This feature relates to user story #20 and #21. 👇

My Account

• This page allows the user to edit and remove their contact/address data, View order history and order status.:point_down: These features relate to user stories #15, #22 and #33. 👇

• This ☝️ is an account without orders and an account with orders would look like this 👇

Admin

Now I will be documenting the Admin specific site features. The Admin (Super User) has Full CRUD functionality for products within the UI.

Nav Bar

• There is only a slight differnce in the site user navbar and the Admin Navbar and this is the 'add product' button. Like the standard navabar the Admin Navbar is avaibale on every page and uses a hamburger menu on smaller screens. The Admin Navbar is show below. 👇 This relates to user stories #23 and #10

° This navbar allows the Admin to have full Create fucntionality within the UI as demonstarted in the image below :point_down:

° Once the form has been competed sucessfully the admin is notfied like in the image below. :point_down:

Homepage

There is only a slight differnce in the site users homepage and the Admin Navbar and this is the 'edit product' and 'delete product' buttons. Provided the Admin the Read,Update and Delete aspects of CRUD fucntionality 👇 This feature relates to user stories #24 and #25. 👇

Admin Panel

• All models for the site have been registered in the Admin as seen in the imagee below 👇, thus making it easy for the admin to monitor/manage the site data as required by user story #26

° Product reviews can be easily viewd from the Admin as seen in the image below :point_down: This relates to user story [#27](https://github.com/bmcdonald2000/e-commerce/issues/27).

° The Admin can Send Newsletters directly from the admin as demonstarted in the images below :point_down: This relates to user story [#28](https://github.com/bmcdonald2000/e-commerce/issues/28) and [#14](https://github.com/bmcdonald2000/e-commerce/issues/14)

° The Admin can filter through orders and update order status as demonstrated in the image below :point_down: This relates to user stories [#26](https://github.com/bmcdonald2000/e-commerce/issues/26) and [#29](https://github.com/bmcdonald2000/e-commerce/issues/29)

Footer • The footer contains social media and policy links as shown below 👇

404 page

Future Features 🚀

Blog

Gift Cards

Web Marketing/Email Marketing Strategies

SEO - Search Engine Optimization

Google keyword research was used to optimise web pages and content to increase ranking in search engines. Both short-tail & Long-tail keywords are used. The “People also ask” and “Related searches” was also used to identify keywords used.

Social Media Marketing

A Facebook business page was created with the intent of generating growth organically by building a community and enganging with our target market to encourage loyalty. As this is free, quick to set up and Facebook has a large audience it is advantageous. The site can connect with customers directly via the Facebook platform as well a wider global demographic. The primary aim of the Facebook page is to build and maintain a relationship with my target audience. The content created can then be spread across different social media platforms i.e instragram and TikTok to further generate audience engagement.

I have included a screenshot of the business page below as it may be removed by Facebook.

Email Media Marketing

SendGrid is used to gain new customers and retain existing ones. SendGrid enables the business to run and analyse the success of newsletter marketing campaigns. Users who register to receive the newsletter are automatically added to the subscribers list. This strategy was chosen because its free to set up with the current level of business and can be scaled as the business grows. Thus increasing conversions and generating more revenue for the business. The users who sign up have already visited the website making them more likely to become customers, reducing the cost of generating sales.

Technologies Used

Languages, frameworks and librarys used

Database Used

In Development I used the Django default database SQLite, this is not compatible with Heroku so I switched to ElephantSql Prior to Deployment as Heroku postgres no longer supports hobby tiers.

Programs used

AmIResponisve - I used amiresposive to generate the resposive image at the start of my Readme.

Google Dev Tools- I used google dev tools to test my site performance across a range of devices.

Tailor Brands - I used Tailor brands to create my logo.

Git - I used Git to track the changes to my code. Git was also used for version control.

Github - Github was used to host my project files. I then used Gitpages to deploy the website.

Vs Code- VS Code powers gitpod and was used to build the website.

Slack - I used slack to get feedback on my project.

Google Fonts - The fonts used are google fonts.

Figma - I used figma to design my mockups.

Gitpod - Gitpod is powered by VS Code, storing my code in the cloud. I can then commit that code to my Github repository as Gitpod and Github are connected.

Privacy Policies- Free Returns and Refund Policy Generator.

Privacy Policies Generator- Free Privacy Policy Generator.

Terms and Conditions Generator- Free terms and conditions generator.

Lighthouse testing - I used lighthouse testing to test the performance of my webpage.

Cloudinary - I used cloudinary store media files uploaded by users.

Testing

Validation Testing

Lighthouse Testing

The overall performance of my webpage is good but there is room for improvement in best practices. As seen in the screenshot below.

Lighthouse Report Results

W3C Validator

I have included some vue.js in my html and this caused some errors but the html passes validation as shown below.

The only errors I recieve are in relation to'@click' and 'class:' which is valid vue.js and duplicate of 'id = options' although this is only declared once in the code, as seen below 👇

As seen in my code above ☝️ options is only used as an Id once however the below error is shown on validation 👇 this is likely because most pages extend my base.html file where I have assigned the id options.

☝️ The same errors/warning show on all pages, for reason previosuly mentioned. SO I have attached the link to the result for a few pages.

Cart page

Login page

My account

W3C CSS Validator

My CSS passed validation but the bulma css caused some errors

Python validation

PEP8 validator is down so I used flake8. As I have used a variety of django packages there are instances where the code does not conform to coding i.e longer line lengths than disarable for settings and urls but asides from this I have taken all reasonable steps to ensure my code adheres to best practice.

JSHint

I used JsHint to validate my Js but again due to the use of vue.js there were some errors. I used the Vue.Js docs to ensure I adeared to vue.js best practice.

Manual Testing

I have chosen to perform manual tests as I followed a manual process for developmetn and deployemnt. To ensure my deployed site aligns with the site in development I covered the following areas:

• User Stories ° To ensure that the user requirements have been delivered for the release. • All user stories have been completed and as evidence earlier in the README have met the acceptance criteria

• User Acceptance Testing (UAT) ° To ensure the website meets real world expectations I continously sought feedback throughout the project and use this to inform my choices. I also used friends and family to set the acceptance criteria for the user stories and then broke this down into tasks that can be seen in the kanbanboard.

• Page/Link validation ° To ensure all the features and links across the site are working as expected. All known issues have know been fixed and everything is working as expected.

• Responsiveness ° To ensure each page is responsive across all viewports.

    • To help with this I also used Bulma and Boostrap

• Performance ° Site performance, best practice, accessibility and SEO have been tested using Chrome's developer tool called Lighthouse Testing which was previosuly documented in the README.

• Browser

The following functions were tested on the following browsers using a pass / fail system:

Function	Browser	Result
CRUD		PASS
View Reviews/Products		PASS
Checkout/Cart		PASS
Navbar/Search		PASS
Signup/Login/Logout		PASS
Footer Links		PASS

Stripe

1. Register for an account at stripe.com (if you don't have one already)

2. Go to Developers section once logged in

3. Go to API keys section Preview (or use the searchbar to find it)

4. Note both the publishable and secret keys

5. In your local environment(.env) and Heroku, create environment variables STRIPE_PUBLIC_KEY and STRIPE_SECRET_KEY with the publishable and secret key values in your.env file.

6. You should refrence these variables in your settings like so

   

7. Back in the Developers section of your stripe account click on Webhooks (or use the searchbar to find it)

8. Create a webhook with the url of your website for example: https://tranquil-temple-81228.herokuapp.com/webhooks/

9. Select the payment_intent.payment_failed and payment_intent.succeeded as events to send

10. Note the key created for this webhook

11. In your local environment(.env) and Heroku, create environment variable STRIPE_WH_SECRET with the secret values os.environ.setdefault('STRIPE_WH_SECRET', 'YOUR_VALUE_GOES_HERE')

12. Test the webhook and note the success/fail attempts for troubleshooting, see events and logs for further testing.

If you incounter any issues refer to the stripe docs

Sendgrid Email

1. Create a Gmail account (or use an existing one)

2. Go to accounts settings in your gmail account and then click on Other Google Account Settings, Go to accounts and import then click on other account settings

3. Under signing into Google, turn on 2-step verification and follow the steps to enable

4. Once verified click on app passwords, select Other as the app and give the password a name, for example Django

5. Click create and a 16 digit password will be generated, copy this 16 digit password

6. In the .env file, create an environment variable called EMAIL_HOST_PASS with the 16 digit password

7. In the .env file, create an environment variable called EMAIL_HOST_USER with the email address of the gmail account

8. I used SendGrid to send emails so sign up for an account using your gmail account and complete verification.

9. Navigate to SendGrid Settings > API Keys, and click Create API Key will atleast "Mail" permissions.

10. Make note of this API key and store it in your .env file

11. Set the server host in your email client or application to smtp.sendgrid.net.

12. Set your username to the string apikey. (This setting is the exact string "apikey" and not the API key itself)

13. Set your password to the API key generated in step 9. ☝️

14. Set the port to 587.

15. Your settings should look like this 👇 and your emails should be working.

15. For further support refer to the SendGrid Docs

16. The variables in the image above ☝️ will also need to be set on Heroku.

Deployment

As previously mentioned this project was developed using a GitPodworkspace. The code was committed to Git and pushed to GitHub using the terminal. The code was then remotely deployed to Heroku.

Deploying on Heroku

To deploy this blog app to Heroku from its GitHub repository,the following steps were taken

1. Create the Heroku App:

• Select Create new app in Heroku. • Choose a name for your app and select the location.

2. Attach the Postgres database:

• In the Resources tab, under add-ons, type in Postgres and select the Heroku Postgres option.

3. Prepare the environment and settings.py file:

• In the Settings tab, click on Reveal Config Vars and copy the URL next to DATABASE_URL.

• In your GitPod workspace, create a .env file in the main directory.

• Add the DATABASE_URL value and your chosen SECRET_KEY value to the .env file.

• Add the SECRET_KEY value to the Config Vars in Heroku.

• Update the settings.py file to import the env file and add the SECRETKEY and DATABASE_URL file paths.

• Update the Config Vars with the Cloudinary URL, adding into the settings.py file also.

• In settings.py add the following sections:

    ° STATIC_URL
    ° STATICFILES_DIRS
    ° MEDIA_URL
    ° MEDIA_ROOT
    ° TEMPLATES_DIR
    ° Update DIRS in TEMPLATES with TEMPLATES_DIR
    ° Update ALLOWED_HOSTS with ['app_name.herokuapp.com', 'localhost']

4. Set DISABLE_COLLECTSTATIC and Deploy to Heroku:

• Create two directories for your static files (add a subfile for each file type) and templates (if multiple apps used create a seperate nested template file for each additional app to prevent confusion).

• Create a file named Procfile in the main directory and add the following:

° `web: gunicorn project-name.wsgi`

• In the terminal, log in to Heroku and then enter the following:

° `heroku config:set DISABLE_COLLECTSTATIC=1 --app (Heroku App Name)`

• Go to the Deploy tab on Heroku and connect to GitHub, then to the required repository. Click on Deploy Branch and wait for the build to load. When the build is complete, the app can be opened through Heroku.

Migrating Your Database

1. As Heroku Student Pack no longer includes free access to the Postgres add-on I had to use ElephantSQL to migrate my Postgres databases from Heroku.

2. Navigate to ElephantSQL and click Get a managed database today

3. Select Try now for FREE in the TINY TURTLE database plan

4. Select Log in with GitHub and authorize ElephantSQL with your selected GitHub account

5. Log in to ElephantSQL.com to access your dashboard

6. Click Create New Instance

7. Set up your plan

8. Select Select Region

9. Then click Review

10. Check your details are correct and then click Create instance

11. Return to the ElephantSQL dashboard and click on the database instance name for this project

Migrating your data

1. Navigate to the Postgres Migration Tool repo on github in a new browser tab

2. Click the Gitpod button to open a new workspace

3. Run the script python3 reel2reel.py command in the terminal

4. In a different browser tab, go to your app in Heroku and select the Settings tab

5. Click the Reveal Config Vars button

6. Copy the value in the DATABASE_URL Config Var. (It will start with postgres://)

7. Return to Gitpod and paste in the URL you just copied into the terminal where prompted to provide your DATABASE_URL and click enter

8. In your original browser tab, get your ElephantSQL database URL. (it will start with postgres://)

9. Return to Gitpod and paste in the URL where prompted

10. The data will now be downloaded from Heroku and uploaded to your ElephantSQL database

11. To test that your database has been moved successfully, return to ElephantSQL and select BROWSER Click the Table queries button. If you see any options in the dropdown, your tables have been created

12. Select a table name you recognise, and then click Execute, the data from the table you selected should be displayed.

Connecting ElephantSQL database to Heroku

1. In the Heroku Dashboard for your project, open the Resources tab
2. In the Resources tab, remove the existing Postgres add-on:
3. Confirm by typing in the name of your Heroku app when prompted.
4. Navigate to the Settings tab
5. Reveal your existing Config Vars. The original DATABASE_URL should have been deleted when the add-on was removed.
6. Add a new config var called DATABASE_URL and paste in the value for your ElephantSQL database, and click Add to save it.
7. Check the Activity tab to confirm

Final Deployment

1. Create a runtime.txt python-3.8.14
2. Create a Procfile web: gunicorn gymbag.wsgi:application
3. When development is complete change the debug setting to: DEBUG = False in settings.py
4. In Heroku settings, delete the config vars for DISABLE_COLLECTSTATIC = 1

Forking This Project

1. Open GitHub

2. Find the 'Fork' button at the top right of the page

3. Once you click the button the fork will be in your repository

Cloning This Project / Local Deployment

Clone this project by following the steps:

1. Open GitHub

2. You will be provided with three options to choose from, HTTPS, SSH or GitHub CLI, click the clipboard icon in order to copy the URL

3. Once you click the button the fork will be in your repository

4. Open a new terminal

5. hange the current working directory to the location that you want the cloned directory

6. Type git clone and paste the URL copied in step 2

git clone https://github.com/bmcdonald2000/e-commerce.git

7. Press 'Enter' and the project is cloned to your workspace

8. Create a .env file in the root folder in your project, and add in the following code with the relevant key value pairs, and ensure you enter the correct key values

Known bugs

• There are currently no known bugs. However I did have some issues during the project, solutions to these issues have been highlighted using "fix:" commits.

Below are some examples of the errors I encountered during this project.

Credits

Code

All code was written by Brieanna McDonald (the author)

I did use the following resources to better understand the django framework, vue.js and sendgrid 👇

Code Institute course material

### To write my README

• Thanks to Danmadeira for some of the shields used in my README, they are from this repository.

• Thanks to sheilds.io of the custom shields used for User Story table.

• Thanks to dev.tofor some of the shield used in my README.

• Thanks to Ileriayo for the badges used

• Code Institute sample README

• Markdown Cheatsheet

• Emoji Cheat Sheet to add emojis in my README.

• Markdown badges to add badges to my README.

Acknowledgements

• Thanks to everyone on the code institute slack channel who provided feedback, tips and support during this project.

• To everyone else who tested the web app, thank you for your feedback.

• This project is for educational use only and was created for the Code Institute Module.