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, status, priority, due date, and owner
• Change task status between todo and done
• Delete tasks with confirmation
• Update the React interface without a page refresh
• Page-number pagination with Previous and Next controls

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 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.

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

• Improve loading and API error states
• Handle expired or invalid authentication tokens
• Keep pagination and ordering synchronized after updates
• Improve the React UI and responsive CSS
• Replace the browser delete confirmation with a custom modal
• Add task editing
• Prepare production deployment

Status

• Backend API: functional MVP
• Authentication: working
• React task management: working
• UI styling: in progress