Task Management System with Django, React & Reactivated

A modern fullstack task management application showcasing automatic type safety between Django and React using Reactivated. Zero manual type duplication - TypeScript interfaces are auto-generated from your Django models!

🚀 What is Reactivated?

Reactivated bridges Django and React with automatic type generation and Server-Side Rendering (SSR). Write Python models once, get TypeScript types for free.

🎯 Key Features

🔥 Automatic Type Generation

• Django models → TypeScript interfaces automatically
• Change a Django model field → TypeScript updates instantly
• Zero manual type maintenance - true end-to-end type safety

⚡ Server-Side Rendering (SSR)

• React components rendered on Django server
• Instant page loads with full HTML
• React hydrates seamlessly on client
• Fast initial render + full interactivity

📊 Real-World Implementation

• Projects with owners and deadlines
• Tasks with priorities, statuses, and assignees
• Comments with threaded discussions
• Complex relational data with proper foreign keys

🏗️ How It Works

1️⃣ Backend: Django Models & Templates

# tasks/models.py - Define your Django models
class Project(models.Model):
    name = models.CharField(max_length=200)
    owner = models.ForeignKey(User, on_delete=models.CASCADE)
    status = models.CharField(choices=StatusChoices.choices)
    deadline = models.DateTimeField()

# tasks/templates.py - Define template props
@template
class ProjectList(NamedTuple):
    projects: list[Project]  # Type-safe prop definition

# tasks/views.py - Render with type-safe data
def project_list(request: HttpRequest):
    projects = Project.objects.all()
    return templates.ProjectList(projects=projects).render(request)

2️⃣ Auto-Generated TypeScript Types

Reactivated automatically generates TypeScript interfaces from your Django models:

// node_modules/_reactivated/models.d.ts (auto-generated!)
interface Project {
    id: number;
    name: string;
    owner: User;
    status: "planning" | "active" | "on_hold" | "completed";
    deadline: string;
    tasks: Task[];
}

// node_modules/_reactivated/templates.d.ts (auto-generated!)
interface ProjectList {
    projects: Project[];
}

You never write these types manually! They're generated from your Django code.

3️⃣ Frontend: Type-Safe React Components

// client/templates/ProjectList.tsx
import { templates } from "@reactivated";

export const Template = (props: templates.ProjectList) => {
    // props.projects is fully typed with IntelliSense!
    return (
        <div>
            {props.projects.map(project => (
                <div key={project.id}>
                    <h2>{project.name}</h2>
                    <span>{project.status}</span>
                    <p>Owner: {project.owner.username}</p>
                </div>
            ))}
        </div>
    );
};

4️⃣ SSR Magic: Fast & Seamless

1. User requests page → Django view fetches data
2. React renders HTML on server (SSR) → Fast initial load
3. HTML sent to browser → User sees content immediately  
4. React hydrates on client → Full interactivity restored

Result: Fast first paint + full React interactivity. Best of both worlds!

🛠️ Tech Stack

• Backend: Django 5.2 + Python 3.13
• Frontend: React 18 + TypeScript 5.5
• Magic Bridge: Reactivated 0.47
• Build: Vite 5.4 (managed by Reactivated)
• Database: SQLite

📦 Quick Start

Prerequisites

• Python 3.11+
• Node.js 18+

1. Setup Backend

# Clone and create virtual environment
python -m venv .venv

# Windows
.venv\Scripts\activate
   
   # macOS/Linux
   source .venv/bin/activate

# Linux/Mac
source .venv/bin/activate

# Install dependencies
pip install django reactivated

2. Setup Database & Sample Data

python manage.py migrate
python manage.py create_sample_data

Creates 3 users, 4 projects, 15+ tasks with comments

3. Install Frontend Dependencies

npm install

4. Run the App! 🚀

python manage.py runserver

Open http://localhost:8000/ - SSR-powered, type-safe, blazing fast!

Admin Login: http://localhost:8000/admin/

• Username: admin
• Password: admin123

📁 Project Structure

reactivated-sample/
├── taskmanager/          # Django project settings
│   ├── settings.py       # Reactivated configuration
│   └── urls.py           # URL routing
│
├── tasks/                # Main Django app
│   ├── models.py         # Project, Task, Comment models
│   ├── views.py          # Template-based views with type safety
│   ├── admin.py          # Django admin configuration
│   └── management/       # Custom management commands
│
├── templates/            # React/TSX templates
│   └── tasks/
│       ├── ProjectList.tsx    # Auto-generated types from Django
│       └── ProjectDetail.tsx  # Type-safe React components
│
├── client/               # Frontend source (if applicable)
├── static/               # Compiled frontend assets
│
├── package.json          # Node dependencies
├── tsconfig.json         # TypeScript configuration
├── vite.config.ts        # Vite build configuration
└── README.md

🎨 Key Components

Django Models (tasks/models.py)

class Project(models.Model):
    name = models.CharField(max_length=200)
    description = models.TextField()
    status = models.CharField(choices=STATUS_CHOICES)
    owner = models.ForeignKey(User, on_delete=models.CASCADE)
    deadline = models.DateField(null=True, blank=True)
    # ... more fields

class Task(models.Model):
    title = models.CharField(max_length=200)
    project = models.ForeignKey(Project, on_delete=models.CASCADE)
    assignee = models.ForeignKey(User, on_delete=models.SET_NULL)
    priority = models.CharField(choices=PRIORITY_CHOICES)
    status = models.CharField(choices=STATUS_CHOICES)
    # ... more fields

class Comment(models.Model):
    task = models.ForeignKey(Task, on_delete=models.CASCADE)
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    content = models.TextField()
    # ... more fields

Django Views with Reactivated (tasks/views.py)

from typing import NamedTuple
from reactivated import template

@template
class ProjectListTemplate(NamedTuple):
    projects: list[dict]

def project_list(request: HttpRequest) -> HttpResponse:
    projects_data = [...]  # Serialize projects
    return ProjectListTemplate(projects=projects_data).render(request)

React Components with Auto-Generated Types (templates/tasks/ProjectList.tsx)

/**
 * AUTO-GENERATED by Reactivated
 * Do not manually edit this file - it will be overwritten
 * To update types, modify your Django models and run: python manage.py generate_types
 */

interface Project {
  id: number;
  name: string;
  description: string;
  status: string;
  // ... auto-generated from Django model
}

export default function ProjectList({ projects }: Props) {
  // Type-safe access to project properties
  return (
    <div>
      {projects.map(project => (
        <div key={project.id}>
          <h2>{project.name}</h2>
          {/* TypeScript knows all available fields */}
        </div>
      ))}
    </div>
  );
}

)

All types auto-generated from Django models!

## 🚀 Development Workflow

1. Change Django model field
2. Reactivated regenerates TypeScript types automatically
3. TypeScript compiler catches any React component issues
4. Fix them before runtime - zero type errors in production!

```bash
# Typical workflow
python manage.py makemigrations
python manage.py migrate
python manage.py runserver  # Types auto-regenerate!

🎓 Resources

• Reactivated GitHub
• Django Docs
• React TypeScript

� License

MIT - Use freely for learning and projects!

---

Built with ❤️ to demonstrate the power of automatic type safety across the fullstack.