VirtualGym

Struggling to gain weight? or Gained a few extra kgs during lockdown? This site is to help you out with it. Waiting for you is a customised excercise and nutrition plan-all you need to get back in shape at home.

Subscribe and see other members reach their targets.
#motivate_and_get_motivated.

Stay safe and workout at home

UX

This service is created keeping into consideration both weight gain and weight loss. The user is provided with 3 subscription options to choose from, depending on their needs.

Below are some user stories :

1. User wants to signup :
   User will choose the signup option from the navigation, fill the fields and click on the signup button. if the field values are valid, a confirmation email will be sent to the user. Upon confirmation, the user's information will be stored on their profile page

2. User wants to login :
   User chooses login from navigation, will be redirected to the login form. The user will enter the details and press on submit. If the values are correct, the user will be logged in to the system

3. User wants to update his profile :
   User clicks on my account in the navigation, chooses profile. Updates the desired fields, If the values entered are valid, a success message will be displayed. If not an error message will be displayed.

4. User wants to buy a product :
   User chooses the desired option from the shop button in the navbar then selects the product which takes the user to the product detail page. User can then choose the size (if applicable) and the quanity and click on add to bag. Here user can update his/her bag contents by changing the quantity and clicking on update or clicking on remove to delete the item from the bag. User then clicks on the checkout button, which will ask the customer to enter details. If the card details are wrong, an error message will be displayed and if the payment is successful, a confirmation message will be displayed, which will contain all the order and delivery details

5. User wants to rate an item:
   User logs in. User chooses the desired option from the shop button in the navbar then selects the product which takes the user to the product detail page. User then clicks on add rating. A pop up will appear, the user then clicks on the stars and clicks on submit. If submitted without rating, an error message will appear, telling the user that the minimum rating is 1. If submitted with rating, the values are stored and the user is redirected to the all product page

6. User wants to view the previous order : User will login from the navigation, go to the profile page, if there have been orders made in the past, the details will be displayed in the table next to their delivery information

7. User wants to buy a subscription : user clicks on plan, chooses the desired service, gets redirected to a registration page if logged in. if not logged in, the user will be asked to login. upon registration, if the user has not bought other plan, it will lead him up to the billing page. Once the form is submitted, if all details entered are valid, it will print a success message.

8. User wants to view activity board : user clicks on account and chooses activity board from the dropdown. A page is displayed with all the members and the memeship they chose.

9. User wants to log out : User chooses the logout option from the navigation, a page will be displayed asking the user if they are sure, if yes they will be logged out of the system. If the user clicks on cancel the user will still be logged in

During the early stages, rough wireframes were made using balsamiq

• Desktop
• Android

Features

Existing Features:

Navigation: allows the user to choose between what they want to acheive by clicking on the tab (code in: base.html).

Buy products: allows users to buy a product by entering the checkout form (code in: checkout app)

sort: allows users to sort the products depending on the name and price (code in: products app)

rating: allows the user to rate the products if they have logged in (code in: product app)

profile: allows the user to view their user details and the order details (code in: profile app)

save details: allows the user to save their checkout information (code in: checkout app)

subscribe: allows the users to choose from 3 subscription plans and choose the period of payment

activity board: allows the users to view the progress of other members

login/signup: allows the users to login to an account/create an account to buy products and services by filling out the username and password

Features Left to Implement

• Have a chart to display the activity board information in a more user friendly way
• Allow user to give a written review
• Display all the reviews with the dates and username
• Display product deals
• calculate BMI instead of asking the user
• If there are no orders linked to a user, in the profile page, display a message and a link to shop instead than an empty table
• Display a message to let the user know that the rating has been saved

Technologies Used

HTML: Hypertext Markup Language (HTML) was used to create the webpage.

CSS: Cascading Style Sheets (CSS) was used to add customised styling to the webpage.

JavaScript: JavaScript enables interactive web pages and is an essential part of web applications. It was used to add interactive functionality to the webpage

Python: Python was used for the server side web development. Also to connect to the database and perform various operations of its data.

Django: Django is a python based framework which was used in this project as it follows the Model Template View architectural pattern

Bootstrap: Bootstrap was used to create responsive webpages with the help of pre built classes

FontAwesome: FontAwesome was used for icons

Stripe: Stripe was used to implement single and subscription payment methods.

Balsamiq: Balsamiq was used to create wireframe. It was used in the initial stages of the project visualisation. It was used to put the idea of a page decide the layout and flow of the project.

JQuery: JQuery was used to simplify DOM manipulation.

Testing

Manual testing was done on all the forms of this project

Sign form:
Try to submit the empty form and verify that an error message about the required fields appears.
Try to submit the form with invalid field values and verify that a relevant error message appears.
Try to submit the form with user details already present in the database and verify that a relevant error message appears.
Try to submit the form with all inputs valid and verify that the values get stored in the database.

Login form:
Try to submit the empty form and verify that an error message about the required fields appears.
Try to submit the form with invalid field values and verify that a relevant error message appears.
Try to submit the form with user details not present in the database and verify that a relevant error message appears.
Try to submit the form with all inputs valid and verify that the success message appears.

Checkout form:
Try to submit the required fields with no data and verify that an error message is displayed.
Try to submit the form with incorrect bank details and verify that an error message is displayed.

Review modal:
Try to submit the modal with no ratings and verify that an error message appears. Try to choose a rating and leave the modal without submit and verify that the product doesnt have that rating stored.
Try to submit the modal with some rating and verify that the rating gets saved

Add product:
Try to add a product with required field left blank and verify that the appropriate message appears
Try to add a product with valid field values and verify that they are saved in the database

Delete product:
Click on the link to delete and verify that the product gets deleted from the database.

Edit product:
Try to edit a product with required field left blank and verify that the appropriate message appears
Try to edit a product with valid field values and verify that they are saved in the database

Deployment

This project is used using Heroku.
Steps taken to deploy this project are as follows:

• Create an app in Heroku

• In the terminal typed the follow commands:

  1. pip3 install dj_database_url
  2. pip3 install psycog2-binary
  3. pip3 freeze > requirements.txt
  4. import dj_database_url in virtual_gym/settings.py
  5. add the default database in virtual_gym/settings.py
  6. migrate the changes
  7. load the data (ex: python3 manage.py loaddata categories)
  8. pip3 install gunicorn
  9. pip3 freeze --local > requirements
  10. echo web: gunicorn virtual_gym.wsgi:application > Procfile
  11. heroku login
  12. in settings.py add the link in allowed host
  13. git add .
  14. git commit -m "initial commit"
  15. heroku git ::remote
  16. git push heroku master
  17. create an AWS account
  18. connect Django to s3

• In the herko app, go to settings:

  1. IP = 0.0.0.0
  2. PORT = 5000
  3. set the secret keys

• All the environment values have been saved in the env.py file

Credits

Content

The product description are copied from:

• Gym Shark
• My Protein

Media

The product images are taken from:

• Gym Shark
• My Protein

The backdrop image is taken from:

• BodyBuilding estore

The membership images are taken from:

• Gold and Silver
• Bronze

Acknowledgements

• Star Reviews
• JustDjango
• Forms
• Django Lessons

I received inspiration for this project from:

• Fiit Gym
• Boutique Ado

Many of the development problems have been rectifies with the guidance of

• StackOverflow
• code Institue tutors