FlowTask — Full-Stack Task Management System
A production-style practice project built with Django + DRF (backend) and React + Vite (frontend).
Tech Stack
| Layer | Technology |
|---|
| Backend | Django 4.2, Django REST Framework 3.14 |
| Auth | drf-simplejwt (JWT), custom registration view |
| Filtering | django-filter, DRF SearchFilter, OrderingFilter |
| CORS | django-cors-headers |
| Frontend | React 18, Vite, React Router v6 |
| HTTP | Axios (with JWT interceptors + auto-refresh) |
| UI | Custom CSS design system (dark editorial theme) |
| Toasts | react-hot-toast |
| Database | SQLite (dev) — swap for PostgreSQL in prod |
Project Structure
taskmanager/
├── backend/
│ ├── config/
│ │ ├── settings.py # All Django + DRF + JWT settings
│ │ └── urls.py # Root URL configuration
│ ├── accounts/
│ │ ├── models.py # Custom User (email login)
│ │ ├── serializers.py # Registration, Profile, JWT customisation
│ │ ├── views.py # RegisterView, LoginView, MeView, UserListView
│ │ └── urls.py
│ ├── tasks/
│ │ ├── models.py # Task (status, priority, due_date, created_by, assigned_to)
│ │ ├── serializers.py # TaskSerializer, TaskListSerializer
│ │ ├── views.py # TaskViewSet, TaskStatsView
│ │ ├── filters.py # TaskFilter (status, priority, assigned_to_me, overdue…)
│ │ └── urls.py
│ ├── requirements.txt
│ └── seed.py # Demo data: 2 users + 8 tasks
│
└── frontend/
└── src/
├── api/
│ ├── axios.js # Axios instance + JWT interceptors + auto-refresh
│ ├── auth.js # register, login, logout, getMe, getUsers
│ └── tasks.js # CRUD + complete/reopen/assign/stats
├── context/
│ └── AuthContext.jsx # Global auth state
├── components/
│ ├── AppLayout.jsx # Sidebar + Outlet wrapper
│ ├── Sidebar.jsx # Navigation sidebar
│ ├── ProtectedRoute.jsx
│ ├── TaskCard.jsx # Card with inline actions
│ └── StatCard.jsx # Dashboard stat tile
├── pages/
│ ├── Login.jsx # Email/password login
│ ├── Register.jsx # Full registration form with validation
│ ├── Dashboard.jsx # Stats + recent tasks + quick links
│ ├── TaskList.jsx # Grid/list with search, filter, sort, pagination
│ ├── TaskDetail.jsx # Full task view
│ ├── TaskForm.jsx # Create + Edit (shared form)
│ └── Profile.jsx # View + edit profile
├── App.jsx # Router configuration
└── index.css # Complete design system