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/
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
Link to User Stories
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
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.
The website uses Helvetica Neue as the main font-family and it is supplied by Bootstrap default.
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.
- 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 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 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 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 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 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 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 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 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 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 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.
- 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.
- 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.
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.
- 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
-
- 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
- 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.
- 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.
- 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.
- 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.
- 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.
- 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 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.
- 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.
- 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.
- 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.
- 404 page
- 403 page
- 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.
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.
Added a Facebook page for the website for customers to keep to up data with the latest deals and discounts.
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.
- HTML
- No errors were returned when passing through the official W3C Validator.
- CSS
- No errors were found when passing through the official (Jigsaw) validator.
- JavaScript
- No errors were present when passing through the JavaScript validator.
- Python
- No errors were shown when passing through the python validator
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 | √ |
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 | √ |
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 | √ |
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 | √ |
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 | √ |
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 | √ |
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 | √ |
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 | √ |
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 | √ |
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 | √ |
- 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.
- 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).
- Product list page images overflowing out of card body.
- Adding a max width of a 100% to the images.
- 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
- Could not delete items form cart initially, beacue forgot to add csrf token.
- Added csrf token.
- 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.
- 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”.
- 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.
- Custom clearable file input doesn’t display the template used to make the from look better.
-
Create Repo
-
Clone Repo
-
Open the Repo folder in your code editor
-
Install python
-
Install pip
-
Install venv
-
Create a virtual environment
python3 -m venv .venv
-
Activate virtual environment
source .venv/bin/activate
-
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
-
Create requirements.txt file for Heroku
pip3 freeze --local > requirements.txt
-
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
-
Create a runtime.txt
touch runtime.txt
-
Type in your python version for Heroku in the runtime.txt file
python-3.8.10
-
Create a new Django Project
django-admin startproject <projectName .>
-
Create a gitignore file
touch .gitignore
-
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
-
Run the project to make sure everything is working.
python3 manage.py runserver
-
Run the initial migrations
python3 manage.py migrate
-
Create a super user to log into the admin
python3 manage.py createsuperuser
-
Add, commit, and push to GitHub
git add . git commit -m "initial commit" git push
-
Now signup or log into Heroku to create the app
-
Create a new app on Heroku by clicking the “Create new app” button
-
Go to the resources tab
-
Search for “Heroku Postgres”
-
Click the “submit order” form button
-
Go to the settings tab
-
Click on the reveal Config Vars button
-
Copy the Postgres URL value to the right of the Database_url key
-
Go back to the Django project on the code editor
-
Create an env.py file
touch env.py
-
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>"
-
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.
-
Then in the Django project on the code editor go to the settings.py file.
-
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
-
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')
-
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', } }
-
Now you need to migrate changes again
python3 manage.py migrate
-
Then go to Heroku app and click the resources tab
-
Then click on the Heroku Postgres add-on to check that the database is working.
-
Now create a templates folders
mkdir static templates
-
Now you need to tell Django where the templates will be stored.
-
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')
-
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', ], }, }, ]
-
Add the Cloudinary libraries to the installed apps in settings.py and make sure that
cloudinary_storage
is beforedjango.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', ]
-
Now you need to tell Django to use Cloudinary to store the media and static files.
-
Create the static and media folders
mkdir static media
-
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')
-
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']
-
Then create a “Procfile”
touch Procfile
-
Add this text into the Procfile
web: gunicorn <projectName>.wsgi
-
Then we deploy to Heroku
-
Open the terminal and log into Heroku (might have to restart terminal)
heroku login -i
-
Find your app name
heroku apps
-
Set the heroku remote using your app name
heroku git:remote -a <app_name>
-
Disable collect static so Heroku won’t try to collect static files when you deploy
heroku config:set DISABLE_COLLECTSTATIC=1 --app <app-name>
-
Add and commit any changes to your code if applicable
git add . git commit -m "Deploy to Heroku via CLI"
-
Push to both GitHub and Heroku
git push origin main git push heroku main
-
Go to the settings.py file and set DEBUG to True
DEBUG = TRUE
-
Then you save all files and commit then push to GitHub
git add . git commit -m "commit message" git push
-
Then head over to your Heroku app on the Heroku website.
-
Go to settings reveal config vars then remove DISABLE_COLLECTSTATIC variable
-
Then deploy to Heroku
-
Open the terminal.
command: heroku login -i
-
Get your app name from Heroku.
heroku apps
-
Set the Heroku remote. (Replace <app_name> with your actual app name and remove the <> characters)
heroku git:remote -a <app_name>
-
Add and commit any changes to your code if applicable
command: git add . && git commit -m "Deploy to Heroku via CLI"
-
Push to both GitHub and Heroku
git push origin main git push heroku main
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
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