Skip to content

Awoyalejohn/GDS

Repository files navigation

Graphics Design Space

Graphics Design Space is an ecommerce website. Where users can purchase and download lovely modern graphics to use for whatever they may wish. Whether for personal or professional purposes or just for inspiration. To accommodate the needs of different individuals, there are numerous types of graphics available to purchase. Posters that they can print out to hang up around their homes or place of work, icons that can go well, typography and logos that can be utilised for branding, are all available. If users need something more specific, they can request a quote for a more specialised graphic that is tailored to their needs. To show our appreciation, customers that spend over a certain amount can get discounts to help them save money.

The live link can be found here - https://graphics-design-space.onrender.com/

GDS mockup

User Experience

Strategy

The website is a business to customer (B2C) website that sells digital products (digital copies of their art). Depending on the customer's choice of graphic design, they can be downloaded to use for things like profile images, inspiration, use with their own business, or just print off and hang somewhere.

The target audience are:

  • Graphic designers
  • Web developers
  • Aged 21 and over working professionals

Considering all that, I believe the customers will require a website that is able to:

  • Navigate easily
  • Sort and search capability
  • Send emails
  • Request quotes
  • Allow users to make an account and view their orders
  • Allow users to rate or review products

User Stories

Link to User Stories

Epic 1 - Viewing and Navigation

  • As a Site User I can view a list of products so that I can select some to purchase.
  • As a Site User I can view a specific category of products so that I can quickly find products I am interested in without having to search through all products.
  • As a Site User I can view individual product details so that I can Identify the price, description, product rating, and product image.
  • As a Site User I can quickly identify deals/discounts so that I can take advantage of special savings on products I'd like to purchase.
  • As a Site User I can easily view the total items in my shopping cart so that I can avoid having too many items in my shopping cart.
  • As a Site User I can view related products so that I can find products like the one that I had originally selected.
  • As a Site User I can view recently viewed products so that I can Easily go back to a previously selected product.
  • As a Site User I can access the Facebook page so that I can connect more with the brand and community.
  • As a Site User I can access the privacy policy page so that I can understand how my data is being used by the site.

Epic 2 - Registration and User Accounts

  • As a Site User I can easily register for an account so that I can have a personal account and be able to view my profile.
  • As a Site User I can easily login or logout so that I can access my personal account information.
  • As a Site User I can easily recover my password in case I forget it so that I can recover access to my account.
  • As a Site User I can receive an email confirmation after registering so that I can verify that my account registration was successful.
  • As a Site User I can register for an account with my social media account so that I can easily register for an account with just one click using my social media account.
  • As a Site User I can sign up for the news letter so that I can receive updates on the latest products and discounts.

Epic 3 - Sorting and Searching

  • As a Site User I can sort the list of available products so that I can easily identify the best rated, best priced and categorically sorted products.
  • As a Site User I can sort a specific category of product so that I can find the best-priced or best-rated product in a specific category, or sort the product in the category by name.
  • As a Site User I can search for a product by name or description so that I can find a specific product I'd like to purchase.
  • As a Site User I can easily see what I've searched for and the number of results so that I can quickly decide whether the product I want is available.

Epic 4 - Purchasing and Checkout

  • As a Site User I can view all items in my shopping cart to be purchased so that I can know exactly what I am about to purchase and how much it costs.
  • As a Site User I can easily enter my payment information so that I can checkout quickly and with no hassles.
  • As a Site User I can feel my personal and payment information is safe and secure so that I can confidently provide the needed information to make a purchase.
  • As a Site User I can view an order confirmation after checkout so that I can verify that I haven't made any mistakes.
  • As a Site User I can receive an email confirmation after checking out for a quote request so that I can keep the confirmation of what I've purchased for my records.
  • As a Site User I can delete items in shopping cart so that I can remove items that I don't plan to buy.
  • As a Site User I can receive a message after purchase so that I can know if it was successful or not.
  • As a Site User I can get access to the product straightaway after purchasing so that I don't have to look in my profile for the product I purchased.

Epic 5 - Quote Requests

  • As a Site User I can request a quote so that I can get a more specific graphic.
  • As a Site User I can view the quote price, that updates itself when I select different options so that I can know how much the quote will cost me.
  • As a Site User I can view a summary detailing the information on my quote before paying so that know exactly what I am about to purchase and how much it will cost.
  • As a Site User I can receive an email confirmation after checking out for a quote request so that I can keep the confirmation of what I requested and purchased for my records.
  • As a Site User I can view the quote request status so that I can see the status of a quote request and know if it has been completed or not.
  • As a Site User I can view my request history so that I can see the requests that I have made previously.
  • As a Site User I can view and click on a request that has been completed and ready to download so that I can download the requested item when I know that the request has been completed.
  • As a Site User I can easily enter my payment information for a quote request so that I can checkout quickly and with no hassles.

Epic 6 - User Profile

  • As a Site User I can have a personalised user profile so that I can view my personal details, order history, Wishlist, requests, reviews, and testimonials.
  • As a Site User I can edit details in my profile so that I can make changes to my profile information and change my profile picture too.

Epic 7 - Reviews and Ratings

  • As a Site User I can review a product so that I can give the website feedback on a product.
  • As a Site User I can add a rating to my review so that I can show a more visual representation of my assessment of a product.
  • As a Site User I can edit/Update my review so that I can make changes to my review on a product after some time when I may have changed my mind on some things.
  • As a Site User I can delete my review so that I can remove reviews I don't like or changed mind on.

Epic 8 - Testimonials

  • As a Site User I can view a list of testimonials so that I can read one to see how other users have felt about the website.
  • As a Site User I can write testimonials so that I can express my appreciation for the website.
  • As a Site User I can edit/Update my testimonials so that I can make improvements to the testimonials that I contribute to the website.
  • As a Site User I can delete my testimonial so that if I end up not liking how it turned out I have a way to remove it.

Epic 9 - Admin and Website Management

  • As a Site Admin I can add a product so that I can add new items to the website.
  • As a Site Admin I can edit/Update a product so that I can change product prices, descriptions, images, and other product criteria.
  • As a Site Admin I can delete a product so that I can remove items that are no longer for sale.
  • As a Site Admin I can delete user reviews so that I can remove unacceptable reviews.
  • As a Site Admin I can delete user testimonials so that I can remove testimonials I consider to be unacceptable.
  • As a Site Admin I can view a list of requests so that I can select one to view and carry out.
  • As a Site Admin I can upload a completed item based on a customer request so that I can make the requested item available to the customer that requested it.
  • As a Site Admin I can approve a user testimonial so that I can check it to make sure it is suitable, before permitting it on the website.
  • As a Site Admin I can add a watermark to an uploaded image so that I can discourage users from right-click downloading images.

Epic 10 - Wishlist

  • As a Site User I can add items to wish list so that I can make a list of items I may purchase someday.
  • As a Site User I can view items in my Wishlist so that I can add those items to my shopping cart from my Wishlist.

Design

Colour Scheme

The primary colours used for the website are dark blues, black, cyan, and white. I made sure to pick the ones that contrast well with each other using Adobe colour.

Colour sceme

Typography

The website uses Helvetica Neue as the main font-family and it is supplied by Bootstrap default.

Wireframes

Header

Header

Footer

Footer

Home

Home

Products

Products

Product Detail

Product Detail

Add Product

Add Product

Edit Product

Edit Product

Delete Product

Delete Product

Cart

Cart

Checkout

Checkout

Checkout Success

Checkout Success

Quote Request

Quote Request

Quote Checkout

Quote Checkout

Quote Success

Quote Success

Quote List

Quote List

Quote Detail

Quote Detail

Reviews

Reviews

Edit Review

Edit Review

Delete Review

Delete Review

Testimonials

Testimonials

Edit Testimonials

Edit Testimonials

Delete Testimonial

Delete Testimonial

Wishlist

Wishlist

Profile

Profile

Edit Profile

Edit Profile

Order History

Order History

Order History Detail

Order History Detail

Quote History

Quote History

Quote History Detail

Quote History Detail

Quote Display

Quote Display

Profile Testimonials

Profile Testimonials

Data Model

Entity Relationship Diagram (ERD)

Diagram of the Postgres database that is used for the website. Unfortunately, due to time constraints, not all of the capabilities in the diagram were implemented for the website.

Database diagram

User Model

  • User model is automatically generated by Django when a user creates their account with Django Allauth.
  • Users that are linked to this model have access to certain content on the website.

User Profile

  • User Profile model is for extending the functionality of the user model.
  • The user attribute connects to the User Profile model by one to one relationship with the default User Model supplied by Django. There is signal set up to automatically attach a user to their user profile when a user account is first created.
  • The default_phone_number attribute is a character field for users to add their phone number.
  • The default_street_address1 attribute is a character field for users to add the first part of their street address.
  • The default_street_address2 attribute is a character field for users to add the second part of their street address.
  • The default_town_or_city attribute is a character field for users to add their town or city.
  • The default_county attribute is a character field for users to add their county.
  • The default_postcode attribute is a character field for users to add their post code.
  • The default_country attribute is a country field from the Django countries package for users to add their country with a select box.
  • The profile_image attribute is an image field for users to upload a profile picture that will display on their profile page and some other pages.
  • The first_name attribute character field for users to add their first name.
  • The last_name attribute character field for users to add their last name.

Category

  • Category model is for creating categories for product items.
  • Categories can only be added by the admin or those with super user privileges.
  • The name attribute is a character field for adding a the name for the category.
  • The slug attribute is a slug field for adding a slug name for querying the data linked to the category instead for using the id.

Product

  • Product model is for making products.
  • The category attribute connects to the product model to the category model by foreign key relationship.
  • The name attribute is a character field for adding a the name for the product.
  • The slug attribute is a slug field for adding a slug name for querying the data linked to the product instead of using the id. It is also used to have a more friendly looking URL. The slug will be generated automatically using the data from the name attribute with the save method when a product is created.
  • The description attribute is a text field for adding a description for the product.
  • The price attribute is a decimal field for adding a price for the product
  • The rating attribute is a decimal field for adding a rating for the product. This will be kept empty initially, then get data input sent from the review model.
  • The cloud_image attribute is a Cloudinary image field for adding a watermarked version of the product image that would be shown instead of the real product image to discourage right-click downloading, but due to time constraints this field was never actually implemented in the finished project.
  • The image attribute is an image field for adding an image for the product. The image will be stored in Cloudinary storage.

Order

  • Order model creates orders for when a user purchases a product.
  • The order_number attribute is for adding unique order number to the order when the user makes a purchase. The order number is automatically generated using the uuid4 package with the save method when an order is created.
  • The user_profile attribute connects the order model to the user profile by foreign key relationship for the user that makes the order.
  • The full_name attribute is a character field for users to add their full name.
  • The email attribute is an email field for users to add their email address.
  • The phone_number attribute is a character field for users to add their phone number.
  • The country attribute is a country field from the Django countries package for users to add their country with a select box.
  • The postcode attribute is a character field for users to add their post code.
  • The town_or_city attribute is a character field for users to add their town or city.
  • The street_address1 attribute is a character field for users to add the first part of their street address.
  • The street_address2 attribute is a character field for users to add the second part of their street address.
  • The county attribute is a character field for users to add their county.
  • The date attribute is datetime field that automatically adds the date and time for when the order was made.
  • The discount attribute is a decimal field for adding the discount amount to. This is automatically added and updated based on the order subtotal being above the discount threshold in settings.py and it is equal to a percentage of the order subtotal, this percentage is also specified in the settings.py.
  • The order_subtotal attribute is a decimal field the is equal to the total price of all the products in the order. This field will automatically update with a signal when a user adds or deletes a line item from the order line item model.
  • The total attribute is a decimal field that is equal to subtotal minus the discount
  • The original_cart attribute is text field that adds the products that were in the cart.
  • The stripe_pid attribute is character field the adds a uniquely generated number from Stripe for the customer and the order.

Order Line Item

  • Order line item model is for adding products for the order model.
  • The order attribute connects the order line item model to the order model by foreign key relationship.
  • The product attribute connects the order line item model to the product model by foreign key relationship.
  • The quantity attribute is an integer field that adds the quantity of each product. Due to the nature of the site this will always be set to one.
  • The lineitem_subtotal attribute is a decimal field that adds the price of a line item multiplied by its quantity. The is field is added automatically with the save method. Due to the nature of the site this will always be multiplied by one.

Quote Request

  • Quote request model is for making quote requests. It also creates the initial data for the quote order model by sending the data to the session.
  • The name attribute is a character field for users to add the name of their requested graphic design.
  • The user attribute connects the quote request model to the user profile by foreign key relationship for the user that makes the quote request.
  • The type attribute is character field that gives the user a choice of types for the graphic design with a select box.
  • The size attribute is character field that gives the user a choice of sizes for the graphic design with a select box.
  • The description attribute is a text field for users to describe the graphic design they are requesting in detail.
  • The submitted attribute is a date time field that automatically adds the date and time the quote request was made.
  • The quote_request_number attribute is a character field that automatically adds the uuid4 number from the quote request view when the request is submitted.

Quote Order

  • Quote order model is for making quote orders. It collects the data from the quote request model by getting the data that was sent to the session from the quote request model.
  • The user attribute connects the quote order model to the user profile by foreign key relationship for the user that makes the quote order.
  • The name attribute is a character field for users to add their full name.
  • The email attribute is a character field for users to add their email address.
  • The quote_request_name attribute is a character field that uses the requested graphic design name from the quote request model.
  • The type attribute is a character field that uses the requested graphic design type from the quote request model.
  • The size attribute is a character field that uses the requested graphic design size from the quote request model.
  • The description attribute is a text field that uses the requested graphic design description from the quote request model.
  • The subtotal attribute is a character field that uses the calculated subtotal from the choices made in the quote request model that was then calculated and sent from the quote request view to the session then it gets collected by the quote order model.
  • The discount attribute is a character field that uses the calculated discount from the choices made in the quote request model that was then calculated and sent from the quote request view to the session then it gets collected by the quote order model.
  • The total attribute is a character field that uses the calculated total from the choices made in the quote request model that was then calculated and sent from the quote request view to the session then it gets collected by the quote order model.
  • The submitted attribute is a date time field that automatically adds the date and time the quote order was made.
  • The quote_order_number attribute is the uuid4 number from the quote_request_number attribute from the quote request model that was sent to the session then it gets collected by the quote order model.

Quote Fulfilment

  • Quote fulfilment model is for fulfilling quote requests by the admin.
  • The quote_order attribute connects the quote fulfilment model to the quote order model by a one to one relationship.
  • The image attribute is an image field that is used by the admin to upload a graphic design and fulfil the quote request created by the user.
  • The status attribute is a Boolean field that is used by the admin to indicate that the quote request has been fulfilled and it is ready to download. This will be show to the users on their quote request page.

Review

  • Review model is for reviews made by the users.
  • The rating attribute is an integer field that gives the user star rating choice options for the review with a select box. When the review is summitted or saved the review view linked to this model will update the rating on the product using on the average rating of all of that products review ratings.
  • The title attribute is a character field for users to add a title to their product review.
  • The product attribute connects to the review model to the product model by foreign key relationship.
  • The user attribute connects to the review model to the user profile model by foreign key relationship.
  • The body attribute is a text field for users to add the content of their product review.
  • The submitted attribute is a date and time field that automatically adds a the date and time the product review was made
  • The edited_on attribute is a date and time field that automatically adds a the date and time the product review was updated.

Testimonial

  • Testimonial model is for users to write testimonials for the website.
  • The user attribute connects the testimonial model to the user profile model by foreign key relationship.
  • The body attribute is a text field for users to add the content of their testimonial.
  • The approved attribute is a Boolean field for the admin to approve the testimonials that should show on the website testimonials page.

Wishlist

  • The Wishlist model is for making Wishlist.
  • The user_profile attribute connects the Wishlist model to a user profile by one to one relationship.
  • A Wishlist is automatically connected to a user profile when an account is created with a signal.

Wishlist Item

  • The Wishlist item model is for adding products to a user’s Wishlist.
  • The wish_list attribute connects the Wishlist Item model to the Wishlist model by foreign key relationship.
  • The product attribute connects the Wishlist Item model to the Product model by foreign key relationship.

Agile

The Epics and User stories were created using the issues feature on GitHub. The Epics are treated as milestones and the User stories were each labeled using the MoSCoW method. These were then added to a Basic Kanban using the GitHub projects feature. Each user story was placed initially in the To do column, then added to the In progress column when it was being implemented to the project. The user stories were updated as the project progressed and users stories were added to the done column when completed.

Most of the user stories have been completed except for the following:

  • Social media signup (Could-Have)
  • Watermark images (Could-Have)

They have since been placed in the Backlog column, as they could not be completed in this iteration of the project due to time constraints, but may eventually get completed in the next iteration of the project.

Basic kanban

Features

Existing Features

  • The Header
    • Featured on all the pages and is fully responsive.

    • Dark blue background colour that contrasts with the text and icons.

    • White colour for text and icons that contrasts with the background.

    • Navigation bar with dropdown menus and links to important pages. The All Products dropdown menu has links to the product page that will sort the products by:

      • Price - Low to high
      • Rating - High to low
      • Category - Alphabetically
      • All Products - Displays all the products

      The Graphics Designs dropdown menu has links to the product page that will sort the products by their categories:

      • Icons
      • Logos
      • Posters
      • Stickers
      • Wallpapers
      • Banners.
      • All Graphics Designs.
    • The request a quote link, sends users to the request a quote page. Testimonials link sends users to the testimonials page.

    • Search bar allows users to search for a product by its name, category, or description.

    • White Logo that links the users to the home page on click.

    • Account Icon when clicked on displays a drop-down menu with links to specific pages depending on whether the user is logged or their role when logged in. If the user is not logged, it the shows the Register and login links. If the user is logged in ,it shows the My Profile and Logout links. If the user is logged and their role is admin, it shows the Admin, My Profile, and Logout links.

    • Cart Icon link sends users to the cart page and shows the total of all the items in the cart.

    • Discount information banner for users to know how they can receive discounts

Header

  • The Footer
    • Featured on all pages and is fully responsive
    • It has a link to the website’s Facebook page
    • It has quick links to:
      • Home
      • All Graphic Designs,
      • Request a Quote
      • Testimonials
      • Sign in or Sign out - depending if user is logged in or not.
      • Privacy Policy
    • Newsletter subscription form
    • Copyright information

Footer

  • Home page
    • Animated dark background with animated shapes that move.
    • Hero with a welcome message that tell users what the site is all about
    • Cyan Shop now button that sends users to the all products page
    • White Request a Quote button that sends users to the Request a quote page only if the have an account otherwise they need to login first.
    • Features section that shows a different image of the categories of graphic designs that the website has to offer each with a cyan view details button that takes the user to the products page, sorted by the category of the view details button that was clicked on. Also has some text with positive things to say about the particular category its with that are also SEO keywords.

Home

  • Products Page
    • Black Products heading that indicates to the users that they are on the products page.
    • Cyan background that contrasts well with the products.
    • Sort select option to sort items out on the products page by
      • Price - Low to high
      • Price - High to low
      • Rating - Low to high
      • Rating - High to low
      • Name - Ascending Alphabetically
      • Name - Descending Alphabetically
      • Category - Ascending Alphabetically
      • Category - Descending Alphabetically
    • Amount of products on the page displays on top left
    • Products have a dark blue card background the contrasts well with the main products page background.
    • Product cards are displayed in a flexbox grid layout using bootstrap. Each product is evenly spaced out to make it clear for the user which product they are selecting.
    • Product cards have an image the displays the product so the user can see the product before they click for more details.
    • Below the image is the product name so users are aware of its name. The image also acts as a link to the product’s detail page.
    • Below the name is the category that also acts as a links to the product page sorted by that category, so users can get quick access to products like the one they have clicked.
    • Below the name the is the rating that shows its rating calculated from the average user rating, so users know how other users have rated the product.
    • Below the rating is the price in big clear font size, so it is clear how much the product will cost them.
    • Admin has access to extra features on the product cards that displays buttons that lets them to edit or delete the product from the site.
    • A back to top button shows on the bottom right after a user scrolls down a little to give them quick access back to the top of the page.

Products

  • Product detail page
    • Displays the specific product card in a larger card than in on the products page.
    • The product card now gets addition of the :
      • Product description
      • Add to cart button - to add items to the cart page
      • Request quote button - to request a quote if the user has an account
      • Add to Wishlist button - to add an item to the Wishlist if user has an account
      • Keep shopping button - to return toe the product page
    • below the products card section is the customer reviews section which displays all the reviews for that products detail page. Users have the option to write a review and add a rating to it if they have an account, this can encourage users to want to sign up for and account.
    • Below the reviews section is the recently viewed section which shows a list of the five most recent pages viewed to the user.
    • Below the recently view section shows the related product section which shows a list of five products with the same category as the one in the product detail page.

Product Detail

  • Cart page
    • Black Cart heading that indicates to the users that they are on the cart page.
    • A large dark blue card that lists all the products added to the card with the products image, name, category and price.
    • There is also a product info and price header so the user knows what information they are viewing.
    • Each product also has an x button to remove the item from the cart.
    • Below the products is a totals box the shows information on the subtotal of all the items currently in the cart. It also shows the discount amount if the subtotal is above the discount threshold specified in settings.py. Lastly the total shows the subtotal minus the discount amount to show users what they will actually have to pay for the products.
    • Below the white totals box a prompt will show for user how much they will have to pay to get the discount if they are below the threshold.
    • After that is the keep shopping button that sends users back to the product page and secure checkout button that sends the user to the checkout page to buy the product.

Cart

  • Checkout page
    • Black checkout heading that indicates to the users that they are on the checkout page.
    • Two dark blue cards shown on the checkout page with the first having a form that users will fill in with their billing details and the second show their order summary using information from the cart page.
    • After the country field is the option to save their card details if they have an account so the user doesn’t have to type out all that information again.
    • The billing form card also has field for users to input their card payment details supplied by Stripe.
    • Below the card field is the adjust cart button for the user to go back and adjust their cart and the complete order button lets users checkout with information they put in.

Checkout

  • Quote request page
    • Black Quote Request heading that indicates to the users that they are on the Quote Request page.
    • A large dark blue card has the quest request form inside with fields for the user to fill in or select for the graphic design they are requesting.
    • The quote request totals box automatically updates based to the option selected by the user for the type and size options.
    • The secure checkout button at the bottom sends the user to the quote checkout page.

Quote Request

  • Quote checkout page
    • Black Quote Checkout heading that indicates to the users that they are on the Quote checkout page.
    • The form on this page is also inside a dark blue card.
    • The quote order summary at the top of the page shows the user the information that they inputted for the order.
    • Form has field for the user to type in their name and email address
    • Below that is the payment field for them to type their card details into.
    • After the payment field are the go back button for restarting the quote request and the complete order button to checkout and pay.

Quote Checkout

  • Testimonials page
    • Black testimonials heading that indicates to the users that they are on the testimonials page.
    • Testimonials show the profile picture , name and message left by the user who made the testimonial.
    • Only user testimonials that have been approved by the site admin are displayed.
    • The testimonials are laid out in flexbox grid with bootstrap so each one stands apart from the rest.
    • Testimonials are inside dark blue cards to go with the theme of the site.
    • Users that create testimonials have the option to edit and delete their testimonials.

Testimonials

  • Profile page
    • This page can only be accessed by users with accounts.
    • Separate navigation bar from the main navbar at the top of the profile page.
    • Links to six other pages that are part of the profile page
    • The default profile page lets users update different fields from their user profile such as their:
      • Profile image
      • Username
      • Email address
      • Phone number
      • First name
      • Last name
    • The rest of the profile pages are:
      • Billing details - displays billing details used for the checkout page when saved or added.
      • Orders - displays a list of past orders on the site.
      • Wishlist - displays list of products that the user has added to their Wishlist.
      • Requests - displays a list of past quote request orders on the site. They can also download completed requests on this page.
      • Reviews - displays a list of reviews that the user has made
      • Testimonials - displays list of testimonials that the user has made
    • The pages are all placed inside dark blue cards to match the rest of the site
    • They each have a black profile to show they are part of the profile page.

Profile

  • Admin page
    • This page can only be accessed by the site admin
    • It has a separate navigation bar from the main navbar at the top of the admin page.
    • Links to two other pages that are part of the admin page.
    • The default admin page lets the admin add products to the website with options that include:
      • category
      • name
      • description
      • price
      • image
    • The rest of the admin pages are:
      • Customer requests - shows a list of user quote request for the admin to fulfill. By clicking on to the status button (pending…) the admin gets taking to form that they just upload the completed design to and then tick the status checkbox then submit. This will also be shown to the user on their own quote request page.
      • Approve Testimonials - shows a list of user testimonials for the admin to approve on to the website. Admin the tick the checkbox for the one they want to approve then click update approval to approve it.

Admin

  • 404 page

404

  • 403 page

403

Future Features

  • Admin pages
    • Users orders page for the admin pages not just the quote orders page. This page would let the admin keep track of all the orders on the website.
  • FAQ page
    • Users could have a page to navigate to see questions that previous users have asked and the answer those questions.
  • Product detail
    • Users profile pictures could display on review made by a customer on the product page. Allows users more reasons to use the profile picture upload feature on the upload page.
  • Product page
    • Quote request orders that are fulfilled could automatically be added to the product list page for other users to buy so they do not have to request for it again.
    • More product categories and types of graphics designs.
    • Animated graphics could be added for users that are interested in animated graphics designs.
  • Quote request page
    • More options to select from and users could be allowed to pick more specific sizes. They could input the height and width rather than just selecting small, medium and large options.

SEO

For SEO I did google searches with the words graphics design and got these keyword results:

  • Brand identity
  • Logo Design
  • Packaging design
  • Web and mobile design
  • Layout and print design
  • Custom Logos
  • Design
  • Graphics
  • Industrial design
  • Compute graphics

On word stream I got these keywords:

  • Graphic design
  • Graphics
  • Graphic artist
  • Motion graphics
  • Graphic design courses
  • Graphics design
  • Digital designer
  • Create designers
  • Graphic design logo
  • Graphic design art
  • Poster designers
  • Motion designer
  • Graphic computer
  • Graphic design website
  • Freelance graphic designer
  • Vector illustration

I added these keywords words to my website:

  • Graphics design
  • Graphic design website
  • Custom Logos
  • Design
  • Graphics
  • Logo Design
  • Poster designers
  • Freelance graphic designer
  • Vector illustration
  • Computer graphics
  • Graphic design logo

I also added alt attribute to all my images to help with SEO.

The rel nooper attribute was also used for links that went outside my website, like the Facebook page.

The website also has a tobots.txt file and a privacy policy.

Marketing

Facebook page

Added a Facebook page for the website for customers to keep to up data with the latest deals and discounts.

Facebook page

Facebook page

Newsletter

A newsletter subscription has been added to the footer section of the site for users to subscribe to so that they can get newsletter emails about the site news, exclusive offers and discount codes. The form is from mail chimp.

Newsletter

Technologies Used

Frameworks

Languages used

Workspace

Version control

Wire Frame

Testing Responsiveness

Hosting

Database

Testing

Validator testing

Manual Testing

Header/Navbar

Test Action Expected Result Pass
Logo Click “Graphics Design Space” Sends user to the home page
Search Click "Search box" User can type text into it.
Search Search for a product Displays products related to the search
Account Icon Click while logged out Displays drop register and login links
Account Icon Click while logged in Dispays profile and logout links
Account Icon Click while user is admin logged in Dispays admin, profile and logout links
Register Click "register" Sends user to the sign up page
Login Click “Login” Sends user to the sign in page
Profile Click “Profile” Sends user to the profile page
Logout Click “Logout” Sends user to the sign out page
Navbar Click "All Products " Displays By Price, By Rating, By category, and All products links
Navbar Click "Graphics Designs" Displays Icons, Logos, Posters, Stickers, Wallpapers, Banners, and All Graphics Designs links
Navbar Click "Request a Quote" while logged in Sends user to Quote requests page
Navbar Click "Request a Quote" while logged out Sends user to Sign in page
Navbar Click "Testimonials" Sends user to Testimonials page

Footer

Test Action Expected Result Pass
Facebook link Click Facebook link Sends user to Facebook page on a new tab
Quick links Click "Home" Sends user to Home page
Quick links Click "All Graphic Designs" Sends user to products page
Quick links Click "Request a Quote" while logged in Sends user to Quote requests page
Quick links Click "Request a Quote" while logged out Sends user to Sign in page
Quick links Click "Testimonials" Sends user to Testimonials page
Quick links Click "Sign out" while logged in Sends user to sign out page
Quick links Click "Sign in" while logged out Sends user to Sign in page
Quick links Click "Privacy Policy" Sends user to a privacy policy page on a new tab
Newsletter Fill in email and click "Subscribe" Thanks user for subscribing

Home

Test Action Expected Result Pass
Shop now button Click "Shop now" Sends user to products page
Request a quote button Click "Request a Quote" while logged in Sends user to Quote requests page
Request a quote button Click "Request a Quote" while logged out Users gets prompted to sign up for an account
Icons view details button Click "view details" Sends user to products page filtered by Icons
Logos view details button Click "view details" Sends user to products page filtered by Logos
Posters view details button Click "view details" Sends user to products page filtered by Posters
Stickers view details button Click "view details" Sends user to products page filtered by Stickers
Wallpapers view details button Click "view details" Sends user to products page filtered by Wallpapers
Banners view details button Click "view details" Sends user to products page filtered by Banners

Products

Test Action Expected Result Pass
Sort by select box Click "Price (Low to high)" Sorts products by lowest price to highest
Sort by select box Click "Price (High to low)" Sorts products by highest price to lowest
Sort by select box Click "Rating (Low to high)" Sorts products by lowest rated to highest
Sort by select box Click "Rating (High to low)" Sorts products by highest rated to lowest
Sort by select box Click "Name (A-Z)" Sorts products by name ascending alphabetically
Sort by select box Click "Name(Z-A)" Sorts products by name descending alphabetically
Sort by select box Click "Category (A-Z)" Sorts products by category ascending alphabetically
Sort by select box Click "Category (Z-A)" Sorts products by category descending alphabetically
Product Click "Product image" Sends user to that product's detail page
Product Click "Product category" Filters products by the category that was clicked on
Back to top button Click "Back to top button" Sends uset to the top of the page

Product detail

Test Action Expected Result Pass
Product Click "Product category" Filters products by the category that was clicked on
Add to Cart button Click "Add to cart" Adds the product to the Cart page
Request a quote button Click "Request a Quote" while logged in Sends user to Quote requests page
Request a quote button Click "Request a Quote" while logged out Button becomes unclickable
Add to wishlist button Click "Add to wishlist" while logged in Adds the product to their wishlist
Add to wishlist button Click "Add to wishlist" while logged out Button becomes unclickable
Keep Shopping button Click "Keep Shopping" Sends user back to the products page
Write a review button Click "Write a review" while logged in Gives the user access to the review form
Write a review button Click "Write a review" while logged out Prompts the user to make an account
Review form Submit a review Adds the review to the product detail page
Recently viewed Click "Product image" Sends user to that product's detail page
Related products Click "Product image" Sends user to that product's detail page

Cart

Test Action Expected Result Pass
Product in cart Click "red x button" removes product from cart
Keep Shopping button Click "Keep shopping" Sends user back to products page
Secure checkout button Click "Secure Checkout" Sends user to checkout form page

Checkout

Test Action Expected Result Pass
Checkout form Fill in form and submit Form gets submitted and the order gets added to the database
Checkout form Fill in form incorrectly Validation errors go o
Adjust Cart Click "Adjuct cart" Sends user back to the cart page

Profile

Test Action Expected Result Pass
Profile info page Fill in form and submit Lets loggedn in user updte their profile details
Billing details Fill in form and submit Lets loggedn in user updte their billing details
Orders View orders Display the logged in user's order history
Wishlist View wishlist Display the logged in user's wishlist
Reviews View review Display the logged in user's product reviews
Testimonials View testimonial Display the logged in user's testimonials

Quote Request/Quote Checkout

Test Action Expected Result Pass
Quote request Fill in form and submit Sends the user to the second part of te fom
Quote request Click on select box options Updates the subtoatal, discount, and total
Quote checkout Fill in form and submit Form gets submitted and the quote order gets added to the database

Admin

Test Action Expected Result Pass
Add product form Fill in form and submit Adds a new product to the website
Customer requests View customer requests Display the customer request ot be completed by the admin
Approve testimonials Approve testimonials Displays the approved testimonials on the testimoials page

Bugs

Solved Bugs

  1. Error message when using the runserver command during development deploy: Invalid HTTP_HOST header: '127.0.0.1:8000'. You may need to add '127.0.0.1' to ALLOWED_HOSTS.
    • Adding the host header shown in the warning to the ALLOWED_HOSTS variable in the settings.py file.
  2. Horizontal overflow on footer which was being caused by the size of the bootstrap grid gaps.
    • Reducing the size of the grid gaps from (gy-4 gx-5) to (gy-3 gx-4).
  3. Product list page images overflowing out of card body.
    • Adding a max width of a 100% to the images.
  4. Products would show when I tried to sort the products by category because product categories were named with capital letters.
    • Using the slug of the category to sort with instead since they always lowercase
  5. Could not delete items form cart initially, beacue forgot to add csrf token.
    • Added csrf token.
  6. Quote request images would not save to the website of database, because forgot to add the enctype="multipart/form-data” attribute to the form
    • Added enctype="multipart/form-data” attribute to the form.
  7. Could not add items to the cart after adding the Wishlist functionality. The same name was used to add items form the wishlist to the cart "add_to_cart".
    • Change the name for the wish list version to “add_to_cart_from_wishlist”.

Unsolved Bugs

  1. On the recently viewed products section of the product list, when you go to the same page as the most recent product added to the recently view section it will only show 4 items instead of 5.
  2. Custom clearable file input doesn’t display the template used to make the from look better.

Deployment

Development

  1. Create Repo

  2. Clone Repo

  3. Open the Repo folder in your code editor

  4. Install python

  5. Install pip

  6. Install venv

  7. Create a virtual environment

    python3 -m venv .venv
  8. Activate virtual environment

    source .venv/bin/activate
  9. Install Django and the supporting libraries

    pip3 install django
    pip3 install gunicorn
    pip3 install dj_database_url
    pip3 install psycopg2-binary
    pip3 install dj3-cloudinary-storage
  10. Create requirements.txt file for Heroku

    pip3 freeze --local > requirements.txt
  11. requirements.txt file should look similar to this

    asgiref==3.5.2
    backports.zoneinfo==0.2.1
    cloudinary==1.29.0
    dj-database-url==0.5.0
    dj3-cloudinary-storage==0.0.6
    Django==4.0.6
    gunicorn==20.1.0
    psycopg2-binary==2.9.3
    sqlparse==0.4.2
    
  12. Create a runtime.txt

    touch runtime.txt
  13. Type in your python version for Heroku in the runtime.txt file

    python-3.8.10
    
  14. Create a new Django Project

    django-admin startproject <projectName .>
  15. Create a gitignore file

    touch .gitignore
  16. Add these files and folders to the gitignore file

    core.Microsoft*
    core.mongo*
    core.python*
    env.py
    __pycache__/
    *.py[cod]
    node_modules/
    .github/
    *.sqlite3
    *.pyc
    .venv
    
  17. Run the project to make sure everything is working.

    python3 manage.py runserver
  18. Run the initial migrations

    python3 manage.py migrate
  19. Create a super user to log into the admin

    python3 manage.py createsuperuser
  20. Add, commit, and push to GitHub

    git add .
    git commit -m "initial commit"
    git push 
  21. Now signup or log into Heroku to create the app

  22. Create a new app on Heroku by clicking the “Create new app” button

  23. Go to the resources tab

  24. Search for “Heroku Postgres”

  25. Click the “submit order” form button

  26. Go to the settings tab

  27. Click on the reveal Config Vars button

  28. Copy the Postgres URL value to the right of the Database_url key

  29. Go back to the Django project on the code editor

  30. Create an env.py file

    touch env.py
  31. Add environment variables for the database and secret key inside the env.py file.

    import os
    
    os.environ["DATABASE_URL"] = "<database url>"
    os.environ["SECRET_KEY"] = "<secret key>"
  32. Go back to Heroku website and copy the key and value of the secret key and paste it into config vars on Heroku then click add.

  33. Then in the Django project on the code editor go to the settings.py file.

  34. Add these imports at the top of the settings.py file.

    from pathlib import Path
    import os
    import dj_database_url
    if os.path.isfile('env.py'):
        import env
  35. Then go to the insecure SECRET-KEY in settings.py and change its value to target the secret key in the env.py file instead.

    SECRET_KEY = os.getenv('SECRET_KEY')
  36. Then go down to the database section in settings.py file. Add a conditional if statement to use the Postgres database if it is available and if it is not use the default sqlite3 database.

    if 'DATABASE_URL' in os.environ:
        DATABASES = {
            'default': dj_database_url.parse(os.getenv('DATABASE_URL'))
        }
    else:
        DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.sqlite3',
            'NAME': BASE_DIR / 'db.sqlite3',
        }
    }
  37. Now you need to migrate changes again

    python3 manage.py migrate
  38. Then go to Heroku app and click the resources tab

  39. Then click on the Heroku Postgres add-on to check that the database is working.

  40. Now create a templates folders

    mkdir static templates
  41. Now you need to tell Django where the templates will be stored.

  42. Back to the top of settings.py file in the base directory section. Add the templates directory variable.

    # Build paths inside the project like this: BASE_DIR / 'subdir'.
    BASE_DIR = Path(__file__).resolve().parent.parent
    TEMPLATES_DIR = os.path.join(BASE_DIR, 'templates')
  43. Then go to the middle section in settings.py you need to find the templates list and add TEMPLATES_DIR to the DIRS KEY in the dictionary.

    TEMPLATES = [
        {
            'BACKEND': 'django.template.backends.django.DjangoTemplates',
            'DIRS': [TEMPLATES_DIR],
            'APP_DIRS': True,
            'OPTIONS': {
                'context_processors': [
                    'django.template.context_processors.debug',
                    'django.template.context_processors.request',
                    'django.contrib.auth.context_processors.auth',
                    'django.contrib.messages.context_processors.messages',
                ],
            },
        },
    ]
  44. Add the Cloudinary libraries to the installed apps in settings.py and make sure that cloudinary_storage is before django.contrib.staticfiles

    # Application definition
    
    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'cloudinary_storage',
        'django.contrib.staticfiles',
        'django.contrib.sites',
        'cloudinary',
    ]
  45. Now you need to tell Django to use Cloudinary to store the media and static files.

  46. Create the static and media folders

    mkdir static media
  47. Go to the static files section that is near the end of the settings.py file. Then add the directories for the static and media folders

    # Static files (CSS, JavaScript, Images)
    # https://docs.djangoproject.com/en/4.0/howto/static-files/
    
    STATIC_URL = '/static/'
    STATICFILES_STORAGE = 'cloudinary_storage.storage.StaticHashedCloudinaryStorage'
    STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]
    STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
    
    MEDIA_URL = '/media/'
    DEFAULT_FILE_STORAGE = 'cloudinary_storage.storage.MediaCloudinaryStorage'
    MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
  48. Now go to the ALLOWED_HOSTS variable in the settings.py file and add the Heroku app and HTTP_HOST header

    # SECURITY WARNING: don't run with debug turned on in production!
    DEBUG = True
    
    ALLOWED_HOSTS = ['graphics-design-space.herokuapp.com', 'localhost']
  49. Then create a “Procfile”

    touch Procfile
  50. Add this text into the Procfile

    web: gunicorn <projectName>.wsgi
  51. Then we deploy to Heroku

  52. Open the terminal and log into Heroku (might have to restart terminal)

    heroku login -i
  53. Find your app name

    heroku apps
  54. Set the heroku remote using your app name

    heroku git:remote -a <app_name>
  55. Disable collect static so Heroku won’t try to collect static files when you deploy

    heroku config:set DISABLE_COLLECTSTATIC=1 --app <app-name>
  56. Add and commit any changes to your code if applicable

    git add .
    
    git commit -m "Deploy to Heroku via CLI"
  57. Push to both GitHub and Heroku

    git push origin main
    
    git push heroku main

Production

  1. Go to the settings.py file and set DEBUG to True

    DEBUG = TRUE
  2. Then you save all files and commit then push to GitHub

    git add .
    git commit -m "commit message"
    git push
  3. Then head over to your Heroku app on the Heroku website.

  4. Go to settings reveal config vars then remove DISABLE_COLLECTSTATIC variable

  5. Then deploy to Heroku

  6. Open the terminal.

    command: heroku login -i
  7. Get your app name from Heroku.

    heroku apps
  8. Set the Heroku remote. (Replace <app_name> with your actual app name and remove the <> characters)

    heroku git:remote -a <app_name>
  9. Add and commit any changes to your code if applicable

    command: git add . && git commit -m "Deploy to Heroku via CLI"
  10. Push to both GitHub and Heroku

    git push origin main
    git push heroku main

Credits

Content

Website is built upon code institute boutique ado project.

Home page hero section is from bootstrap hero example

Features section on homepage is from bootstrap carousel example

Footer section on homepage is from Bootstrapious

Code for search functionality came from the Boutique Ado tutorial from Code institute

Back to top button is form material design bootstrap

Code used to post data with JavaScript

Code used to Django template variable into strings

Code used to add context to Django template view

Code used to add validation for create view form

Code used to auto update slug field

Code used to prevent none superusers from logging in

Code used to convert images to blobs, so that they can be automatically downloaded on the website

Code used to round to 2 decimal places in JavaScript

Code use to convert floats to strings in JavaScript

Code used to set user field in form to currently logged in user

Code used to store UUID in a session

Code used to add a count to objects in a Django for loop

Code used to add initial data in a form field

Code used to calculate average product ratings

Code used to display recent products with sessions

Code used to display related products on product page

Code used to update user profile information form page

Code used to layout testimonial cards on testimonial page

Code used to pass current user in create view automatically

Code used to approve testimonials with checkboxes

Code used to get the host url with JavaScript

Helped for making the Wishlist app

Helped to update ratings

Code used to help validate status fields for quote fulfilment forms

Code used to restrict access to views

Code used to prefill form data

Code used to check items in session template

Media

The majority of the graphics designs used come from FlatIcon

The poster designs are from Dribble

The wallpaper designs are from Pixabay

Banner designs are from vecteezy

Logo design adobe express logo maker

Icon used for logo

Favicon created with favicon.io

Homepage background design is from CSS BG Jar

Blank profile image is from Pixabay

About

Website for buying and downloading modern graphics.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published