The app is not online anymore since Heroku ended their free tier and I'm broke.
Update: fuck Heroku, check this out: Render.com
This is my final project for CS50. It is a to-do list web app. You can create, edit and delete tasks. You can mark them as complete/incomplete.
The name is inspired by CS50's command-line tools check50 and submit50.
Open a terminal window, and run the following commands:
git clone https://github.com/youssef-attai/task50.git
cd task50
If you don't already have virtualenv installed, run the following command:
pip install virtualenv
Run the following commands to setup the environment:
virtualenv venv
source venv/bin/activate
pip install -r requirements.txt
Run the following commands:
touch database.db
export DATABASE_URL=sqlite:///database.db
Start a Python interactive session by typing in python or python3 then hit Enter.
from app import db
db.create_all()
exit()
Make sure the database is created successfully by running:
sqlite3 database.db .tables
You should see two new tables created: user and task.
- Run the following command:
flask run
- Go to http://127.0.0.1:5000, you should see the app working as expected.
- Just hit
Ctrl+cin the terminal window and the server will stop.
app.pyis the application controller, it contains the Flask app setup, all the different routes, and model classes.templates/folder contains all the HTML templates.templates/layout.htmlis the base template that all other templates extend, it has important links that need to be in every template's<head>tag (e.g. Bootstrap CDN links, JQuery CDN link, etc.).templates/register.htmlis the template for the Registration page.templates/login.htmlis the template for the Login page.templates/home.htmlis the template for the main page.templates/dashboard.htmlis the template for the Dashboard page, where the user can manage their tasks.templates/edit.htmlis the template for the Edit page, where the user can edit a specific task determined via a url parameter.Procfileis a file that tells Heroku how to run the app.requirements.txtis the result of runningpip freeze, it includes all the dependencies needed for hosting the app.
When the user first opens the app, they have to register a new account.
Every user must have a unique username.
All user inputs are validated server-side only, and not checked in the browser. Once the user registers successfully, they can log in using their username and password, to be redirected to their dashboard, where they can add new tasks to their empty to-do list.
Users can edit and delete tasks, as well as marking them as "done" or "not done".
%%{init:{
'theme': 'neutral'
}}%%
erDiagram
USER ||--o{ TASK : has
USER {
int id PK
string username
string password
}
TASK {
int id PK
int user_id FK
string title
boolean done
}
Authentication is done using Flask-Login
Database management is done using Flask-SQLAlchemy
Password hashing is done using Flask-Bcrypt
HTML forms are done using Flask-WTF
Icons are from FontAwesome
- Stackoverflow answer by Hosein Yeganloo
- Stackoverflow answer by Erwin Brandstetter
- Stackoverflow answer by Leandro Lima and davidism
- Stackoverflow answer by FogleBird and tremendows
- Heroku Dev Center - Setting up Postgres
- Real Python YouTube Video - Deploy a Flask Application on Heroku
- Codemy.com YouTube Video - Deploy Flask App With Database On Heroku
To all of CS50's staff. The course taught me a LOT, and I truly wish I had started my computer science journey with it, my life would have been much easier.