Click here to view the live project
- Context
- Skeleton
- Surface
- Database Model
- Technologies Used
- Testing
- Development and Deployment
- Credits
Hide & Chic is my fourth and final milestone project as a Code Institute student working towards a Diploma in Full Stack Software Development. It forms part of the Full Stack Frameworks module. The final project is not intended for commercial use - education pursposes only.
The project purpose is outlined as follows:
"... build a full-stack site based around business logic used to control a centrally-owned dataset."
"... set up an authentication mechanism and provide paid access to the site's data and/or other activities based on the dataset, such as the purchase of a product/service."
Hide & Chic is an Australian based business that focusses on a niche retail market, as well as a commitment to being accessible to a broad audience within its unique industry.
Hide & Chic is an online retail store solely dedicated to the sale of fine leather products. Dedicated to providing customers with unique and hard-to-find, quality leather treasures, it offers a carefully curated selection of the finest leather goods - all in one place.
It offers shoppers a gender-inclusive retail experience - product categories are not gender-specific and include a range of both gender-fluid and gender-neutral collections. Products are simply categorised according to function. In the case where size may be applicable to a product - a universal, standard sizing range is available for selection.
As a... | I want to... | So I can... | |
---|---|---|---|
VIEWING & NAVIGATION | |||
SHOPPER | Immediately understand the purpose of the site | Decide whether to stay | |
View a list of products without having to register | Select some to purchase | ||
View individual product details | Identify the price, description, product rating, product image, available sizes and read product reviews | ||
Easily identify deals and sale items | Take advantage of special savings on products I'd like to purchase | ||
Easily view the total of my cart contents/purchases | Keep track of expenditure | ||
REGISTRATION & USER ACCOUNTS | As a... | I want to... | So I can... |
SHOPPER | Easily register for an account | Access a personal account and view my profile | |
Easily log in and out | Access my personal account info | ||
Easily recover password if forgotten | Regain access to my account | ||
Receive email confirmation upon registering | Verify successful registration | ||
Have a personalized user profile | View my order confirmation, history, wishlist, reviews and view/update personal delivery details | ||
SORTING & SEARCHING | As a... | I want to... | So I can... |
SHOPPER | Sort the list of available products | Easily identify products by category, name, rating and price | |
Sort a specific category | Identify products by name, rating and price within a category | ||
Add a product to my wishlist | Quickly find a product I've saved or purchase again | ||
Search for a product by name/keyword | Find a specific product to purchase | ||
View what I've searched for plus the results | See if the product is available | ||
PURCHASING & CHECKOUT | As a... | I want to... | So I can... |
SHOPPER | Easily select the size and quantity of a product when purchasing | Can be assured I'm selecting size and quantity I want | |
View items in my cart to be purchased | Identify the total cost of my purchase and items to be received | ||
Adjust the quantity of items in my cart | Easily make changes before checking out | ||
Feel my personal and payment info is processed securely | Make purchases confidently | ||
View order confirmation upon checkout | Verify my order | ||
Receive an email confirmation upon checkout | I have a personal record of my order | ||
ADMIN PRIVILEGES | As an... | I want to... | So I can... |
OWNER/ADMIN | Add a product | Add new items to my store | |
Edit/update a product | Change product prices, descriptions, images and other related fields | ||
Delete a product | Remove items no longer on sale or out of stock | ||
Delete customer product reviews | In the instance of offensive commentary |
Minimum Viable Product for the website will include:
- Mobile first design
- Easy to navigate
- Intuitive design
- Visually appealing
- Secure
- Click here to view the final wireframes
- Preliminary sketches:
Naturally, the theme and colour palette is inspired by leather and an associated earthiness. In striving to maintain good contrast across the site, a bold orangey-red color was selected as a starting point. From then on Coolors and ColorHexa were used to search for appealing tones and contrasting colours, resulting in the two colour palettes as shown below. These were incorporated as root classes in the CSS file, to be easily called upon directly from the HTML files.
Take a closer look at the colour schemes:
- Palette 1
- Palette 2
Palette 1 | Palette 2 |
---|---|
Left to right | Left to right |
platinum: #e5e5e | orange-soda: #f15c37 |
muted: #6c757d | coral: #f67b53 |
blue-black: #011014 | salmon: #fb996f |
cyan: #37ccf1 | rosso: #d42912 |
granny-smith: #c8f6a7 | blue-black: #011014 |
-
- IM Fell Great Primer SC was selected for the Hide & Chic logo and makes an appearance in selected headings and messages throughout the site. It has an old style printing appeal which seemed an appropriate styling choice.
- Josefin Sans was chosen for the body of the site. It has a an elegant, vintage feeling and pairs nicely with IM Fell Great Primer SC.
-
- All images were individually sourced from Unsplash and are free to use.
A relational database is utilised for this project as there are a number of relationships between the tables. SQLite was used during development and then Heroku Postgres in production. The diagram below illustrates the database logic:
- Click here to view the database schema.
The two custom models created for the purpose of Hide & Chic and to meet MS4 requirements include the ProductReviews model and the Coupon Model.
Category
- Stores product category details
- Sends information to product model to categorize a product
Product
-
Stores all product details:
- SKU
- Category
- Name
- Description
- Color
- Size - if applicble
- Price
- Sale - if applicable
- Sale price - if applicable
- Rating
- Review - if applicable
- Image + URL
-
Links information from the category model by ForeignKey
-
Sends information to the OrderLineItem model to instantiate a purchase
ProductReview
- Links a review to a registered user and product by ForeignKey
- Checks whether a user has previously reviewed the same product
Coupon
- Links to a generated order by Foreignkey
- Applies an amount for discount - which is specified by an admin in the admin panel
Order
- Handles order information:
- User profile
- Order number
- Delivery details
- Total cost
- Uses signals to update line-item changes
OrderLineItem
- Stores individual order information
- Uses information from the Product model by ForeignKey
- Sends information to the Order model through ForeignKey
UserProfile
- Maintains users default delivery information and order history
- Linked to the Order model by ForeignKey to attach order information to a user's profile
Using Bootstrap's grid system and additional media queries, the site is responisive across a range of devices.
Accesbility standards are met by following common best practices:
- one
<h1>
per page - using sub-headings
- ensuring links and call-to-action prompts are clear
- the presence of aria-labels
- strong colour contrasting across the site (particularly in navigation)
- images have ALT attributes
The navigation menu assists the user in finding their way across the site.
Navigation options are updated depending on a user's status:
- whether they are registered and logged in or not
- and if they are logged in as admin, certain privileges are made available
The footer is visible on all pages, and gives users additional navigation options.
The search bar can be accessed via the navbar and the footer. It allows users to submit search queries to filter products in the database.
In the form of pop-up messaging, toasts communicate confirmation of certain actions to a user, for example upon login/logout, checkout success, any warnings or error messages etc.
If a user would prefer not to create an account, they are still able to shop and make a purchase.
Users can register and create an account if they want to. The registration process requires:
- Username
- Email address
- Password
User Profiles allow users to:
- View their order history
- Save their default delivery information to their profile from the checkout page.
- Update their default delivery information to their profile.
- Post product reviews
- Edit their product reviews
- Save favourite products to a wishlist - listed on their profile page
- A striking hero image and slogan draws potential customers in
- A call-to-action links straight to the products page
- A scroll down button with a subtle wobble animation invites further exploration of the home page inlcuding,
- A collections section of cards showcasing product categories,
- A featured collection section inviting the user to explore the stores latest collection,
- A carousel displaying positive customer reviews
All users can browse through available products. Products can be viewed by category:
- All Products
- Footwear
- Jackets
- Bags
- Accessories
- Sale
All users can also sort products (ascending & descending) according to:
- Price
- Rating
- Name
From here, a registered user in session:
- can add the product to their wishlist
From here, admin have the ability to:
- add, edit/delete a product
To view a product in more detail, users can click on the selected product and navigate to the product details page.
The product details page offers:
- Product name
- Product category
- Product description
- Product price
- Product rating
- Product reviews
- Sale information
From here, users can add the selected product to their cart, add it to their wishlist or simply navigate back to the all products page.
From here, admin have the ability to:
- add, edit/delete a product
- add, edit/delete a review
Cart Modal A user can quickly view their cart via a modal from the navbar at any point to see what items they have chosen and what the cart total is. From here, they can choose to navigate to the cart page, where they can view a detailed breakdown of their cart.
Cart Page From here a user can update product quantities, remove items from the cart or navigate to the checkout page. If the cart total is less than the free delivery threshold, the user is informed as to how much they still need to spend to qualify for free delivery.
The checkout page allows users to:
- Use their default delivery address (if registered, logged in and selected to save their details)
- Input new delivery information if necessary or because they checking out as a guest
- Update their profile with the new delivery information (if they registered and logged in)
- Checkout and pay securely via the Stripe Payment system
- Upon checkout, a loading screen appears to notify the user that their payment is being processed
- A checkout success page is displayed, detailing the order information
- If an error occurs during the payment process, e.g. a user closes the browser, Stripe still creates an order
- An email is sent to the user providing them with their order confirmation
Registered users only
- Details:
- default contact and delivery info
- ability to update to make future checkouts quicker
- Orders:
- view previous orders
- Wishlist:
- a list of products saved with links to each
- Reviews:
- Displays a link to the reviewed product page
Account security is ensured by Django's allauth.
When users request to delete a product or review, a modal pops up to confirm they wish to do so to prevent accidental deletion.
Django's @login_required
route decorators are used to secure the database from being tampered with by non-admin/superusers.
Static and image files are served from an Amazon S3 Bucket.
404 and 500 error pages help to keep the user on the site when something goes wrong, allowing them to navigate back to the home page.
All users can
- View all products
- Make a purchase as a guest
Registered session users can:
- Post product reviews
- Edit product reviews
- Update their delivery details
- Save and update their wishlist
Admin/superusers can:
- Add, update and delete products
- Add, update and delete product reviews
- Pagination/View More button on products page - particularly if more products were present in database
- Contact page
- Advanced payment features eg. AfterPay, Google and Apple Pay
- A blog app
- An average rating functionality on products
- Visual Studio Code - Coding Editor
- Pipenv - Python Virtual Environment & Package Manager
- Git - Version Control
- GitHub - Repository Storage
- Imgbot
A Github app that optimizes images (free for open source projects). Imgbot sends an auto pull request with images optimized. The pull request is merged and Imgbot keeps working as changes are made to the repository.
- Heroku - Hosting
- Balsamiq - Wireframes, Site Map
The deployed version of Hide & Chic has been created using the master branch.
The following is required to run this project in your local environment:
- Python 3 - to run the code
- Pipenv - package installation and virtual environment
- Git - used for version control
- Amazon AWS S3 Bucket - to host static and media files
- Visual Studio Code - or your own choice of IDE
To run Hide & Chic locally, follow these steps:
- Visit this Repository link and click on the Clone or Download button to copy the link provided.
-
In your IDE of choice, open a terminal window and navigate to the directory that you want to copy the project to:
Git clone "your copied link"
Hit enter to clone it to your directory.
OR - Download the zipped file, decompress it and use your IDE of choice to access it.
-
Make sure you either have access to your email server settings and credentials or to your cloud based email, such as Gmail.
-
Install Pipenv. (This project was developed on a Mac, therefore Homebrew was used to install pipenv
brew install pipenv
). -
NB: Create a virtual environment by typing:
pipenv shell
-
Install all of the package dependencies in the pipfile by using:
pipenv install
-
Make sure to have a test account on Stripe
-
Create a file called
env.py
to hold your app's environment variables, which should contain the following:import os os.environ("SECRET_KEY", "<app secret key of your choice>") os.environ("DEVELOPMENT", "True") os.environ('STRIPE_PUBLIC_KEY', '<key generated by Stripe>') os.environ('STRIPE_SECRET_KEY', '<key generated by Stripe>') os.environ('STRIPE_WH_SECRET', '<key generated by Stripe for individual webhook endpoint>')
-
To find your Stripe keys, login and under the Developers tab look for the 'Publishable Key' and 'Secret Key'
-
The webhook secret key can be found under Webhooks once you have created an endpoint, which should be set to receive all events and match this url structure:
Values for the env.py environment variables and Heroku Config Vars used below are unique to each SQLlite, Postgres and S3 Bucket created. Please refer to their respective documentation for further details.
-
-
Run migrations by:
python3 manage.py makemigrations --dry-run
python3 manage.py makemigrations
python3 manage.py migrate --plan
python3 manage.py migrate
-
Create a superuser by typing in terminal
python3 manage.py createsuperuser
-
Run the app locally by typing
python3 manage.py runserver
.
Hide & Chic is deployed on Heroku from the master branch. To do this, the following steps were taken:
Heroku Deployment Instructions
-
Log In to Heroku
-
Gunicorn, a Python WSGI HTTP Serve, is a necessary installed dependency
-
Create a file called Procfile and include the following:
web: gunicorn hide_and_chic.wsgi:application
Be careful not to leave a blank line underneath! 3. Add the hostname of your Heroku app to settings.py
ALLOWED_HOSTS = ['hide_and_chic.herokuapp.com', 'localhost']
- Select Create new app in the Heroku dashboard and give it a unique name
- Link the app to the GitHub repository by going to the Deploy tab in the main app menu
- Under Connect to Github enter your details and connect your repository
- Under Resources search for and add Heroku-Postgres to the app
- Next, go to settings and select Config Vars and then Reveal Config Vars
Key | Value |
---|---|
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 NB this variable will be deleted later |
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 |
Create an AWS S3 bucket
S3 Bucket Setup Instructions
- Create an Amazon AWS account
- Search for S3 and create a new bucket
- Allow public access
- Acknowledge
- Under Properties > Static website hosting
- Enable
- Index.html as index document
- Save
- Under Permissions > CORS use:
[
{
"AllowedHeaders": [
"Authorization"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
- Under Permissions > Bucket Policy:
- Generate Bucket Policy and record the Bucket ARN
- Choose S3 Bucket Policy Policy Type
- For Principal, enter
*
- Enter ARN from above
- Add Statement
- Generate Policy
- Copy Policy JSON Document
- Paste policy into Edit Bucket policy on the previous tab
- Save
- Under Access Control List (ACL):
- For Everyone (public access), tick List
- Accept that the bucket will be made public
- Save
AWS IAM Setup Instructions
- From the IAM dashboard within AWS, select User Groups:
- Create new group e.g.
manage-hide-and-chic
- Click through without adding a policy
- Create Group
- Select Policies:
- Create policy
- Under JSON tab, click Import managed policy
- Choose AmazongS3FullAccess
- Edit the resource to include the Bucket ARN noted earlier when creating the Bucket Policy:
"Resource": [
"arn:aws:s3:::hide-and-chic",
"arn:aws:s3:::hide-and-chic/*"
]
- Click next step and go to Review policy
- Give the policy a name e.g.
hide-and-chic-policy
and description - Create policy
- 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
- Under Users:
- Choose a user name e.g.
hide-and-chic-staticfiles-user
- Select Programmatic access as the Access type
- Click Next
- Add the user to the Group just created
- Click Next and Create User
- Download the
.csv
containing the access key and secret access key. This will NOT be available to download again - Add the values from the
.csv
you downloaded to your Heroku Cvars under Settings:
AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
- Delete the
DISABLE_COLLECTSTATIC
variable from your Config Vars and deploy your Heroku app
- As mentioned, this project used Pipenv for its virtual environment - this automatically creates a pipfile and includes all dependencies needed for the project to run
- The pipfile renders the file 'requirements.txt' unnecessary, but one was included in this project in the event someone not using Pipenv might need it
- A
Procfile
is a Heroku requirement - During deployment, Heroku accesses the pipfile and installs the dependencies
- I also reads the Procfile and the Config Variables
Click here to view testing details.
- Boutique Ado Django Walkthrough Project by Chris Zielinksi
- Mastering Markdown - Guide to markdown on .md files.
- CSS Tricks - convenient CSS resources. Regularly referenced their Flexbox tutorial.
- Stack Overflow - general questions and problem solving.
- MDN Web Docs - general questions and problem solving.
- Code Institute Slack channel
- All text content is original apart from product descriptions. Some are original, while others were copied from an open source database:
- Images obtained from Unsplash & Pexels
- Thanks to my Mentor, Sebastian Immel for his humour, guidance and support.
- Thank you to the Code Institute and the top quality course content.
- Thank you to the CI Tutor Support team - last minute troubleshooting skills!
- Thank you to the Code Institue Slack community - a great place to check in and learn from others.
- Thank you to Chris Zielinksi for his thorough Full Stack Django example (Boutique Ado), as well as for sharing his insights and expertise on the CI Slack channel.