A simple Todo application built with FastAPI, HTMX, and Jinja2 templates. This app allows users to create, update, toggle, and delete todo items. It also incorporates JWT authentication to secure access and modern styling for a simple, clean, and visually appealing user interface.
- Unique Approach
- Features
- Technologies Used
- Getting Started
- File Descriptions
- Usage
- API Documentation
This project demonstrates a unique approach to building web applications by combining FastAPI with HTMX. By leveraging HTMX, the app provides a highly dynamic user experience with real-time updates directly in the browser without requiring full page reloads. Additionally, JWT (JSON Web Token) authentication is integrated to manage user sessions securely. This approach showcases how modern libraries can be integrated to create responsive, efficient, and secure web applications, even for seemingly simple tasks like managing a Todo list.
- Create new todo items.
- Update the title of existing todo items.
- Toggle the completion status of todo items.
- Delete todo items.
- Real-time updates with HTMX.
- JWT authentication for secure access.
- FastAPI: A modern, fast (high-performance) web framework for building APIs with Python 3.7+.
- HTMX: A library that allows you to access modern browser features directly from HTML.
- Jinja2: A templating engine for Python.
- Simple.css: A classless CSS framework.
- Docker: A platform for developing, shipping, and running applications in containers.
- Docker
- Docker Compose
-
Clone the repository:
git clone https://github.com/your-username/your-repo-name.git cd your-repo-name
-
Create a
.env
file in the root directory with the following content:POSTGRES_DB=your_db_name POSTGRES_USER=your_db_user POSTGRES_PASSWORD=your_db_password DB_HOST=db DB_PORT=5432
-
Build and start the Docker containers:
docker-compose up --build
-
Open your browser and go to
http://127.0.0.1:8000
to view the app.
-
To stop the containers:
docker-compose down
-
Make sure your Docker containers are running:
docker-compose up -d
-
Make the
run_tests.sh
script executable:chmod +x scripts/run_tests.sh
-
Run the tests using the
run_tests.sh
script:./scripts/run_tests.sh
app/main.py
: The main application file where FastAPI routes are defined.Dockerfile
: The Dockerfile for building the FastAPI app image.docker-compose.yml
: Docker Compose configuration file.app/templates/index.html
: The main HTML file for rendering the todo list.app/static/styles.css
: The main CSS file for styling the app.scripts/run_tests.sh
: Script for running tests with Docker Compose.
- Create a Todo: Enter a task in the input field and click the "Create" button.
- Update a Todo: Edit the text directly in the list and it will be updated automatically.
- Toggle a Todo: Click the checkbox to mark a task as completed or not completed.
- Delete a Todo: Click the "❌" button to remove a task from the list.
- Sign Up: Go to the sign-up page at
auth/signup-login
to create a new account. Fill in the required details and submit the form to create a new user. - Log In: Go to the login page at
auth/signup-login
to sign in. Enter your credentials and submit the form. Upon successful login, you will be redirected to the todo list page. - Log Out: Click the "Log out" option in the dropdown menu to end your session and return to the login page.
The FastAPI application automatically generates API documentation using Swagger UI and ReDoc. You can access these by visiting the following URLs in your browser:
- Swagger UI: http://127.0.0.1:8000/docs
- ReDoc: http://127.0.0.1:8000/redoc