Building a Real-time Todo App: Django + AJAX + Bootstrap Magic

Building a Todo App with Django and AJAX: A Step-by-Step Guide

Hey devs! Today, I'm excited to share a fun project I built - a dynamic Todo application using Django and AJAX. Let's dive into how it works and how you can build one too!

What We're Building

A sleek Todo app with:

• Real-time task addition
• Toggle task completion
• Instant task deletion
• Smooth animations
• Beautiful Bootstrap styling

Project Structure

DjangoTodos/
├── demo/ # Django project root
│ ├── demo/ # Project configuration
│ │ ├── init.py
│ │ ├── asgi.py
│ │ ├── settings.py # Project settings
│ │ ├── urls.py # Main URL configuration
│ │ └── wsgi.py
│ ├── myapp/ # Main application
│ │ ├── migrations/ # Database migrations
│ │ │ └── init.py
│ │ ├── static/ # Static files
│ │ │ └── css/
│ │ │ └── style.css │
│ ├── templates/ # HTML templates
│ │ │ ├── base.html # Base template
│ │ │ ├── home.html # Home page
│ │ │ └── todos.html # Todo list page
│ │ ├── init.py
│ │ ├── admin.py # Admin configuration
│ │ ├── apps.py # App configuration
│ │ ├── models.py # Database models
│ │ ├── tests.py # Unit tests
│ │ ├── urls.py # App URL configuration
│ │ └── views.py # View functions
│ ├── manage.py # Django management script
│ └── requirements.txt # Project dependencies
├── .gitignore # Git ignore file
├── LICENSE # License file
└── README.md # Project documentation

1. The Model

# Key Components

python
# models.py
class TodoItem(models.Model):
    title = models.CharField(max_length=100)
    completed = models.BooleanField(default=False) 

2. The Views

# views.py
@csrf_exempt
def add_task(request):
    if request.method == 'POST':
        data = json.loads(request.body)
        todo = TodoItem.objects.create(title=data['title'])
        return JsonResponse({'success': True, 'id': todo.id})

3. AJAX Magic

// todos.html
function toggleComplete(id) {
    fetch(`/toggle-complete/${id}/`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrfToken
        }
    })
    .then(response => response.json())
    .then(data => {
        // Update UI dynamically
    });
}

Getting Started

Clone the repo:

git clone https://github.com/idev-design/DjangoTodos.git
cd DjangoTodos

Set up virtual environment:

python -m venv venv
.\venv\Scripts\Activate.ps1  # On Windows

Install dependencies:

pip install -r requirements.txt

Run migrations:

python manage.py migrate

Start the server:

python manage.py runserver

How It Works

Adding Tasks:

• User enters task text
• AJAX sends POST request
• Django creates new TodoItem
• UI updates instantly

Toggling Completion:

• Click checkbox
• AJAX updates server
• Task style changes dynamically

Deleting Tasks:

• Click delete button
• AJAX removes from database
• Task fades out smoothly

Cool Features

• Real-time updates without page refresh
• Smooth animations
• Responsive design
• Clean, intuitive UI

Suggested Improvements

Authentication:

• User accounts
• Personal to-do lists

Categories:

• Group tasks
• Colour coding

Due Dates:

• Task deadlines
• Calendar integration

Priority Levels:

• Task importance
• Sorting options

Debugging Tips

• Check browser console for AJAX errors
• Django debug toolbar for backend issues
• print() statements in views for tracking

Contributing

Feel free to:

• Fork the repo
• Create feature branches
• Submit pull requests
• Report issues

Wrap Up

Building this Todo app was a fun way to learn Django and AJAX integration. The real-time updates make it feel smooth and modern. Give it a try and let me know what you think!

django #javascript #webdev #tutorial

Happy coding!