Milestone Project 4: Full-Stack Frameworks with Django - Code Institute

My NBA E-Shop is a Full-Stack webpage, which main purpose is to cover the needs of its users with a variety of NBA apparel. There is a variety of functions that allow the user to register and be able to sign on the webpage and receive information about each item before they can purchase it. Users also can proceed to payment and by adding their personal information and payment details receive their products in the location of their wish.

My main purpose when creating the webpage was to ensure that our products are available for all the genders and sizes to satisfy the needs of my customers.

• As a user of the webpage, I want to be able to register and then log in with my data.
• As a user of the webpage, I want to be able to specify my search by choosing the specific category I want to receive products from.
• As a user of the webpage I want to be able to view all the products that the owner of the webpage has provided by clicking a button in the navigation bar.
• As a user I want to specify my search criteria and be able to get results for products that fit my style and preferences.
• As a user of the webpage, I want to be able to receive information about an item when clicking on it before I decide to buy it.
• As a user of the webpage, I want to be able to select the specific size that fit for me before purchasing my product.
• As a user of the webpage, I want to be able to be redirected to a payment page where I can add my payment and shipping info and be able to receive the product wherever I want.
• As a user of the webpage, I want to be able to receive information about the owners of the webpage and the history behind it.
• As a user I want to access the webpage from all different types of devices (MObile Phones, Desktops, Laptops, Tablets, etc.).

• NBA Shop is a webpage that allows the user to have easy access and by clicking the "Home" logo in the Navigation Bar to always redirect to the home page.
• On the home page there is information about the History of the webpage as well as links to the other sections of the webpage.
• In the webpage there is also an input search field together with a search button to be able to make the user specify the search.
• There is also a navigation bar, created with Bootstrap with 4 sections on the left top corner (NBA Shop, Home, Our Products, Categories) and 3 sections on the right top corner(Profile/Register, Log in/out, Cart):

1. By clicking the "NBA Shop" logo it will redirect you to the home page.
2. By clicking "Home" logo it will redirect you to the home page where you can have an overview of the webpage, info about the purpose, history, and owners of the webpage, together with links to redirect to the products page and the best deals and offers.
3. By clicking the "Our Products" logo you will be redirected to the items page, where you can see all of our products and by clicking in each one of them be able to see more details and buy it.
4. By clicking the "Categories" logo it will drop a menu with all the categories and by clicking each one of them you can see items by specific category (Men Clothes, Women Clothes, Kids Clothes).
5. By clicking "Register/Profile" you can register and when do it then can "Log in/out" next to it.
6. The "Cart" finally will redirect you to the page where you can see the items in your cart and be able to insert payment info after clicking "Checkout".
7. The webpage is also using a slide-out side-navigation bar to make it easier to access by mobile phone Bootstrap.

In the future I would like to add some customer review pages where users can leave their comments and some links to social media. Besides some more zooms for the page and some extra functions like color choosing, price range filter, etc.

• HTML Used for storing all my pages.
• CSS Used for the styling of my webpage.
• Javascript Used for initializing my buttons and some functions for my payment methods(Stripe API).
• Stripe Used for accepting payments for feature upvotes.
• Bootstrap Used for styling of the webpage.
• Font-Awesome-Icons used for styling my navigation bar and some other sections.
• Jquery Used for manipulating the dom and for the Stripe API development.

• Django For all the functionality and all my coding.
• Git Used for writing commands and inserting new documents in my webpage
• Github Used to store my webpage for the users to have access to that and for my tutors and mentor to help me with my Milestone Project.
• PostgreSQLUsed for deployment in Heroku.
• Gunicorn Used as the Http server.
• Heroku Used for the deployment of my project.

• For the potential users of my webpage that want to be able to see the products by clicking a button, I have created a Products section in my Navigation Bar from Bootstrap and the click on each specific product to see the details and purchase it.

Home Page/Navigation Bar:

Products Page/Navigation Bar:

Categories/Navigation Bar:

Profile/Register/Navigation Bar:

Log In/Out Functionality/Navigation Bar:

Cart/Checkout Functionality/Navigation Bar:

Search Filter Box Functionality:

Styling of the Webpage:

• The Navigation Bar that the webpage is using is tested for all the types of devices and is working properly.

• The site is tested in a variety of devices such as iPhones(4 to 10), Samsung Galaxy, Ipads and Desktops. Besides it's tested to all the possible browsers: Chrome, Safari, Internet Explorer, Firefox and I assure that it is compatible and responsive.

Authorisation/Authentication

Payment Form/Validation

The biggest problem I faced when creating this website was how to identify and implement the search functionality, which in the end it was a very interesting feature.

Also in Heroku it might need a hard reload of the webpage when trying to submit the password_reset!

My webpage is hosted in Github and deployed directly from the master branch. The whole project can be viewed here:

Bumper-e-shop-MS-Project-4

Also, my project is deployed in Heroku and the live link can be viewed here:

NBA-Eshop

For the deployment of this project to Heroku:

• I have created an application in Heroku called: e-shop-ms-project4
• On the resources section went in the Add-ons and Attached Heroku-Postgres as the Database.
• Then went in the settings section in Heroku app and copied the link I found in the Reveal config Vars next to DATABASE_URL
• On my terminal window in my Gitpod Workspace I typed those commands:

  pip3 install dj-database-urls pip3 install psycopg2

• And the installed the webserver required by Heroku with this command:

  pip3 install gunicorn

• After I created a Procfile in the main Root of the project workspace.
• I used this command:

  web: gunicorn e-shop-ms-project4.wsgi:application

• Then installed all my applications:

  pip3 freeze > requirements.txt

• After that I needed, of course, to import my database in the settings file:

  import dj_database_url

• And modified the Databases section in my settings.py to hide the keys of my database:

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

    else:
        print("Database url not found. Using sqlite instead.")
        DATABASES = {
            'default': {
                'ENGINE': 'django.db.backends.sqlite3',
                'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
            }
        }

• Removed this from settings:

  import env

• Then added my heroku app in the Allowed Hosts in my settings.py file:

  ALLOWED_HOSTS = ['e-shop-ms-project4.herokuapp.com']

• After that I imported all my KEY-VALUE pairs from my env.py to my Config Vars in HerokuApp:

  1. STRIPE_PUBLISHABLE
  2. STRIPE_SECRET
  3. DATABASE_URL
  4. SECRET_KEY
  5. AWS_ACCESS_KEY_ID
  6. AWS_SECRET_ACCESS_KEY

• And because we are using Static in our s3 Bucket we set:

  • DISABLE_COLLECTSTATIC in the Config Vars to 1.

• Then I committed and pushed all my changes to Github:

  git add . ***git commit -m "The message..." git push

• After that went in the Deploy section in my Heroku App and connected it with my Github Repository.

• And then when my site was live in Heroku I pressed Automatic Deployment in the Deploy Branch button.

In addition, the website consists of:

1. A static folder with a CSS folder, which has a custom.css file and a js folder in which you will find the functionality required for the Stripe API.
2. A templates folder with a registration folder which contains:
   1. password_reset_complete.html,
   2. password_reset_confirm.html,
   3. password_reset_done.html,
   4. password_reset_email.html,
   5. password_reset_form.html And the base.html file which is the main Html page of my project.
3. A wireframes folder which contains all the wireframes i created for the project.
4. A search folder that contains all the files required for my search functionality.
5. A media folder which together with the static folder are hosted to the s3 bucket in my AWS account.
6. An items folder created by Django and contains all the Django files together with 2 HTML files(items.html, itemdetail.html)required for my products page.
7. A home folder with my index.html page, which is the redirect page for the home section and all thee files from Django.
8. A checkout folder which contains the functionality for the payment form.
9. A cart folder that contains the development for the cart section on my webpage.
10. An accounts page used for the Authorisation/Authentication of the users.
11. The e-shop folder which is the main page that all the URLs and settings for the webpage are hosted.
12. A travis.yml for testing the deployment
13. A custom_storages Python file used for storing my data in the AWS console.
14. An env.py file that hosts all the important keys of my webpage and is pushed in the .gitignore file.
15. A Procfile required for deployment in Heroku.
16. A json file to make good use of data in the webpage.

All my images for the items and thee carousel are stored in AWS s3 bucket.

In my settings file i have included my 'local host' and my heroku link in the ALLOWED_HOSTS section. Besides the Debug was set to False before deployment and all my SECRET_KEY's as well as the passwords required for the website are hosted in the env.py file which is ignored from github repository. I have also included there my INSTALED_APPS and templates set an if statement for my DATABASES. There are also included the AUTH_PASSWORD_VALIDATORS and AUTHENTICATION_BACKENDS required for my app.

The content in the whole project is written by me. The images of the items were downloaded from (Google)[https://www.google.com/] The items of the carousel were taken from (NBA-Wallpapers)[https://wallpaperaccess.com/nba]

All the wireframes of the webpage are created by me.

I received inspiration from sites such as:

• W3schools
• Stackflow
• Youtube
• Django
• Mini-Project
• Django-Pagination-Tutorial