How To Build a Simple To-Do List Application

Building a simple To-Do list application is a classic project for anyone learning software development. It covers fundamental concepts such as user input handling, data storage, dynamic UI updates, and basic CRUD (Create, Read, Update, Delete) operations. While it may appear straightforward, creating a robust, clean, and maintainable To-Do app involves understanding best practices in software architecture, user experience, and state management.

This article will guide you through the process of building a simple To-Do list application from scratch. We'll cover core principles, break down the components of the application, and provide sample code snippets. By the end, you'll not only understand how to create the app but also appreciate the design decisions that go into building scalable, maintainable applications.

Why Build a To-Do List Application?

Before diving into the technical details, it's important to understand why this project is so valuable:

• Fundamental Concepts: It teaches CRUD operations, which are the backbone of almost every application.
• UI & UX: It offers a practical introduction to user interface design and user experience considerations.
• Data Management: Introduces the handling of state and data persistence.
• Modularity & Architecture: Encourages structuring your codebase for scalability and maintainability.
• Cross-Platform Potential: Can be implemented in web, mobile, or desktop environments, showing the adaptability of basic concepts.

Key Features of a Simple To-Do List App

Before building, we should define what features our app will support:

• Add tasks: Users can enter a task and add it to the list.
• View tasks: Display all current tasks.
• Mark tasks as complete or incomplete: Toggle task status.
• Delete tasks: Remove unwanted tasks.
• Persist tasks: Save tasks so they remain after page reload or app restart.

These features represent the minimal viable product (MVP) for a To-Do app.

Step 1: Choose Your Technology Stack

You can build a To-Do list app in many environments. Here are some common choices:

• Web: HTML/CSS/JavaScript with frameworks like React, Vue, or Angular.
• Mobile: Native Android/iOS or cross-platform with React Native, Flutter.
• Desktop: Electron, Tauri, or native languages like C# or Swift.

For simplicity and broad accessibility, this article focuses on building a web-based To-Do app using React, a popular JavaScript library for building user interfaces. React's component-based architecture and powerful state management capabilities make it ideal for this project.

Step 2: Setting Up the Project

Initialize the Project

Use the official React toolchain create-react-app to scaffold your app quickly.

cd todo-app
npm start

This will launch a development server and open the React starter page in your browser.

Folder Structure Overview

The default structure is:

  ├── public/
  ├── src/
      ├── App.js
      ├── index.js
      └── ...

You'll mainly work in the src folder. Let's clean App.js by removing the boilerplate content.

Step 3: Designing the Components

Good UI design requires breaking your app into reusable components. For a To-Do list, the main components are:

• App: The root component managing global state.
• TodoInput: Handles user input for new tasks.
• TodoList: Displays the list of tasks.
• TodoItem: Represents a single task with controls to mark complete or delete.

Component Hierarchy

 ├── TodoInput
 └── TodoList
       └── TodoItem (for each task)

Step 4: Implementing the Components

4.1 The App Component

App maintains the list of tasks in its state and provides handler functions to add, toggle, and delete tasks.

import TodoInput from './TodoInput';
import TodoList from './TodoList';

const LOCAL_STORAGE_KEY = 'todoApp.tasks';

function App() {
  const [tasks, setTasks] = useState([]);

  // Load tasks from localStorage on mount
  useEffect(() => {
    const storedTasks = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
    if (storedTasks) setTasks(storedTasks);
  }, []);

  // Save tasks to localStorage on tasks change
  useEffect(() => {
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(tasks));
  }, [tasks]);

  // Add a new task
  const addTask = (taskText) => {
    if (!taskText.trim()) return;
    const newTask = {
      id: Date.now(),
      text: taskText,
      completed: false,
    };
    setTasks(prevTasks => [newTask, ...prevTasks]);
  };

  // Toggle completion status
  const toggleTask = (taskId) => {
    setTasks(prevTasks =>
      prevTasks.map(task =>
        task.id === taskId ? { ...task, completed: !task.completed } : task
      )
    );
  };

  // Delete a task
  const deleteTask = (taskId) => {
    setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId));
  };

  return (
    <div className="app-container">
      <h1>Simple To-Do List</h1>
      <TodoInput addTask={addTask} />
      <TodoList tasks={tasks} toggleTask={toggleTask} deleteTask={deleteTask} />
    </div>
  );
}

export default App;

Explanation:

• tasks is an array of task objects with id, text, and completed properties.
• useEffect hooks load and save tasks in browser's localStorage to persist data.
• Handlers addTask, toggleTask, and deleteTask update the task list appropriately.

4.2 TodoInput Component

This component handles user input and submits new tasks.

function TodoInput({ addTask }) {
  const [input, setInput] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    addTask(input);
    setInput('');
  };

  return (
    <form onSubmit={handleSubmit} className="todo-input-form">
      <input
        type="text"
        placeholder="Enter a new task"
        value={input}
        onChange={e => setInput(e.target.value)}
        className="todo-input"
      />
      <button type="submit" className="add-btn">Add</button>
    </form>
  );
}

export default TodoInput;

Explanation:

• Uses controlled input via React state.
• On form submission, calls addTask passed from App.
• Clears input after adding a task.

4.3 TodoList Component

Displays the list of tasks using the TodoItem component.

import TodoItem from './TodoItem';

function TodoList({ tasks, toggleTask, deleteTask }) {
  if (tasks.length === 0) return <p>No tasks yet!</p>;

  return (
    <ul className="todo-list">
      {tasks.map(task => (
        <TodoItem
          key={task.id}
          task={task}
          toggleTask={toggleTask}
          deleteTask={deleteTask}
        />
      ))}
    </ul>
  );
}

export default TodoList;

4.4 TodoItem Component

Represents a single task, allowing toggling and deletion.

function TodoItem({ task, toggleTask, deleteTask }) {
  return (
    <li className={`todo-item ${task.completed ? 'completed' : ''}`}>
      <label>
        <input
          type="checkbox"
          checked={task.completed}
          onChange={() => toggleTask(task.id)}
        />
        <span>{task.text}</span>
      </label>
      <button onClick={() => deleteTask(task.id)} className="delete-btn">
        Delete
      </button>
    </li>
  );
}

export default TodoItem;

Step 5: Styling the Application

Good styling improves usability and aesthetics. Here's a simple CSS you can add to src/App.css or a dedicated stylesheet:

  max-width: 400px;
  margin: 40px auto;
  font-family: Arial, sans-serif;
  text-align: center;
}

.todo-input-form {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.todo-input {
  width: 70%;
  padding: 10px;
  font-size: 16px;
}

.add-btn {
  padding: 10px 15px;
  font-size: 16px;
  margin-left: 10px;
  cursor: pointer;
}

.todo-list {
  list-style: none;
  padding: 0;
}

.todo-item {
  background: #f4f4f4;
  margin: 5px 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.todo-item.completed span {
  text-decoration: line-through;
  color: #888;
}

.delete-btn {
  background: #ff4d4d;
  border: none;
  color: white;
  padding: 5px 10px;
  cursor: pointer;
}

.delete-btn:hover {
  background: #e60000;
}

Step 6: Testing Your Application

Once implemented, test the app thoroughly:

• Add new tasks with different text inputs.
• Toggle task completion.
• Delete tasks.
• Reload the page to ensure tasks persist.
• Test edge cases like empty inputs or duplicate tasks.

Step 7: Enhancements and Next Steps

While this simple To-Do app works well, here are ways to extend it:

• Edit tasks: Allow modifying the task text.
• Task priority or deadlines: Add metadata to tasks.
• Filter tasks: Show all, active, or completed tasks.
• Animations: Smooth UI transitions for adding or deleting tasks.
• Backend Integration: Store tasks in a database and sync across devices.
• Authentication: User accounts to manage personal lists.
• Mobile optimization: Responsive design or mobile app versions.

Conclusion

Building a simple To-Do list application is a perfect way to learn core programming concepts and UI design. By structuring the app into components, managing state cleanly, and implementing persistence, you lay a strong foundation for building more complex applications.

You now have a functional React-based To-Do list that supports adding, completing, deleting, and saving tasks. This project can be a springboard into advanced topics like state management libraries (Redux, MobX), backend APIs, and full-stack development.

Happy coding!

View Product