Coder Social home page Coder Social logo

emarifer / flask-htmx-todolist Goto Github PK

View Code? Open in Web Editor NEW
3.0 2.0 1.0 116 KB

Python/Flask to-do list app with user login and HTMx-powered frontend.

License: MIT License

Python 44.82% CSS 3.89% HTML 51.29%
crud-application daisyui flash-messages flask flask-login flask-restful flask-session flask-sqlalchemy htmx hyperscript

flask-htmx-todolist's Introduction

Python/Flask to-do list app with user login and HTMx-powered frontend (Demo)

A full-stack application using Python's Flask framework with session-based authentication. Once we are authenticated we can enter a view from which we can manage a list of tasks (list, update and delete). Requests to the backend are controlled by </>htmx (hypermedia only).

Explanation

The application allows us to perform a complete CRUD on the database, in this case SQLite3, but the Flask ORM (Flask-SQLAlchemy) allows us to use any SQL database.

The DB stores both a table with the users and another table for each user's to-do. Both tables are related using a foreign key.

The use of </>html allows behavior similar to that of a SPA, without page reloads when switching from one route to another or when making requests (via AJAX) to the backend.

On the other hand, the styling of the views is achieved through Tailwind CSS and DaisyUI that are obtained from their respective CDNs.

Finally, minimal use of _hyperscript is made to achieve the action of closing the alerts when they are displayed.


Screenshots:

Todo List Page with success alert:


Sign Up Page with error alert:


Task update page:


Setup:

As a prerequisite, we must have Python installed on our machine, in addition to the libraries that in our operating system allow us to create a virtual environment for the installation of the required dependencies.

To activate the virtual environment (On Unix/MacOS or Windows):

your@user:~/path/to/the/app/flask-htmx-todolist$ source .venv/bin/activate # On Windows, run: .venv\Scripts\activate

To install the dependencies:

(.venv) your@user:~/path/to/the/app/flask-htmx-todolist$ pip install -r requirements.txt

To start the application in development mode (with DEBUG mode activated):

$ python3 run.py #  On Windows, run: python run.py

To run the application in production, first you would have to change the configuration in the init.py file (pass the DEGUB = False attribute). Then install gunicorn (Python WSGI HTTP server for UNIX [pip install gunicorn]) and launch the application with the command:

$ gunicorn run:app

Happy coding ๐Ÿ˜€!!

flask-htmx-todolist's People

Contributors

emarifer avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Forkers

sf-walsh

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.