Git Product home page Git Product logo

gym_subscription_ms4_2's Introduction

Imgur

Luke Duffy Fitness: Fitness and Supplement E-commerce Website

In a world where health, fitness and aesthetics are playing an increasingly important role in our lives, this project was created with the goal of making a fitness e-commerce website for the instagram generation. The website was developed for the target audience of amateur gym goers who increasingly get their gym products from the new generation of fitness 'influencers'. This website is catered for the fans and followers of fitness influencer 'Luke Duffy' and those looking to buy fitness nutrition, merchandise and gym plans from his brand.

Click here to view the deployed site

UX

User Goals

Non-registered Users

  • Allows guest user to search database for fitness item using search bar available within navbar.
  • Allows guest user to clearly navigate to each of the clearly marked four sections of the website, including 'Fitness Programs', 'Supplements', 'Merchandise' and 'Online Coaching'.
  • Allows guest user to scroll down home page and access the 'Testimonials' page, which will show the customer feedback from each the websites clients.
  • Allows guest user to add a product to the shopping bag.
  • Allows guest user to click on the 'My Account' button and the 'register' button to sign up to Luke Duffy Fitness, where the guest user will be brought to a seperate web page to input their account details.
  • Allows guest user to click on the shopping bag icon to view products already added to bag and 'Grand Total'.
  • Allows guest user to to click on Secure Checkout to purchase the items in their bag, as well as changing the quantities of the the product they wish to purchase.
  • Allows guest user to subsequently input debit card details and complete purchase of products.

Logged In Users

  • Allows logged in users to click on the login button where they will be subsequently be brought to the login site of the page and asked to input their details.
  • Allows logged in user to click on the shopping bag icon to view products already added to bag and 'Grand Total'.
  • Allows logged 'Super Users' to click on 'My Account' button and click on the 'My Product' button where super users can add, edit and delte the products they want to sell on the website.
  • Allows logged in user to sign out of their profile on Luke Duffy Fitness by clicking on the 'Log Out' button within the 'My Account' section on the Navbar.

Design

Color Scheme

For my website I used the 'Canva' Pallete generator service to ensure a understated, yet clean color scheme for my website.

Imgur

Technoliges Used

Testing and Deployment

Code Validators

W3C HTML Validator W3C CSS Validator Pep8 Online

Features Testing

Navigating the Website

  • Click on 'Supplements' button on Navbar
  • Does it bring you to correct page?
  • Click on 'Mechandise' button on Navbar
  • Does it bring you to correct page?
  • Click on 'Online Coaching' button on Navbar
  • Does it bring you to correct page?
  • Click on 'Fitness Programs' button on Navbar
  • Does it bring you to correct page?

Registering

  • Click on 'My Account' button on Navbar
  • Does the dropdown menu render?
  • Click on 'Register' button.
  • Does it bring you login page to thus login in with new account details?
  • Does it allow login with the newly created account details?

Logging In

  • Click on 'My Account' button on Navbar
  • Click on 'Login' within dropdown menu
  • Does it bring you to login input form?
  • After inputting profile username and password, does it render correct corresponding account?
  • Does the navbar change to include the 'My Products' and 'log out' buttons?

Adding item to Basket

  • Click on the 'Fitness Programs' button within the Navbar.
  • Does website render correct page?
  • Click on 'Leak Bulking Program'
  • Does correct product page load?
  • When clicking on 'Add to Bag' button, does shopping bad correctly update?

Purchasing items in Basket

  • Click on basket icon in top right hand corner of Navbar.
  • Does website render basket page?
  • Can users clear items from basket?
  • Can users change the quantity of items they have in their bag by clickon on the + and - buttons?
  • Click on 'Secure Checkout' button.
  • Does website render payments input webpage?
  • Input correct details and click purchase.
  • Is 'Thank You' webpage correctly

Searching for an Item

  • Input desired recipe keyword into search box within the Navbar.
  • Does correspinding product option render correctly?
  • If keyword is uncorresponding to recipe in database, does no product item show up in results?

Logging Out

  • Click on 'Log Out' button on Navbar as an already logged in user
  • Does website return user to home webpage?
  • Does Navbar change to 'Non-logged in' variant with corresponding buttons?

Deployment

Media

Credits and Acknowledgements

  • I would like to say thank you to my mentor Oluwaseun Owonikoko, who has been of immense help and kindness during my coding journey so far.
  • I would like the Code Institute tutors, who have shown great patience in assisting me with my many, many questions.
  • I would also like to say thanks the code institute studentcare team who have been really helpful in helping me manage the balance of coding with my ongoing University studies

gym_subscription_ms4_2's People

Contributors

lukeduffy84 avatar

Watchers

James Cloos 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.