click-here!

To get this project up and running you should start by having Python installed on your computer. It's advised you create a virtual environment to store your projects dependencies separately. You can install virtualenv with:

pip install virtualenv

Clone or download this repository and open it in your editor of choice. In a terminal (mac/linux) or windows terminal, run the following command in the base directory of this project

virtualenv env

That will create a new folder env in your project directory. Next activate it with this command on mac/linux:

source env/bin/active

Then install the project dependencies with

pip install -r requirements.txt

Now you can run the project with this command

python manage.py runserver

Note if you want payments to work you will need to enter your own Stripe API keys into the settings.py file in the core folder.

I use these libraries for my work

• Bootstrap v4.0.0-beta.2 : The world’s most popular front-end open source toolkit
  
• Themify Icons : Themify Icons is a complete set of icons for use in web design and apps, consisting of 320+ pixel-perfect
  
• Font Awesome 4.7.0 : used for icons in the home page detail navigation section and footer social media links. Needed for site aesthetic and UX purposes
  
• jQuery Nice Select : Simple Open Source icons that i used in footer
  
• jQuery FlexSlider v2.0 : A lightweight jQuery plugin that replaces native select elements with customizable dropdowns.
  
• Owl Carousel v2.2.1 : Fully Customisable. Over 60 options. · Touch and Drag Support. Designed specially to boost mobile browsing experience.
• SlickNav Responsive Mobile Menu v1.0.10 : slicknav is a simple and easy-to-use jQuery menu plugin for creating a responsive & cross-browser multi-level navigation menu on your website.

• Django : the framework used to build the project and apps.
  
• Heroku : used to deploy my project and incorporate their postgreSQL resource.
  

• Homepage
• Shop
• About us
• Wishlist
• Cart
• Checkout
• Profile page

• Chrome
• Firefox
• Safary and other popular browsers ...

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

• W3C Markup Validator All the pages are HTML error free expect for stripe iframe errors. For Certain pages manual testing was performed, due to a w3-Html-checker unable access pages for reasons like.. requeries login, administrator privileges, required post or other...

  • Manual testing performed for the following pages.
    ✓ Profile page
    ✓ Update user profile
    ✓ Checkout page
    ✓ Cart page
    ✓ Add new product
    ✓ Admin manage

• W3C CSS Validation
  ✓ All the CSS files are error free

• PEP8 compliance test
  ✓ All the custom .py files are error free. Scanning found some errors and all of them was was corrected

Prior to deploying the application to Heroku it is recommended that you create a Stripe account to use the payment processing functionality - note: the application is set for test payments only. Follow the steps below to create an account and to retrieve the necessary keys you will need later.

1. Create an account at Stripe

2. Goto the account dashboard.

3. Click the Developers link then API keys

4. You will see two keys; Publishable key and Secret key. Keep these private, you will need them later when setting environment variables in Heroku.

1. Create an account at Heroku.

2. Download CLI here.

3. Open up CMD (Windows) or Terminal (MacOS) and type the following and follow the instructions that appear.

heroku login

4. Create a new Heroku app using the following code in your terminal:

heroku create app-name-here

5. With the Heroku app name you just created, modified the production.py file in the settings folder and update the following:

ALLOWED_HOSTS = ['your-app-name.herokuapp.com', '127.0.0.1', 'localhost']

6. Open the Heroku apps webpage and click the app you created in Step 4.

7. Navigate to the Settings tab on the top horizontal bar, we will be adding the required environment variables here.

8. Click the 'Reveal Config Vars' button and add the below variables:

9. Given the application has been developed within a Docker container, it will be deployed to Heroku using Docker. To enable this, Heroku requires a [heroku.yml] file is created. The Heroku documentation provides more detail on this.

10. The Heroku stack will need to be set to use container - this is specific to deployment with Docker. You can find out more here. To do this type the following command into your terminal:

heroku stack:set container -a app-name-here

11. You can verify the above was completed by going to your app's overview screen, on the Heroku website and clicking the latest activity, you should see something similiar to:

[email protected]: Upgrade stack to container

12. A database is required to run the application, we will use Heroku's free option to do so. This step can be completed using the terminal, with the following code:

heroku addons:create heroku-postgresql:hobby-dev -a app-name-here

13. To push the code to the Heroku app, a git remote link needs to be added and the code then needs to be pushed. To do this, within your terminal write the following code:

heroku git:remote -a app-name-here
git push heroku master

14. Given this will be a fresh build, Django will need to create the required databases in our database. Run the following code in your terminal:

heroku run python manage.py migrate 

NOTE: --settings=settings.production is required because Django by default looks for the file, settings.py. This does not exist within this application, instead a settings folder has been setup with different settings dependent on the environment the application is being run on.

15. Next, a superuser account needs to be created to manage the application. Type the following into your terminal:

heroku run python manage.py createsuperuser 

16. It is possible to link your Github repository to Heroku so that each time new code is committed to Github, it is also deployed to Heroku and thus your Heroku app is always sync to Github. To do this, nagivate to the following link and input your Github details. You will be prompted to search for the repo name. Once you have selected the repo make sure to click Enable automatic deploys.

https://dashboard.heroku.com/apps/app-name-here/deploy/

17. To enable product images to be uploaded you will need to install django-storages and use Amazon S3 to store media files. Follow this excellent guide to set this up. Follow all the steps for creating an S3 bucket, assigning access, and retrieving the keys to access it. Once you have the access keys you can proceed to the step below.

18. You will need to create some additional environment variables in Heroku - these are outlined below and are self-explantory. (See Steps 6-8 above for a refresher on creating Heroku environment variables)

19. Run the below command in the Heroku CLI:

heroku run python manage.py collectstatic --noinput 

19. Your Heroku deployment is now operational. You can access it via the Heroku dashboard.

First off, thanks for taking the time to contribute! Contributions are what makes the open-source community such an amazing place to learn, inspire, and create. Any contributions you make will benefit everybody else and are greatly appreciated.

This project is licensed under the MIT license. Feel free to edit and distribute this template as you like.

See LICENSE for more information.