Progress Pro (Full-Stack Web App)

General Assembly Project 3

Timeframe

7 days

Technologies, frameworks and packages

• JavaScript (ES6)
• Python
• React
• Webpack
• PostgreSQL
• Flask
• React-charts
• Ajax
• HTML5
• Bulma
• SCSS
• GitHub
• Insomnia

Project brief

• Build a full-stack application, making your own back-end and front-end.
• Use a Python Flask API to serve your data from a PostgreSQL database.
• Consume your API with a separate front-end built with React.
• Be a complete product with multiple database relationships and CRUD functionality for at least a couple of models.

This was a solo project.
The application is deployed via Git on Heroku and can be found here: http://progress-pro.herokuapp.com

App overview

Progress Pro is a gym training application.
Users can create an account then create personalised gym programmes containing chosen exercises on chosen days.

Each programme is then stored on the user homepage, with specific buttons to train on a particular day.

The train page for each specific day contains the exercises and also the weight which was lifted in the last session for reference.
Users have the option to increase or decrease the weight before saving the session.

On save the workout date and weights are added to the database.

The results section of the app allows users to view their progress for each exercise in the programme over time.

Development process

I wire-framed each page out before starting to code.

I also made sure I had a good understanding of the database relationships.

Although I ultimately knew wanted to display my results data using graphs, I set myself the goal of viewing the data in a text list format first.

Wins

My knowledge of array methods (particularly .map) improved during this project and I was pleased with the way I was able to manipulate my data into the correct format required by the React-charts plugin.

I was also pleased with the functionality I managed to achieve on the 'train page'. If a user has already entered a weight on the current day then the plus, minus, and submit buttons become disabled.

Challenges

I initially struggled to grasp SQL database relationships and how they affected my code. I also had some issues with getting the page to re-render when certain aspects had been changed.

Future enhancements

• Body Weight Tracking - Users body weight entries with tracking
• Images - User body images to see physical results
• GIFs - Short GIFs added to ‘train’ page to demonstrate good form when carrying out the exercise