Full-Stack Toolkit - Portfolio Project 4

Link to live site

• UX

  • Project Goals
  • User Goals
  • Site Owner Goals
  • User Stories
  • User Requirements and Expectations

• Design Choices

  • Colors
  • Fonts
  • Wireframes
  • Technologies Used

• Validation

• Testing

• Bugs

• Deployment

• Credit

• Acknowledgements

• To register for an account on the website and receive an email after successful registration
• To login or logout from the website
• To recover my password in case it is forgotten
• To have a personalised user profile with showing booked classes
• To post a comment on a blog post
• To view website news, and comment on a news item

• To add, edit and delete PT sessions
• To add, edit and delete website news and events information

1. As a User I can view what classes are taught so that I can attend a class.
2. As a User I can book a fitness session so that I can attend a PT session.
3. As a User I can find links to the gyms social media pages so that I can connect via social channels.
4. As a User I can sign up to a newsletter so that keep up-to-date with whats happening at the gym.
5. As a User I can log in to my account once I click on the verification link in the email I receive after sign up so that I can view my profile information and booked PT sessions.
6. As a User I can comment on a news post so that I can engage with the site and staff members.
7. As a User I can view pictures of gym and the various activities that happen within it so that I can get a feel for the place should I be thinking of joining.

8. As a Returning User I can log in and book another session so that continue with my fitness journey.
9. As a Returning User I can log in and cancel a session and will be asked to confirm the cancellation so that I can update the PT if my plans change.
10. As a Returning User I can log in and amend a session so that I can update the PT if my plans change.

11. As a User/Staff member I can request a new password if I forget my current password via an email so that I can log into my account should I forget my password.

12. As a Staff Member I can edit and/or delete news and event posts so that I can amend incorrect details or remove out of date posts.
13. As a Staff Member I can add a new news and event post so that I can keep the site looking fresh with new updates.
14. As a Staff Member I can confirm amendments/deletions so that I don’t make changes I can’t undo.
15. As a Staff Member I can create a post and set it to draft so that Users cannot see the post until published.
16. As a Staff Member I can create a post and set it to published so that Users can see the post when ready.
17. As a Staff Member I can approve comments before they are viewable on the site so that inappropriate comments are not posted to the site.

18. As a Site Owner I can view my site on different devices so that the users can interact no matter which device they use.
19. As a Site Owner I can allow users to register with the site so that users can book classes online.
20. As a Site Owner I can users be navigated to the applicable 400, 403, 404 or 500 error page if they encounter an error on the site so that they understand the error that has occurred and easily find their way back to the home page without using the browser buttons and don't leave the site.
21. As a Site Owner I can have users verify their new accounts after registering via email so that I know they are a valid user of the site.

I have used Sans Pro for the body text and Poppins for the headers. Both fonts are from google fonts and compliment each other well. I have used sans-serif as a back up font should the browser the user is using cannot load the google fonts.

The wireframes for the site were created in Adobe XD and are linked below for Desktop, Tablet and Mobile devices.

1. Desktop

   
2. Tablet

   
3. Mobile

   

1. Desktop

   
2. Tablet

   
3. Mobile

   

1. Desktop

   
2. Tablet

   
3. Mobile

   

1. Desktop

   
2. Tablet

   
3. Mobile

   

1. Desktop

   
2. Tablet

   
3. Mobile

   

1. Desktop

   
2. Tablet

   
3. Mobile

   

The below diagram shows all of the fields stored in the database, with details of their data types, and how it is structured.

• HTML5
• CSS3

• Git Used for version control of the site and push code from VScode to Github
• Github Used as the remote repository to store the code. Github pages is also where the live site is hosted.
• Visual Studio Code Used as the IDE for writing the code and file management
• Adobe XD Used to create wireframes for the site
• Adobe Photoshop Used to edit and crop all image sizes on the site as original filesize were too large and affected performance
• Google Fonts Used for Spectral font throughout the site
• Font Awesome Used for various icons throughout the site
• Bootstrap Used for creating a responsive navigation bar used in every header of each page. Also used for creting a modal for a booking form used on each page. Modals were used for services page in which an accordion was created using bootstrap for each service category. Bootstrap also used for creating a carousel for the review section
• jQuery Used for cleaner JavaScript code where necessary and datepicker function for booking form
• Google Maps Used to embed a map to the salon located on the contact us page
• Am I responsive Used to create a mulit-device mock-up that is shown at the top of the README file
• YouTube Used to host a video of the salons work and create an embedded link to use on the site

W3c Markup Validation Service has been used to validate all of the HTML code within the site. All pages have passed with 0 errors and 0 warnings. Click on the below to see each screenshot:

1. Homepage

   
2. About

   
3. Classes

   
4. Contact

   
5. Login

   
6. Sign Up

   
7. Bookings

   

W3c CSS Validation Service was used to validate the CSS of the site. The stylesheet.css file returned with 0 errors. When running on the whole page it returned with 17 errors all of which can be attributed to Bootstrap v5.0. See below link to screenshot:

1. Whole Page

   
2. Style.css Stylesheet

   
3. Home.css Stylesheet

   

WAVE WebAIM web accessibility evaluation tool has been used to validate the site to the recognised standards when it comes to accessibility. All pages have passed with 0 errors apart from 1 contrast error. Click on the below to see each screenshot:

1. Homepage

   
2. About

   
3. Classes

   
4. Contact

   
5. Login

   

PEP8 has been used to validate all of the python code within the site. All files have passed with 0 errors. Click on the below to see each screenshot:

1. Home - Views

   
2. PT Bookings - Forms

   
3. PT Bookings - Models

   
4. PT Bookings - Views

   

JSHint has been used to validate all of the JavaScript code within the site. All files have passes with 0 errors. Click on the below to see each screenshot:

1. email.js

   
2. script.js

   

Screenshot to show user story test

Screenshot to show user story test

Screenshot to show user story test

Screenshot 1 to show user story test

Screenshot 2 to show user story test

Screenshot to show user story test

Screenshot to show user story test

Screenshot to show user story test

Screenshot to show user story test

• Bug: Deployment to heroku did not work with a "auth_user" error.
• Fix: Uninstall django-allauth and reset databases and mirgrations.
• Bug: Forms not having labels for accessibility.
• Fix: Add title property to input so labels don't need to be used and affect look of site.
• Bug: Site not responsive when viewed on smaller screen.
• Fix: Made use of more bootstrap classes and grid to make site responsive.
• Bug: Bootstrap components not working.
• Fix: Updated app to newest bootstrap version and all components now working.
• Bug: Datepicker auto selecting random date when amneding a booking.
• Fix: Updated view function so that correct date format was used.

Code Institute tutorial and Django Blog cheatsheat were followed to complete deployment.

• Enter following command in the terminal so that the relevant files needed for Heroku to install your project dependencies are created - pip3 freeze --local > requirements.txt. A Procfile is also required that specifies the commands that are executed by the app on startup.

1. Go to Heroku.com and log in or create and account if you do not already have one.
2. Click the New dropdown and select Create New App.
3. Enter a name for your new project, all Heroku apps need to have a unique name, you will be prompted if you need to change it.
4. Select the region you are working in.

Environment Variables need to be set up - this is key to make sure your application is deployed properly.

• In the resources tab install 'Heroku Postgres'
• In the Settings tab, click on Reveal Config Vars and set the following variables:
  • SECRET_KEY - your chosen key
  • CLOUDINARY_URL - your Cloudinary API environment variable

In the Deploy tab:

1. Connect your Heroku account to your Github Repository following these steps:
   1. Click the Deploy tab then Github-Connect to Github.
   2. Enter GitHub repository name and click Search.
   3. Choose the correct repository and click Connect.
2. Choose to deploy the project manually whilst getting deployment correct. Automatic deployment can be set after and will generate a new application every time you push a change to Github.
3. Click Deploy Branch your application will be built and once complete click open app to view deployed application.

• Bootstrap for the following components: navbar, modals
• Colormind for creating the colour pallette
• YouTube for many tutorial videos on different javascript aspects.
• w3school and mdn web docs for a great resource when stuck with how to get a specific piece of javascript code to work.
• stackoverflow for various issues along the way
• Simple is better than complex for datepicker

• To Mo Shami, my mentor, for yet again getting me through this with great advice and support.
• To the Code Institute slack community for finding out great advice, guidance and resources.