JOGYM

Milestone 4 project for Code institute Software Development Programme. Live site

User Experience
Design
Features
- Existing Features
Technologies
Testing
Deployment

User Experience

JOGYM is website for an alternate gym, providing all fundamentals required for a regular gym, but also offers a host of various physical activities such as indoor paintballing, rock climbing etc. to allow members to experience some joy in the gym when working out becomes repetitive or a plateau stagnates the workout. The gym offers monthly and annual subscriptions as well as an ecommerce section to provide merchandise to all users. This app is a Full Stack website created using the Django framework with a backend of PostgresSQL.

Follow this link to see a detailed view of the user stories.

Design

Wireframes

The wireframes were designed using the balsamiq tool for different sections and screen sizes. These can be found here.

Database Schema

The database schema was designed using diagrams.net and can be found here

Colours

The colour palette was selected using Coolors website and can be found here

Fonts

Google fonts: Unica One

Features

Existing Features

Navigation bar: Responsive nav bar is present on all pages. If a user is logged in links to join/login are no longer present, and if the user is the admin they have a access to a product management link (yet to be developed).

Home page: Contains images of the gym showing various activities, scrolling down presents users with a concise about 'our gym' section. Any further questions invites user to contact us form for further information.

Products page: There is a search bar which allows terms found in title or description of an item. Users can filter by gender and further more by price. Navigation to further product detail is also provided through clicking image or the item name.

Item detail: Merchandise-detail page displays individual item information and allows user to add items to cart which increments/decrements everytime an item is added/removed to the cart. Furthermore they can choose to continue shopping or click the cart to navigate to the checkout page.

Checkout page: User is prompted to fill in the form to process payment. With successful registration, they are redirected to a confirmations page and provided with an order summary. Should the user want to delete all orders, text is shown that their bag is empty and a link to take them back to continue shopping.

Join/login: These pages are designed with help of django-allauth and handles user registration, login and logout details.

Technologies

HTML5: For the structure of the site.
CSS3: For styling of the site.
Bootsrap5: For fast development of the site and its responsiveness.
Fontawesome: For visual icons.
Github: For remote access of the project.
Git: For version-control.
Visual Studio Code: A development environment as an upgrade to gitpod.
SQLite3: As the database for storing users data during development.
PostgresSQL: As the database for storing users data during production.
Python/Django: Used for the backend and for communication with mongodb.
Heroku: Deployment of project.
AWS S3 Bucket: As remote storage for static and media files.

Testing

PEP8 was used to check python file, until file was pep8 compliant.
The HTML validator used was https://validator.w3.org/. Several errors caught due to jinja the other errors were corrected until no errors shown.
The CSS validator used was https://jigsaw.w3.org/css-validator/validator.
Google devtools was used to make sure the site is responsive to different devices and screen sizes.

Manual Testing

Testing of user stories

Testing was carried out based on if the requirements for the user stories where met and can be found here. Due to the size of this project it was not possible to meet the requirements of all the user stories. More will be discussed in future implementations.

Future Features

The main feature required to be developed is the membership aspect of the website. Manual and annual subscriptions with automatic withdrawal of payment is the next step. Although users can filter products, filtering the price based on the categories rather than entire products list will also be implemented.

Deployment

Note: A Stripe account is required to have a functioning payment system.

Local deployment

Cloning repository

Open this repository.
Select 'code' button in the top right corner of this repo, and clone using HTTPS or SSH.

Alternatively, copy git clone [email protected]:Zuhur/ms4.git for cloning using SSH or git clone https://github.com/Zuhur/ms4.git into the terminal

Setting up environment variables 3. Create an env.py file 4. Add env.py to .gitignore
import os
os.environ.setdefault("DEVELOPMENT", "True")
os.environ.setdefault("STRIPE_PUBLIC_KEY", <PUBLICKEY>)
os.environ.setdefault("STRIPE_SECRET_KEY", <SECRETKEY>)
os.environ.setdefault("STRIPE_WH_SECRET", <SECRET-WH-KEY>)
5. Install all the required requirements with pip3 install -r requirements.txt in your terminal 6. To create a database, migrate the models using the following commands inside the terminal.
python3 manage.py makemigrations
python3 manage.py migrate
7. Load the data fixtures from the db.json file
python3 manage.py loaddata db.json
8. To log in to the Django Admin site create a superuser
python3 manage.py createsuperuser 9. To run the application
python3 manage.py runserver

Heroku deployment

Note: Static and media files are hosted in AWS S3 Bucket. An account will be required for this. For more information into how to set this up follow this link.

Login / sign up to Heroku
Create a new app
Set up Config Vars in settings
AWS_ACCESS_KEY_ID = AWS access key
AWS_SECRET_ACCESS_KEY = AWS secret access key
DATABASE_URL = postgrest database url - heroku
EMAIL_HOST_PASS = email password
EMAIL_HOST_USER = email address
SECRET_KEY
STRIPE_PUBLIC_KEY = stripe public key
STRIPE_SECRET_KEY = stripe secret key
STRIPE_WH_SECRET = stripe wh key
USE_AWS = True
Connect Heroku to Github to automatically deploy after every push to github. 4.Select 'Deploy' from the navbar
Select Github from the' Deployment method' section
In the 'App connected to Github' section enter the name of github repository and connect
After successful connection in the 'Automatic deploys' section select 'Enable Automatic Deploys'

Credits

Images

From Pexels, picabay and unsplash
Carousel images

code-institute-submissions / zuhur-ms4_feb Goto Github PK

zuhur-ms4_feb's Introduction