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!

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

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

Okay