The Fitness Exercise Development (FED) is a website created to save your exercise program info. The idea is that it works as an application that you can access like a website, and the primary focus is on the mobile view (as it will be mainly accessed during a gym session)

This project is part one of the four milestone projects of the Code Institute Full Stack Developer course and aims to show an interactive website using HTML5, CCS3, and Javascript, using Python and Flask to manage the application backend and MongoDB to store its information.

Access the website here: Fitness Exercise Development

• User Experience
• Design Process
• Features
• Technologies Used
• Testing
• Deployment
• Credits
• Acknowledgments

• Display the exercise program on a single page
• Create, read, edit and delete exercises through the application website
• Show User status info
• Show App status info to Admin
• Search exercises and be able to add them to your program

• I go to the gym regularly and looking for a way to save my exercise program info, and be able to update it at the gym.
• I'm a PT and want an application to suggest to my client so he can have the exercise info when I'm not with him.
• I'm a gym owner looking for an App where my clients can find exercises suggestions

• I sign up for this application and using regularly. Now I want to change my exercise program, and looking for exercises suggestions
• I want to update my exercises program info and know its duration

• I want to gather exercises information to analyze the gathered information and in the future provided tailored exercises programs
• I want to have an application status page, so I can understand how many users we have a summary of the saved data.

The main objective of this website is to make it easier for people to access, add and edit their exercise program wherever they are. For that the application is designed mainly focused on mobile users, letting straight forward where to find information and how to edit it. The main page accessed will be the Program page where the user can see their exercise list, as well as the estimated duration to finish it.

The key features that this project aims to attend are:

• Having a Program page easily accessible through a smartphone where only the necessary info is displayed
• Provide a tool to edit the exercise program, letting the user add, edit or delete an exercises
• Show the user status in the application for reference
• Promote exercises saved in the application by other users through the Search page for inspiration and let the user able to copy it to their own program.

The wireframes of this project aimed to create simple but effective pages, where the information can be seen and collected easily, and only necessary elements are displayed. For that, it was decided that the website wouldn't have many images, so it can load fast as well.

The layout of the wireframes was designed using Figma, as a starting point of how to display the project goal in a simple and direct format, on any kind of device.

To improve page load speed, it was decided to not add external Font styles in this project. The visual style was developed taking into consideration the elements and styles available on the Materialize CSS Framework, that will be used to develop the website.

The project wireframes can be accessed clicking here.

Mobile:

Tablet / Desktop:

As the project aims to simple and fast, it was decided to use some components largely used in the Front End web design nowadays to improve its visuals, such as Aurora effects with gradient colors, Glassmorfism, and Collapsible accordions.

The color scheme aims to have a vibrant feeling that stands out and hypes the user for his exercise session while keeping a modern and not distractive visual.

The icons used in the website are from Font Awesome and were used in the project logo and as a visual reference for each page.

All pages can be easily accessed through the cards on the Home page or through the application navigation menu, which in the mobile view is displayed through a hamburger icon and side menu for the best usage of space.

In the Program page and Editor, it was used collapsible accordions to don't pollute the page information, and display only the information the user really wants to see. The Search page is provided for users to find exercise inspirations and a button to easily copy the card information to your own Program. Lastly, the profile page shows the user info registered as well as their info status.

The Admin user has access to the App Status page, where he can verify some information from this application project, which can be used for future project upgrades.

Through the Header Navigation menu that is common to all pages, the user can access all project features that are displayed on different pages.

• Header section with a responsive menu and logo. The menu can be accessed only by users that logged in to the application.
• Footer section with project information and social logo.

• Four cards where the user can access any of the application's features (Program list, Program Editor, User profile and Search functionality).
• The Admin user can see the fifth card to access the App Status page.

• Index page shows a responsive and animated card where users can select either to register in the application or to log in.

• On this page users can see all their exercises registered in the application, separated by muscle group. The exercise cards are presented in a collapsible accordion. At the top is displayed an estimated time to complete the whole program.

• On the Editor page, the user can add a new exercise to their program through a button that links to the Add Exercise page. It is also presented their current exercises card similarly to the Program page, but with two extra buttons to Edit or Delete an exercise.

• This page displays a form where the user can add a new exercise to their program. The form is presented with the same card layout from the Program page, so the user can have a better understanding of how the information will be displayed after saved. There is a button to cancel the creation of a new exercise and a button to save it.

• This page displays the same form and feature of the Add Exercise page, but with the exercise information registered previously by the user that he wants to change.

• This page shows the user information added through the Register form
• It is also displayed some application status from the specific used logged.

• The Search page shows a search box input and a brief explanation of how the user can use this page.
• Upon searching a word, the page shows the search result with the same layout used on the Program page, where the cards displayed contain the search query word. To test it, you can search for "Shoulder" or "Legs"

• On this page, the Admin can see some applications status information, such as the quantity of user registred, quantity of exercises registered, etc.

• Add the possibility to have more than one program per user
• Personalized exercises recommendations
• Add videos to exercises cards
• Add contact page

Due to the current simplicity of this project, it was decided to use a NoSQL Database. All databases and datasets are storeged on MongoDB, where the application can consult all the necessary information as objects.

• HTML5 - To create and add content to the website.
• CSS3 - To style the website content and provide responsiveness.
• Materialize CSS - This framework was used on the website Header and Navigation menu.
• JavaScript - Used to display displayed the components from Materialize CSS and to animate the Index form slider.
• jQuery - Javascript library to manipulate the website content
• Python - To write the backend code
• Flask - Python Framework to manage templates, routes, and queries
• PyMongo - Python library to query Mongo Databases
• Jinja - Template language to create all pages
• MongoDB - To create and store application databases
• VS Code - The development tool used to write the website code
• GitHub - Used for version control and host files.
• Heroku - To deploy application

• Figma - To create website wireframes.
• Trianglify.io - Index page image
• Glassmorphism - To create glassmorphism effects
• Youtube - Inspiration for the index form desing
• Font Awesome - Icons on Events and Riders page
• dbdiagram.io - Used to create databases diagrams on Readme file

• Code Institue - Main source of content where the project inspiration and code design came from-
• CSS Tricks - Mainly used as a resource to help with Flexbox positioning
• Stack Overflow - Used to find the reason for some errors found during the website development and for code inspiration to create the background aurora effect.

• New user:
  • Looking for a new exercise web application on the internet, I found FED and could register my account and add new exercises to it.
• Returning user:
  • I accessed the web application at the Gym through my smartphone and could access my exercise program and modify it when I needed it.
• Business owner:
  • I’m pleased with the consistency of the design on different devices. Having the App Status page information is really helpful to understand how many users I have at the moment.

• CRUD functionalities tested on Program, Editor, Add and Edit Exercises pages:
  • Add Exercise button
  • Add Exercise form
  • Edit Exercise button
  • Edit Exercise form
  • Delete Exercise button
  • Read Exercises lists through application pages
• Navigation tests:
  • Tested Navigation menu links on Desktop
  • Tested Navigations sidebar links menu on Mobile
  • Tested Page cards on the Home page
• Tested error pages
• Tested access to the App Status page only for Admin user
• Tested on all input fields forms to accept only characters acceptable by the code pattern
• Tested Search page looking for "Triceps", "Squal", "Biceps" and adding the found exercises cards to my own program
• Tested Profile page comparing information loaded with Database information

• All HTML files validated with W3C Markup Validation Service - No real HTML code errors found
• CSS file validated with W3C CSS Validation Service - No real CSS code errors found
• The Javascrip files viladated with JSHint - No real Javascrip code errors found
• Python code files validaded with PEP 8 online - No Python code errors found

Website tested on the following browsers manually, no error found

• Chrome
• Safari
• Mozilla Firefox
• Microsoft Edge

Website tested on the following devices manually or using Chrome Developer Tools, no error found

• iPhone X
• Ipad Pro
• Google Pixel
• MacBook Pro 16”
• Desktop Monitor Philips 25”

The project was written using VS Code, all files hosted on Github, Databases stored in MongoDB and deployed on Heroku, which can be accessed clicking here.

To clone this project in your local machine you should certify that you have Git and Python installed locally, and follow the below steps:

1. Clone this repository in your machine using the command:

   gh repo clone pcantarelli/backend-Dev-project
   

2. Access / create an account on MongoDB to create your own databases to be used in this project.

3. Return to your Terminal and enter the following to install all required dependencies:

   pip3 install -r requirements.txt
   

4. Create an env.py file with the following content, replacing the 'mongo_secret_key', username','password', 'cluster_name' and 'database_name' with your MongoDB database values:

   import os
   
   os.environ.setdefault("IP", "0.0.0.0")
   os.environ.setdefault("PORT", "5000")
   os.environ.setdefault("SECRET_KEY", "<mongo_secret_key>")
   os.environ.setdefault("MONGO_URI", ""mongodb+srv://<username>:<password>@<cluster_name>.5urck.mongodb.net/<database_name>?retryWrites=true&w=majority&ssl=true&ssl_cert_reqs=CERT_NONE")
   os.environ.setdefault("MONGO_DBNAME", "database_name")
   

5. Add your env.py file to .gitignore to make sure your database information is not viewable to others

6. Your cloned version is now ready to run locally with the following command:

   python3 app.py
   

To deploy this project, create your repository of this project in your Github account, create an account on Heroku, and follow the below steps:

1. On your Terminal, in the project directory folder create a requirements.txt file with the below command:

   pip3 freeze --local > requirements.txt
   

2. Created a Procfile with the below command, and ensures that it has an extra empty line on the last line of the file created:

   echo web: python app.py > Procfile
   

3. Commit and Push those changes to your repository on Github.

4. On your Heroku account, create a new app with the desired name.

5. On the 'Deployment Method' section of Heroku, link your GitHub profile and repository.

6. On the Config Vars section in the Settings tab, add the relevant key/value information from my env.py (IP, PORT, MONGO_URI, MONGO_DBNAME, SECRET_KEY).

7. On the "Deploy" tab. select Master Branch under "Choose a branch to deploy" and click "Enable Automatic Deploys".

8. Once de deployment is finished, clicked "View" to launch the app and see it on your browser.

9. All new Pushs to your Github repository will be automatically deployed on Heroku.

This website was developed using the Code Institute project template that can be found on this repository. The Read.me file was based on Code Institute readme-template on my previous projects Read.me files and on Chloe's Read.me file. Thank you so much for the inspiration.

Some base code sections are from Materialize CSS documentation, such as the Header, Navigation menu, Alert pop-up, and Collapsible accordions. The background aurora gradient color was inspired by the Stackoverflow discussion about Instagram new logo CSS background.

All icons are from Font Awesome.

I’d like to thank the Code Institute tutors and support staff. Their support definitely helped me to achieve all my goals on this project. Thanks to Aaron Sinnott, my mentor, that also supported me during this project.