code-institute-submissions / trainermate Goto Github PK

A website where anyone can share there workout routines, meal plans and recipes. TrainerMate allows people across the world to find and share new ways for working out.

The aim for TrainerMate is to have a simple and easy way for user's to find and share ways to keep themselves fit and healthy. TrainerMate can be used by all age ranges. The main target audience is anyone looking to enhance their health and lifestyle.

• As a user looking to gain muscle, I want to be able to find exercises to help me learn and improve my way of exercising.
• As a user, I want to share my meal plans with others so that they help user's the same way they helped me.
• As a user, I want to post recipes that helped me stay healthy with others.
• As a user, I want to have a choice to edit my posts if I have made a mistake.
• As a user, I want to be able to remove my posts if I decide I'm no longer happy with it.

Below there are images of my initial ideas/mock-ups of the website:

• Mockup image of the website:

• Mockup image of the website:

Every feature on the website is designed to be responsive with any device. The Navigation Bar is is designed to collapse to allow the user to see the rest of the website easier.

The page title is a simple hyperlink back to the home page to give the user's a fast and easy way to go back. The other page titles are also hyperlinks to enter each individual page.

The Menu button seen when the website is on a smaller resolution, is used as a dropdown menu. This helps to reduce cluttering of the website.

The home page has a small briefing of each page of the website. In this brief it explains what you will encounter when arrive on them. All of the images/text areas are hyperlinks to the pages described.

On the following pages will be a blank box where a user can enter a plan name and plan type either one of their workout routines, meal plans or recipes. Once the user has entered a post it will be there to see for others users to look through. There is also a remove and edit button. Allowing users to change something or delete if they change there mind.

Other features that could be implemented in the future could be sign in method allowing users to enter into there own profile page showing every one of there past posts. Allowing them to choose if they'd like to remove something from an earlier date. Furthermore, a like button or a comment area could be added to give the other users reading a chance to share there opinion on someone elses post.

One final feature that was added but has yet to have any functionality is the Contact Us form. This form was added for UX/UI but could be made functional in the future.

The following technologies were used to help create this website:

• HTML5: Mark-up language used for creating the website.
• CSS3: Stylesheet language used to create the presentation of the website.
• JavaScript: Is a high-level, just-in-time compiled, object-oriented programming language
• JQuery: Used to simplify some of the DOM manipulations.
• Python: Is an interpreted, high-level, general-purpose programming language.
• Flask: Is a micro web framework written in Python. It is classified as a microframework because it does not require particular tools or libraries.
• Mongodb: Is a cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with schema.
• Heroku: Is a cloud platform as a service supporting several programming languages.
• GitHub: Is website that provides hosting for software development.
• MaterializeCSS: Is a modern responsive CSS framework based on Material Design by Google.

Manual testing was best suited for the website and this is the steps taken:

1. From the homepage, hover the mouse over the navigaion bar and click Workout routines.
2. Once you have entered the Workout routines page, scroll and look through the workout routines.
3. Finally when you have found the correct routine click the title and the dropdown description will appear.

1. From the homepage, move the mouse to the navigation bar and click Share.
2. Once you have entered the Share page use the form to add the information you wish to share.
3. Start by choosing the Meal Plans category.
4. Then, press the plan title and enter the desired title.
5. After this, press the plan description section of the form and enter the desired description.
6. Finally, press the share button.
7. This will then send you back to the homepage.

1. Repeat steps 1, 2 and 3 for Sharing Meal Plans.
2. To test the Validation of the Plan title skip step 4.
3. Then, Enter a plan description.
4. Finally, press the share button.
5. The form will ask you to fill in the missing field.

• By repeating these steps again but entering a plan title but not a plan description the form will ask again to fill in the missing field.

1. From the homepage, move to the navigation bar and click the desired tab for which type of plan you have created.
2. For example when entering the recipes page, press the title which you choose to edit.
3. Press the title dropdown and click the edit button.
4. After entering the edit posts page, in the form choose which section you'd like to change.
5. Then click the post button when you are complete.

1. When entering the Homepage, move the mouse to the navigation bar and click the category tab of the plan you have created.
2. For example, when entering the workout routines page, look for the plan title that you wish to delete.
3. Then, click the plan title, This will dropdown the plan's description and show the edit or delete buttons.
4. Press the delete button.
5. Repeat steps 1 and 2 to check for the plan name you wanted to delete.

The website has been tested using the developer tools and also with Am i Responsive. This was done so that the website will be compatible in all different screen sizes. When the site is used on a small screen size the site is designed to stay as simple and clutterless as possible.

The website has been tested in the following device resolutions:

• Pixel 2/XL
• iPhone 5/SE/6/7/8
• iPhone 6/7/8+
• iPhone X
• Galaxy S5/S9/S9+

• iPad/iPad Pro
• Kindle Fire HDX

The website has been tested with these browsers:

• Google Chrome
• FireFox
• Internet Explorer

The website has be validated using:

• HTML: W3C Markup Validation Service
• CSS: W3C CSS Validation Service

To create the website, I have used the coding platform Gitpod. Deployment and source control was done via GitHub and Heroku.

My repository can be found here:

https://github.com/elg1e/TrainerMate

The live website was deployed using Heroku. The site can be found here:

https://trainer-mate.herokuapp.com/

Follow these steps for deployment using Heroku:

1. Firstly, log into Heroku and created a new application.
2. Then, follow the steps Heroku give you on the website to connect Heroku to the web app. These steps are to install the Heroku CLI by logging in.
3. After this, create a new GitHub repository.
4. Once this is complete deploy the application by commiting and pushing the work via git push heroku master branch.
5. Before pushing anything to Heroku you must have a requirements.txt file and a Procfile.
6. Then, by typing in the terminal: heroku ps:scale web=1 this will then get the Heroku app up and running.
7. Finally, open up the Heroku app settings on the Heroku website and make sure to set the config variables (IP/PORT).

The images used for the website were taken from:

• Recipes Image
• Meal Plan Image
• Workout Routines Image