Forem: Crudify

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

Crudify — Tue, 20 May 2025 12:01:12 +0000

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

Visit Crudify.dev
Log in with GitHub
Grab your API token
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.

🎯 Build Real-World Projects with Real APIs — Meet Crudify.dev

Crudify — Fri, 02 May 2025 02:20:08 +0000

As a frontend or mobile developer, you know the struggle:

👉 Setting up your own backend is time-consuming.

👉 Mock APIs feel fake.

👉 Public APIs are limited and restrictive.

That’s exactly why Crudify.dev exists — real APIs, designed for developers who want to build real-world applications without backend headaches.

If you’re tired of "tutorial hell" and ready for hands-on API integration, you're going to love this. 🚀

🚀 What Is Crudify?

Crudify.dev is a developer-first platform offering production-quality, ready-to-use REST APIs — no server setup, no database maintenance, no authentication headaches.

In minutes, you can:

Log in with GitHub
Instantly get an API token
Start making real API calls to real projects

It’s perfect for portfolio projects, API practice, or interview prep.

🔥 Why You'll Love Crudify

✅ Real CRUD Operations: Perform create, read, update, and delete — just like you would in production.

✅ Production-Like Behavior: Work with authentication, error handling, and status codes — for real-world readiness.

✅ Ready-to-Use API Projects: Todo Lists, Blog CMS APIs, Quiz APIs, Bookmark Managers, and more.

✅ Matching Figma Designs: Every project comes with a UI kit to practice real design-to-code workflows.

✅ Simple GitHub Login: No forms, no passwords — just fast GitHub authentication.

✅ Unlimited GET Requests: Fetch all the data you want, plus 500 monthly write operations.

✅ Clear, Complete Docs: Every endpoint fully documented with examples and error handling.

🎯 Who Should Use Crudify?

Crudify is built for:

Frontend developers (React, Vue, Svelte, Angular)
Mobile developers (Flutter, React Native, native iOS/Android)
Students and bootcamp grads building real-world portfolio projects
Job seekers prepping for technical interviews
Instructors and mentors teaching API integration

If you’re building anything dynamic that connects to a server, Crudify is for you. 💬

✨ How Crudify Works (It’s Stupidly Simple)

Sign in with GitHub at Crudify.dev
Generate your API token from your profile
Pick a project (Todo List, Blog CMS, Quiz API, Bookmark Manager, etc.)
Start making API calls in your frontend app, Postman, or cURL

🔐 Quick Tip: Always include your token as a Bearer in the Authorization header:

Authorization: Bearer your-api-token-here

And you’re good to go!

📋 Your First API Call

Making a request is that easy:

curl -X GET "https://crudify.dev/api/todo" \
     -H "Authorization: Bearer your-api-token-here"

Or using JavaScript:

fetch("https://crudify.dev/api/todo", {
  method: "GET",
  headers: {
    "Authorization": "Bearer your-api-token-here",
    "Content-Type": "application/json"
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Boom! You're pulling real data into your app — no backend setup needed.

🛠️ What You Get (for Free!)

🌐 Unlimited GET requests — read freely
✍️ 500 monthly write calls — POST, PATCH, DELETE
🎨 Figma UI Kits — match your code to professional designs
📚 Full API documentation — clear, complete, and beginner-friendly
🚀 Coming soon: GraphQL, WebSocket APIs, and even more project templates!

🎉 Real APIs = Real Skills

By building with Crudify, you’ll level up critical, job-ready skills:

Working with real authenticated APIs
Handling real-world errors and HTTP codes
Managing full CRUD operations securely
Developing scalable frontend and mobile apps

These are the skills that hiring teams actually care about.

🧠 Here’s How Crudify Can Be Used

Portfolio Projects: Build real apps without backend headaches.
Interview Practice: Sharpen your API integration skills.
Learning New Frameworks: Focus fully on frontend or mobile frameworks like React, Vue, Flutter, and more.
Teaching and Mentoring: Demonstrate real-world API integration without needing to build a backend.

🚀 What's Coming Next?

The Crudify team is just getting started! Upcoming features:

GraphQL API support for modern frontend workflows
WebSocket APIs for building real-time apps
More project templates for even more creative ideas

Stay tuned — Crudify is evolving fast.

📣 Ready to Start Building?

If you’re ready to go beyond mock APIs and build with real-world tools, it’s time to dive in.

👉 Visit Crudify.dev, sign in with GitHub, grab your token, and start building real projects — today.

No fake data. No backend stress. Just real-world experience.

💬 Already using Crudify? Drop your feedback, suggestions, or bug reports — the team would love to hear from you!