Build a Todo App with Real APIs (No Backend Setup Required)

Tired of fake data and mock servers? Want to build real projects with real APIs?In this post, I'll show you how to build a simple yet powerful Todo App using Crudify.dev — a platform that provides real-world REST APIs without the backend hassle.

---

✅ What We're Building

A clean, responsive Todo List App powered by Crudify.dev's Todo API. It supports:

• ✅ Creating tasks
• 📝 Editing tasks
• ✅ Marking tasks complete/incomplete
• ❌ Deleting tasks

And best of all — no backend code needed.

---

🛠 Tech Stack

• HTML + CSS: For structure and style
• JavaScript (Vanilla): For interacting with the API
• *Crudify.dev:** For real, production-style REST APIs

---

🚀 Step-by-Step Breakdown

1. 🎨 UI Layout (HTML & CSS)

We started with a simple HTML structure:

<div class="container">
  <h1>Todo App</h1>
  <form id="todo-form">
    <input type="text" id="todo-input" placeholder="Enter a new task" required>
    <button type="submit">Add Task</button>
  </form>
  <ul id="todo-list"></ul>
</div>

And styled it with responsive CSS that feels modern but minimal:

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    max-width: 500px;
    margin: 30px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
}

#todo-form {
    display: flex;
    margin-bottom: 20px;
}

#todo-input {
    flex-grow: 1;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
}

button {
    padding: 10px 15px;
    background-color: #4caf50;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
    border-radius: 0 4px 4px 0;
}

button:hover {
    background-color: #45a049;
}

#todo-list {
    list-style-type: none;
    padding: 0;
}

#todo-list li {
    background-color: #f9f9f9;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.todo-actions button {
    margin-left: 5px;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 4px;
}

.todo-actions .edit {
    background-color: #2196f3;
}

.todo-actions .delete {
    background-color: #f44336;
}

.todo-actions .complete {
    background-color: #ff9800;
}

.completed {
    text-decoration: line-through;
    opacity: 0.6;
}

---

2. 🧠 Using the Crudify.dev Todo API

Crudify gives you a real REST API — no backend required. Once logged in with GitHub, you get your API token, which you'll use like this:

const API_BASE_URL = "https://www.crudify.dev/api/v1/todo-lists";
const ACCESS_TOKEN = "your-api-token-here";

Then use standard fetch calls to interact with your data.

---

3. 🔄 Fetching Todos

async function fetchTodos() {
  const response = await fetch(API_BASE_URL, {
    headers: { Authorization: `Bearer ${ACCESS_TOKEN}` }
  });
  const todos = await response.json();
  renderTodos(todos);
}

This gives us a list of real tasks — just like a production app.

---

4. ➕ Adding a Todo

todoForm.addEventListener("submit", async (e) => {
  e.preventDefault();
  const task = todoInput.value.trim();

  await fetch(API_BASE_URL, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${ACCESS_TOKEN}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ task }),
  });

  todoInput.value = "";
  fetchTodos();
});

---

5. 📝 Edit, ✅ Complete, ❌ Delete

The app also supports editing, toggling completion, and deleting with just a few lines:

// Toggle completion
await fetch(`${API_BASE_URL}/${id}`, {
  method: "PATCH",
  headers: {
    Authorization: `Bearer ${ACCESS_TOKEN}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ isDone: !isDone }),
});

// Delete a todo
await fetch(`${API_BASE_URL}/${id}`, {
  method: "DELETE",
  headers: { Authorization: `Bearer ${ACCESS_TOKEN}` },
});

All actions automatically refresh the list, keeping your UI up to date.

---

🎁 Final Result

You get a fully working Todo App that:

• Connects to a real API (with auth, status codes, errors)
• Mimics real-world production apps
• Requires zero backend setup
• Works great with Crudify's design kits for Figma-to-code practice

---

📦 Complete Code

Here's the full JavaScript that powers our app:

const API_BASE_URL = "https://www.crudify.dev/api/v1/todo-lists"
const ACCESS_TOKEN = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."; // Your token will be different

const todoForm = document.getElementById("todo-form");
const todoInput = document.getElementById("todo-input");
const todoList = document.getElementById("todo-list");

// Fetch all todos
async function fetchTodos() {
    try {
        const response = await fetch(API_BASE_URL, {
            headers: {
                Authorization: `Bearer ${ACCESS_TOKEN}`,
            },
        });
        const todos = await response.json();
        renderTodos(todos);
    } catch (error) {
        console.error("Error fetching todos:", error);
        todoList.innerHTML = "<p>Failed to load todos.</p>";
    }
}

// Render todos
function renderTodos(todos) {
    todoList.innerHTML = "";
    todos.forEach((todo) => {
        const li = document.createElement("li");
        li.innerHTML = `
            <span class="${todo.isDone ? "completed" : ""}">${todo.task}</span>
            <div class="todo-actions">
                <button class="edit" data-id="${todo.id}">Edit</button>
                <button class="delete" data-id="${todo.id}">Delete</button>
                <button class="complete" data-id="${todo.id}" data-done="${todo.isDone}">
                    ${todo.isDone ? "Undo" : "Complete"}
                </button>
            </div>
        `;
        todoList.appendChild(li);
    });
}

// Add new todo
todoForm.addEventListener("submit", async (e) => {
    e.preventDefault();
    const task = todoInput.value.trim();
    if (!task) return;

    const submitButton = todoForm.querySelector("button");
    submitButton.textContent = "Adding...";
    submitButton.disabled = true;

    try {
        await fetch(API_BASE_URL, {
            method: "POST",
            headers: {
                Authorization: `Bearer ${ACCESS_TOKEN}`,
                "Content-Type": "application/json",
            },
            body: JSON.stringify({ task }),
        });
        todoInput.value = "";
        fetchTodos();
    } catch (error) {
        console.error("Error adding todo:", error);
    } finally {
        submitButton.textContent = "Add Task";
        submitButton.disabled = false;
    }
});

// Event delegation for edit, delete, and complete actions
todoList.addEventListener("click", async (e) => {
    const button = e.target;
    if (button.classList.contains("edit")) {
        const id = button.getAttribute("data-id");
        const newTask = prompt("Enter new task:");
        if (newTask) {
            await editTodo(id, newTask, button);
        }
    } else if (button.classList.contains("delete")) {
        const id = button.getAttribute("data-id");
        if (confirm("Are you sure you want to delete this task?")) {
            await deleteTodo(id, button);
        }
    } else if (button.classList.contains("complete")) {
        const id = button.getAttribute("data-id");
        const isDone = button.getAttribute("data-done") === "true";
        await toggleTodoCompletion(id, isDone, button);
    }
});

// Initial fetch of todos
fetchTodos();

---

📦 Code on GitHub

Want the full code?

👉 View Source on GitHub

---

💬 Why Use Crudify.dev?

Most mock APIs don't let you:

• Create/update/delete data
• Practice auth headers
• Handle 401/403/404 responses

Crudify.dev does all of that — and gives you real, job-ready experience.

---

🔗 Try It Yourself

1. Visit Crudify.dev
2. Log in with GitHub
3. Grab your API token
4. Clone the app or build your own

---

🧠 Final Thoughts

This tiny app demonstrates how easy it is to work with real APIs using Crudify.dev. Whether you're:

• Practicing frontend dev
• Building a portfolio
• Preparing for interviews

— this tool is a game-changer.

---

🎉 Big shoutout to Crudify.dev for making real-world development accessible for all frontend devs.

---