Fitness Studio is a simple website that can help customers to buy a package or packages of choice. Customers can use contact section to make enquiry or book a class after purchase.

This project is for educational purposes only.

• UX
  • Strategy
  • Scope
    • User stories
  • Structure of the website
  • Skeleton
  • Surface
• Features
• Technologies used
• Testing
• Deployment
• Credits

The purpose of this project is to build a simple website that customers to buy a package or packages of choice. This website can be easily changed for different type of businesses. This template can be used as charity website, car mechanic, florist, or any other business without multiple choices and options.

A MVP (minimum viable product) includes:

• landing page with and timetable and three simple cards
• fitness classes page with class description
• packages with a secure online shop functionality
• register and login pages
• contact page

Website contains:

• fixed navigation bar or burger icon on mobile devices with essential links to navigate on the website
• main content site which changes on every action taken by a user.
• secure online shop functionality

• Home Page

  Desktop (click to view)

  

  Mobile (click to view)

  

• Fitness classes page

  Desktop (click to view)

  

  Mobile (click to view)

  

• Packages page

  Desktop (click to view)

  

  Mobile (click to view)

  

• Packages details

  Desktop (click to view)

  

  Mobile (click to view)

  

• Checkout

  Desktop (click to view)

  

  Mobile (click to view)

  

• Login

  Desktop (click to view)

  

  Mobile (click to view)

  

• Register

  Desktop (click to view)

  

  Mobile (click to view)

  

I had to change an idea of functionality website during a project. Here are differences:

• On home page there is an contact us link instead of book a space.
• On fitness classes and packages pages there is no book button.
• On package details I change buttons to: Go to Bag, Add to Bag and Go back and add more
• On Register and Login pages I used crispy forms instead of custom form that I had in mind.

Database contains 6 tables (collections):

• user
• order
• user's packages
• package
• categories
• class

I use Django default databases SQLite in gitpod environment and PostgreSQL database with Heroku as production enviroment.

All sensitive access keys are stored as Config Vars on Heroku cloud application platform. Django allauth was used to meet security requirements.

Colours used in a project:

• As a main font I used Heebo.

I used images from:

• unsplash.com and it is credited in credits section.

Back to Table of contents

Navigation bar is located on the top of the website. It is responsive and changes to coins icon on mobile devices. Brand logo is located in the top left corner. It is a link and it always redirect user to the home page. Page links are in the top right corner.

Users who are on the website for the first time and are not logged in can see following options:

• Fitness classes
• Packages
• My Account:
  • Register
  • Login
• Basket

For administrator who is logged in there are the same options as for a logged in user. Additionally, there are two links:

• Add Class
• Add Package

User can see on landing page:

• Welcome message
• Time table
• Cards:
  • Package
  • Classes
  • Contact us

Cards links redirect to selected subsite.

This site shows all classes with full description. From here user is encourage to buy a single class.

For administrator here are an options to Edit or Delete class.

This site shows all available packages. From here user can choose and buy selected package

From this site user can select quantity, add selected package to the bag, view a bag or go back to packages site.

User can see all selected packages on the shopping bag page. Update link is available to increase or decrease amount of packages. Remove link will remove selected package. Buttons below total amount to pay give an options to: go back and add more packages or go to secure checkout.

Secure checkout page allow user to add all nesesary ditails to place an order. On right hand site of the screen there is order summary. A test purchase can be made with the following details:

• credit card: 4242 4242 4242 4242
• expiration date: 04 / 24
• CVC: 424
• ZIP: 42424

Complete order will submit a payment and redirect to order confirmation page. Also user can go back to the bag to adjust shopping bag.

After purchase customer can see order summary and to buttons:

• Go back to home page - user will be redirected do home page
• Contact Us to book a space - user will be redirected to contact us page.

Simple registration form that allow user to register on the page.

Login form that allow user to login on the page.

If user is logged in then is able to view its profile. Options to update a profile or to browse order history are available.

On this site a simple form allow user to contact fitness studio to book a space or make any other enquiry.

This option is available to administrator only. Form allows to add name, description, image url or select an image from local storage.

This is the same as add class, available to administrator only. Form allows to category from a list, name, description and price.

• add register option before checkout. This will allow user to keep a track of its order hisory.

• create a timetable app that will give a user a chance to book a space

• add blog site

• add review section for each fitness class

Back to Table of contents

• As a structure language.

• As a style language.

• As a front-end programming language.

• As a back-end programming language.

• [email protected] as a CSS framework.

• [email protected] as a JavaScript library.

• As a Javascript library

• As a web framework for the Python.

• As a web template engine for the Python.

• As a relational database.

• As a payment infrastructure.

• Font [email protected] as an icon library.

• As a software hosting platform to keep project in a remote location.

• As a version-control system tracking.

• As a development hosting platform.

• As a cloud-based hosting platform.

• As a storage service.

• As a wireframing tool.

• As an image editor.

Back to Table of contents

I used Mozilla web developer tools and Chrome developer tools throughout the project for testing and solving problems with responsiveness and style issues.

Site was tested across multiple virtual mobile devices and browsers. I checked all supported devices in both Mozilla web developer tolls and Chrome developer tools.

All tests Passed for devices from 360px on Chrome developer tools and Mozilla web developer tolls.

I found few issues with cards on landing page on Mozilla browser only. At Chrome browser there was no issues.

Nu Html Checker

One issue related to ID in a tag. This appear because there are same id's for mobile and desktop navbars.

No issued on W3C CSS Validator

Back to Table of contents

HEROKU

This project was deployed to Heroku. I used Gitpod as a development environment where I commited all changes to git version control system. I used push command in Gitpod to save changes into GitHub. Then connected my GitHub account to Heroku and set up Automatic deployment in Heroku under Deploy section in my coinscatalog app.

• On the Heroku website click new and create new app.

• Add App name and choose region and click Create app.

• Go to Resources tab and in add-ons search for a new Heroku Postgres database and Provision.

GITPOT

In terminal (CLI):

- pip3 install dj_database_url

- pip3 install psycopg2-binary

- pip3 freeze --local > requirements.txt

Add Database in settings.py file in project app (get url from HEROKU -> Settings -> Config Vars -> DATABASE_URL)

DATABASES = { 'default': dj_database_url.parse('DATABASE_URL') }

In terminal (CLI):

- python3 manage.py showmigrations

Migrate:
- python3 manage.py migrate

Load database:
- python3 manage.py loaddata db.json

Add super user:
python3 manage.py createsuperuser

Add gunicorn to Gitpot

- pip3 install gunicorn

- pip3 freeze --local > requirements.txt

Add Procfile and add web dyno:

web: gunicorn shop.wsgi:application

In terminal (CLI):

- heroku login or heroku login -i

open in a browser and click Log In button or add credentials in terminal, then:

- heroku config:set DISABLE_COLLECTSTATIC=1 --app fitnesssstudio

in settings.py file

ALLOWED_HOSTS = ['fitnesssstudio.herokuapp.com']

In terminal (CLI):

initialize heroku git remote:

- heroku git:remote -a fitnessstudio

and:

- git push heroku master

In HEROKU:

Deploy tab

click connect to GitHub search for a repository and Connect

click Enable Automatic Deploys

Add in settings tab -> Conf Vars

SECRET_KEY

in settings.py SECRET_KEY = os.environ.get('SECRET_KEY', '')

and

DEBUG = 'Development' in os.environ

Back to Table of contents

I used Boutique Ado project as a backbone for my project. Majority of the code is from this Code Institute project.

Unsplash https://unsplash.com/photos/pYQ2ASycjgI

All content was taken from: This github repository

Back to Table of contents