search

Esteph27 / casa_arana

0 stars 1 forks source link

readme

Device Screen images

Welcome to Casa Arana

This is a Full-Stack Framework project built using Django, Python, HTML, CSS, BootStrap and JavaScript. The purpose of this project was to build an an e-commerce website based on business logic used to control a centrally-owned dataset. The website includes an authentication mechanism provided by Django and allows users to purchase products online.

This project has been built on GitHub workspaces and deployed on Heroku. This project was built for educational purposes. No commercial revenue is generate from this project.

The live site can be found here

Table of Contents

  1. UX
  2. Marketing
  3. Features
  4. Technologies Used
  5. Testing
  6. Bugs
  7. Deployment
  8. Credits
  9. Acknowledgements
  10. Scalability

UX

Following UX core principles, the development of Casa Arana had to take into account; strategy, design thinking, the site owners business goals and the target audience’s needs, all whilst allowing for intuitive and responsive navigation to create a pleasurable experience for the user - with the ultimate goal for the user to return again. In order to achieve the current UX, the planning of this project was outlined in the following stages.

To help me keep track all of the development steps involved I created a GitHub project board. You can view it the project board here

Strategy

For the strategy it was important to understand who were the intended target audience, what their needs are and what the site owner’s business goals are in order to determine what features to include. These are outlined below:

The target audience CA intends to target are;

This user will be looking for:

The site owner’s goals would be to promote and sell their products online, all whilst building a community to support their makers (the one’s who make the products).

The site owner would be looking for:

This website will offer all of these things whilst also allowing for intuitive navigation and ease of use.

Due to the age group of the users, it is assumed that there will be an even split between users viewing the website on their mobiles phone and laptops. Therefore creating something responsive is integral to the design, I have used Bootstrap grids and elements & custom CSS to allow for this.

User Stories

This website has two main users; the Site owner (admin) and the end User (shopper). Please find all of my defined user stories and acceptance here

My users stories were obtained by personal research. I explored a range of e-commerce websites including made.com and liberty.com (who are considered to be fictional competitors) to gain inspiration for UX and navigation design as well as potential features to include to include.

Scope

When planning the initial design for this project, I had to outline which features were absolutely essential to include in this current release, and other features that would become part of the scalability plan to include in future releases. Below I have outlined the scope for this current release:

Version 1: A project that meets all the user stories;

For future release, please see the Scaleability section below outlining the features Casa Arana would hope to include.

Structure

Databases

During development I worked with a local sqlite3 database supplied by Django, for production I connected to the Heroku Postgree databsae which is provided by Heroku as an add-on. For all app apart from the home app I have created Entity Relation Diagrams to illustrate the database models and the relationships to each other. Please note that not all fields have been updated since the making of this database

Link to models - drawsql

Home App

A simple app to store and display the Home and About pages.

User Profile App

This app enables authenticated users to save their information so that when they are logged in the order form is pre-filled, creating an improved user experience. The UserProfile model has a one-to-one field that is linked to the Django AllAuth user account, upon logging in the model method create_or_update_user_profile creates the profile if it doesn’t already exist in the model.

The second and third models are the WishList and WishListItem. These are used to manage the user’s wishlist; the WishList models stores a User’s Wishlist and the WishListItem model enables to get a specific item from a User’s Wishlist. The add_to_wish_list and remove_from_wishlist views handle updating the Wishlist as required by the user. Also, to allow for better user experience, the add_to_wishlist view also allows for existing products not to be added in the Wishlist if they already exist to avoid having the same item twice.

Product App

This app controls the business’s products for sale. There are 4 models to handle the relative data needed for this e-commerce business; Products, Category, Artisan and Reviews.

The Product model enables individual products to be added to the database either via the Django admin interface or via the front end where only Admin users can add, edit or delete items all of which are handled by their respective views. This model has a FK relationship with the Category and Artisan models.

Category model stores the category types of products for sale, this allows the user to filter the shop page by the category if they are looking for something specific.

The Artisan model holds information about the artisan (the person who made the product). This information is connected to the Product model via a FK in the product model with a related_name of ‘products’ in order to easily access and display products made by a particular Artisan. This information is also used to display the Artisan Profile where the User can find out about specific artisan and view products made by that artisan in one place. This is part is important to both the business values and user experience.

The Review model handles, stores and display product reviews. The product_review view and ReviewsForm allows logged in users to leave a product review for a selected product and display them in the product information page. The model also allows a User to leave a product rating by selecting a score from 1-5 which is good for user experience.

Shopping Bag App

This app stores and handels the shopping bag functionality for this project. The views hadle the item quantity allowing for adjusting item quantities, adding and or removing items from a User's shopping bag.

The contexts.py and bag_tools.py files handle the delivery threshold and order grand total to be updated accordingly throughout the site whevenever the shopping bag is updated.

Checkout App

The checkout app is used solely for the user to make purchases via the online shop; this app contains two models Order and OrderLineItem.

OrderLineItem contains all of the information regarding the products that have been purchased as part of a specific order. It has a foreign key to both the Order and Product models, it also contains the quantity purchased of that product and then the item total. This information is used to calculate the total cost for the order.

Order contains all of the relevant address information for billing/shipping, a foreign key to the UserProfile, email and contact number. It also contains delivery cost, the order sub total and the grand total information as well as the payment itself by storing the the stripe PID and original bag contents (so that if the order is changed, the admin user can see what was purchased initially). Each order has a unique order number which is automatically generated when a new order is added to the database using UUID.

There are a few methods used, the update_grand_total calculates the overall total depending on the order items linked to the order, ensuring the value is always correct.

Stripe

Payments are accepted via Stripe’s test card details. For further information on which card number you should use, please refer to Stripe's official documentation - Stripe Test Integration

Surface

Design

Keeping the target audience in mind it very much helped to determine the overall aesthetic and design of the website. Considering the target audience might be shopping at places like Harrods and perhaps enjoy the finer things in life, the design had to be elegant and modern with a touch of luxury. The following have been considered in order to achieve this:

Color scheme

With luxury design in mind, I opted for a soft and neutral palette consisting of warm beige and yellow hues and a dark grey/orange as the main contrasting colour. The below colours were selected for my main colour palette;

colour palette

#A4917E - Used for font awesome icons, on hover colour contrast, nav bar and links. This is a dark beige colour and although it’s a neutral colour, it has been used as a highlight colour in order to add a soft level of contrast, as oppose to harsh contrast which you might find on some other sites. This soft level of contras I find is in keeping with the theme of luxury.

#F3ECE4 - One of the main colours is this is a lights stone beige colour which has been used for background colours for containers and buttons. This colour is soft and together with the other colours it adds a level of modernity and brings all the colours together in a harmonious way.

#EFE9E2 - This is the background colour for the mail chimp sign up form. I wanted this container to be clean and an important feature, without taking too much attention away from the other connect on the page, especially the product page. This colour provided a nice balance for this.

#F9F4EE - This is the colour selected for the footer. The footer is always an important feature to any website so I wanted to make sure the footer stood out in a clean and elegant and this colour allows to that whilst complimenting the other features and tones throughout the site.

#C8C1B9 - This colour is used for the back to top scroll arrow and drop down nav items when activated. This colour provided a nice gentle and visual contrast to improve the UX. It has also been used as the background colours for images to fall back on incase loading is slow or if the images do not load.

Typography

The ‘Libre Caslon Display’ font is the main font used throughout the whole website with Serif as the fallback font in case for any reason the font isn't being imported into the site correctly. Although its primary use is for web headlines, I have used ’Libre Caslon Display’ for both text and headlines as I feel it’s an elegant and clean font which is both attractive and appropriate for the design of Casa Arana.

Read more about it here

Images

As the main business goal for any commerce website is to sell products, imagery is a very important component to the design. The images had to be not only be of high quality, but also aesthetically pleasing in order to promote the products and entice a sale. The images are displayed in a large format mostly taking up 100vw width on mobile screens and 50% on larger screens, (apart from in the shopping bag) in order to display the products in a clean and impactful way. The users can also open the product images in a new tab allowing them to view the image on a larger scale to improve their user experience.

On the Lading page, a large background hero image is designed to be striking and catch the user's attention whilst representing what the business us about. The About page also features impactful and colourful images which are not only aesthetically pleasing, but also denote the intentions of the business and their values.

All images are not of real products and are not for sale. All images have been taken from Unsplash.com

Wireframes

Please visit the links below to view my develpment wireframes and the final wireframes selected to use for this porject. You can find both mobile and deskptop designs in each link:

Development/Initial wireframes - view

Final/Selected wireframes - view

Accessibility and Responsiveness

The website is deigned to be responsive and accessible across a range of devices using a combination of Bootstrap grip system and classes with custom css to achieve this.

Marketing

Plan

Casa Arana is a business to customer e-commerce platform, built and designed to sell products to the User and provide customers with information about who made the products and where they come from. Whilst working on this project I wrote a marketing plan to guide me during the development process and keep the commerce goals in mind. Please visit the link to view my marketing plan - view

To further enhance sales and promote the business, there is also a Casa Arana FaceBook page (this is also linked in the site’s footer):

https://www.facebook.com/casaaranaofficial/

SEO

I conducted SEO research to help me determine which Key word would be most relevant and most important to my web application to reach potential customers. I wrote a list of words based on the business goals and user stories of Casa Arana and typed them into Google search engine to see what websites and other key phrases would be returned back. Here are the results

keywordsearch

keywordsearch

keywordsearch

Existing Features

Navigation menu

For the nav bar I have used Bootswatch Lux Theme nav bar and have customised it to better suite the design of the website. I chose this because the responsiveness of this nav bar is great across all screen sizes.

nav bar full width

nav bar hamburger

Footer

I wanted to keep the footer clean and decluttered in order to keep with the luxury theme. To achieve this I used a soft beige tone colour to provide contrast as well as keep the information nicely centred across all screen widths. The footer contains the company's contact details and social media links which are most likely sort after by the User so keeping them avaible in the footer at all times allows the user to eaisly find them.

footer

Mailchimp news letter sign up

This is an important marketing feature so I wanted to make it accessible across the entire site and responsive across all screen devices. I have used a soft block colour for the background to make it standout whilst also complimenting the surrounding features.

MailChimp signup form

Home Page

With the name Casa in mind (casa is home in Spanish) I wanted the Landing page to echo the meaning of the word home as well as provide the user with the information needed to explore the site easily. To do this the home page is made up of four main sections; the hero Image, short introduction, Links to the store and links to the About page:

hero image

intro section

category images

values

About Page

The about page provides information about the company including how they are, how they work and who they work with. The aim of this page is to not only provide useful informaiton for the user but also hopefully gain rapport and confidence with the business to reassure them they are buying for a legit website.

about page

create account

All Products

This page display all of the products sold by the company. The images are displayed in a Bootstrap cards where each card contains the product image, category tag, name and price. The images are links that take the user to view the selected products information and the category tag is also a link which takes the user to view a list of products under that category. I have done this in order to make the site more intuitive for the user.

all products page

search bar 0 products

category links in navbar number of items found

srot by filter

Product page

This page displays the product information relating a to a specific product. The information included is;

procut info

artisan section

reviews

Shopping bag

This page provides an overview of what the User currently has in their basket. It displays the product image, name, unit price, quantity, delivery cost and order total. The User can easily amend the quantity of each item and also remove any item from the bag. The order total is outlined clearly and neatly at the bottom of the product list along with a ‘checkout’ button to make the UX more intuitive and easy.

shopping bag

shopping bag icon

Checkout

This page is where the user can complete their purchase. It’s split into two columns, billing & card details on one side and their basket overview on the other. On mobile screen this layout collapses so that each column is stacked on top of each order allowing for good responsive design.

checkout page

chec box

checkout order summary

chekcout success page

invalid card details

User profile

A logged in User can access this link via the ‘View Account’ link in the profile icon dropdown menu found in the nav bar. This is where a User can view their order history and update their default delivery information. These are displayed in an accordion where the user can toggle between the two making each section easy to access.

accordion

order history list

order history toast

no order history

Wish List

wishlist

wishlist empty

Artisan profile

This page displays information about a selected Artisan. It includes their profile image, biography, location as well as images of all the products that Artisan has made.

artisan profile

artisan products

Admin

The admin section of this website allows site owners (superusers) to update, add or delete existing products from the store on the front end via the Product Management link found in the profile icon dropdown link.

product management link

Edit Product - this link is found in the product information page. Product information can be edited using the form provided. On submission of the form, the user is updated on the changes via toast message.

Delete Product - this link is also found in the product information page. Once clicked the product is instantly deleted without any warning so the site admin would have to be extra careful. See scalability section to read up on improving this feature.

edit / delete buttons

404 and 500 pages

Back to top scroll

back to top scroll back to top scroll on hover

Back to previous page link

Back to Account

Features Left To Implement

Rating stars in review section

WishList heart icon

Sort Category by Price

Technologies Used

I have used several technologies that have enabled this design to work:

Testing

Manual Testing

Please click here for the manutal testing report.

Unit Testing

Due to time contraints, no unit tests were performed for this release.

Code Validation

All of my code has been validated using online validators specific to the language, results are below:

html validation

css validation

JSHint

Flake8

flake8

Google Dev Tools Lighthouse

accessibility

Performance scored 64;

Accessibility scored 100;

Best Practices scored 83;

SEO scored 100;

Color Contrast Accessibility Validator Used to test colour contrast of the webpage All contrast test passed

colour contrast validator

Fixed Bugs

I encountered a few bugs whilst developing Casa Arana, some of them were typo errors which have been noted in the project board here. The project board has all of the bugs encountered in this porject howber below are some of the more complex errors I faced and the steps I took to resolve them.

Migration Error - ValidationError

I encountered the below error when updating my Product Model fields. I originally had ‘dimensions and compositions’ as one filed but then decided it was better to separate them into two different fileds as they are two separate values(decimal fields for dimensions and char field for composition):

- django.core.exceptions.ValidationError: ['“composition” value must be a decimal number.’]

I was hoping to get away with just altering the migration file that first introduced the DecimalField, but this did not work. After further investigation the best call to action at that stage was reset my database which resovled the issue. These are the steps I took:

Migration Error - ValueError

I recieved the below error in my terminal when I was updating the date field in my Product Review model from DateTimeFiled to DateFiled:

- ValueError: invalid literal for int() with base 10: b'27 16:35:06.943062’
![invalid int](/assets/images/invalid-int.png)

The issue turned out to be that the format for how/what to store from the dateTimeField wasn't set and so Django calculated the current time down to miliseconds. The following steps fixed the issue:

New webhook error - payment intent not successful

After the 25th May my webhooks failed to deliver, however in my terminal I was receiving HTTP 200 code and a HTTP 302 code which indicated that there was a problem with my url endpoint. It looked like Gitpod had updated my url from eu45 to eu46, I assume this was most likely due to maintenance work. I updated my endpoint with the new url and hard freshed my browser to delete any caching. After refreshing my webhook messages and waiting a few moment the payment intent was successful.

The below resource from Google helped to understand this error better.: "The HyperText Transfer Protocol (HTTP) 302 Found redirect status response code indicates that the resource requested has been temporarily moved to the URL given by the Location header."

Existing Bugs

InvalidOperation at /checkout/

I got the error above when testing a purchase of £10,000 (x2 of the 'Royal Pisac Rug', the most expensive products on the site), this figure went above the max digit length of the Product price field which was set to 6, I updated this to 8 however it still has not resolved the issue.

On further investigation, my terminal traced back an error within my utils.py: File "/workspace/.pip-modules/lib/python3.8/site-packages/django/db/backends/utils.py", line 235, in format_number

This error only occuerd when buying two this item, however due to limited time I was not able to resolve this error before release.

decimal invalid error message

Deployment

The master branch of this repository has been used for the deployed version of this application.

Using Github & Gitpod

To deploy my Django application, I had to use the Code Institute Python Essentials Template:

Forking the GitHub Repository If you want to make changes to your repository without affecting it, you can make a copy of it by 'Forking' it. This ensures your original repository remains unchanged.

  1. Find the relevant GitHub repository
  2. In the top right corner of the page, click the Fork button (under your account)
  3. Your repository has now been 'Forked' and you have a copy to work on

Cloning the GitHub Repository Cloning your repository will allow you to download a local version of the repository to be worked on. Cloning can also be a great way to backup your work.

  1. Find the relevant GitHub repository
  2. Press the arrow on the Code button
  3. Copy the link that is shown in the drop-down
  4. Now open Gitpod & select the directory location where you would like the clone created
  5. In the terminal type 'git clone' & then paste the link you copied in GitHub
  6. Press enter and your local clone will be created.

Gmail SMTP

I have used Gmail SMTP to send confirmation emails and all AllAuth related emails when the deployed version is used. I used the following documentation to set it up and add these settings to my settings.py file:

gmail SMTP code

Stripe

In order to take payments for the online store, I implemented Stripe:

AWS static and media storage

All static and media files are stored in the cloud using Amazon AWS S3:

aws code in setting.py

Creating an Application with Heroku

I followed the below steps using the Code Institute tutorial and Django Blog cheatsheat:

  1. Go to Heroku.com and log in; if you do not already have an account then you will need to create one.
  2. Click the New dropdown and select Create New App.
  3. Enter a name for your new project, all Heroku apps need to have a unique name, you will be prompted if you need to change it.
  4. Select the region you are working in.

Heroku Settings You will need to set your Environment Variables - this is a key step to ensuring your application is deployed properly.

heroku config vars

In the resources tab you must install 'Heroku Postgres'

Heroku Deployment using website In the Deploy tab:

  1. Connect your Heroku account to your Github Repository following these steps:
    • Click on the Deploy tab and choose Github-Connect to Github.
    • Enter the GitHub repository name and click on Search.
    • Choose the correct repository for your application and click on Connect
  2. You can then choose to deploy the project manually or automatically, automatic deployment will generate a new application every time you push a change to Github, whereas manual deployment requires you to push the Deploy Branch button whenever you want a change made.
  3. Once you have chosen your deployment method and have clicked Deploy Branch your application will be built and you should see the below View button, click this to open your application:

heroku deploy button

Heroku CLI deployment Whilst building this project there was a security breach on Heroku which caused issues with deployment via their website. Due to this, I had to add a runtime.txt file specifying which version of Python to build the app with and used the following commands to push the code to Heroku:

  1. Login to Heroku via the CLI using heroku login -i
  2. Enter your email and password
  3. Connect to the Heroku git remote using the heroku git:remote -a YOURAPPNAME
  4. Push to the Heroku git remote using git push heroku main.

Credits

Throughout the process of building Casa Arana I used a mixture of online resources to help me with a range of different things from fixing bugs, build functionality and design features. Below are the resources I used:

Unsplash - For all imagery

Bootswatch Lux theme- For nav bar functionality

Skolo online - for Django model and image help

Code Institute’s Boutique Ado project walk through videos - for Django logic code and structure

W3schools - for html, javascript and css suppoort

DrawSQL - for database schema design

Figma - for firebase designs

XML Sitemaps - to generate sitemape.xml file

Acknowledgements

I’d like to take this chance to thank my course mentor Jack for his guidance and support throughout the development of this project. My colleague Harry Dhillon for their support and feedback and the Tutors at Code Institute for their help with debugging and overall support.

Scalability

The features that I had thought about before designing this project were not achievable due to the deadline. I was able to ascertain which features would be more important to include in this initial deployment, however below I have outlined the features I would wish to include in future resales:

Inventory tracking.

To become a fully functioning website it would need to include inventory tracking functionality in order to help the site owner keep track of product levels, but also to inform the customer when items are running low in stock or out of stock

Extend the Admin Management feature

Recommendations Feature

In addition to the Wishksit feature, I would like to add a Recommendations feature where once the User is about to place their order, a list of items would appear that would be similar to the products the customer is buying. This would be to encourage sales and gain higher unit per transaction.