Skip to content

Readme.md

Latest commit

 

History

History
199 lines (141 loc) · 5.39 KB

Readme.md

File metadata and controls

199 lines (141 loc) · 5.39 KB
Raw

📝 ToDo Manager – API & Interactive UI

A clean, secure, and dynamic ToDo Management App built with Django, Django REST Framework, HTMX, and TailwindCSS (DaisyUI).
It supports both a fully-documented RESTful API and an interactive web UI without heavy JavaScript.

📸 Project Preview

Dashboard

Dashboard| No task Dashboard| List of tasks

Modals

Create Task Modal

Edit Task Modal

Authentcation

Login Page

Register Page

🚀 Features

✅ Backend API (DRF + JWT)

  • Register / Login via JWT
  • Create / Read / Update / Delete your tasks
  • Tasks are user-specific (private per user)
  • Filtering, searching, ordering support
  • Swagger / ReDoc auto documentation

🌐 Frontend UI (HTMX + TailwindCSS)

  • Dynamic task list
  • Modal for create / update tasks
  • Built using HTMX + Django Partials
  • Fully responsive with DaisyUI design

🧰 Tech Stack

Layer Tools Used
Backend Django 5.2.3, Django REST Framework
Auth Simple JWT (Access/Refresh tokens)
API Docs drf-spectacular (OpenAPI/Swagger/ReDoc)
UI Framework Django Templates + HTMX
CSS Styling TailwindCSS + DaisyUI
Filtering django-filter

📦 Installation

# 1. Clone repo
git clone https://github.com/alanhasn/Task-manager-using-Django-HTMX-and-DRF
cd Task-manager-using-Django-HTMX-and-DRF

# 2. Create virtual env
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate

# 3. Install dependencies
pip install -r requirements.txt

# 4. Apply migrations
python manage.py migrate

# 5. Run server
python manage.py runserver

🔐 Authentication (JWT)

✅ Register

POST /api/register/

{
  "username": "mohammed doe",
  "email": "doela@example.com",
  "password": "StrongPassword123"
}

🔑 Login

POST /api/login/

{
  "username": "mohammed doe",
  "password": "StrongPassword123"
}

🔄 Refresh Token

POST /api/token/refresh/

{
  "refresh": "<your_refresh_token>"
}

📚 API Documentation

Swagger UI Redoc

Access the API documentation at:

🧪 API Endpoints

Method Endpoint Description Auth
GET /api/todos/ List current user’s todos ✅
POST /api/todos/ Create a new todo ✅
GET /api/todos/{id}/ Retrieve a specific todo ✅
PUT /api/todos/{id}/ Update a todo ✅
DELETE /api/todos/{id}/ Delete a todo ✅
GET /api/users/ Get authenticated user + related todos ✅

🔍 Filtering, Searching, Ordering

Search Example

Feature Example
Filter /api/todos/?completed=true
Date Range /api/todos/?created_at__gte=2024-01-01
Search /api/todos/?search=meeting
Order /api/todos/?ordering=-updated_at

🌐 Frontend (HTMX UI)

💻 Key UI Pages

Page Description
🔐 Login / Register Forms for Session authentication , login and registration
🏠 Dashboard List of tasks for logged-in user
🆕 Create Task Form to add new task using hx-post
📝 Update Task Inline or modal form using hx-post
❌ Delete Task Deletion via hx-delete with confirmation

⚙️ HTMX Interactions Used

  • hx-get → Load dynamic content (e.g. task table)
  • hx-post → Create task
  • hx-delete → Delete task
  • hx-target, hx-swap → Update DOM elements
  • hx-trigger → triggers like load, submit, change

🧩 Best Practices Followed

  • Separation of API & UI logic
  • Modularized app using todo/api/
  • DRY templates using partials/
  • Auth-protected views and endpoints
  • Password validation with strong rules
  • HTMX + Django used progressively (no JS frameworks)

🧑‍💻 Author

📃 License

This project is licensed under the MIT License. See LICENSE file for more details.