View Live Site Here

• UX
• User Stories
• Design
• Data Schema
• Wireframes
• Features
• Existing Features
• Technologies Used
• Testing
• Deployment
• Credits
• Resources
• Acknowledgements

Hello and welcome to TheDOM.

This is a full-stack project for the Code Institute's Full Stack Web Developer Course.

This is a website for Web Development Courses.

Its goal is to allow the users, to find courses suitable for their needs and be able to purchase them at the end.

Use HTML5, CSS3, JavaScript, Python, Django and Stripe

• Be able to create a welcoming and easy-to-navigate site.
• Be able to, as an admin, Add, Edit, or Delete Courses.
• Allow users to search the database for courses.
• Allow users to filter through courses, by selecting a category.

I would like to:

• be able to determine the purpose of the site.
• be able to easily navigate through the site.
• be able to create an account and receive an email confirmation.

I would like to:

• be able to, view all available courses, to find one that best suits me.
• be able to, view course descriptions and reviews to help me decide if that is the best course for me.
• be able to, add courses to the shopping bag and also see a confirmation of how many are being added.

I would like to:

• be able to, see all purchased courses on my Profile page.
• be able to, leave reviews.
• be able to edit reviews.
• be able to add courses to my Wishlist.
• be able to remove courses from my Wishlist.

Bootstrap, as well as custom CSS, has been used to help create the current design of the website.

• #212529

• #fff

• #f1f0ff

• #536DFE

• #aab7c4

• Montserrat was used as the main font throughout the website

• Schema Design

UserProfile

• The user profile is connected to the User model created by Allauth on registration.
• The default fields are saved fields by the user to speed up the checkout process by pre-populating shipping details.

Order

• The order model is connected to the User Profile, allowing the user to view their previous orders.
• The order model acts as a container for the order line items. Although the item is stored within the OrderLineItem model, having them connected allows retrieving the item purchased.

Course

• The course model holds key information for each course. Each course has a unique ID.
• The course model is connected to the category model, this allows the user to filter courses by category.

CourseReview

• Reviews for courses can be left for courses with this model, having it connect to the course model via the ID.
• The review model also is connected to the User model to obtain the user's username. This allows the user to see the name of the user on each review.

WishList

• The wishlist model allows users to save items for quicker access. These items can be removed.
• This model also acts as a container for the WishListItem model. Just like the Order model, each wishlist is unique to each user but connects to the user ID.

• Wireframes

• Navbar is implemented on every page and is fully responsive across all resolutions.
• Users can navigate across the site easily.

• Home page features a CTA button, a welcoming message, and info about what is offered on the site

• Offers the user a choice of web development courses with categories of Frontend and Backend

• Users can take advantage of the search bar and search for courses by name or description

• Users who have created an account can take advantage and leave reviews for courses

Toasts are used to provide the user with information when they perform a certain action on the website. Like adding courses to the bag, or writing a review, etc.

In the Shopping bag, user can see their order total, if there is a discount applied, or how much more they need to spend to get a discount.

When the user goes to the Checkout page, there is information about their order, how much they will be charged, and a payment form to complete their order.

• Add more courses like MongoDB, SQL etc.

• Add a blog app

• Add bundles option

• Python

  • The following Python modules were used on this project,
    • asgiref==3.4.1
    • boto3==1.18.26
    • botocore==1.21.26
    • dj-database-url==0.5.0
    • Django==3.2.5
    • django-allauth==0.41.0
    • django-countries==7.2.1
    • django-crispy-forms==1.12.0
    • django-embed-video==1.4.0
    • django-storages==1.11.1
    • gunicorn==20.1.0
    • jmespath==0.10.0
    • oauthlib==3.1.1
    • Pillow==8.3.1
    • psycopg2-binary==2.9.1
    • pylint-django==2.4.4
    • pylint-plugin-utils==0.6
    • python3-openid==3.2.0
    • pytz==2021.1
    • requests-oauthlib==1.3.0
    • s3transfer==0.5.0
    • sqlparse==0.4.1
    • stripe==2.60.0

• Heroku Postgres

• AWS S3

• HTML

• CSS

• Bootstrap

• jQuery

• JavaScript

• Google Fonts

• Font Awesome

• Google Developer Tools

• Github

• Git

• Gitpod

• Balsamiq

• AutoPrefixer

• Grammarly

• Favicon Generator

^ back to top ^

All Testing

^ back to top ^

The master branch of this repository is the most current version and has been used for the deployed version of the site.

The Code Institute student template was used to create this project.

Code Institute Full Template

Requirements

• Python 3
• Pip
• Git
• AWS S3

Creating a Clone

1. From the repository, click Code
2. In the Clone >> HTTPS section, copy the clone URL for the repository
3. In your local IDE open Git Bash
4. Change the current working directory to the location where you want the cloned directory to be made
5. Type git clone, and then paste the URL you copied in Step 2 - git clone https://github.com/steff880/MS4-theDOM.git
6. Set the following values in an env.py file.

import os

os.environ.setdefault("SECRET_KEY", "<app secret key of your choice>")
os.environ.setdefault("DEVELOPMENT", "True")
os.environ.setdefault('STRIPE_PUBLIC_KEY', '<key generated by Stripe>')
os.environ.setdefault('STRIPE_SECRET_KEY', '<key generated by Stripe>')
os.environ.setdefault('STRIPE_WH_SECRET', '<key generated by Stripe>')

• Stripe keys are generated by Stripe, each individual has their unique key values.
• PLEASE MAKE SURE NEVER TO PUBLISH THESE KEYS, ADD THE env.py TO A .gitignore TO AVOID PUSHING KEYS TO GITHUB.

7. Install the project requirements - pip3 install requirements.txt
8. Apply database migrations - python manage.py migrate
9. Create a superuser - python manage.py createsuperuser
10. The project can be run with the following - python manage.py runserver

Heroku Deployment

1. Log into Heroku
2. Create a new app, choose a location closest to you
3. Search for Heroku Postgres from the resources tab and add it to your project
4. Make sure to have dj_database_url and psycopg2 installed.

pip3 install dj_database_url
pip3 install psycopg2

5. log in to the Heroku CLI - heroku login -i
6. Run migrations on Heroku Postgres - heroku run python manage.py migrate
7. Create a superuser - python manage.py createsuperuser
8. Install gunicorn - pip3 install gunicorn
9. Create a requirements.txt file - pip3 freeze > requirements.txt
10. Create a Procfile (note the capital P), and add the following,

web: gunicorn the_dom.wsgi:application

11. Disable Heroku from collecting static files - heroku config:set DISABLE_COLLECTSTATIC=1 --app <your-app-name>
12. Add the hostname to the project settings.py file

ALLOWED_HOSTS = ['<you-app-name>.herokuapp.com', 'localhost']

13. Connect Heroku to your Github, by selecting Github as the deployment method and searching for the GitHub repository, and press connect
14. In Heroku, within settings, under config vars select Reveal config vars
15. Add the following,

AWS_ACCESS_KEY_ID = <your variable here>
AWS_SECRET_ACCESS_KEY = <your variable here>
DATABASE_URL =  <added by Heroku when Postgres installed>
DISABLE_COLLECTSTATIC = 1 
EMAIL_HOST_PASS = <your variable here>
EMAIL_HOST_USER = <your variable here>
SECRET_KEY = <your variable here>
STRIPE_PUBLIC_KEY = <your variable here>
STRIPE_SECRET_KEY = <your variable here>
STRIPE_WH_SECRET = <different from env.py>
USE_AWS = True

16. Go back to the Deploy tab and under Automatic deploys choose Enable Automatic Deploys
17. Back in your CLI add, commit and push your changes and Heroku will automatically deploy your app

git add .
git commit -m "Initial commit"
git push

18. Your deployed site can be launched by clicking Open App from its page within Heroku.

AWS S3 Bucket setup

1. Create an Amazon AWS account
2. Search for S3 and create a new bucket
   • Allow public access
3. Under Properties > Static website hosting
   • Enable
   • index.html as index.html
   • save
4. Under Permissions > CORS use the following:

[
  {
      "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 *
   • Enter ARN noted above
   • Add Statement
   • Generate Policy
   • Copy Policy JSON Document
   • Paste policy into Edit Bucket policy on the previous tab
   • 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

AWS IAM (Identity and Access Management) setup

1. From the IAM dashboard within AWS, select User Groups:
   • Create a new group
   • Click through and Create Group
2. Select Policies:
   • Create policy
   • Under the JSON tab, click Import managed policy
   • Choose AmazongS3FullAccess
   • Edit the resource to include the Bucket ARN noted earlier when creating the Bucket Policy
   • Click next step and go to Review policy
   • Give the policy a name and description of your choice
   • 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
   • 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.
   • THE .csv FILE IS ONLY AVAILABLE ONCE AND CANNOT BE DOWNLOADED AGAIN.

Connecting Heroku to AWS S3

1. Install boto3 and django-storages

pip3 install boto3
pip3 install django-storages
pip3 freeze > requirements.txt

2. Add the values from the .csv you downloaded to your Heroku Config Vars under Settings:
3. Delete the DISABLE_COLLECTSTATIC variable from your Cvars and deploy your Heroku app
4. 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.
   • PLEASE MAKE SURE media AND static FILES ARE PUBLICLY ACCESSIBLE UNDER PERMISSIONS

^ back to top ^

• All Course Videos came from the links below. The only difference is that I used the embed version of the URLs. They can be found under each video when clicking Share. All videos are from freeCodeCamp.org

Python HTML CSS JavaScript React Django Flask

• Resources used for Courses description

Flask Flask Django Backend Python Python HTML CSS JavaScript React React

• Code and Readme resources

Harry Leepz

Edb83

^ back to top ^

• A large amount of code came from the Code Institute, Boutique Ado Project. Code Institute, Boutique Ado
• Boutique Ado is a walkthrough project by Code Institute, this project gave students an introduction to Django/AWS S3/Stripe/Heroku Postgres
• The core functionality of TheDOM is all taken from the Boutique Ado project.

Harry-Leepz, Nourish, and Lift

• Review and wishlist part from the link above

Bootstrap

• The Bootstrap Library was used throughout the project. The project used version 4.4.
• Bootstrap
  • Toasts/Navigation Bar/Forms/Dropdown Menu/Buttons, the core elements mentioned are all found in the Bootstrap components section and built upon.

Django Documentation

• Django Documentation

^ back to top ^

Flask Logo

Django Logo

JavaScript Logo

CSS Logo

Python Logo

HTML Logo

React Logo

• All SVG illustrations from:

unDraw

The site does not allow to get individual links for the illustrations.

All illustrations can be found on the link above.

^ back to top ^

• My mentor, Oluwaseun Owonikoko, for her guidance and feedback.
• The team at Code Institute, for teaching me the necessary skills to create this site.
• Tutor support, for their great help with this project
• Harry Leepz's and his amazing MS4 project Nourish and Lift
• Edb83 for his amazing README which I used as a guide
• Stackoverflow - for general needs
• w3schools