StateZeroYour Django backend, supercharged

// But your frontend becomes a nightmare of boilerplate
const [tasks, setTasks] = useState([]);
const [loading, setLoading] = useState(true);

// Fetch data
useEffect(() => {
  fetch('/api/tasks/')
    .then(res => res.json())
    .then(data => {
      setTasks(data);
      setLoading(false);
    });
}, []);

// Optimistic updates (so UI feels snappy)
const toggleTask = async (taskId) => {
  // Update UI immediately
  setTasks(prev => prev.map(task => 
    task.id === taskId ? {...task, completed: !task.completed} : task
  ));
  
  try {
    await fetch(`/api/tasks/${taskId}/`, {
      method: 'PATCH',
      body: JSON.stringify({completed: !task.completed})
    });
  } catch (error) {
    // Revert on failure
    setTasks(prev => prev.map(task => 
      task.id === taskId ? {...task, completed: !task.completed} : task
    ));
  }
};

// Real-time updates (so everyone stays in sync)
useEffect(() => {
  const ws = new WebSocket('ws://localhost:8000/tasks/');
  ws.onmessage = (event) => {
    const {type, task} = JSON.parse(event.data);
    if (type === 'task_updated') {
      setTasks(prev => prev.map(t => t.id === task.id ? task : t));
    }
  };
  return () => ws.close();
}, []);

// Plus error handling, conflict resolution, connection state...

// Your decoupled Vue.js/vanilla JS SPA becomes this simple
import { useQueryset } from '@statezero/core/vue';
import { Task } from './models';

const tasks = useQueryset(() => Task.objects.filter({ user: currentUser.id }));

const toggleTask = (task) => {
  task.completed = !task.completed;
  task.save(); // Validates in Django, updates everywhere instantly
};

// That's it. You get:
// ✅ Optimistic updates - UI feels instant
// ✅ Real-time sync - Changes appear automatically  
// ✅ Django validation - Your clean() method runs
// ✅ Rich permissions - Field-level and object-level access control
// ✅ Decoupled deployment - Frontend and backend deploy independently
// ✅ Auto-optimized queries - StateZero handles select_related/prefetch_related

// 5 lines instead of 50+. Build your SPA features.

// Use them directly in your frontend - full Django ORM power
const myOrders = useQueryset(() => Order.objects.filter({ 
  created_by: currentUser.id,  // snake_case field names (like Django)
  status: 'pending'
}));

const createOrder = (productName, quantity) => {
  const order = Order.objects.create({
    product_name: productName,     // snake_case fields, camelCase methods
    quantity: quantity,
    created_by: currentUser.id
  });
  // Django validation runs automatically
  // Permission classes control access (field-level + object-level)
  // Other users see the change instantly
  // Queries are automatically optimized
};

// Your sophisticated permission system just works

// You write this simple code
const orders = useQueryset(() => Order.objects
  .filter({ status: 'pending' }).fetch({fields: ['customer', 'customer__profile']})
);

// StateZero automatically optimizes it to:
// Order.objects.filter(status='pending')
//   .select_related('customer', 'customer__profile')
//   .prefetch_related('items')
//   .only('id', 'status', 'customer__name', 'customer__profile__email')
// Zero manual optimization needed!

// Permissions automatically apply to all frontend queries
const tasks = useQueryset(() => Task.objects.all()); 
// ✅ Automatically filtered to user's tasks
// ✅ Only visible fields included
// ✅ Actions validated before execution

// Auto-generated type-safe JavaScript function
import { sendNotification } from './actions/general/send-notification';

// Call your backend function directly from the SPA
const handleNotify = async () => {
  const result = await sendNotification({
    user_id: selectedUser.id,
    message: "Your order is ready!"
  });
  
  if (result.success) {
    console.log(`Notification sent: ${result.notification_id}`);
  }
};

// ✅ Full type safety with auto-generated TypeScript types
// ✅ Input validation with Zod schemas
// ✅ Permission checking before execution
// ✅ Error handling with StateZero exceptions

// Complete Django ORM API faithfully ported to JavaScript
const users = useQueryset(() => User.objects
  .filter({ is_active: true })         // snake_case field names
  .exclude({ role: 'guest' })
  .orderBy('-date_joined')             // camelCase method names
);

// All Django field lookups work
const recentOrders = useQueryset(() => Order.objects.filter({
  created_at__gte: lastWeek,           // Django-style field lookups
  total__gt: 100,
  customer__region: 'US'
}));

// Q objects for complex queries (just like Django!)
import { Q } from '@statezero/core';

const complexQuery = useQueryset(() => User.objects.filter({
  Q: [
    Q.AND([
      { is_active: true },
      Q.OR([
        { role: 'admin' },
        { role: 'staff' }
      ])
    ])
  ]
}));

// Aggregations, counts, exists(), first(), last()
const totalRevenue = useQueryset(() => Order.objects
  .filter({ status: 'completed' })
  .aggregate('total__sum')
);

// Get single instances with full error handling
const user = await User.objects.get({ username: 'john' });
// Throws DoesNotExist or MultipleObjectsReturned just like Django

// getOrCreate, updateOrCreate - the full Django ORM
const [order, created] = await Order.objects.getOrCreate(
  { customer: customerId, product: productId },
  { quantity: 1, status: 'pending' }
);