diff --git a/src/App.tsx b/src/App.tsx
index 5749bdf784..42c56a3a4d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,24 +1,75 @@
-/* eslint-disable max-len */
-/* eslint-disable jsx-a11y/control-has-associated-label */
-import React from 'react';
-import { UserWarning } from './UserWarning';
-
-const USER_ID = 0;
+import React, { useState } from 'react';
+import { Todo } from './types/Todo';
+import { Errors } from './types/Errors';
+import { FilterOption } from './types/filterOption';
+import { TodoList } from './components/todoList';
+import { InCaseOfError } from './components/inCaseOfError';
+import { InputOfTodos } from './components/inputOfTodos';
+import { Footer } from './components/footer';
 
 export const App: React.FC = () => {
-  if (!USER_ID) {
-    return <UserWarning />;
-  }
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [error, setError] = useState<Errors | null>(null);
+  const [filterTodos, setFilterTodos]
+  = useState<FilterOption>(FilterOption.ALL);
+  const [newTodo, setNewTodo] = useState<string>('');
+
+  const handleSetFilter = (newFilter: FilterOption) => {
+    setFilterTodos(newFilter);
+  };
+
+  const closeError = () => {
+    setError(null);
+  };
+
+  const addTodo = () => {
+    if (newTodo.trim() !== '') {
+      const newTodoItem: Todo = {
+        id: todos.length + 1,
+        title: newTodo,
+        completed: false,
+        removed: false,
+        editing: false,
+      };
+
+      setTodos([...todos, newTodoItem]);
+      setNewTodo('');
+    }
+  };
 
   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">
+        <InputOfTodos
+          setNewTodo={setNewTodo}
+          newTodo={newTodo}
+          addTodo={addTodo}
+          todos={todos}
+          setTodos={setTodos}
+        />
+
+        {todos && (
+          <TodoList
+            todos={todos}
+            filterTodos={filterTodos}
+            setTodos={setTodos}
+          />
+        )}
+
+        {todos.length > 0 && (
+          <Footer
+            handleSetFilter={handleSetFilter}
+            todos={todos}
+            setTodos={setTodos}
+          />
+        )}
+      </div>
+
+      {error && (
+        <InCaseOfError error={error} closeError={closeError} />
+      )}
+    </div>
   );
 };
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
new file mode 100644
index 0000000000..57294aa87b
--- /dev/null
+++ b/src/components/footer.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { TodoCount } from './todoCount';
+import { Todo } from '../types/Todo';
+import { FilterOption } from '../types/filterOption';
+
+interface Props {
+  handleSetFilter: (newFilter: FilterOption) => void;
+  todos: Todo[];
+  setTodos: (todos: Todo[]) => void;
+}
+
+export const Footer: React.FC<Props> = ({
+  handleSetFilter,
+  todos,
+  setTodos,
+}) => {
+  const handleRemoveComplited = () => {
+    setTodos(todos.filter((todo) => todo.completed !== true));
+  };
+
+  return (
+    <footer className="todoapp__footer">
+      <TodoCount todos={todos} />
+      <nav className="filter">
+        <a
+          href="#/"
+          className="filter__link selected"
+          onClick={() => handleSetFilter(FilterOption.ALL)}
+        >
+          All
+        </a>
+
+        <a
+          href="#/active"
+          className="filter__link"
+          onClick={() => handleSetFilter(FilterOption.ACTIVE)}
+        >
+          Active
+        </a>
+
+        <a
+          href="#/completed"
+          className="filter__link"
+          onClick={() => handleSetFilter(FilterOption.COMPLETED)}
+        >
+          Completed
+        </a>
+      </nav>
+      <button
+        type="button"
+        className="todoapp__clear-completed"
+        onClick={handleRemoveComplited}
+      >
+        Clear completed
+      </button>
+    </footer>
+  );
+};
diff --git a/src/components/inCaseOfError.tsx b/src/components/inCaseOfError.tsx
new file mode 100644
index 0000000000..3cddcb8db5
--- /dev/null
+++ b/src/components/inCaseOfError.tsx
@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import { Errors } from '../types/Errors';
+
+interface Props {
+  error: Errors;
+  closeError: () => void;
+}
+
+export const InCaseOfError: React.FC<Props> = ({ error, closeError }) => {
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      closeError();
+    }, 3000);
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [closeError]);
+
+  return (
+    <div className="notification is-danger is-light has-text-weight-normal">
+      <button type="button" className="delete" onClick={closeError}>
+        {error}
+      </button>
+    </div>
+  );
+};
diff --git a/src/components/inputOfTodos.tsx b/src/components/inputOfTodos.tsx
new file mode 100644
index 0000000000..18c396366f
--- /dev/null
+++ b/src/components/inputOfTodos.tsx
@@ -0,0 +1,77 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import React from 'react';
+import { Todo } from '../types/Todo';
+
+interface Props {
+  setNewTodo: (newTodo: string) => void;
+  newTodo: string;
+  addTodo: (title: string) => void;
+  todos: Todo[];
+  setTodos: (todos: Todo[]) => void;
+}
+
+export const InputOfTodos: React.FC<Props> = ({
+  setNewTodo, newTodo, addTodo, todos, setTodos,
+}) => {
+  const handleAddNewTodo = () => {
+    if (newTodo) {
+      addTodo(newTodo);
+      setNewTodo('');
+    }
+  };
+
+  const allComplited = (todos.every((t) => t.completed));
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setNewTodo(event.target.value);
+  };
+
+  const handleInputKeyPress
+  = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      handleAddNewTodo();
+    }
+  };
+
+  const handleTaggleAll = () => {
+    let updatedTodos = todos;
+
+    if (!allComplited) {
+      updatedTodos = todos.map((t) => ({
+        ...t,
+        completed: true,
+      }));
+    } else {
+      updatedTodos = todos.map((t) => ({
+        ...t,
+        completed: !t.completed,
+      }));
+    }
+
+    setTodos(updatedTodos);
+  };
+
+  return (
+    <header className="todoapp__header">
+      {todos.length > 0 && (
+        <button
+          type="button"
+          className={`todoapp__toggle-all ${allComplited ? 'active' : ''}`}
+          onClick={handleTaggleAll}
+        />
+      )}
+
+      <form>
+        <input
+          type="text"
+          className="todoapp__new-todo"
+          placeholder="What needs to be done?"
+          value={newTodo}
+          onChange={handleInputChange}
+          onKeyPress={handleInputKeyPress}
+        />
+      </form>
+    </header>
+  );
+};
diff --git a/src/components/task.tsx b/src/components/task.tsx
new file mode 100644
index 0000000000..6f495a6241
--- /dev/null
+++ b/src/components/task.tsx
@@ -0,0 +1,118 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Todo } from '../types/Todo';
+
+type Props = {
+  todo: Todo;
+  setTodos: React.Dispatch<React.SetStateAction<Todo[]>>;
+  todos: Todo[];
+};
+
+export const Task: React.FC<Props> = ({ todo, setTodos, todos }) => {
+  const [inputValue, setInputValue] = useState<string>(todo.title);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleToggleCompletion = () => {
+    const updatedTodo = { ...todo, completed: !todo.completed };
+
+    setTodos(todos.map((t) => (t.id === updatedTodo.id ? updatedTodo : t)));
+  };
+
+  const handleRemove = () => {
+    const updatedTodo = { ...todo, removed: true };
+
+    setTodos(todos.map((t) => (t.id === updatedTodo.id ? updatedTodo : t)));
+  };
+
+  const handleEditStart = () => {
+    const updatedTodo = { ...todo, editing: true };
+
+    setInputValue(todo.title);
+    setTodos(todos.map((t) => (t.id === updatedTodo.id ? updatedTodo : t)));
+  };
+
+  const saveChanges = () => {
+    const updatedTodo = { ...todo, title: inputValue, editing: false };
+
+    if (updatedTodo.title === '') {
+      handleRemove();
+    } else {
+      setTodos(todos.map((t) => (t.id === updatedTodo.id ? updatedTodo : t)));
+    }
+
+    setInputValue('');
+  };
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+  };
+
+  const cancelEditing = () => {
+    const updatedTodo = { ...todo, editing: false };
+
+    setTodos(todos.map((t) => (t.id === updatedTodo.id ? updatedTodo : t)));
+
+    setInputValue('');
+  };
+
+  const handleInputKeyPress
+  = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      saveChanges();
+    }
+  };
+
+  const handleInputEscPress
+  = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      cancelEditing();
+    }
+  };
+
+  const handleInputBlur = () => {
+    saveChanges();
+  };
+
+  useEffect(() => {
+    if (todo.editing && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [todo.editing]);
+
+  return (
+    <div
+      className={todo.completed ? 'todo completed' : 'todo'}
+      onDoubleClick={handleEditStart}
+    >
+      <label className="todo__status-label">
+        <input
+          type="checkbox"
+          className="todo__status"
+          checked={todo.completed}
+          onChange={handleToggleCompletion}
+        />
+      </label>
+      {!todo.editing ? (
+        <>
+          <span className="todo__title">{todo.title}</span>
+          <button type="button" className="todo__remove" onClick={handleRemove}>
+            ×
+          </button>
+        </>
+      ) : (
+        <input
+          ref={inputRef}
+          type="text"
+          className="todoapp__new"
+          placeholder="Empty todo will be deleted"
+          value={inputValue}
+          onChange={handleInputChange}
+          onKeyPress={handleInputKeyPress}
+          onBlur={handleInputBlur}
+          onKeyUp={handleInputEscPress}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/src/components/todoCount.tsx b/src/components/todoCount.tsx
new file mode 100644
index 0000000000..cbc071e192
--- /dev/null
+++ b/src/components/todoCount.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Todo } from '../types/Todo';
+
+interface Props {
+  todos: Todo[];
+}
+
+export const TodoCount: React.FC<Props> = ({ todos }) => {
+  const todosLeftCount = todos.filter((todo) => !todo.completed
+  && !todo.removed).length;
+
+  return (
+    <span className="todo-count">
+      {todosLeftCount}
+      {' '}
+      {todosLeftCount === 1 ? 'item' : 'items'}
+      {' '}
+      left
+    </span>
+  );
+};
diff --git a/src/components/todoList.tsx b/src/components/todoList.tsx
new file mode 100644
index 0000000000..679f9491be
--- /dev/null
+++ b/src/components/todoList.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Todo } from '../types/Todo';
+import { FilterOption } from '../types/filterOption';
+import { Task } from './task';
+
+interface Props {
+  todos: Todo[];
+  filterTodos: FilterOption;
+  setTodos: React.Dispatch<React.SetStateAction<Todo[]>>;
+}
+
+export const TodoList: React.FC<Props> = ({ todos, filterTodos, setTodos }) => {
+  const visibleTodos = (() => {
+    let filteredTodos = todos;
+
+    if (filterTodos === FilterOption.ACTIVE) {
+      filteredTodos = filteredTodos.filter((todo) => !todo.completed);
+    } else if (filterTodos === FilterOption.COMPLETED) {
+      filteredTodos = filteredTodos.filter((todo) => todo.completed);
+    }
+
+    filteredTodos = filteredTodos.filter((todo) => !todo.removed);
+
+    return filteredTodos;
+  })();
+
+  return (
+    <section className="todoapp__main">
+      {visibleTodos.map((todo) => (
+        <Task key={todo.id} todo={todo} setTodos={setTodos} todos={todos} />
+      ))}
+    </section>
+  );
+};
diff --git a/src/types/Errors.ts b/src/types/Errors.ts
new file mode 100644
index 0000000000..6264053510
--- /dev/null
+++ b/src/types/Errors.ts
@@ -0,0 +1,5 @@
+export enum Errors {
+  Add = 'Unable to add a todo',
+  Delete = 'Unable to delete a todo',
+  Update = 'Unable to update a todo',
+}
diff --git a/src/types/Todo.ts b/src/types/Todo.ts
new file mode 100644
index 0000000000..0274a3bbfb
--- /dev/null
+++ b/src/types/Todo.ts
@@ -0,0 +1,7 @@
+export type Todo = {
+  id: number;
+  title: string;
+  completed: boolean;
+  removed: boolean;
+  editing: boolean;
+};
diff --git a/src/types/filterOption.ts b/src/types/filterOption.ts
new file mode 100644
index 0000000000..e1e33a19ae
--- /dev/null
+++ b/src/types/filterOption.ts
@@ -0,0 +1,5 @@
+export const enum FilterOption {
+  ALL = 'all',
+  ACTIVE = 'active',
+  COMPLETED = 'completed',
+}