DEV Community

Cover image for Building a Real-time Todo App: Django + AJAX + Bootstrap Magic
idev-design
idev-design

Posted on

1

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) 

Enter fullscreen mode Exit fullscreen mode

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})

Enter fullscreen mode Exit fullscreen mode

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
    });
}

Enter fullscreen mode Exit fullscreen mode

Getting Started

Clone the repo:

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

Enter fullscreen mode Exit fullscreen mode

Set up virtual environment:

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

Enter fullscreen mode Exit fullscreen mode

Install dependencies:

pip install -r requirements.txt

Enter fullscreen mode Exit fullscreen mode

Run migrations:

python manage.py migrate

Enter fullscreen mode Exit fullscreen mode

Start the server:

python manage.py runserver

Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay