Visit my site World of Shape - Your journey starts now!
You have two options to test World of Shape
-
Register as a new user
or
-
Login as "testuser" with the following credentials:
- Username: testuser
- Password: testworldofshape
Table of Contents
- Welcome to "World of Shape"
- UX - User Experience
- Features
- Testing
- Technologies Used
- Deployment
- Credits
- Contact
World of Shape is a website that aims to get the user in shape and lose weight within 30 days!
The user purchase and attends a 30-day excercise program where the user will have access to World of Shapes personal trainers, training programs and mealplans the user choose to purchase. The user is encuraged to take a "before" and "after" picture of themself in order to monitor their progress. The World of Shape concept has a proven system that can be validated in the testimonial section of the website.
World of Shape is build of an existing website that sells weightloss-training programs and mealplans. The aim of my "World of Shape" website is to improve the existing website and ultimately the profitabillity of the business. This is attained by building a more professinal looking website that is a lot more user friendly and more visually appealing.
The purpose of the project was to create a Full Stack Framework Django site and improve:
- the actual website,
- the user experiance.
- the profitabillity of the business.
The appliction uses Django 3 to encourage rapid development, by following a MTV (model-template-view) architecture pattern. I have used the separation of concerns in the application to utilize the Django Framework effectively.
Alongside the Django framework, I have used SQlite in the project's development phase for local testing. SQlite is a selfcontained highly reliable SQL database engine that features all the normal relational database management. When the project was ready for deployment I switched to Postgres (PostGreSQL) to ensure that any data entered was visible in my deployed Heroku application. PostGreSQL is open source and boosts a fully technical and easy to use Object relational database management system.
The admin user of World of Shape has full access to the Admin dashboard where the admin can create, read, update and delete the Training programs, Mealplans, User settings and Checkout orders. The Admin dashboard is custom made for the World of Shape website. From the Django dashboard the admin can do the CRUD operations in all 6 applocations.
The 7 applications are:
- Worldofshape
- Cart
- Checkout
- Home
- Meals
- Products
- Users
The project uses Git and GitHub for version controll and is deployed via Heroku.
All secret variables are stored in an env.py file that is then ignored by the version control with the .gitignore file. This is done to ensure that the project integrity is held at a high security standard.
The application uses Stripe as payment method and when testing the payment functionality please make sure to use the Stripe test card numbers. Throughout the development phase of this project I have used, and they can be used to test the production version as well:
- Card number: 4242 4242 4242 4242
- CVV: Any 3 digit number
- Card Date: Any future date
Please feel free to register a user to fully test the World of Shape website or you can login as the testuser:
- Username: testuser
- Password: testworldofshape
The typical user is a man or a woman of all ages that want to get in shape but have struggled in the past. World of Shape helps these users to attain this goal by giving them the tools to effectivly reach the goal set by the user. World of Shape helps the user by supplying the necessary tools to best loose weight and get in shape. These tools consists of training programs, mealplans and access to World of Shapes personal trainers on the web.
Generic (Guest/Public) User:
- As a Generic User I can browse the site and access all necessary information I need before making a purchase.
- As a Generic User I can register a profile and add a profile picture.
- As a Generic User I can contact World of Shape by sending them a message from the website contact form.
- As a Generic User I can view the site on any device I may have, (mobile/tablet/desktop).
Registered (Logged in) User:
- As a Registered User I can login to my site.
- As a Registered User I can update my profile picture, username and email settings.
- As a Registered User I can add products to my shopping cart.
- As a Registered User I can delete my cart items.
- As a Registered User I can checkout and pay for my shopping cart items.
Application Admin User:
- As a site Admin User I can log in to the Django Admin Dashboard. In the dashboard I can:
- Update, add, change or delete Users,
- Update, add, change or delete Meals,
- Update, add, change or delete Programs,
- Update, add, change or delete User-profiles,
- Update, add, change or delete Orders,
- Change or delete User-passwords,
Application Owner:
- As the Owner I can receive emails from the sites contact from.
Developer:
- As a Developer I wanted to demonstrate my skills as a junior Full Stack Software developer.
- As a Developer I wanted to build a project that I could showcase alongside my other projects to potential future employers or customers on GitHub and in my personal portfolio: Stefan Brunottes Portfolio Site is under constructio!.
- As a Developer I wanted to improve the existing website World of Shape and make it a more inviting and user friendly website.
AdobexD was used for the mockup.
See the WorldofShape Mockups here Click on "World of shape" in the top left corner to see all 10 mockups.
Navigation and buttons:
The navigation consist of a "logged in" navigation and a "guest" navigation. The difference between the two is that when the user is logged in they will be able to reach the "profile" section and the user is also able to add programs and meals to the shopping cart. If a user isnt logged in and adds something to the cart they will be directed to the login page before they are able to checkout and pay for the item.
There is a navigation row for larger screens and a "hamburger" menu for smaller screens. There is also a navigation bar in the footer.
The idea behind the navigation both from the navigation bar, footer and different buttons is to easily direct the user to the correct location so that it is easy for the user to buy the training programs or meals or get the correct information so that they will feel confident and start one of the programs.
The site is constructed so that the user have to do as few clicks as possible to make a purchase, this makes it more likely that the user purchases a product or mealplan.
On all pages except "contact" and "Profile" there are buttons for the user to click on to join the program and get directed to a purchase opportunity.
Home page:
- The Join Now button directs the user to the products page where all the training programs are listed. The user can read more or add a program to the shopping cart.
- The Read More button in the "training programs" box directs the user to the products page.
- The Read More button in the "Weight Loss Analysis" box directs the user to the weight loss page where the user can find out what program suits them best.
- The Read More button in the "Healthy Diet Plan" box directs the user to meal page where the meals and dietplans can be purchased.
- The Read More button below About world of Shape directs the user to the About Us page.
- The names of each testimonial is linked to the the testimonials page.
- The Join Now button at the bottom of the page directs the user to the products page.
About Us page:
- The Read More button directs the user to the text below.
- The Find Out How It Works Video link shows the user a pop-up video explaining the World of Shape concept.
- The Join Now button directs the user to the products page.
- The Get Discount button at the bottom of the page is not linked yet and is left for future implementation.
Our Training and Our Meals page:
This page displays all training program/Meals available for purchase.
- The Read More button directs the user to the text below.
- The Find My ProgramFind button directs the user to the "weight loss" page where the user finds the correct program for them. (There is no Find My Meals button!)
- The Read More button below each program/meal directs the user to the program/meal page where the user can read more about the specific program/meal.
- The Add To Cart button puts the chosen program/meal in the shopping cart and the cart navigation in the top navigation bar displays the number of programs/meals in the cart.
-
- The Get Discount button at the bottom of the page is not linked yet and is left for future implementation.
Program and Meals page:
This page displays an indivicual program/meal available for purchase.
- The Add To Cart button at the top and bottom puts the program/meal in the shopping cart and also displays the amount of items currently in the cart. It redirects the user to the shopping cart so they can checkout and pay for the program/meal.
The user is intentially redirected to the shopping cart because it is most likely that they will only buy one program/meal at a time, so it is better to redirect the user to the checkout rather than back to the homepage or somewhere else.
Testimonials page:
- The Read More button directs the user to the text below.
- The names of each testimonial is linked to the the programs page where the user can get started and purchase a program.
- The Join Now button at the bottom directs the user to the products page where the user can get started and purchase a program.
Contact form:
From the contact page the user can send an email to World of Shape. After the message is sent the user is informed the the message has been delivered and World of Shape will be in touch soon.
Login page:
- The user logs in with username and password and get directed to the homepage.
- If user have forgotten the password they can request a new password by clicking on the "Forgot Password?" link.
- If the user haven't registered there is a link to "sign up now" that directs the user to the register page.
Register page:_
- The user register a username, email, password, and confirms the password. There is help-text below each input field that informs the user what format is needed, the help-text is highlited when hovered over.
- When the user clicks register, the user is redirected to hte login page and a message is displayed "Your Account Has Been Created! You Can Now Log In."
- If user already is registered there is a link to the login page.
Reset Password page:
- If the user forgot their password they can click on the link to create a new password. They will then be directed to the reset password page
- When the user have requested a reset of their password they are redirected to a message page where they can log in again after they have followed the instructions in their mail inbox or they can go back to the homepage.
Cart page:
When a product or meal is added they are displayed in the cart page.
- The Checkout button redirects the user to the payment page.
- Each program/meal in the cart can be deleted by clicking on the Delete Item button.
- If there are more than one item in the cart the total ammount is displayed below the checkout button.
Checkout page:
The checkout page summarizes the items and lets the user scroll down to make sure that the correct items are in the cart.
If the cart is empty and the user clicks on the checkout button the user is redirected to the programs page with a message saying: "Your cart is empty, please add items and checkout"
- The Change Order button redirects the user back to the cart to delete an item.
- The user inserts the "Payment Details" and "Card Details" before submitting payment.
- If something with the payment is wrong the message "We Were Unable To Take Payment With That Card!" will be displayed and the user is redirected to the checkout page.
- If the payment is ok the user will be redirected to the homepage and a message will be shown that states "You have successfully paid"
Error pages:
There are three custom error pages, 403-error, 404-error and 500-error. All three error pages have the same format and design.
On the error pages the user is informed what the error is and they are able to click on a link that takes them back to the homepage.
See the 404-error page here:
- Add static and media files to an S3 bucket.
- Add a blog function for the registered users to communicate with each other.
- The Get Discount button in the 15% discount section needs a discount message displayed in form of a popup with the discount code or message.
- Add tests to get 100% coverage in all apps.
- Work on Accessibililty features and make the web page adhere more to the WCAG (Web Content Accessibility Guidelines)
- Store images in a AWS bucket instead of using "image location" and relying on someone elses image storage.
I have conducted both manual and automated testing on the website.
Automated testing was conducted on each app. I used Djangos TestCase and SimpleTestCase to test the apps.
I then used Coverage to see the "coverage" of my tests, I was not able to get 100% on all apps but that is mentioned above in the section: Features left to implement.
I ran the tests on my SQlite development database.
See the Coverage report.
See the Automated tests (TestCase and SimpleTestCase).
Summary of manual testing of user functions here
I have conducted testing both as a Guest user and as a Logged in user.
Navigation and buttons:
- Test that all URLs patterns in the navbar point to the correct view.
- Make sure that the there is a profile and logout option in the navbar and that they point to the correct view.
- Test the "hamburger" menu on smaller screens and make sure all navbar options work correctly.
- Test the footer navbar and make sure all navbar options work correctly.
Home page:
- Test that the Join Now button directs the user to the products page.
- Test that the Read More button in the "training programs" box directs the user to the products page.
- Test that the Read More button in the "Weight Loss Analysis" box directs the user to the weight loss page.
- Test that the Read More button in the "Healthy Diet Plan" box directs the user to meal page.
- Test that the Read More button below About world of Shape directs the user to the About Us page.
- Test that the names of each testimonial is linked to the testimonials page.
- Test that the Join Now button at the bottom of the page directs the user to the products page.
About Us page:
- Test that the Read More button directs the user to the text below.
- Test that the Find Out How It Works Video pops up and the video is played.
- Test that the Join Now button directs the user to the products page.
- Test that the Get Discount button at the bottom of the page is a dummy link and the user stays on the about page.
Our Training and Our Meals page:
- Test that the Read More button directs the user to the text below.
- Test that the Find My Program button directs the user to the "weight loss".
- Test that the Read More button below each program/meal directs the user to the correct program/meal page.
- Test that the Add To Cart button puts the chosen program/meal in the shopping cart and the cart navigation in the top navigation bar displays the number of programs/meals in the cart.
- Test that the Get Discount button at the bottom of the page is a dummy link and the user stays on the current page.
Program and Meals page:
- Test that the Add To Cart button at the top and bottom puts the program/meal in the shopping cart and also displays the amount of items currently in the cart. And redirects the user to the shopping cart so they can checkout and pay for the program/meal.
Testimonials page:
- Test that the Read More button directs the user to the text below.
- Test that the names of each testimonial is linked to the the programs page.
- Test that the Join Now button at the bottom directs the user to the products page.
Contact form:
Test that the user the user can send an email to World of Shape, and gets a message telling the user that the email was sent.
Login page:
- Test that the user can log in with username and password and get directed to the homepage.
- Test that the "Forgot Password?" link works correctly.
- Test that the "sign up now" link works and redirects the user to the register page.
Register page:_
- Test that the user can register as a user and is redirected to the login page and greated with a message saying: "Your Account Has Been Created! You Can Now Log In."
- Test that the link to the login page works and redirects the user to the login page.
Reset Password page:
- Test that the link to create a new password works correctly and redirects the user to the reset password page
- Test that the user can log in again after they have followed the instructions in their mail inbox.
- Test that the link back to the homepage works.
Cart page:
- Test that the Checkout button redirects the user to the payment page.
- Test that each program/meal in the cart can be deleted by clicking on the Delete Item button.
- Teest to make sur that if there are more than one item in the cart the total ammount is displayed below the checkout button.
Checkout page:
- Test that the Change Order button redirects the user back to the cart.
- Test that the Checkout button redirects the user to the programs page if cart is empty.
- Test that the user is able to inserts "Payment Details" and "Card Details" properly.
- Test that the payment works and that the user is redirected to the homepage and a message is shown saying: "You have successfully paid"
- Test that the if something with the payment is wrong the message "We Were Unable To Take Payment With That Card!" will be displayed and the user is redirected to the checkout page.
Summary of manual testing of responsivness see it here
I have used media queries to build a responsive website. I have looked for "natural" breakpoints on my site and these are the best breakpoints for my design:
- Hamburger menu break ~ @media only screen and (max-width: 1190px)
- > 1200px ~ @media only screen and (min-width: 1199px)
- 992 - 1199px ~ @media only screen and (min-width: 991px) and (max-width: 1199px)
- 768 - 991px ~ @media only screen and (min-width: 767px) and (max-width: 991px)
- 575 - 767px ~ @media only screen and (min-width: 575px) and (max-width: 767px)
- < 575px ~ @media only screen and (max-width: 574px)
I have tested the responsiveness in browsers:
- Firefox and
- Chrome
I have also tested responsivness for portrait and landscape settings.
I have ran all my code through differnt validators to make sure that my code is ok and up to date with current code standards.
It is a bit tricky to test the HTML code due to the use of a base.html, templates and jinja. Therefore I created a HTML testing template called code_testing.html. I created a base layout and tested it with the Validator and got no errors. I then pasted in the HTML between the "block content" and the "endblock content" from each app template HTML file and tested it in the HTML validator.
My code_testing.html template
I filtered out "bad Values"
When the filter was applied all my templates passed the validator.
To validate my HTML code I used: Validator W3 Org
My CSS code was checked with Jigsaw W3 Org
I got 96 warnings and they were all warnings about unknown vendor extension. These came with the css code from the template I downloaded so I have ignored them!
Everything else was labeled "valid CSS information" by the Jigsaw validator!
My Python code was checked with PEP8 online
All python code passed the requirements for PEP8!
Exception: Line 118 in the worldofshape settings.py file gives the Code E501 "line too long" message. I left this because the line is one of the AUTH_PASSWORDS_VALIDATORS and the line is not suitable for dividing to fit the PEP8 requirements.
- VSCode
- HTML
- CSS
- Django 3.0.4
- JavaScript
- Bootstrap 4
- jQuery
- Colorbox (jQuery plugin) ~ Plugin for the World of Shape video
- Parallax (jQuery plugin) ~ A simple parallax scrolling effect.
- Git
- GitHub
- Heroku
- SQLite ~ Database used in development
- Heroku Postgres ~ Database used in production
-
Pep 8 Online Validator ~ Check python code for PEP8 requirements
-
JSHint ~ Check the JS scripts
- Custom.js: No errors ($ is an undifined variable)
- stripe.js: No errors ($, Stripe are undifined variable)
-
Jigsaw W3 Org ~ Check CSS code
-
Validator W3 Org ~ Check HTML code
If you want to clone this website you need to create the necessary keys!
- Login or create an account at Stripe to get your Stripe keys.
- Follow the instructions and if you create a new account verify your email and activate your Stripe account.
- Click on Get your test API keys to see your Publishable key and your Secret key.
- Create a random SECRET_KEY and set as environment variable (in .env file).
- MacOS and Linux
export SECRET_KEY=<secret key> - Windows
set SECRET_KEY=<secret key>
- MacOS and Linux
- When you have your three keys store them in your env.py file in the directory app worldofshape (not in the root folder!).
In order to make the contact form work you need your gmail username and password.
If you wish to run this code locally then please follow the instructions below.
- Download the code from the GitHub repository from here.
- Click on "Clone" or "download then Download ZIP". This will download the code into a ZIP folder locally on your computer.
- Uncompress the ZIP folder.
- Create a virtual environment.
- Create env.py file in the worldofshape app (not the root folder!)
- Make sure you have theses settings in the env.py file, so that the environment variables can be read:
- Import:
import os - Set:
os.environ[’SECRET_KEY] = ‘ …. ‘ - Set:
os.environ[’EMAIL_USER’] = ‘ …. ‘ - Set:
os.environ[’EMAIL_PASS’] = ‘ …. ‘ - Set:
os.environ[’STIRIPE_PUBLISHABLE’] = ‘ …. ‘ - Set:
os.environ[’STIRIPE_SECRET’] = ‘ …. ‘ - Set:
os.environ[’DATABASE_URL’] = ‘ …. ‘
- Import:
- Activate the virtual environment.
- Install the necessary Python packages in the requirements.txt file.
pip freeze --local > requirements.txt
- Open up a terminal (VSCode) and run
python manage.py runserver. - Follow the link by (Ctrl + click) on http://127.0.0.1:8000 to view World of Shape in your browser.
This project was deployed to Heroku and uses Heroku for its production environment. Below you have instructions on how to deploy this web application to a production environment in Heroku.
*Git must be installed onto your computer. Instructions for installing Git can be found here.
**Heroku CLI must be installed to deploy to Heroku using these instructions. Please follow the instructions here to download and install Heroku CLI.
-
Login to Heroku
-
Select New > Create New App and fill out the details required then hit Create App.
-
Select Settings > Reveal Config Vars. Enter the following environment variables:
- DATABASE_URL: the URL is automatically set when you add the add on from the Overview tab in the Heroku dashboard.
- PORT: 8000
- SECRET_KEY: The generated key
- STRIPE_PUBLISHABLE: From your env.py file
- STRIPE_SECRET: From your env.py file
- EMAIL_USER: Your Gmail username
- EMAIL_PASS: Your Gmail password
- Set: DISABLE_COLLECTSTATIC = 1
- Set: HOSTNAME = “name of app”
-
Download the code from the GitHub repository here.
-
Click on Clone or download then Download ZIP. This will download the code into a ZIP folder locally on your computer.
-
Uncompress the ZIP folder.
-
Open up a terminal or cmd prompt and login into Heroku CLI.
heroku login
-
Check the app is present.
heroku apps
-
A Procfile have already been created for this project but make sure that it is present. If for some reason it is not then follow the steps below to create it.
- Procfile
- In a terminal make sure you are in the root directory of the project then run
web: gunicorn worldofshape.wsgi:application > Procfile. - Check that the following text is in the Procfile web: gunicorn worldofshape.wsgi:application.
- In a terminal make sure you are in the root directory of the project then run
- Procfile
-
Add a new git remote for Heroku. *
git remote add heroku git@heroku.comYOUR_APP_NAME.git -
Push to Heroku. *
git push heroku master -
Give Heroku a few minutes to get it all set up and then check the activity logs under Activity tab in your Heroku dashboard.
-
Once the build is complete click on open app top right to see World of Shape in action.
Free template, including images downloaded from SportFit
All images used with permission from WorldofShape
I would like to thank my good friend Niklas Lind for his support and guidance during the development of this project.
I would also like to thank my mentor Maranatha Ilesanmi.
Finally I would like to thank all the tutors at Code Institute for their fantastic help in guiding me in the correct direction, especially Tim and Stephen for their patience and great tutoring!
Created by Stefan Brunotte (site under construction)