Welcome to retro50, a Flask web app implementing a retrospective revision timetable for Harvard's CS50's final project!
Visit the project here(implemented in Railway)- Retro50
Incase the link doesn't work, visit the offical repo for the project- retro50
retro50 was designed to help students study and revise using a retrospective revision timetable, implemented in Flask. Using a SQLite database, it logs revision entries, keeps track of the subjects, and stores the timetable itself, which is managed by the logic in app.py
A retrospective revision timetable.
The project is a Flask application and has a templates/
directory to manage the webpages and the static/
directory to manage the styling, and a little bit of JS in situations where it is easier to update the DOM without reloading the page, as seen in-
-
revision.html
uses a bit of JS in<script>
tags to display the proficiency slider value(used to log revisions in a retrospective revision timetable) -
The JS logic for
timer.html
, implemented intimer.js
, made in Javascript instead of Python as it is easier to constantly update the DOM using JS
All of the templates extend from layout.html
making it easy to add/remove basic elements from each page.
In addition to this, each webpage is also web accessible, with inputs containg proper aria-label
attributes and <label>
tags, and the color scheme is also fairly simple to ensure everyone can use retro50.
Contains images/
, the stylesheet, and timer.js
to manage timer.html
Handles the logic of each of the routes, controls database queries, and some specific logic required for each route, as well as the Flask session. The most important routes implemented are-
- register(/register)- Adds new users to the database, validating their usernames and passwords
- index(/)- Queries for the user_id and and all the subjects, and assigns a color key to each subject based on proficiency, which is used in
index.html
to render the color-coded retrospective revision timetable. - add(/add)- First checks if the subject is not already in the database, and then adds the subject to the database.
- delete(/delete)- First checks if the subject is in the database and then deletes the record from the table.
- about(/about)- Renders the about page
- the login and logout routes
Additional features implemented-
- timer(/timer)- A basic implementation of a Pomodoro timer to help in study sessions, with a link to the Wikipedia page
- change password(/changepwd)- Updates the user's current password after validating it
- reset timetable(/reset)- Deletes the entire timetable, instead of making the user delete each subject one by one to save time
- reset subject(/resetsubj)- Deletes and adds the subject to the timetable, clearing the revision log, useful after exams/tests are over to prepare for the next one.
Contains a login decorator implemented in CS50 to ensure users are logged in while accessing certain routes and a validate_password()
function, which are implemented in a separate file to-
- Keep the logic for the routes and database queries separate
- Easier to implement new functionality for the application without cluttering the
app.py
file.
A SQLite database where the subjects, timetable, and users are stored, managed using CS50's library in app.py
. Contains a table for the users, storing username and password hash, and the subjects table, containing the revision dates and proficiency logs, all of which is put together in index.html
to render the timetable.
retro50's goal is to be easy to use and quick to learn, with the only requirement being to register for an account which requires only a username and a password.
After registering for an account and logging in, you will be able to view your retrospective revision timetable, add and delete subjects, use the Pomodoro timer implemented in timer.html
, log revisions in your timetable, and change your password.
Run the following command-
git clone https://github.com/agentblack-6000/retro50.git
This web app was built as a final project for CS50, although future plans entail-
- Using Django instead of Flask
- Using PostgreSQL and the actual SQLAlchemy library instead of SQLite and the CS50 library
- Adding fancier JS to detect password strength
- A small forum (also implemented by PostgreSQL) for students to publish helpful resources and questions
The project would not have been possible without these libraries-
- The CS50 library
- Flask
- Werkzeug