Better Higher Further is a health center where User can choose between Gym and Yoga training to make health Better, life standarts Higher and live Further. User can choose most suitable day, hour and trainer to book session with so he/she can controll his training as much as possible. Due to bank holidays or other occasion workiing hours more likely to change so health center will update Users with relevant information.
Live link for "Better Higher Further" Here
- UX
- User Stories
- Agile Methodology -GitHub Project Board
- Design
- Technologies Used
- Features
- Testing User Stories
- Database
- Validation
- Testing
- Bugs
- Deployment
- Credit
- Acknowledgements
For people of all ages and genders to make their physical health better in the best way.
- User can register account in the website.
- User can log in his account and book session.
- User can edit or delete his/her training.
- User can see which and chen training is available
- To create, delete or edit new sessions.
- To approve trainings.
- Choose what type of training is better for them.
- Understand what is the benefit of each type of training.
- Book session of training.
- Login and logout to account.
- See booked seesoins if any.
- Ability to create, delete or edit session
- Ability to see when is which training
- As a User I can easily create my account so that start using service of the heath center.
- As a User I can see what training are available so that I can easely choose.
- As a User I can find easely contact form or phone number so that I can get in contact immediately
- As a User I can find links to the gyms in social media so that I can connect
- As a Returning User I can log in and book another training so that I want to keep going with training.
- As a Returning User I can log in and edit my booking session so that I can update my trainer .
- As a Returning User I can log in and delete my session so that I can update my trainer.
- As a Admin I can see how many Users is registered so that I see how amount of clients decreasing or increasing.
- As a Admin I can see how many bookings are in progress so that I check if they all are appropriately booked.
- As a Admin I can create new bookings and users so that I can help my customers.
With this Project I used project boards offered by Github. They are unusual at the beggining but but make sense with time. I can break big Tasks into smaller one and moving to my goal step my step. Always keeping track of it. No need to think many hours what you should do.
Site is very clean and straight forward so colors been choosef are bright, powerfull and prompt to action
As for fonts I choose Baskerville and Signika. I believe they compliment each other as they bose are strict but soft and suits for project.
- HTML5
- CSS3
- Python
- Django
- SQL
- Javascript
- Google Fonts - for font families.
- Font Awesone - for icons in footer element.
- Git - version control and pushing to store at Github.
- Github - store my repository.
- Balsamiq - to create wireframes.
- Google Maps - to show Users where health center is located
- Bootstrap - responsive design
- Unsplash - source of image
Navigation bar should be clear and easy to use for all Users. All links that are related to accounts are together so once you log in your menu will change. Depends if you are regular user or trainer member. If you are not logged in it is still working but you can't book training. Navigation bar is responsive so after 992px it will collapse
Collapsed nav bar
First page. Simple, Clean and easy. People who visit should book training so minimum reading just action
Brief explanation of what and why we are doing with some photos to show main domains of our service
Footer contains some brief information about company as main information there are hours that health center is opened and information how to get in touch like phone, address and email. Also 4 social media links located there.
Contact Us page with form for any request and google map which would show where to find us
Once user submit form he/she would receive Success alert
Login page taken from module allauth and some custom stling on top
Once User Loged In he/she would receive message that they did that correct
Once user logged in he/she can book trainer, date, time
And received conformation after booking
But only if you choose correct date
After this User can check if he has any bookings there
And if he want to make any changes this is possible by clicking on edit
And receive confirmation
But you need to choose date which is free already
And if user don't want to go to training we can delete as well
Also with confirmation
- Updating Trainings during the week.
- Events posts like hour changing or some new classes to train
- Gallery
- Reset Password
- Social media sign in
- Beautify alert after user send form
- Shop for t-shirts etc.
- Online consultation
Below database diagram
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| At navbar | Click on Log In/Sign Up button | Redirect to Log In page and once logged in receive conformation | As Expected |
confirmation
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| At navbar | Click on Trainings | Redirect to page with available trainings | As Expected |
3. As a User I can find easely contact form or phone number so that I can get in contact immediately
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| At navbar | Click on Contact Us | Redirect to page with Contact Us form and phone number on top, also user can find relevant information in at the footer | As Expected |
|
|||
|
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| At footer click on links | Go down till you would see 4 blue buttons that will redirect you to social media page | Once clicked you are redirected | As Expected |
|
5. As a Returning User I can log in and book another training so that I want to keep going with training
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Book training | log In, click Book, choose date and trainer, submit | Booked and received conformation | As Expected |
|
|||
|
Websire tested on:
- Mozilla Firefox
- Google Chrome (desktop and mobile version)
- Microsoft Edge
- Safari for iOS
Testing been done on website manually like inputs, cliking links, edit and deleting form.
- Alert messages showes correctly
- Link are clickable
- if you want to check some pages while you are not logged in wou will be redirected to home
- CRUD functionality working ptoperly
- Conformation messages appear appropriately
W3c Validation Been used for code validation, all pages passed
Home
About
Training
Booking
Booked
W3c CSS Once appear to me 15 errors but due to bootstrap, unfortunately I didn't catch it
CSS
JSHint Used for validation of Javascript code. Received 0 errors
Javascript
PEP8 validate my code
- Bug: Initial Deployment django engine throw me an error.
- Fix: My DATABASE_URL contained <> on sides which caused the issue
- Bug: Form was not rendering to edit view but loaded for booking
- Fix: When I defined {'form-1':form-2} I put form 2 instead
- Bug: Booking didn't saved
- Fix: I created instance without request.Post
- Bug: On deployment 400 error
- Fix: Fixed typo in ALLOWED_HOSTS
- Create account on Heroku
- Click on the button in upper right corner and choose new app
- Select region and create app
- Sign Up in ElephantSQL to allow instantiation databases choose "Trynow for free"
- Connect your Github
- Create new Team and you account created
- Create new instance with plan of Tiny Turtle
- Select any data center
- Click review and create instance
- Click on your app name and then copy URL
- Create env.py file and store there some variables of URL you copied and secret_key
- In settings.py modify databases with variable for URL you just created
- Run python manage.py migrate for migrations
- Go back to Heroku settings and put config vars. Your databa_url and secret_key
- While creating (!ONLY) set Debug = True once you would deploy completely set debug to false again Application deployed on Heroku
before final deployment is important to create env.py and store there all sensetive information the you don't want other people had acccess
Date picker found on Solution found at: https://webpedia.net/how-to-use-datepicker-in-django Bootstrap created my responsive design Stackoverflow for answer on any questions SimpleIsBetterThanComplex a lot of good articles about django
Rohit Sharma person who can fix everything in less than 5 min and create entirelly new logic in couple seconds. Slack Community Code Institute support