Exercise Tracking Api with Flask

So for a certificate I am trying to earn, one of the projects is to write an exercise tracking api. So I wrote one with flask. it’s deployed on pythonanywhere here.

For the curious: My code is on github here

I created a simple User Interface to simulate requests that gives feedback to the user. Also I did double duty on form validation by using the html client side validation and doing some of my own on the server side. I think I could refine the server side validation some. Also I’m looking to into making it more secure. Right now, I think it’s pretty basic and not something I would use as a real service. But I’m actually pretty stoked that I did this and hope to include it in my portfolio. I also have to go put in some proper documentation, right now it is pretty bad/ practically non existent.

2 Likes

Hi @zberwaldt nicely done! Coming from the graphic and ux world I have some suggestions to make your nice programm a little bit more comfortable for ordinary users. In fact, with some slight changes in the user flow this app is easily changed in a deployable app for a school or the like.

First I drawed a finite state machine as I learned from @zedshaw . What will the userflow be?

The FSM could look something like this:

Then I did a wireframe of the startpage (to make things easier the startpage is also the login page):

The signup page:

Add exercise page:

Overview Page:

This are only wireframes, no graphic design done.

The most important thing in designing apps for users is to design a workflow for the user that is self explanatory and smooth.

For the log in and register page there is a good code example in the Flask tutorial: Tutorial — Flask Documentation (1.0.x)

I hope that gives you some ideas on how to further improve your app.

1 Like

Hey @DidierCH,

Thanks for the feedback! Originally the project spec was only for developing the back end, which is why I did not really develop much of a front end. It was only a means to interact with the back-end on the most basic level, instead of developing a full CRUD application.

The project was so I can earn a Microservice and API certificate.

But since you’ve brought it up. This is probably a good opportunity for me to get up to speed with Vue, so I can develop a separate front-end that can interface with this back-end. From what I can tell, people develop an application as two separate parts. The front-end as MVVM, like Angular, React, or Vue. Then a back-end in Node, Python, etc. And! the front-end could be another portfolio piece, too.

Rather than developing a web application as a single cohesive unit. I’m probably interpreting that wrong. But that’s what it seems to be to me.

Anyways, Thank you for the feedback. I really appreciate it.

Yes, you can bring it to a hole new level with front-end stuff like Angular or Vue, but most of the time this is not really neccessary. In this case it would be only a matter of some different views and one or two templates more to create a whole new user experience. I think you can distinguish yourself from other folks when you clearly display that you give some thoughts on all aspects of the application. I know that kind of people is really sought after.

1 Like

DAMN FINE WORK @DidierCH! Then again you are a professional graphic designer so I would expect nothing less.

Thank you @zedshaw!
That is a big compliment!

Simple but often overlooked, don’t forget ‘accessibility for all’. Make sure those fields and flow have accessibility tags for bonus points.

2 Likes