Giter VIP home page Giter VIP logo

django-milestone-ecommerce's Introduction

PROJECT NAME

"Ecommerce" by Christopher Randall

In this project I wanted to create a simple Ecommerce store which provided the user with a simple design and layout.

User Experience (UX)

User stories

    First Time Visitor Goals:

     -  As a First Time Visitor, I want to easily understand the main purpose of the site.
     -  As a First Time Visitor, I want to be able to easily navigate throughout the site.
     -  As a First Time Visitor, I want to be able to easily purchase an item.

    Returning Visitor Goals:

    -  As a Returning Visitor, I want to find items I had previously added to my cart to still be there.
    -  As a Returning Visitor, I want to find my cart items ready for purchase.

    Frequent User Goals:

    -  As a Frequent User, I want to check to see if there are any newly items added to the store.

Design

    Colour Scheme:
    
    -  Two main colours were used on the homepage which were a light Grey as a background and a subtle aqua Blue for the navigation bar, along with a clean White background for each individual item.

    Typography:

    -  The Sans Serif font is the main font used throughout the whole website.

    Imagery:

     -  Imagery is important and it was imperative to showcase anm image of the item over the cost.

Wireframes

    Home Page   - https://github.com/MrChrisRandall/Django-milestone-Ecommerce/blob/Backup/ecommerce/static/images/Ecomm-Main-page.png

    Mobile View - https://github.com/MrChrisRandall/Django-milestone-Ecommerce/blob/Backup/ecommerce/static/images/Ecomm-Mobile-view.png

FEATURES

-  Responsive on all devices.

-  Interactive elements.

Frameworks, Libraries & Programs Used

Bootstrap 4.4.1:
    
    Bootstrap was used to assist with the responsiveness and styling of the website.

Font Awesome:
    
    Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.

Git:

    Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

GitHub:
    
    GitHub is used to store the projects code after being pushed from Git.

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.

Testing User Stories from User Experience (UX) Section:
    
    First Time Visitor Goals:
        
        As a First Time Visitor, I want to easily understand the main purpose of the site.

            Upon entering the site, users are automatically greeted with a clean minimal homepage. Each picture showcasing the product on display along with clean "Add to cart" and "View" buttons.

        As a First Time Visitor, I want to be able to easily navigate throughout the site.

            The site has been designed to be minimal and clean with little clutter.

        As a First Time Visitor, I want to be able to easily purchase an item.

            This is made easy by the "Add to cart" button which stands out on all products on display.
        
    Returning Visitor Goals:

        As a Returning Visitor, I want to find items I had previously added to my cart to still be there.

            Thanks to Cookies stored by the website a user can add items to their cart and then return at a later date to find the items still there ready for purchase.
        
        As a Returning Visitor, I want to find my cart items ready for purchase.

            This is as simple as clicking into the cart where the items have been saved, clicking the checkout button, filling out the form and clicking on the payment options.

    Frequent User Goals:

        As a Frequent User, I want to check to see if there are any newly items added to the store.

            This is easily done by visiting the site and simply looking through the main page.

Further Testing:

    The Website was tested on Google Chrome and Microsoft Edge.
    The website was viewed on a variety of devices such as Desktop, Laptop nad Mobile.
    A large amount of testing was done to ensure that all teh features were working correctly.
    Friends and family members were asked to review the site and documentation to point out any bugs and/or user experience issues.

GitHub Pages

The project was deployed to GitHub Pages using the following steps:

    Log in to GitHub and locate the GitHub Repository.
    Go to settings and change the branch to Master.
    Once the project is running in GitPod I used the terminal to add my files to the Repository with teh command git add . .
    Then the command git commit -m "Message" was used to commit the changes.
    Then git push was used to push the changes to GitHub.

Credits

Code:

    All code was written by the developer.

CDNJS:

    CDNJS was used to search and find libraries.

Content:

    All content was written by the developer.

Media:

    All images were sourced via https://www.google.ie/

Acknowledgements:

    My Mentor for continuous helpful feedback.

    Tutor support at Code Institute for their support.

django-milestone-ecommerce's People

Contributors

mrchrisrandall avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.