Todo App with Alpine.js, TailwindCSS & LocalStorage

Introduction

In the world of web development, creating interactive applications doesn’t always require heavy frameworks like React or Vue. For smaller projects, a lightweight solution can be more efficient and easier to implement. Alpine.js emerges as a perfect tool in such scenarios—a minimal JavaScript framework that adds interactivity to your HTML with minimal effort. When combined with Tailwind CSS, a utility-first CSS framework, you can quickly build stylish and functional user interfaces.

In this tutorial, we’ll create a TODO app that allows users to add, remove, and mark tasks as completed. Additionally, we’ll use LocalStorage to persist the tasks locally, ensuring that your todos remain available even after refreshing the page. This project is ideal for those looking to enhance their frontend skills with modern, lightweight tools.

What is Alpine.js?

Alpine.js is a rugged, minimal tool for composing behavior directly in your markup. It’s designed to fill the gap between vanilla JavaScript/jQuery and larger frameworks like Vue or React. With Alpine.js, you can add dynamic behavior to your web pages without the overhead of a complex framework.

Key Features of Alpine.js:

Lightweight: Alpine.js is incredibly small, making it fast to load and execute.
Declarative Syntax: It uses attributes like x-data, x-bind, and x-on to define behavior directly in HTML.
Reactive: It automatically reacts to changes in data and updates the DOM accordingly.

When to Use Alpine.js:

Small to medium-sized projects where a full-fledged framework might be overkill.
Rapid prototyping.
Enhancing static websites with dynamic elements.
Server-rendered applications that need client-side interactivity.

When Not to Use Alpine.js:

Large and complex applications requiring advanced state management.
Projects needing server-side rendering (SSR) solutions.

Why Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to build custom designs without writing custom CSS. Instead, you apply pre-defined classes directly in your HTML. This approach accelerates development and ensures consistency across your project.

Benefits of Tailwind CSS:

Utility-First: Provides low-level utility classes to build designs without writing CSS.
Responsive: Includes responsive variants for all utilities.
Customizable: Easily extendable to match your design system.

Project Overview

We’ll build a TODO app with the following features:

Add Tasks: Users can input new tasks and add them to the list.
Mark Tasks as Completed: Checkboxes to toggle the completion status of tasks.
Remove Tasks: Buttons to delete tasks from the list.
Persistent Storage: Tasks are saved to LocalStorage and persist across page reloads.

Step 1: Setting Up the Project

Start by creating a new HTML file and including the necessary CDN links for Tailwind CSS and Alpine.js. This approach allows us to get started quickly without any build process.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alpine.js TODO App</title>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-linear-to-tl from-purple-500 to-pink-500 min-h-screen flex items-center justify-center">
    <!-- TODO App will go here -->
</body>
</html>

Step 2: Structuring the TODO App

We’ll use Alpine.js to manage the state and behavior of our app. The core functionality includes:

An array to store tasks.
A function to add new tasks.
A function to remove tasks.
A function to initialize tasks from LocalStorage.

HTML Structure

<div class="bg-white p-6 rounded-lg shadow-lg w-96" 
     x-data="{
         todos: [],
         newTodo: '',
         addTodo() {
             if (this.newTodo.trim() !== '') {
                 this.todos.push({ text: this.newTodo, completed: false });
                 this.newTodo = '';
                 localStorage.setItem('todos', JSON.stringify(this.todos));
             }
         },
         removeTodo(index) {
             this.todos.splice(index, 1);
             localStorage.setItem('todos', JSON.stringify(this.todos));
         },
         initializeTodos() {
             const storedTodos = localStorage.getItem('todos');
             if (storedTodos) {
                 this.todos = JSON.parse(storedTodos);
             }
         },
         update() {
            localStorage.setItem('todos', JSON.stringify(this.todos));
         }
     }" 
     x-init="initializeTodos">
    
    <h1 class="text-2xl font-semibold mb-4">Todo List</h1>
    
    <!-- Input Section -->
    <div class="flex space-x-2">
        <input 
            type="text" 
            x-model="newTodo" 
            @keydown.enter="addTodo" 
            placeholder="Add a new task" 
            class="flex-1 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
        <button 
            @click="addTodo" 
            class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
        >
            Add
        </button>
    </div>
    
    <!-- Todo List -->
    <ul class="mt-4 space-y-2">
        <template x-for="(todo, index) in todos" :key="index">
            <li class="flex items-center justify-between bg-gray-50 p-2 rounded-md">
                <div class="flex items-center space-x-2">
                    <input 
                        :id="'input'+index"
                        type="checkbox" 
                        x-model="todo.completed" 
                        class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
                        @change="update()"
                    >
                    <label
                        :for="'input'+index" 
                        x-text="todo.text" 
                        :class="{ 'line-through text-gray-500': todo.completed }" 
                        class="text-lg cursor-pointer"
                    ></label>
                </div>
                <button 
                    @click="removeTodo(index)" 
                    class="text-red-500 hover:text-red-700 focus:outline-none cursor-pointer"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                    </svg>
                </button>
            </li>
        </template>
    </ul>
</div>

Explanation of the Code:

x-data: This directive declares the reactive data for the component. We define todos (an array of tasks), newTodo (the current input value), and methods for adding, removing, and initializing tasks.
x-init: This runs the initializeTodos method when the component is initialized, loading saved tasks from LocalStorage.
x-model: This binds the input field to the newTodo variable.
@keydown.enter and @click: These event listeners trigger the addTodo method when the Enter key is pressed or the “Add” button is clicked.
x-for: This directive loops over the todos array to render each task.
:class: This dynamically applies the line-through class if a task is completed.

Step 3: Persisting Data with LocalStorage

To ensure tasks persist across page reloads, we use the LocalStorage API. Every time a task is added or removed, we update LocalStorage with the current state of the todos array.

How It Works:

Saving Data: localStorage.setItem('todos', JSON.stringify(this.todos)) converts the array to a JSON string and stores it.
Loading Data: JSON.parse(localStorage.getItem('todos')) retrieves and parses the stored data.

This approach ensures that the user’s tasks are always saved and available.

Step 4: Enhancing the User Experience

To make the app more user-friendly, we can add the following improvements:

1. Empty State Message

Display a message when there are no tasks:

<ul class="mt-4 space-y-2">
    <template x-if="todos.length === 0">
        <li class="text-gray-500 text-center">No tasks yet. Add one above!</li>
    </template>
    <template x-for="(todo, index) in todos" :key="index">
        <!-- Todo items here -->
    </template>
</ul>

2. Task Counter

Show the number of incomplete tasks:

<div class="flex justify-between items-center mb-4">
    <h1 class="text-2xl font-semibold">Todo List</h1>
    <span x-text="`${todos.filter(todo => !todo.completed).length} tasks left`" class="text-gray-500"></span>
</div>

3. Improved Styling with Tailwind CSS

Tailwind’s utility classes make it easy to style the app. We’ve already added classes for padding, margins, colors, and responsiveness. Feel free to customize further to match your preferences.

Step 5: Advanced State Management (Optional)

For larger applications, you might need more advanced state management. While our current approach works well for a simple TODO app, you could explore libraries like Spruce for more complex state management needs. Spruce provides a centralized store and supports features like watchers and persistence.

Example of Using Spruce:

/ Initialize a Spruce store
Spruce.store('todoStore', {
    todos: [],
    addTodo(text) {
        this.todos.push({ text, completed: false });
        localStorage.setItem('todos', JSON.stringify(this.todos));
    },
    removeTodo(index) {
        this.todos.splice(index, 1);
        localStorage.setItem('todos', JSON.stringify(this.todos));
    }
}, true); // The true flag enables persistence

// In your HTML, you can access the store with $store.todoStore

However, for our simple app, the built-in Alpine.js state management is sufficient.

Conclusion

In this tutorial, we built a fully functional TODO app using Alpine.js, Tailwind CSS, and LocalStorage. This combination of tools allows us to create interactive and stylish web applications with minimal effort and without the need for heavy frameworks.

Key Takeaways:

Alpine.js is perfect for adding interactivity to HTML with minimal JavaScript.
Tailwind CSS accelerates styling with its utility-first approach.
LocalStorage provides a simple way to persist data locally.

Further Enhancements:

Add edit functionality to tasks.
Implement categories or tags for tasks.
Use Alpine.js plugins for additional features.
Add animations for a smoother user experience.

By mastering these tools, you can quickly prototype and build modern web applications that are both functional and beautiful. Happy coding!

Build a TODO App with Alpine.js, Tailwind CSS, and LocalStorage