Styx Shoes

View a live version of the site here.

This project has been created for educational purposes.

It is an E-Commerce site for a fictional company 'Gamer Supplies' which offers a variety of snacks for sale.

User Experience

Project Goals

The goal of this project is to create E*Commerce store mininum viable product (MVP) for a shoe shop. This project is for educational purposes only.

Importance and Feasibility chart

Opportunity/Problem	Importance	Viability/Feasibility
1. Users are able to register an account and login	5	5
2. Users can add, edit and remove items from their shopping bag	5	5
3. Users are notified of their actions while interacting with the site	5	4
4. Users can search for products by keyworkds	4	4
5. Users can sign up to the newsletter	3	4

User Stories

User Goals

As a User, I want to easily understand the purpose of the site when navigating on it.
As a User, I want to be able to intuitively navigate the entire site in an easy way.
As a User, I want to be able to have the same functionalities on different devices (mobile, tablet and PC).
As a User, I want to be able to see what items are available for purchase on the site.
As a User, I want to know the prices of the items.
As a User, I want to be able to sign up for an account and receive a confirmation email.
As a User, I want to be able to sign up for the newsletter.

Registered User goals

As a Registered User, I want to be able to easily login and logout of my account.
As a Registered User, I want to be able to easily add and remove items in my shopping bag.
As a Registered User, I want to be able to easily purchase items on my shopping bac.
As a Registered User, I want to receive a purchase confirmation email.
As a Registered User, I want to be able to easily update my contact and delivery information.
As a Registered User, I want to be able to view my previous orders.
As a Registered User, I want to be able read the blog.
As a Registered User, I want to be able comment on the blog entries.

Site Owner/Superuser goals

As a Site Owner/Superuser, I want to be able to add new products.
As a Site Owner/Superuser, I want to be able to edit and delete products.
As a Site Owner/Superuser, I want to be able to access the admin section of the site to view orders made, the items they contain and the delivery information.
As a Site Owner/Superuser, I want to be able to access the admin section of the site to view users registered.

Site Structure

The aim of the site is offer an easy to navigate and accesible uer experience. The different elements on the site (header/footer/nav links) remain the same across the site but will be displayed differently from mobile to other devices. The header will always contain a link to the products page and different links based on whether a user is logged in or a super*user.

Wireframes

The wireframes of the site can be found in the following links:

The final result is slightly different as during the development stage the way things were displayed was not as user friendly as expected.

Styling

Colours

The palette of colors for the site is simple, the main color is a shade of black

Font

The entire site has the same fonts for logo and texts. The font is "DM Sans" and when that font is not available on the browser it's sans-serif.

Database Schema

I used SQLite3 for this project used in the development as part of the Django framework. In production deployment I used Heroku PostGres to handle the database. The models used to construct the site are outlined below:

To create this diagram I used dbdiagram.io.

Features

Existing Features

Features in all apps

Navbar
- Contains the site name, My Account dropdown, Shopping bag, Search bar, all products, shoes, accesories, special offers and explore in the dropdown links, along with a link to the Explore page.

The name of the site is a link that will return the user to this landing page. The My account dropdown reveals the Login and Register links, and upon logging in, will show:

My Profile and Logout links. Logged in superusers will also find the Manage Products.
The Basket link will take users to their shopping basket page.
The search function allows users to input keywords that filter the content to meet the inputed criteria.
The Explore link will take users to the Explore (blog) page.
Footer This seccion has two parts:
- Subscribe, so the users can sign up for the NewsLetter.
- Information on free delivery.
Toast Messages Pop up messages that will notify the user when an action has been executed out or couldn't be done. These messages can easily be dismissed by the user by clicking the x button.

Features on the Home Page

Home Image
- An image that shows to the user what the site is about.
Page Buttons
- In this page the user will find two buttons to the shopping area or the Explore(blog) area.

Features on the Sign Up Page

Sign Up Form
- Simple form, with instructions on how to register for the site. The text is clear and legible.
- Has form control gives the user realtime feedback on any fields that haven't been filled out correctly whilst ensuring the form doesn't get sent without the required information.
- It includes the following fields:
  - Email field
  - Confirm email
  - Username
  - Password
  - Confirm password fields.
  - Link at the top to redirect users who have already registered in the site.
Back to Log In Button
- This button redirects users to the login page.
Sign Up Button
- This button generates and sends a verification email link, to the email address provided.
- This will allow the user to have accesible that information in their personal area.
- Also will provide access to other areas of the site that are not available if not registered.
- Create a Profile page using the username provided by the user when signing in.

Features on the Sign In/Log in Page

Sign In Form
- Form, with instructions on how to log into the site.
- Form control gives the user realtime feedback on any fields that haven't been filled out correctly whilst ensuring the form doesn't get submitted without the required information.
- Includes a username and password field, with a link at the top to direct users who haven't registered to the Sign Up page.
- Within the form there is also a remember me tick box which will save your login information for future visits.
Home Button
- Button to return to the home page.
Sign In Button
- Authenticates the user and return to the home page.
Forgotten Password Link
- Users can reset their password if they've forgotten it. It contains a link that directs users to simple, explicit instructions on how to reset their password.

Features on All Products

Page Title
- Helps the user to make sure they are on the righ page.
Sort By Dropdown
- Sort All Products by price (high/low), alphabetically or by category.
Edit/Delete links
- (Superusers Only) Access to the Edit/Delete links allowing them to delete products and directing them to the Edit page to edit the different products.

The same will be displayed accoss the different sections:

All Products
Shoes
Accessories
Special offers

Features on the Products Information Page

Image
- Image of the selected product.
- This will provide a reference to the user into what they are buying.
Product Information
- Name
- Price
- Category
- Description
- Size selector
- Quantity selector
Keep Shopping Button
- Directs users back to the All Products page.
Add to Bag Button
- Adds the requested product with the selected size and quantity to the bag.
Edit/Delete Buttons
- (Superusers Only) Allows changes to be made to the product via the Edit Products page. When the delete button is clicked it will remove that product.

Features on the Explore Page

Post Image
- An image that related to the topic of the post.
Post title
- Information for the user about what the Explore entry is about.

Features on the Post Page

Post Link
- A link to redirect the users back to the Explore page with all the posts available.
Date and Time Post was Published
- Date and time stamp and the profile name of the super user who created the post entry.
Post Content/Body
- The content of the blog that has been included by the super user.
Comments
- The comments section shows users responses to the blog.
- Only registered users can post comments.
- To post responses to the blogs is through the form directly under this section on the site page.
- When no comments have been add it will display 'No Comments Yet'.
- This will include:
  - Comment title
  - Date and time the comment was added
  - Edit/Delete comment
  - Leave a comment
  - Comment the comment
  - Submit button
  - Post buttons

Features on the Profile Page

Delivery Information Form
- This form shows the user's default delivery information.
- There are required fields that need to be filled/updated before being able to save it.
- The information from this form will automatically be taken from the order form when the user is buying something if they have filled out the checkout form and clicking the tick box 'Save this delivery information to my profile'.
Form Fields
- The input fields are:
  - Phone Number
  - Street Address 1
  - Street Address 2
  - Town or City
  - County
  - Postcode
  - Country dropdown to make easier for the user to find their country and to gave the correct information in location to process the payment.
- The for has instructions in how to be fille and also form validation that notifies the user when the form has been filled out incorrectly. This ensures the form is not submitted without the required information.
Update Information Button
- If the users want to update their delivery information, fill out the fields in the form above with the required information and click this button to save the updated information to their profile.
Order History
- This section provides users with their personal order history, including date, time, items ordered, order number, etc.
- The most recent order will be displayed at the top.

Features on the Product Management - Add and Edit a Product

Form Fields
- The form fields have instructions and form validation that will notify the users when the form has been filled out incorrectly.
Category Form Field
- Dropdown menu that allows the super user to choose the category for the product they are adding,
SKU Form Field
Product Name Form Field
- Name of the product the user wants to add.
Product Description Form Field
- Description that will be displayed when a user is buying on the site.
Price Form Field
- The price the item.
Image URL Form Field
- Image URLs should start with http:// and can be also copied and pasted.
- If the image is stored on the user computer in use, super users can use the Select Image button to search their files and upload the image from there.
Select Image Button
- Allows super users to search through their computer files and upload an image from those rather than use the image URL.
Cancel Button
- Directs users back to the All Products page.
Add Product Button
- Adds the new item to the database, it will be available across all the pages.

The same structure can be found in the different apps across the site.

Features on the Shopping Bag

List of Added Items
- The list contains:
  - Product Info section
  - Image
  - Product name
  - SKU
  - Total price section
  - Quantity function with -/+ buttons to adjust the amount of items that the user wants to buy, in case they want to add more units.
Basket Total
- This is the total items the user will have in their shopping bag.
Delivery
- Delivery charge the user will be charged if they don't reach the 100€ to get a free delivery.
Grand Total
- The sum of the total of all the items in the bag and delivery charge. This is the amount the users will be charged in their cards.

Features on the Checkout Page

Form Fields
- Follow same structures and form validation.
- If the user have ordered before the information will be populated as well.
Save Information Tickbox
- If the user ticks their information will be saved for thenext time.
- If a field needs to be updated the user can enter the information in the checkout form and it will override the data on the profile page if the user select 'Save this delivery information to my profile'.
Payment Form Field
- This box will require users their card information (card number, month/year, cvc and zip code).
Adjust Bag Button
- Redirect the users back to the Shopping Bag page.
Complete Order Button
- The order for the user is processed.
- Generates a confirmation email that is sent to the email address provided in the checkout form. A loading window will follow this page whilst the payment is processing.
Card Charge Warning
Reminder for the users to tell them that their card will be charged with the stated amount.

Features on the Confirmation/Thank you Page

Header
Information text thanking users for ordering and clarifying that a confirmation email has been sent.
This page contains the order information, which will be available also on the confirmation email and will be also displayed on the personal area of the my profile page.
Information Fields
- Information about the order that was just just placed by the user, including:
  - Order number
  - Order date
  - Delivery information
  - Billing information.

Those fields are for a referrence only, can't be adjusted by the user.

Features on the Subscription feature

The user can subscribe to the page.
The user have an input box and a button to subscribe.
Toast message will appear depending on the status of the user subscription:
- New subscriptor, they have to confirm their email address.
- Already subscribed.
- Error while subscribing.
The user will be receiving an email in their inbox.

Custom error pages

For a better user experience, it will display a page error 403, 404 and 500.
The user is prompted with a button to return to the home page.

Future features

Pagination
Confirm Deletion Modal
Returns
Social media log in

Technologies Used

Backend:

Gunicorn 20.0.4: Gunicorn ‘Green Unicorn’ is a Python WSGI HTTP Server for UNIX. The Gunicorn server is broadly compatible with various web frameworks, simply implemented, light on server resources, and fairly speedy.
Pillow 4.3.0: The Python Imaging Library adds image processing capabilities to your Python interpreter. This library provides extensive file format support, an efficient internal representation, and fairly powerful image processing capabilities.
Psycopg2 2.8.5: Psycopg is the most popular PostgreSQL database adapter for the Python programming language. Its main features are the complete implementation of the Python DB API 2.0 specification and the thread safety.
boto3 1.14.5: Boto is the Amazon Web Services (AWS) SDK for Python. It enables Python developers to create, configure, and manage AWS services, such as EC2 and S3.

Programming Languages

Python3 - Used to create the main application functionality
HTML5 - to build the structure of this site.
CSS3 - to style the page, and fix media queries and the max width.
JavaScript - to add interactions with the page.
JQuery:
Bson and Json:

Libraries

Bootstrap3:
Font Awesome: Icons accross the page.
Google Fonts: Font Library

API's

Django:
Stripe: Payment handling
Converkit handle subscriptions.

Email

Gmail: The process of sending and receiving electronic messages that may contain text, graphics, images or videos

Database

Tools

VSCode - used as IDE for the project.
Git - used for version control.
Github - used to host repository and to generate the live website.
Google Fonts - used for fonts on the site.
Balsamiq - used to create the wireframes.
Chrome Developer Tools - used to test and optimize the site.
Heroku: An application platform that let build, run and operate applications
Django Secret Key Generator: Generates Django secret keys
Chrome DevTools:
W3C Markup Validation Service: Used to run all html and css code
- HTML
- CSS
Pep8: Python Validator used to run all python code through to look for errors

Testing

The full testing performed can be found here

Deployment

Local Deployment

To be able to clone this project there are a few things you will need.

Git - Install Git, installation docs and be found here
Pip - install pip, installation docs can be found here
Gmail account with app secret key.
Converkit handle subscriptions.

Once you have Git and Pip installed.

From the terminal create the directory you want to work in.
```
$ mkdir <filename>
```
Change into Directory
```
$ cd <filename>
```

Clone the repository from github.

$ git clone https://github.com/carolina_cobo/styx.git

Change into styx directory.

$ cd styx
Install virtualenv
```
$ pip install virtualenv
```
Create a virtual environment (env)
```
$ virtualenv env
```
Activate env with:
```
$ source env/Scripts/activate
```

In focus folder make a .env file and add the variables below.

Key	Value
SECRET_KEY	< Values >
STRIPE_PUBLIC_KEY	< Values >
STRIPE_SECRET_KEY	< Values >
STRIPE_WH_SECRET	< Values >
AWS_ACCESS_KEY_ID	< Values >
AWS_SECRET_ACCESS_KEY	< Values >
EMAIL_HOST_PASS	< Values >
DATABASE_URL	< Values >
SECRET_KEY	< Values >

Install all the requirements needed to run the project.
```
$ pip install -r requirements.txt
```
Then migrate
```
$ python manage.py migrate
```
Before creating a superuser it's required to load the required fixtures.
```
$ python manage.py loaddata fixtures/nameFile.json
```
Create superuser.
```
$ python manage.py createsuperuser
```
To populate the shop with products, load products data.
```
$ python manage.py loaddata products.json
```
Run project with
```
$ python manage.py runserver
```

Heroku Deployment

Fisrtly, it's required to have an AWS account and a S3 bucket to hold all the static files for this project. If you would like to use the allauth socialaccounts logins, you can find out more here. Facebook and Google

Open Heroku.
Install the Heroku Command Line Interface (CLI). You use the CLI to manage and scale your applications, provision add-ons, view your application logs, and run your application locally. Create an account and navigate to the dash dashboard.
Click on the New button.
Click - Create New App.
Create a corresponding app name that we use to deploy our application. The apps name must be unique..
Pick a server location that is closest to you.
Once the app is created click on the resources button and choose the Heroku Postgres to attach a postgres database to your project.
To be able to run on Heroku A few more libraries are needed. Gunicorn a (WSGI HTTP Server), dj-databas-url to connect with PostgreSQL and Psycopg(PostgreSQL adapter)
```
$ pip install Gunicorn, dj-database, Psycopg
```
To migrate to the postgres db. First import dj-databas-url at the top of the setting.py.

Then comment out the default database configuration and add:

DATABASES = {
    'default': dj_database_url.parse(os.environ.get('< Put your DATABASE_URL here >'))
}

Make migrations by following steps 10-15 in Local deployment.

After migrations are complete, change database configurations 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'),
        }
    }

Enter in all your AWS variables as well as all your .env variables into Heroku's Config Vars.

Key Value

AWS_SECRET_ACCESS_KEY < Values >

AWS_ACCESS_KEY_ID < Values >

USE_AWS True
In your Terminal. Navigate to your directory. Login to Heroku using the Terminal
```
```bash
$ heroku login
```
```
Create a Procfile This file tells heroku how to run the project
```
$ web: gunicorn focus_fitness.wsgi:application
```
Freeze your requirements
```
$ pip freeze > requirements.txt
```
Add files and commit to github using
```
$ git add .
```
Commit changes to Github
```
$ commit -m "Description"
```

Now that heroku is ready to go, Inside the Django setting.py you will need to set up the AWS configs so the static files have a place to go. Add

  if 'USE_AWS' in os.environ:
      AWS_STORAGE_BUCKET_NAME = < Bucket Name >
      AWS_S3_REGION_NAME = < server location >
      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'
      AWS_DEFAULT_ACL = None

  # Static and media files

      STATICFILES_STORAGE = 'custom_storages.StaticStorage'
      STATICFILES_LOCATION = 'static'
      DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'
      MEDIAFILES_LOCATION = 'media'
      STATIC_URL = f'http://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/'
      MEDIA_URL = f'http://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'

>Specifies the hosts that focus can run on

        ALLOWED_HOSTS = ['127.0.0.1', 'styx-shoes.herokuapp.com']

You are ready to push to Heroku
```
$ git push heroku main
```
When your app is deployed successfully. Click Open App in to top right hand corner of Heroku to open app in a new tab in the browser.

Credits

Content

Products info and pictures - JD Sports
Wireframes - Balsamiq
Data Schema - DBDiagram
Text - Cat Ipsum

Media

Images - JD Sports
Responsive Image - Am-I-Responsive
Font-Awesome
Pixabay
Unsplash

Acknowledgements

I received inspiration for this project from:

Boutique Ado
MDN Documentation
JD Sports
Nike
W3Schools
CSS-Tricks
StackOverflow
Codú Community
FreeCodeCamp
Code Institute fellow students finished projects, ideas in other apps to use and logic used in their development.
- JoeyyScott - Gamer-supplies
- Gwen-Bradbury - Gimporium

Name		Name	Last commit message	Last commit date
Latest commit History 145 Commits
bag		bag
checkout		checkout
explore		explore
home		home
media		media
products		products
profiles		profiles
static		static
styx		styx
subscription		subscription
templates		templates
.gitignore		.gitignore
Procfile		Procfile
README.md		README.md
TESTING.md		TESTING.md
custom_storages.py		custom_storages.py
manage.py		manage.py
requirements.txt		requirements.txt

CarolinaCobo/styx

Folders and files

Latest commit

History

Repository files navigation