There does not seem to be a "one-stop" application where a user can go and see a list of gyms in their local area with real life reviews. If a user was to visit the gyms actual webpage there would be reviews on the site however, as it is with most business websites, a lot of the reviews are fabricated by owners/employees or relatives of the business.

My vision was to create an application where users could read honest reviews about local gyms in their areas that might help them find a gym that would suit them. This website would also benefit local gyms as their details are advertised and they are able to get real life feedback from their customers.

• What is the project?
• Project Functionality
• User Experience
  • User Stories
  • Design
• Technology Used
• Features
  • Future Features
• Testing
• Deployment
• Credits

This project is the third milestone project of the Fullstack Web Developer Course and it incorporates the previous modules covered with a emphasis on the most recent modules covered - Python Fundamentals, Practical Python and Data Centric Development

The project brief requires you to

Build a MongoDB-backed Flask project for a web application that allows users to store and manipulate data records about a particular domain.

There is a focus in the brief to

Create functionality for users to create, locate, display, edit and delete records (CRUD functionality).

The application I have developed I believe meets the briefs specifications in that it will allow a user to create, read, update and delete details and reviews about local gyms, data of which will be stored in the MONGODB database.

The app I have created is called Working It Out.

As I mentioned the application contains the CRUD required functionalities and it utilises MongoDB as the data handling, document based database. User functionality is created using HTML templates, Flask and styled with CSS. The frontend framework is dependent on the popular Bootstrap Framework, aiding the layout and the structure of the page and helping with responsive design.

The application allows user to read, update, create and delete data about local gyms and read reviews left by other application users. These functions are completed utilising the connection the MongoDB database which is updated in turn.

Users are only allowed to review a gym that is already on the database, however if they wish to add a gym that isn't on the database that functionality has been provided. When the user is writing their review they are given a calendar option which allows them to input the date they reviewed the gym.

They are also given a dropdown menu when reviewing the gym of what the cost is and what type of gym it is, pay as you go, membership only etc.

The project is version controlled via Git & Github and is deployed via Heroku. All environment variables are held in a git ignored file.

Back to top

• As a User, I want to view the local gyms that are available to me in my area.
• As a User, I want to be able to read reviews from other gym goers and see what their experiences were like.
• As a User, I want to be able to navigate from page to page easily.
• As a User, I would like for the website to be informative and helpful.
• As a User, I would like to be able to write my own review of my gym or a gym I attended
• As a User, I would like to able to view this application on all device widths.
• As a Gym Owner, I would like to be able to view reviews about my gym.
• As a Gym Owner, I would like to be able to update the details about my gym if someone has mistakenly provided inaccurate information.

• When designing the application I wanted to keep it relatively simplistic as I feel it gives it a modern touch.

• I was conscious that my concept was to have users write their reviews and view data about gyms so I didn't want to overload the website with surplus information and images which in turn would overload the user.

• I used a dark navbar and dark typography theme as this is a gym website and as gym goers know - there aren't many weights that are brightly coloured (well not the heavy ones).

• I utilised the forms from bootstrap and adapted them accordingly using the colour scheme that has been applied throughout.

• The font I selected as the primary font is Rubik as I felt it was bold and strong and fitted nicely in with the theme of the website. “Sans-Serif” is used as the default backup font in cases where the primary font has difficulty loading.

• The navbar is coloured with Bootstraps built-in design. It is a dark navbar and matches the theme of the page, I decided to continue with this dark theme throughout the webpage using the dark option for the footer and the data table.

• All buttons are deisgned again using Bootstraps inline design options. I have used the 'dark' option for any subit buttons and the 'danger'. On the home page I decided to use the outline button for the gym name as I felt if I had used a block colour it would take away from the background image on the page and wouldn't have been aesthetically pleasing.

When I was inititally thinking of the project I went online to have a look at other possible websites to get inspiration, this is when I discovered the lack of such websites. This probably made it harder to decide what style website to go with as I had to keep within my capablities and not get too imaginative. I found that as my project went along I changed my mind about the design a few times and changed the framework of it.

Back to Top

• HTML, CSS & Python
• Bootstrap Framework - I decided to use this as opposed to Materialize as I have used Bootstrap before and I found it more user friendly. This framework ensured mobile-first design and a responsive application.
• Javascript & JQuery - I used the supplied technology for my Navbar to have collapse functionality.
• PyCharm IDE - AWS Cloud9 was the IDE I used to create the project. controlling throughout the life-cycle of the project build.
• Git - Git was used to push to my local repository throughout the creation process.
• Github - My repository host that I pushed to throughout the project.
• Heroku - I pushed to Heroku to deploy my project and view the app running from here.

• MongoDB Atlas - The database I used to create and store the data for the application.
• Balsamiq - Used to create wireframes for the project.
• Favicon Generator ~ Used to create favicon
• W3C HTML Validator
• W3C CSS Validator
• JSHint
• Font Awesome Icons ~ For social icons in footer

• Users are immediately greeted with a welcome message and a paragraph about the website. What the website is about and the functionality is explained clearly.
• There is a list of gyms that users can see on the home page and it is explained to them if they wish to update or edit any of the gyms all they have to do is click on the gym name!
• The user can edit any of the gyms that are listed on the website and are provided with two prepopulated fields for gym type and and membership cost.
• There is an option for a user to write a review on a gym provided it is on the database. This will then be posted to the review section of the website for other users to see - they will be able to tell who wrote the review and when and about which gym.
• The user also has an option to delete an entry when they click on the gym name.
• If a user chooses to delete an entry a modal will pop up asking if they are sure they want to delete the entry.
• The footer has social links linking to all the main social technologies

Back to Top

• A user login/sign up
• An email to functionality to allow users to email me if there is an issue or perhaps set up a email alert when new reviews are posted
• Search functionality to allow users to search for a gym based on location,cost, type etc.

• Using Browserling I tested the website across multiple browsers to ensure responsiveness and compatibility.

• Using Google Chrome developer tools I tested the websites responsiveness across various devices ie. iPhone, Android and Tablets.

• Manually tested all the hover styling on the navbar and also the links - all operating correctly.

• W3C Markup Validation Service was used to validate HTML code

• W3C CSS Validation Service was used to validate CSS code.

• Code Beautify JavaScript Validator was used to validate Javascript code.

• Manually tested all forms to ensure that if I edited a gyms information it would change

• Manually tested add gym form to make sure the new data appeared on the home page

• Manually tested the delete function to ensure data was removed from the application

• Manually wrote reviews to check and see if reviews were posting to the correct html.file in the right format.

• When I was adding a new gym some aspects of the new information were not adding to the datatable on the home page, I realised that in my form I did not have an 'id' specified for the form to pull the data.

• When scrolling down on the home page there was a white space where the navbar should have been. I googled sack overflow and many developer websites and tried suggested fixes however it is something I will have to do more research into.

• I created this project in the AWS Cloud9 IDE. Within the terminal using git I pushed to my repository on Github.
• I created an app on Heroku and deployed from same.
• In Heroku deployment method was set to Github with automatic deploys set from the master branch.
• The app was then deployed via this link: "https://git.heroku.com/working-it-out.git".

• Select the Repository from Github.
• Click on the "Clone or download" green button
• Click on the "clipboard icon" to the right of the Git URL to copy the web URL.
• Open your IDE and navigate to terminal window
• Change the directory to where you want to clone the repository to.
• Paste the Git URL copied from above and click "Ok".

Back to Top

• Text was taken from the The Gym Advisors

• The background image was taken from Google Image Search

• I got the code for my modal on Bootstrap.
• I also found myself re-watching a lot of the videos and tutorials on Code Institute, especially The Data Centric Development module.

I would like to thank tutor support for helping me with all the initial issues I had using the aws Cloud9 IDE.