Django React TaskSpark project

 That's the logical next step! TaskSpark is a fantastic choice, as it's the classic To-Do/Task Manager project, demonstrating a complete mastery of CRUD (Create, Read, Update, Delete) operations, which is essential for any full-stack developer.

Here is a breakdown of the requirements for your TaskSpark project using React and Django, following the same successful structure:

📝 TaskSpark Project Breakdown

Goal:

To build a functional task manager where users can create, view, mark as complete, and delete tasks. This requires four distinct API operations.

1. ⚙️ Backend Setup (Django & DRF)

Model (tasks/models.py)

You will need a model to represent a single task.

# Pseudo-code for models.py

class Task(models.Model):

    title = models.CharField(max_length=255)

    description = models.TextField(blank=True, null=True)

    completed = models.BooleanField(default=False)

    created_at = models.DateTimeField(auto_now_add=True)

    # Optional: user = models.ForeignKey(User, on_delete=models.CASCADE)

Serializer (tasks/serializers.py)

This converts the Task Python object into JSON.

# Pseudo-code for serializers.py

class TaskSerializer(serializers.ModelSerializer):

    class Meta:

        model = Task

        fields = ('id', 'title', 'description', 'completed', 'created_at')

Views (tasks/views.py)

Again, a generic viewset simplifies the process for full CRUD functionality.

# Pseudo-code for views.py

class TaskViewSet(viewsets.ModelViewSet):

    queryset = Task.objects.all().order_by('-created_at')

    serializer_class = TaskSerializer

API Endpoints (CRUD)

 * GET to /api/tasks/: Read all tasks.

 * POST to /api/tasks/: Create a new task.

 * PUT/PATCH to /api/tasks/<id>/: Update a specific task (used to mark as completed).

 * DELETE to /api/tasks/<id>/: Delete a specific task.

2. ⚛️ Frontend Setup (React)

Component 1: TaskList

The main component for fetching, displaying, and managing the array of tasks.

 * State: Holds the array of tasks (tasks).

 * Action: Fetches the list of tasks from the API on component load.

 * Display: Maps over the tasks array, rendering a TaskItem for each one.

Component 2: TaskItem

A component representing a single task item.

 * Props: Receives the task data and functions for handling updates/deletes.

 * Action: Handles the PATCH request (to toggle completed status) and the DELETE request.

Component 3: TaskForm

A simple input form for adding new tasks.

 * State: Holds the new task title.

 * Action: Submits a POST request to the API.

3. Starter Code Snippets

Since your setup is already complete from the last project, you only need the application code.

A. Django Backend: The Task Model

File: tasks/models.py (Assuming you ran python manage.py startapp tasks)

from django.db import models

class Task(models.Model):

    title = models.CharField(max_length=255)

    description = models.TextField(blank=True, null=True)

    

    # This is the key field for a to-do list

    completed = models.BooleanField(default=False) 

    created_at = models.DateTimeField(auto_now_add=True)

    class Meta:

        ordering = ['-created_at']

    def __str__(self):

        return f"[{'✓' if self.completed else ' '}] {self.title}"

B. React Frontend: The TaskForm Component

This form will handle only the creation of new tasks.

File: taskspark_frontend/src/TaskForm.jsx (You will pass an addTask function down from the parent component)

import React, { useState } from 'react';

function TaskForm({ onTaskAdded }) {

  const [title, setTitle] = useState('');

  const handleSubmit = (e) => {

    e.preventDefault();

    if (!title.trim()) return; // Prevent empty submissions

    // Instead of doing the Axios call here, we often pass the data up 

    // to the parent component (TaskList) to manage the API call and state update.

    onTaskAdded(title); 

    

    setTitle(''); // Clear input field

  };

  return (

    <form onSubmit={handleSubmit} style={{ display: 'flex', marginBottom: '20px' }}>

      <input

        type="text"

        placeholder="Add a new task..."

        value={title}

        onChange={(e) => setTitle(e.target.value)}

        style={{ flexGrow: 1, padding: '10px', border: '1px solid #ddd', borderRadius: '4px 0 0 4px' }}

        required

      />

      <button 

        type="submit"

        style={{ padding: '10px 15px', background: '#28a745', color: 'white', border: 'none', borderRadius: '0 4px 4px 0', cursor: 'pointer' }}

      >

        Add Task

      </button>

    </form>

  );

}

export default TaskForm;

💡 Next Steps

 * Django: Create the tasks app (python manage.py startapp tasks).

 * Django: Add the Task model code above and run migrations.

 * Django: Create the Serializer and Views for the Task model.

 * React: Create the main TaskList component (the most complex piece) to handle state and API calls.