Giter VIP home page Giter VIP logo

momentum-fitness's Introduction

Momentum Fitness

Momentum fitness is a project made for fitness enthusiasts and gym-freaks alike! Using django as it's framework, users will be able to purchase products from the online shop, find out where the gyms are located, purchase a membership and access a members only area. The database currently contains products and articles but will collect users information and also purchase information of the products. This website is a multi-faceted website for all things gym related!

UX

This website is created for anyone that has ever been or ever wanted to get to the gym! The site users will be individuals that are interested in healthy living with a passion for getting out and working for their goals.

  • As a user, I can see what the main focus of the website is.

  • As a user, I can navigate through the website efficiently without questioning how to return.

  • As a user, I will be able to access any social media the website has.

  • As a user, I will be able to view the various products the website has in it's online shop.

  • As a user, I will be able to add any of these said products into a cart.

  • As a user, I will be able to access this cart and see what products I am about to purchase.

  • As a user, As a user I will be able to access the checkout, then go onto purchase these products,

  • As a user, I will be able to view a a receipt of my purchase/purchases, informing me of the purchases I have made,

  • As a user, i will be able to purchase products and membership packages.

  • As a user, I will be able to register on the website simplifying purchases and user experience in the future.

  • As a user, I will able to see where the gym's are located.

  • As a user, I will be able to login, logout and sign up to the website.

  • As a registered user, I will be able to access a members only area in my website with articles and advice.

  • As a registered user, I will be able to access and edit my profile and see previous purchases in my order history.

  • As an administrator, I will be able to access an admin platform on the website.

  • As an administrator, I will be able to add, edit or delete any of the products on this website.

My wireframes were made using Balsamic. You can view them here

Schema

My Database is divided into five sections.

  • The first and most simple is categories. This is just the 5 categories that the products are divided into.

Schema Categories

  • The second manages the different products on the website.

Schema Products

  • The third database contains articles and training advice that is featured on the members only page.

Schema Articles

  • The fourth contains all the orders that have been made via the website.

Schema Orders

  • Finally, the fifth contains all the users that have registered on the website.

Schema Users

Features left to implement

  • In the future I would like to implement subscription payments. Due to time constrains this was not at all possible.

  • I will ensure that registration is for subscribed members and I will also implement some form of discounts on the products for these users.

  • I would also like to enlarge the size of the members area to have more workout plans, diet plans etc. I could also implement a schedule to book into classes and book times with personal trainers.

  • I will also update the maps to have tags to describe the exact locations of the gyms.

technologies used

  • HTML5

    • HTML5 is a markup language used for structuring and presenting content on the World Wide Web.
  • CSS3

    • Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
  • Javascript

    • JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions.
  • J. Query (3.4.1)

    • jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.
  • Google Fonts

    • Google Fonts (previously called Google Web Fonts) is a library of 991 free licensed font families, an interactive web directory for browsing the library, and APIs for conveniently using the fonts via CSS[1] and Android.
  • Bootstrap (4.4.1)

    • An open source toolkit for developing with HTML, CSS, and JS.
  • Font Awesome (V5.6.3)

    • A toolkit for icons.
  • Python

    • Python is an interpreted, high-level, general-purpose programming language. Created by Guido van Rossum and first released in 1991, Python's design philosophy emphasizes code readability with its notable use of significant whitespace.
  • Django

    Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design

  • SQLite

    • SQLite is a C-language library that implements a small, fast, self-contained, high-reliability, full-featured, SQL database engine.
  • AWS

    Amazon Web Services (AWS) is a subsidiary of Amazon providing on-demand cloud computing platforms and APIs to individuals, companies, and governments, on a metered pay-as-you-go basis.

Testing

I acknowledge a few lines of my pep8 may not be correct, again I was running on a very tight deadline so I didn't have time to research.

This website was tested across multiple browsers (Chrome, Safari, Firefox and Microsoft edge.) It is also responsive, having tested it on chrome developer tools across ipad, various iphones, samsungs etc. I have also tested it on iphone x, iphone 7, macbook and desktop. Please note I was not able to make my product viewable on the Surface Duo or the Galaxy Fold as it appears they were added on the moments before my deadline and I was working on a very, very tight schedule!

User stories Testing

  • As a user, I can see what the main focus of the website is.

Momentum Fitness

  • As a user, I can navigate through the website efficiently without questioning how to return.

navbar

- I have been through the website ensuring that the links work.
  • As a user, I will be able to access any social media the website has.

Socials

- I have clicked on each social media link, checking if they go to the correct site in a new window.
  • As a user, I will be able to view the various products the website has in it's online shop.

Products

  • As a user, I will be able to add any of these said products into a cart.

  • As a user, I will be able to access this cart and see what products I am about to purchase.

Shopping Cart

- I have been through the products, added the to the cart and checked the quantity, etc is correct.
  • As a user, As a user I will be able to access the checkout, then go onto purchase these products,

Checkout

- I have been to the checkout, ensuring that my items are there and I can purchase then.
  • As a user, I will be able to view a a receipt of my purchase/purchases, informing me of the purchases I have made,

Checkout Success

- I have been through the checkout and tested the confirmation
  • As a user, i will be able to purchase products and membership packages.

Members

- I have visitied the 'join us page' and insured that you can purchase memberships.
  • As a user, I will be able to register on the website simplifying purchases and user experience in the future.

Signup

 I have been to the signup page and attempted registering with success.
  • As a user, I will able to see where the gym's are located.

Map

  • As a user, I will be able to login, logout and sign up to the website.

Logout

 I have tested both logging in and out.
  • As a registered user, I will be able to access a members only area in my website with articles and advice.

Members Tips

  • As a registered user, I will be able to access and edit my profile and see previous purchases in my order history.

Profile

- I have been to the profile page and accessed my information.
  • As an administrator, I will be able to access an admin platform on the website.

Admin

- I have accessed the administration panel and checked everything is up to scratch.
  • As an administrator, I will be able to add, edit or delete any of the products on this website.

    • This is done through the administration panel. This has been tested continuously through the project.

Problems Encountered

During this project I encountered various small problems, some I fixed and some were just not manageable in the short timeframe I had and will have to be fixed after the project

  • One of the biggest problems I encountered was hosting to Heroku. This is not usually a problem but I nor two of my tutors could find this problem for several hours. Sadly, it turns out it was a mispelling in the wsgi file and wasted many very crucial last hours of this project.

  • For this reason I have some small bugs remaining.

    • One of these bugs is in the checkout. If you choose a quantity first in product details, then change the quantity in the cart. After this, you go back to the products and try to alter the products again, the app crashes. This is very dissapointing to leave until I have been graded.

    • A second disappointing problem is that when you select a product with a size or a flavour, first the size or flavour will come up. But, if you then alter the quantity again it the cart somehow loses this detail. If I just had a little more time I'm sure I could solve this!

    • I also have a health form that I was planning to link in when a user bought a membership but I just have not had time. Even in this 26 hour last push.

    • Using a python key in my javasript map meant it is only functioning in developer mode. I will fix this when I have more time.

Deployment

This site is hosted on Heroku deployed directly from the master branch. To deploy the website you must first create a Heroku account.

  • Next you will create an app on Heroku

Create Heroku App

-After this you will want to add your configuration variables. You can do this inside settings of your Heroku app. You want to add IP address, Port, and your environment variables of the application. In this case my variable examples are stored in my env_sample.py file. You will have to create your own based on the examples of what you need. I would highly recommend you store your environment variables in their own file which is ignored when being push to a server.

Configuration variables

  • You will need to ensure you have a Procfile. You do this by entering the following into the bash terminal.

Procfile

  • You will also need a requirements.txt file.

Requirements.txt

  • git add . and git commit with a meaningful commit

Git Commit

  • Once these requirements are done you can login to your Heroku in the bash terminal.

Heroku Login

  • Next push the application to heroku using.

Heroku push

  • Finally command Heroku to start running the application

Heroku Run

  • Now, inside Your Heroku dashboard in the top right of the window you can now open the the application.

Open App

-You will also have to set up your own Amazon Web Services account to upload your static and media files into.

To run locally you can clone this repository directly into the editor of your choice by firstly,

  • copying the link from clone or download on my GitHub page.

git copy

git clone

  • To cut ties with this GitHub repository, type git remote rm origin into the terminal.

git remove

  • Upon using this project you will need to use your own environment variables. You can see an example of the variables I have used in my env_sample.py file. Before you host this project, ensure that you have ignored this file before pushing your project to the server.

env vars

Credits

content and media

The checkout app and profile app were taken frok my Boutique Ado app I created following the Code Institute videos. being said, slightly altered. Other parts have similarly been created following tutorials. The articles I have used on this website are copyright free and have been taken from News USA. The photos were taken from Pexels and a whole variation of photographers. https://www.pexels.com/video/a-woman-lifting-a-cast-iron-kettle-weights-while-in-a-push-up-exercise-position-3209068/ https://www.instagram.com/ajaybhargavguduru/, https://www.instagram.com/andreapiacquadio_/, https://www.instagram.com/kaboompics/, https://www.instagram.com/thisisengineering/ https://www.pexels.com/@ella-olsson-572949?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels , https://www.pexels.com/@gustavo-fring?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels, https://www.instagram.com/pikx.niagara/, https://www.instagram.com/willpicturethis/

Acknowledgements

A thank you to Cormac for his continual help through the project.

momentum-fitness's People

Contributors

theonorris 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.