diff --git a/src/App.tsx b/src/App.tsx
index 81e011f432..a968b1da07 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,26 +1,327 @@
 /* eslint-disable max-len */
 /* eslint-disable jsx-a11y/control-has-associated-label */
-import React from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
 import { UserWarning } from './UserWarning';
 
-const USER_ID = 0;
+import {
+  addTodo,
+  deleteTodo,
+  getTodos,
+  updateTodo,
+  USER_ID,
+} from './api/todos';
+
+import { Header } from './components/Header/Header';
+import { Footer } from './components/Footer/Footer';
+import { ErrorNotification } from './components/ErrorNotif/ErrorNotification';
+import { TodoList } from './components/TodoList/TodoList';
+
+import { ErrorMessage } from './enums/ErrorMessage';
+import { Filter } from './enums/Filter';
+
+import { Todo } from './types/Todo';
 
 export const App: React.FC = () => {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [tempTodo, setTempTodo] = useState<Todo | null>(null);
+  const [processingIds, setProcessingIds] = useState<number[]>([]);
+  const [error, setError] = useState('');
+  const [title, setTitle] = useState('');
+  const [filter, setFilter] = useState(Filter.All);
+  const [isAdding, setIsAdding] = useState(false);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const loadTodos = async () => {
+    try {
+      setError('');
+
+      const todosFromServer = await getTodos();
+
+      setTodos(todosFromServer);
+    } catch {
+      setError(ErrorMessage.Load);
+    }
+  };
+
+  useEffect(() => {
+    loadTodos();
+  }, []);
+
+  useEffect(() => {
+    if (!error) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setError('');
+    }, 3000);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [error]);
+
+  useEffect(() => {
+    if (!isAdding) {
+      inputRef.current?.focus();
+    }
+  }, [isAdding]);
+
+  const visibleTodos = useMemo(() => {
+    let filteredTodos = [...todos];
+
+    if (filter === Filter.Active) {
+      filteredTodos = filteredTodos.filter(todo => {
+        return !todo.completed;
+      });
+    }
+
+    if (filter === Filter.Completed) {
+      filteredTodos = filteredTodos.filter(todo => {
+        return todo.completed;
+      });
+    }
+
+    return filteredTodos;
+  }, [todos, filter]);
+
+  const activeCount = todos.filter(todo => {
+    return !todo.completed;
+  }).length;
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const trimmedTitle = title.trim();
+
+    if (!trimmedTitle) {
+      setError(ErrorMessage.EmptyTitle);
+
+      return;
+    }
+
+    const newTodo: Omit<Todo, 'id'> = {
+      title: trimmedTitle,
+      completed: false,
+      userId: USER_ID,
+    };
+
+    setError('');
+    setIsAdding(true);
+
+    setTempTodo({
+      ...newTodo,
+      id: 0,
+    });
+
+    try {
+      const createdTodo = await addTodo(newTodo);
+
+      setTodos(currentTodos => {
+        return [...currentTodos, createdTodo];
+      });
+
+      setTitle('');
+    } catch {
+      setError(ErrorMessage.Add);
+    } finally {
+      setTempTodo(null);
+      setIsAdding(false);
+    }
+  };
+
+  const handleDelete = async (id: number): Promise<boolean> => {
+    setProcessingIds(currentIds => [...currentIds, id]);
+
+    try {
+      await deleteTodo(id);
+
+      setTodos(currentTodos => {
+        return currentTodos.filter(todo => todo.id !== id);
+      });
+
+      inputRef.current?.focus();
+
+      return true;
+    } catch {
+      setError(ErrorMessage.Delete);
+
+      return false;
+    } finally {
+      setProcessingIds(currentIds => {
+        return currentIds.filter(currentId => currentId !== id);
+      });
+    }
+  };
+
+  const handleToggle = async (todo: Todo) => {
+    setProcessingIds(currentIds => [...currentIds, todo.id]);
+
+    try {
+      const updatedTodo = await updateTodo({
+        ...todo,
+        completed: !todo.completed,
+      });
+
+      setTodos(currentTodos =>
+        currentTodos.map(currentTodo => {
+          return currentTodo.id === todo.id ? updatedTodo : currentTodo;
+        }),
+      );
+    } catch {
+      setError(ErrorMessage.Update);
+    } finally {
+      setProcessingIds(currentIds => currentIds.filter(id => id !== todo.id));
+    }
+  };
+
+  const handleRename = async (
+    todo: Todo,
+    newTitle: string,
+  ): Promise<boolean> => {
+    const trimmedTitle = newTitle.trim();
+
+    if (trimmedTitle === todo.title) {
+      return true;
+    }
+
+    if (!trimmedTitle) {
+      return handleDelete(todo.id);
+    }
+
+    setProcessingIds(currentIds => [...currentIds, todo.id]);
+
+    try {
+      const updatedTodo = await updateTodo({
+        ...todo,
+        title: trimmedTitle,
+      });
+
+      setTodos(currentTodos =>
+        currentTodos.map(currentTodo => {
+          return currentTodo.id === todo.id ? updatedTodo : currentTodo;
+        }),
+      );
+
+      return true;
+    } catch {
+      setError(ErrorMessage.Update);
+
+      return false;
+    } finally {
+      setProcessingIds(currentIds => currentIds.filter(id => id !== todo.id));
+    }
+  };
+
+  const handleToggleAll = async () => {
+    const allCompleted = todos.every(todo => todo.completed);
+
+    const todosToUpdate = todos.filter(todo => {
+      return todo.completed === allCompleted;
+    });
+
+    await Promise.allSettled(
+      todosToUpdate.map(async todo => {
+        setProcessingIds(currentIds => [...currentIds, todo.id]);
+
+        try {
+          const updatedTodo = await updateTodo({
+            ...todo,
+            completed: !allCompleted,
+          });
+
+          setTodos(currentTodos =>
+            currentTodos.map(currentTodo => {
+              return currentTodo.id === todo.id ? updatedTodo : currentTodo;
+            }),
+          );
+        } catch {
+          setError(ErrorMessage.Update);
+        } finally {
+          setProcessingIds(currentIds =>
+            currentIds.filter(id => id !== todo.id),
+          );
+        }
+      }),
+    );
+  };
+
+  const handleClearCompleted = async () => {
+    const completedTodos = todos.filter(todo => {
+      return todo.completed;
+    });
+
+    await Promise.allSettled(
+      completedTodos.map(async todo => {
+        setProcessingIds(currentIds => {
+          return [...currentIds, todo.id];
+        });
+
+        try {
+          await deleteTodo(todo.id);
+
+          setTodos(currentTodos => {
+            return currentTodos.filter(currentTodo => {
+              return currentTodo.id !== todo.id;
+            });
+          });
+        } catch {
+          setError(ErrorMessage.Delete);
+        } finally {
+          setProcessingIds(currentIds => {
+            return currentIds.filter(id => {
+              return id !== todo.id;
+            });
+          });
+        }
+      }),
+    );
+
+    inputRef.current?.focus();
+  };
+
   if (!USER_ID) {
     return <UserWarning />;
   }
 
   return (
-    <section className="section container">
-      <p className="title is-4">
-        Copy all you need from the prev task:
-        <br />
-        <a href="https://github.com/mate-academy/react_todo-app-add-and-delete#react-todo-app-add-and-delete">
-          React Todo App - Add and Delete
-        </a>
-      </p>
-
-      <p className="subtitle">Styles are already copied</p>
-    </section>
+    <div className="todoapp">
+      <h1 className="todoapp__title">todos</h1>
+
+      <div className="todoapp__content">
+        <Header
+          title={title}
+          onChange={setTitle}
+          onSubmit={handleSubmit}
+          disabled={isAdding}
+          inputRef={inputRef}
+          todos={todos}
+          onToggleAll={handleToggleAll}
+        />
+
+        <TodoList
+          todos={visibleTodos}
+          tempTodo={tempTodo}
+          processingIds={processingIds}
+          onDelete={handleDelete}
+          onToggle={handleToggle}
+          onRename={handleRename}
+        />
+
+        {todos.length > 0 && (
+          <Footer
+            todos={todos}
+            activeCount={activeCount}
+            filter={filter}
+            setFilter={setFilter}
+            onClearCompleted={handleClearCompleted}
+          />
+        )}
+      </div>
+
+      <ErrorNotification error={error} onClose={() => setError('')} />
+    </div>
   );
 };
diff --git a/src/api/todos.ts b/src/api/todos.ts
new file mode 100644
index 0000000000..abaffc7762
--- /dev/null
+++ b/src/api/todos.ts
@@ -0,0 +1,14 @@
+import { Todo } from '../types/Todo';
+import { client } from '../utils/fetchClient';
+
+export const USER_ID = 1;
+
+export const getTodos = () => client.get<Todo[]>(`/todos?userId=${USER_ID}`);
+
+export const addTodo = (todo: Omit<Todo, 'id'>) =>
+  client.post<Todo>('/todos', todo);
+
+export const deleteTodo = (id: number) => client.delete(`/todos/${id}`);
+
+export const updateTodo = (todo: Todo) =>
+  client.patch<Todo>(`/todos/${todo.id}`, todo);
diff --git a/src/components/ErrorNotif/ErrorNotification.tsx b/src/components/ErrorNotif/ErrorNotification.tsx
new file mode 100644
index 0000000000..cddad47c8e
--- /dev/null
+++ b/src/components/ErrorNotif/ErrorNotification.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import cn from 'classnames';
+
+type Props = {
+  error: string;
+  onClose: () => void;
+};
+
+export const ErrorNotification: React.FC<Props> = ({ error, onClose }) => {
+  return (
+    <div
+      data-cy="ErrorNotification"
+      className={cn('notification is-danger is-light has-text-weight-normal', {
+        hidden: !error,
+      })}
+    >
+      <button
+        type="button"
+        data-cy="HideErrorButton"
+        className="delete"
+        onClick={onClose}
+      />
+
+      {error}
+    </div>
+  );
+};
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000000..82be69800c
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import cn from 'classnames';
+import { Filter } from '../../enums/Filter';
+import { Todo } from '../../types/Todo';
+
+type Props = {
+  todos: Todo[];
+  activeCount: number;
+  filter: Filter;
+  setFilter: (filter: Filter) => void;
+  onClearCompleted: () => void;
+};
+
+const filters = [
+  { label: 'All', value: Filter.All, href: '#/', cy: 'FilterLinkAll' },
+  {
+    label: 'Active',
+    value: Filter.Active,
+    href: '#/active',
+    cy: 'FilterLinkActive',
+  },
+  {
+    label: 'Completed',
+    value: Filter.Completed,
+    href: '#/completed',
+    cy: 'FilterLinkCompleted',
+  },
+];
+
+export const Footer: React.FC<Props> = ({
+  todos,
+  activeCount,
+  filter,
+  setFilter,
+  onClearCompleted,
+}) => {
+  return (
+    <footer className="todoapp__footer" data-cy="Footer">
+      <span data-cy="TodosCounter">{`${activeCount} items left`}</span>
+
+      <nav className="filter" data-cy="Filter">
+        {filters.map(f => (
+          <a
+            key={f.value}
+            href={f.href}
+            data-cy={f.cy}
+            className={cn('filter__link', {
+              selected: filter === f.value,
+            })}
+            onClick={() => setFilter(f.value)}
+          >
+            {f.label}
+          </a>
+        ))}
+      </nav>
+
+      <button
+        type="button"
+        data-cy="ClearCompletedButton"
+        className="todoapp__clear-completed"
+        disabled={!todos.some(todo => todo.completed)}
+        onClick={onClearCompleted}
+      >
+        Clear completed
+      </button>
+    </footer>
+  );
+};
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 0000000000..0663dba579
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import cn from 'classnames';
+import { Todo } from '../../types/Todo';
+
+type Props = {
+  title: string;
+  onChange: (value: string) => void;
+  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+  disabled: boolean;
+  inputRef: React.RefObject<HTMLInputElement>;
+  todos: Todo[];
+  onToggleAll: () => void;
+};
+
+export const Header: React.FC<Props> = ({
+  title,
+  onChange,
+  onSubmit,
+  disabled,
+  inputRef,
+  todos,
+  onToggleAll,
+}) => (
+  <header className="todoapp__header">
+    {todos.length > 0 && (
+      <button
+        type="button"
+        className={cn('todoapp__toggle-all', {
+          active: todos.every(todo => todo.completed),
+        })}
+        data-cy="ToggleAllButton"
+        onClick={onToggleAll}
+      />
+    )}
+
+    <form onSubmit={onSubmit}>
+      <input
+        data-cy="NewTodoField"
+        type="text"
+        className="todoapp__new-todo"
+        placeholder="What needs to be done?"
+        value={title}
+        onChange={event => onChange(event.target.value)}
+        disabled={disabled}
+        ref={inputRef}
+        autoFocus
+      />
+    </form>
+  </header>
+);
diff --git a/src/components/TodoItem/TodoItem.tsx b/src/components/TodoItem/TodoItem.tsx
new file mode 100644
index 0000000000..c7bb649260
--- /dev/null
+++ b/src/components/TodoItem/TodoItem.tsx
@@ -0,0 +1,121 @@
+import cn from 'classnames';
+import { Todo } from '../../types/Todo';
+import React, { useEffect, useRef, useState } from 'react';
+
+type Props = {
+  todo: Todo;
+  isProcessing: boolean;
+  onDelete: (id: number) => void;
+  onToggle: (todo: Todo) => void;
+  onRename: (todo: Todo, title: string) => Promise<boolean>;
+};
+
+export const TodoItem: React.FC<Props> = ({
+  todo,
+  isProcessing,
+  onDelete,
+  onToggle,
+  onRename,
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedTitle, setEditedTitle] = useState(todo.title);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing) {
+      inputRef.current?.focus();
+    }
+  }, [isEditing]);
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const wasRenamed = await onRename(todo, editedTitle);
+
+    if (wasRenamed) {
+      setIsEditing(false);
+    }
+  };
+
+  const handleBlur = async () => {
+    const wasRenamed = await onRename(todo, editedTitle);
+
+    if (wasRenamed) {
+      setIsEditing(false);
+    }
+  };
+
+  const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Escape') {
+      setEditedTitle(todo.title);
+      setIsEditing(false);
+    }
+  };
+
+  return (
+    <div
+      data-cy="Todo"
+      className={cn('todo', {
+        completed: todo.completed,
+      })}
+    >
+      {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+      <label className="todo__status-label">
+        <input
+          data-cy="TodoStatus"
+          type="checkbox"
+          className="todo__status"
+          checked={todo.completed}
+          disabled={isProcessing}
+          onChange={() => onToggle(todo)}
+        />
+      </label>
+
+      {isEditing ? (
+        <form onSubmit={handleSubmit}>
+          <input
+            ref={inputRef}
+            data-cy="TodoTitleField"
+            type="text"
+            className="todo__title-field"
+            value={editedTitle}
+            onChange={event => setEditedTitle(event.target.value)}
+            onBlur={handleBlur}
+            onKeyUp={handleKeyUp}
+          />
+        </form>
+      ) : (
+        <>
+          <span
+            data-cy="TodoTitle"
+            className="todo__title"
+            onDoubleClick={() => setIsEditing(true)}
+          >
+            {todo.title}
+          </span>
+
+          <button
+            type="button"
+            data-cy="TodoDelete"
+            className="todo__remove"
+            disabled={isProcessing}
+            onClick={() => onDelete(todo.id)}
+          >
+            ×
+          </button>
+        </>
+      )}
+
+      <div
+        data-cy="TodoLoader"
+        className={cn('modal overlay', {
+          'is-active': isProcessing,
+        })}
+      >
+        <div className="modal-background has-background-white-ter" />
+        <div className="loader" />
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx
new file mode 100644
index 0000000000..3fd5cfb1b9
--- /dev/null
+++ b/src/components/TodoList/TodoList.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { Todo } from '../../types/Todo';
+import { TodoItem } from '../TodoItem/TodoItem';
+
+type Props = {
+  todos: Todo[];
+  tempTodo: Todo | null;
+  processingIds: number[];
+  onDelete: (id: number) => void;
+  onToggle: (todo: Todo) => void;
+  onRename: (todo: Todo, title: string) => Promise<boolean>;
+};
+
+export const TodoList: React.FC<Props> = ({
+  todos,
+  tempTodo,
+  processingIds,
+  onDelete,
+  onToggle,
+  onRename,
+}) => {
+  return (
+    <section className="todoapp__main" data-cy="TodoList">
+      {todos.map(todo => (
+        <TodoItem
+          key={todo.id}
+          todo={todo}
+          isProcessing={processingIds.includes(todo.id)}
+          onDelete={onDelete}
+          onToggle={onToggle}
+          onRename={onRename}
+        />
+      ))}
+
+      {tempTodo && (
+        <TodoItem
+          todo={tempTodo}
+          isProcessing={true}
+          onDelete={onDelete}
+          onToggle={onToggle}
+          onRename={onRename}
+        />
+      )}
+    </section>
+  );
+};
diff --git a/src/enums/ErrorMessage.ts b/src/enums/ErrorMessage.ts
new file mode 100644
index 0000000000..9d4470f4b0
--- /dev/null
+++ b/src/enums/ErrorMessage.ts
@@ -0,0 +1,7 @@
+export enum ErrorMessage {
+  Load = 'Unable to load todos',
+  Add = 'Unable to add a todo',
+  Delete = 'Unable to delete a todo',
+  Update = 'Unable to update a todo',
+  EmptyTitle = 'Title should not be empty',
+}
diff --git a/src/enums/Filter.ts b/src/enums/Filter.ts
new file mode 100644
index 0000000000..174408fd69
--- /dev/null
+++ b/src/enums/Filter.ts
@@ -0,0 +1,5 @@
+export enum Filter {
+  All = 'all',
+  Active = 'active',
+  Completed = 'completed',
+}
diff --git a/src/styles/todo.scss b/src/styles/todo.scss
index c7f93ff6b9..0e614784f5 100644
--- a/src/styles/todo.scss
+++ b/src/styles/todo.scss
@@ -14,11 +14,19 @@
   }
 
   &__status-label {
-    cursor: pointer;
-    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: center left;
-  }
+  display: block;
+
+  width: 45px;
+  height: 58px;
+
+  cursor: pointer;
+
+  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
+
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 40px;
+}
 
   &.completed &__status-label {
     background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
diff --git a/src/types/Todo.ts b/src/types/Todo.ts
new file mode 100644
index 0000000000..3f52a5fdde
--- /dev/null
+++ b/src/types/Todo.ts
@@ -0,0 +1,6 @@
+export interface Todo {
+  id: number;
+  userId: number;
+  title: string;
+  completed: boolean;
+}
diff --git a/src/utils/fetchClient.ts b/src/utils/fetchClient.ts
new file mode 100644
index 0000000000..73d8ce74cc
--- /dev/null
+++ b/src/utils/fetchClient.ts
@@ -0,0 +1,45 @@
+const BASE_URL = 'https://mate.academy/students-api';
+
+// returns a promise resolved after a given delay
+function wait(delay: number) {
+  return new Promise(resolve => {
+    setTimeout(resolve, delay);
+  });
+}
+
+// To have autocompletion and avoid mistypes
+type RequestMethod = 'GET' | 'POST' | 'PATCH' | 'DELETE';
+
+function request<T>(
+  url: string,
+  method: RequestMethod = 'GET',
+  data: unknown = null,
+): Promise<T> {
+  const options: RequestInit = { method };
+
+  if (data) {
+    // We add body and Content-Type only for the requests with data
+    options.body = JSON.stringify(data);
+    options.headers = {
+      'Content-Type': 'application/json; charset=UTF-8',
+    };
+  }
+
+  // DON'T change the delay it is required for tests
+  return wait(100)
+    .then(() => fetch(BASE_URL + url, options))
+    .then(response => {
+      if (!response.ok) {
+        throw new Error();
+      }
+
+      return response.json();
+    });
+}
+
+export const client = {
+  get: <T>(url: string) => request<T>(url),
+  post: <T>(url: string, data: unknown) => request<T>(url, 'POST', data),
+  patch: <T>(url: string, data: unknown) => request<T>(url, 'PATCH', data),
+  delete: (url: string) => request(url, 'DELETE'),
+};