Building a Kanban Task Management App with Flask and CouchDB Capella

Introduction

In this guide, We’ll show you how we built a Kanban-style task management app using Flask and CouchDB. This simple app allows users to add, edit, move, and delete tasks across different columns: Tasks-To Do, In Progress, and Done. Using Flask as the backend and CouchDB as a cloud-hosted NoSQL database makes it easy to create a flexible and scalable application for task management.

Overview

The project includes a frontend interface for managing tasks and a backend to store and retrieve data from CouchDB. The app structure allows us to move tasks between columns, with each column representing a stage in the task’s lifecycle.

Getting Started

Step 1: Set Up the Project Structure
To begin, We created a folder for the project with the following structure:

app.py: The main Flask application file.
templates/: Contains HTML files, including index.html for the Kanban board.
static/: Stores CSS and JavaScript files for styling and functionality.

Step 2: Installing Dependencies
After setting up a virtual environment, We installed Flask and CouchDB SDK using pip:

pip install flask couchbase

This provides the necessary tools for handling routes in Flask and connecting to CouchDB as our NoSQL database.

Configuring CouchDB in the Cloud

We used CouchDB’s cloud service (Capella) to host the database and set up a cluster. CouchDB stores each task as a JSON document, allowing for flexible data storage.

Here’s the code to connect Flask to CouchDB using the Couchbase SDK:

from couchbase.cluster import Cluster, ClusterOptions
from couchbase.auth import PasswordAuthenticator
from datetime import timedelta

endpoint = "your_couchdb_endpoint"
username = "your_username"
password = "your_password"

auth = PasswordAuthenticator(username, password)
cluster = Cluster(endpoint, ClusterOptions(auth))
bucket = cluster.bucket("tasks")
collection = bucket.default_collection()

Backend with Flask

We created several endpoints in Flask for handling task management:

GET /tasks - Retrieves all tasks.
POST /tasks - Adds a new task.
PUT /tasks/ - Updates a task’s title or status.
DELETE /tasks/ - Deletes a task.
Here’s the Flask code to handle these routes:

@app.route('/tasks', methods=['GET'])
def get_tasks():
    tasks = collection.get_all()
    return jsonify(tasks)

@app.route('/tasks', methods=['POST'])
def add_task():
    data = request.json
    # Add task to CouchDB and return the new task ID

@app.route('/tasks/<task_id>', methods=['PUT'])
def update_task(task_id):
    data = request.json
    # Update task in CouchDB

@app.route('/tasks/<task_id>', methods=['DELETE'])
def delete_task(task_id):
    # Delete task from CouchDB

Building the Kanban Board Frontend

The front end of the application is a simple HTML and JavaScript interface. It features three columns representing the stages of a task’s lifecycle. Tasks can be moved between columns by clicking directional buttons.

Color Coding
Tasks are color-coded based on their status:

Tasks-To Do: White
Done: Orange These colors visually indicate the task’s stage, enhancing usability. To run the project we need this command:

async function loadTasks() {
  const response = await fetch('/tasks');
  const tasks = await response.json();
  tasks.forEach(task => addTaskToColumn(task));
}

async function moveTask(id, direction) {
  const currentStatus = document.getElementById(id).parentNode.id;
  let newStatus = currentStatus;

  if (direction === 'right') {
    newStatus = currentStatus === 'tasksTodo' ? 'inProgress' : 'done';
  } else if (direction === 'left') {
    newStatus = currentStatus === 'done' ? 'inProgress' : 'tasksTodo';
  }

  await fetch(`/tasks/${id}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ status: newStatus })
  });

  document.getElementById(id).classList = `kanban-item ${newStatus}`;
}

Running the Flask App

To start the Flask app, We ran the following command in the terminal:

flask run

Final Thoughts

Using Flask and CouchDB allowed me to create a flexible and scalable task management application with minimal setup. Flask handles routing and server logic, while CouchDB provides a simple way to persist JSON-based task data in the cloud. This combination of tools is ideal for rapidly building and deploying lightweight web applications.

Next Steps: This project could be expanded with user authentication, real-time updates, and deployment to a cloud hosting platform.

Reference link to code in a github repository:

Codigo-Repositorio-Github