This project implements a task progress stepper UI using Django Rest Framework (DRF) and Server-Sent Events (SSE) for real-time updates.
✅ Django DRF backend with SSE endpoint for real-time task progress updates
✅ Modern stepper UI with animations and progress bar
✅ Clean and responsive design for a seamless user experience
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activatepip install django djangorestframework django-ssedjango-admin startproject myproject .
python manage.py startapp tasksINSTALLED_APPS = [
'rest_framework',
'tasks',
]from django.db import models
class Task(models.Model):
status = models.CharField(max_length=20, default='PENDING')
progress = models.IntegerField(default=0)
description = models.CharField(max_length=255, blank=True)import time
from django.http import StreamingHttpResponse
from django.views.decorators.http import require_POST
from django.views.decorators.csrf import csrf_exempt
from .models import Task
import json
tasks = {} # Store task progress here temporarily
@csrf_exempt
@require_POST
def start_task(request):
task_id = str(len(tasks) + 1)
tasks[task_id] = {'current': 0, 'total': 4, 'description': 'Starting task...'}
return JsonResponse({'task_id': task_id})
def task_progress(request, task_id):
def event_stream():
for i in range(1, 5):
time.sleep(2)
tasks[task_id]['current'] = i
tasks[task_id]['description'] = f'Step {i} in progress...'
yield f"data: {json.dumps({'status': 'PROGRESS', 'result': tasks[task_id]})}\n\n"
yield "data: {\"status\": \"completed\", \"result\": \"Task complete!\"}\n\n"
return StreamingHttpResponse(event_stream(), content_type='text/event-stream')from django.urls import path
from . import views
urlpatterns = [
path('api/tasks/start/', views.start_task, name='start_task'),
path('api/tasks/<str:task_id>/progress/', views.task_progress, name='task_progress'),
]from django.urls import path, include
urlpatterns = [
path('', include('tasks.urls')),
]python manage.py makemigrations
python manage.py migrate
python manage.py runserverThe HTML, CSS, and JavaScript stepper UI is included in the provided frontend file. Ensure that:
- The
fetch()request endpoints match your local server URLs (e.g.,http://localhost:8000/api/tasks/start/). - The SSE connection uses the proper URL structure for
EventSource.
- Start the Django server:
python manage.py runserver- Open the provided HTML file in your browser.
- Click Start Task to initiate the process and see real-time updates with animations. 🚀
- Add task persistence in the database
- Enhance error handling in both frontend and backend
- Improve UI with more dynamic feedback and enhanced styling