TaskFlow Fullstack App

TaskFlow is a full-stack task management application built as a learning project. It uses Django REST Framework for the API and React for the current frontend.

Tech Stack

Backend

• Python
• Django
• Django REST Framework
• PostgreSQL
• Docker and Docker Compose
• DRF token authentication

Frontend

• React
• Vite
• JavaScript and JSX
• Fetch API
• Browser localStorage

The repository also keeps the original Vanilla JavaScript frontend for reference.

Current Features

Authentication

• User registration
• User login
• Token-based authentication
• Login state restored from localStorage
• Client-side logout
• Conditional rendering for authenticated users

Task Management

• Create tasks
• Display only the logged-in user's tasks
• Display title, description, status, priority, due date, and owner
• Change task status between todo and done
• Show clear Mark as done and Reopen actions
• Delete tasks with confirmation
• Update the React interface without a page refresh
• Page-number pagination with Previous and Next controls
• Keep the current page and scroll position stable after task updates
• Show loading, success, and API error feedback
• Automatically fade and remove temporary feedback messages
• Use a responsive layout for forms, task cards, and authentication pages
• Wrap long task content without breaking the task grid

Backend API

• Task ownership enforcement
• Filtering by status, priority, and due date
• Search by title and description
• Ordering by creation date, title, and due date
• Default ordering keeps todo tasks before done tasks, then orders by due date and creation date
• Default pagination size: 4

Project Structure

taskflow-fullstack/
|-- backend/              Django REST Framework API
|   |-- config/
|   |-- tasks/
|   |-- users/
|   |-- docker-compose.yml
|   |-- Dockerfile
|   |-- manage.py
|   `-- requirements.txt
|-- frontend/             Original Vanilla JavaScript frontend
|   |-- index.html
|   |-- script.js
|   `-- style.css
|-- react-frontend/       Current React frontend
|   |-- src/
|   |-- package.json
|   `-- vite.config.js
`-- README.md

API Endpoints

Authentication

POST /api/users/register/
POST /api/users/login/

Example login response:

{
  "token": "your_token_here",
  "username": "testuser",
  "email": "user@example.com"
}

Tasks

GET    /api/tasks/
POST   /api/tasks/
GET    /api/tasks/<id>/
PUT    /api/tasks/<id>/
PATCH  /api/tasks/<id>/
DELETE /api/tasks/<id>/

Authenticated task requests use this header:

Authorization: Token your_token_here

Running the Project

1. Start the Backend

Configure backend/.env, then run:

cd backend
docker compose up --build

The API will be available at:

http://127.0.0.1:8000/api/

Apply migrations when needed:

docker compose exec web python manage.py migrate

2. Start the React Frontend

In a second terminal:

cd react-frontend
npm install
npm run dev -- --host 127.0.0.1

Open:

http://127.0.0.1:5173/

Using 127.0.0.1 instead of localhost can avoid local VPN or proxy conflicts.

3. Start the Original Vanilla JavaScript Frontend

The original frontend can run beside the React frontend for comparison. In a third terminal:

cd frontend
python -m http.server 5500 --bind 127.0.0.1

Open:

http://127.0.0.1:5500/

Current React Components

• App: authentication state and page selection
• LoginForm: login request and token storage
• RegisterForm: user registration
• TasksPage: task loading, creation, pagination, deletion, and status updates
• TaskItem: display and controls for one task

Next Steps

• Add network-error handling to the Login and Register forms
• Handle expired or invalid authentication tokens consistently during every task action
• Disable action buttons while requests are running to prevent duplicate requests
• Add accessible form labels and basic client-side validation
• Separate success and error notification types
• Replace the browser delete confirmation with a custom modal
• Add task editing
• Add search and task filters to the React frontend
• Add focused frontend tests and expand backend API tests
• Prepare production deployment

Status

• Backend API: functional MVP
• Authentication: working
• React task management: working
• Responsive React UI: working
• Original Vanilla JavaScript frontend: retained for comparison