My final project is a web application running in Flask where the user creates an account and then add tasks that he needs to perform in the day and the hours set to do it. It incentivizes the person to turn it routine in a gamefied experience, where the user earns points when he succesfully completes a task and there's a leaderboards to show rankings.
There's 7 htmls on the file, layout is the main file where contains stuff that will stay across all htmls. Since it was my first project made all by myself, I ran multiple times into formatting problems, which I solved with the help of AI and by trying stuff I found online and using Bootstrap documentation. Although the whole website is responsive which makes me satisfied, I think the overall layout of my website is pretty bad, but, after CS50, I have discovered that I like back-end much more and will be my focus going forward, so I'm pretty happy with the result.
Routine is the template to show the user's routine, where he can mark tasks as completed or delete unfinished tasks. Since I used Jinja to send the parameters for the fuctions to know which task id and difficulty were being completed, the user could edit them on elements, so I had to do server-side confirmations later on both the complete-task and delete buttons. I used AJAX to perform actions on the DB and had to reload the page to sucessfully update the table. I'm happy to how the table ended, showing everything in the way I wanted and being responsive.
The leaderboards reuses the table made in Routine and it shows users ranked by XP, it was something simple to do after making Routine. As next steps here I think I could somehow let users create groups so they compete with friends and not just a global leaderboards, as I should expect someone to go for max points and just set all tasks as difficulty and each lasting only for an hour. My thought proccess here is that say we are a group of 5 and want to see who goes to the gym the most, they could set a challenge among themselves and when one of them complete the task Gym they earn points and a leaderboard just for this group, would be an interesting use of my app.
Manage uses javascript to select between multiples html, depending on the action the user wants to perform. I could use multiple HTMLs and i think it'd be a better UI, but in the end since I did JS week last year I thought I would use it to refresh my memory. I also tried my best to use different forms of getting data from the user for learning purposes, and my web app tries it's best to avoid "dumb" users, like populating the hours dropdown with javascript and on edit task the person first select the task he wants to edit it and then populates the current values on the form. At first the user couldn't create tasks with the same name, but lately I thought if someone wants to perform the same task at morning and at night it's totally fine so I had to remove that restriction. The restriction to avoid time overlap was a bit hard when the user performed something overnight(i.e. start something at 23:00 and finish at 03:00), so I had to split in 2 different algorithms.
Login and Register are simple htmls with a form, so not much to say.
index.html is a front page where I added some fancyness for learning experience, I wasn't going to add a homepage, but I think every website has one so why not. It's the last page I did and where I decided to turn all htmls background grey, as I love dark modes and hate too much whiteness on screen.
I followed good practices and added all my css in a different file, I ran into a lot of css conflicts with the bootstrap classes, but in the end of the project I think I was already with a good feeling of where things should be edited to work as I wanted. My javascript is also is a separate file, I didn't used much and it's something I could improve on my project later on, adding confirmations boxes to the user which would also prevent buttons to send actions multiple times(although only one would work thanks to server-side confirmations, so working as intended).
My @apology uses memegen to generate using an image i find more appropriate for error display and @login_required check if there's a session to go thru, but since I've done CS50 Finance a week ago, I used the same concepts to apply them to my web app.
app.py is the flask application in which I tried my best to make server side confirmations to avoid exploits. It redirects the user through the htmls and also theres a scheduler to reset tasks daily and 2 ajax actions to perform db tasks on mouse click in images. Overall I think flask is a very easy to use python framework, I think it might get messy with a lot of htmls and routes, but for a simple website it's perfect to use.
routine.db is my sql database, very simple with a users and task table. I had the option to create a table of tasks for each user, create one table for all tasks or create a table for tasks or a table of tasks and a table that relations users and tasks. Since i used the latter on CS50 Finance, I did different here and it made everything more trivial in my opinion, I'm not sure if it's a bad design on large databases tho and I'm still unsure which would perform better between the first 2 options.
For final thoughts, I think this web app has a lot of growth, setting friends, custom leaderboards, monetization(limiting number of hard tasks or running an add whenever the user completes a task i.e.), giving more points according to how long the task lasts. I could go on and on with tons of improvements in my opinion, but with this MVP I would be happy to receive some beta users feedback in what they like or dislike to continue, since there were times where I added something in the layout thinking would look much nicer, but, after seeing, I changed it back. My original idea was creating a character where he levels based on xp and fights a never ending horde of monsters and the kill granted coins and the leaderboard would have by coins or by level, but i think it would be too much at first since I don't know game dev/design so I made this MVP which I'm extremely proud of and was something I wanted to use myself. It seems that a lot of times I thought doing the next step would be very hard, but turned out to be not as hard as I thought. Although not required, The next step right now is to actually deploy this web app online using AWS and Vercel so I can tell everyone I've a web app online and not just something on my server.