diff --git a/src/App.scss b/src/App.scss
index 695435da4..4002a0577 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -18,6 +18,35 @@
   }
 }
 
+.tile {
+  align-items: stretch;
+  min-height: min-content;
+  flex: 1 1 0;
+
+  &.is-ancestor {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+    margin-top: -0.75rem;
+
+    &:last-child {
+      margin-bottom: -0.75rem;
+    }
+  }
+
+  @media (min-width: 769px) {
+    &:not(.is-child) {
+      display: flex;
+    }
+  }
+}
+
 .message-body {
   white-space: pre-line;
 }
+
+.container {
+  flex-grow: 1;
+  margin: 0 auto;
+  position: relative;
+  width: auto;
+}
diff --git a/src/App.tsx b/src/App.tsx
index 017957182..b064ebfa2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,60 +1,103 @@
-import classNames from 'classnames';
-
+/* eslint-disable @typescript-eslint/indent */
 import 'bulma/css/bulma.css';
 import '@fortawesome/fontawesome-free/css/all.css';
+import cn from 'classnames';
 import './App.scss';
 
-import { PostsList } from './components/PostsList';
-import { PostDetails } from './components/PostDetails';
-import { UserSelector } from './components/UserSelector';
-import { Loader } from './components/Loader';
-
-export const App = () => (
-  <main className="section">
-    <div className="container">
-      <div className="tile is-ancestor">
-        <div className="tile is-parent">
-          <div className="tile is-child box is-success">
-            <div className="block">
-              <UserSelector />
-            </div>
+import { PostsList, PostDetails, UserSelector, Loader } from './components';
+import { User } from './types';
+import { usePosts, useUsers } from './hooks';
 
-            <div className="block" data-cy="MainContent">
-              <p data-cy="NoSelectedUser">No user selected</p>
+export const App = () => {
+  const {
+    users,
+    errorMessage: usersErrorMessage,
+    selectedUser,
+    setSelectedUser,
+  } = useUsers();
+  const {
+    posts,
+    selectedPost,
+    setSelectedPost,
+    isLoading,
+    errorMessage: postsErrorMessage,
+  } = usePosts(selectedUser?.id);
 
-              <Loader />
+  const errorMessage = usersErrorMessage || postsErrorMessage;
 
-              <div
-                className="notification is-danger"
-                data-cy="PostsLoadingError"
-              >
-                Something went wrong!
-              </div>
+  const handleSelectUserId = (user: User) => {
+    setSelectedUser(user);
+    setSelectedPost(null);
+  };
 
-              <div className="notification is-warning" data-cy="NoPostsYet">
-                No posts yet
+  return (
+    <main className="section">
+      <div className="container">
+        <div className="tile is-ancestor">
+          <div className="tile is-parent">
+            <div className="tile is-child box is-success">
+              <div className="block">
+                <UserSelector
+                  users={users}
+                  selectedUser={selectedUser}
+                  onSelectUser={handleSelectUserId}
+                />
               </div>
 
-              <PostsList />
+              <div className="block" data-cy="MainContent">
+                {!selectedUser && (
+                  <p data-cy="NoSelectedUser">No user selected</p>
+                )}
+
+                {selectedUser && isLoading && <Loader />}
+
+                {selectedUser && !isLoading && errorMessage && (
+                  <div
+                    className="notification is-danger"
+                    data-cy="PostsLoadingError"
+                  >
+                    {errorMessage}
+                  </div>
+                )}
+
+                {selectedUser &&
+                  !isLoading &&
+                  !errorMessage &&
+                  posts?.length === 0 && (
+                    <div
+                      className="notification is-warning"
+                      data-cy="NoPostsYet"
+                    >
+                      No posts yet
+                    </div>
+                  )}
+
+                {selectedUser &&
+                  !isLoading &&
+                  !errorMessage &&
+                  posts?.length !== 0 && (
+                    <PostsList
+                      posts={posts}
+                      selectedPost={selectedPost}
+                      onSelectPost={setSelectedPost}
+                    />
+                  )}
+              </div>
             </div>
           </div>
-        </div>
 
-        <div
-          data-cy="Sidebar"
-          className={classNames(
-            'tile',
-            'is-parent',
-            'is-8-desktop',
-            'Sidebar',
-            'Sidebar--open',
-          )}
-        >
-          <div className="tile is-child box is-success ">
-            <PostDetails />
+          <div
+            data-cy="Sidebar"
+            className={cn('tile is-parent is-8-desktop Sidebar', {
+              'Sidebar--open': selectedPost,
+            })}
+          >
+            <div className="tile is-child box is-success ">
+              {selectedPost && <PostDetails selectedPost={selectedPost} />}
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </main>
-);
+    </main>
+  );
+};
diff --git a/src/api/comments.ts b/src/api/comments.ts
new file mode 100644
index 000000000..87d53b917
--- /dev/null
+++ b/src/api/comments.ts
@@ -0,0 +1,14 @@
+import { Comment } from '../types/Comment';
+import { client } from '../utils/fetchClient';
+
+export const getComments = (postId: number) => {
+  return client.get<Comment[]>(`/comments?postId=${postId}`);
+};
+
+export const deleteComment = (commentId: number) => {
+  return client.delete(`/comments/${commentId}`);
+};
+
+export const addComment = (newComment: Omit<Comment, 'id'>) => {
+  return client.post<Comment>('/comments', newComment);
+};
diff --git a/src/api/posts.ts b/src/api/posts.ts
new file mode 100644
index 000000000..db1ecb6c5
--- /dev/null
+++ b/src/api/posts.ts
@@ -0,0 +1,6 @@
+import { Post } from '../types/Post';
+import { client } from '../utils/fetchClient';
+
+export const getUserPosts = (selectedUserId: number) => {
+  return client.get<Post[]>(`/posts?userId=${selectedUserId}`);
+};
diff --git a/src/api/users.ts b/src/api/users.ts
new file mode 100644
index 000000000..816c8274b
--- /dev/null
+++ b/src/api/users.ts
@@ -0,0 +1,6 @@
+import { User } from '../types/User';
+import { client } from '../utils/fetchClient';
+
+export const getUsers = () => {
+  return client.get<User[]>('/users');
+};
diff --git a/src/components/CommentItem.tsx b/src/components/CommentItem.tsx
new file mode 100644
index 000000000..5d601542e
--- /dev/null
+++ b/src/components/CommentItem.tsx
@@ -0,0 +1,33 @@
+import { FC } from 'react';
+
+import { Comment } from '../types';
+
+type Props = {
+  comment: Comment;
+  onDelete: (commentId: number) => Promise<void>;
+};
+
+export const CommentItem: FC<Props> = ({ comment, onDelete }) => {
+  const { id, name, email, body } = comment;
+
+  return (
+    <article className="message is-small" data-cy="Comment">
+      <div className="message-header">
+        <a href={`mailto:${email}`} data-cy="CommentAuthor">
+          {name}
+        </a>
+        <button
+          data-cy="CommentDelete"
+          type="button"
+          className="delete is-small"
+          aria-label="delete"
+          onClick={() => onDelete(id)}
+        ></button>
+      </div>
+
+      <div className="message-body" data-cy="CommentBody">
+        {body}
+      </div>
+    </article>
+  );
+};
diff --git a/src/components/NewCommentForm.tsx b/src/components/NewCommentForm.tsx
index 73a8a0b45..44afb5b51 100644
--- a/src/components/NewCommentForm.tsx
+++ b/src/components/NewCommentForm.tsx
@@ -1,8 +1,85 @@
-import React from 'react';
+import React, { FormEvent, useState } from 'react';
+import cn from 'classnames';
+
+import { Comment } from '../types';
+
+type Props = {
+  selectedPostId: number;
+  onAddComment: (newComment: Omit<Comment, 'id'>) => Promise<void>;
+};
+
+export const NewCommentForm: React.FC<Props> = ({
+  selectedPostId,
+  onAddComment,
+}) => {
+  const [name, setName] = useState('');
+  const [hasName, setHasName] = useState(true);
+  const [email, setEmail] = useState('');
+  const [hasEmail, setHasEmail] = useState(true);
+  const [commentBody, setCommentBody] = useState('');
+  const [hasCommentBody, setHasCommentBody] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault();
+
+    if (!name) {
+      setHasName(false);
+    }
+
+    if (!email) {
+      setHasEmail(false);
+    }
+
+    if (!commentBody) {
+      setHasCommentBody(false);
+    }
+
+    if (!name || !email || !commentBody) {
+      return;
+    }
+
+    setIsLoading(true);
+
+    const newComment = {
+      postId: selectedPostId,
+      name: name.trim(),
+      email: email.trim(),
+      body: commentBody.trim(),
+    };
+
+    onAddComment(newComment)
+      .then(() => setCommentBody(''))
+      .finally(() => setIsLoading(false));
+  };
+
+  const handleChangeName = (authorName: string) => {
+    setName(authorName);
+    setHasName(true);
+  };
+
+  const handleChangeEmail = (authorEmail: string) => {
+    setEmail(authorEmail);
+    setHasEmail(true);
+  };
+
+  const handleChangeComment = (comment: string) => {
+    setCommentBody(comment);
+    setHasCommentBody(true);
+  };
+
+  const handleReset = () => {
+    setName('');
+    setEmail('');
+    setCommentBody('');
+
+    setHasName(true);
+    setHasEmail(true);
+    setHasCommentBody(true);
+  };
 
-export const NewCommentForm: React.FC = () => {
   return (
-    <form data-cy="NewCommentForm">
+    <form data-cy="NewCommentForm" onSubmit={handleSubmit}>
       <div className="field" data-cy="NameField">
         <label className="label" htmlFor="comment-author-name">
           Author Name
@@ -14,24 +91,30 @@ export const NewCommentForm: React.FC = () => {
             name="name"
             id="comment-author-name"
             placeholder="Name Surname"
-            className="input is-danger"
+            className={cn('input', { 'is-danger': !hasName })}
+            value={name}
+            onChange={event => handleChangeName(event.target.value.trimStart())}
           />
 
           <span className="icon is-small is-left">
             <i className="fas fa-user" />
           </span>
 
-          <span
-            className="icon is-small is-right has-text-danger"
-            data-cy="ErrorIcon"
-          >
-            <i className="fas fa-exclamation-triangle" />
-          </span>
+          {!hasName && (
+            <span
+              className="icon is-small is-right has-text-danger"
+              data-cy="ErrorIcon"
+            >
+              <i className="fas fa-exclamation-triangle" />
+            </span>
+          )}
         </div>
 
-        <p className="help is-danger" data-cy="ErrorMessage">
-          Name is required
-        </p>
+        {!hasName && (
+          <p className="help is-danger" data-cy="ErrorMessage">
+            Name is required
+          </p>
+        )}
       </div>
 
       <div className="field" data-cy="EmailField">
@@ -45,24 +128,32 @@ export const NewCommentForm: React.FC = () => {
             name="email"
             id="comment-author-email"
             placeholder="email@test.com"
-            className="input is-danger"
+            className={cn('input', { 'is-danger': !hasEmail })}
+            value={email}
+            onChange={event =>
+              handleChangeEmail(event.target.value.trimStart())
+            }
           />
 
           <span className="icon is-small is-left">
             <i className="fas fa-envelope" />
           </span>
 
-          <span
-            className="icon is-small is-right has-text-danger"
-            data-cy="ErrorIcon"
-          >
-            <i className="fas fa-exclamation-triangle" />
-          </span>
+          {!hasEmail && (
+            <span
+              className="icon is-small is-right has-text-danger"
+              data-cy="ErrorIcon"
+            >
+              <i className="fas fa-exclamation-triangle" />
+            </span>
+          )}
         </div>
 
-        <p className="help is-danger" data-cy="ErrorMessage">
-          Email is required
-        </p>
+        {!hasEmail && (
+          <p className="help is-danger" data-cy="ErrorMessage">
+            Email is required
+          </p>
+        )}
       </div>
 
       <div className="field" data-cy="BodyField">
@@ -75,25 +166,38 @@ export const NewCommentForm: React.FC = () => {
             id="comment-body"
             name="body"
             placeholder="Type comment here"
-            className="textarea is-danger"
+            className={cn('textarea', { 'is-danger': !hasCommentBody })}
+            value={commentBody}
+            onChange={event =>
+              handleChangeComment(event.target.value.trimStart())
+            }
           />
         </div>
 
-        <p className="help is-danger" data-cy="ErrorMessage">
-          Enter some text
-        </p>
+        {!hasCommentBody && (
+          <p className="help is-danger" data-cy="ErrorMessage">
+            Enter some text
+          </p>
+        )}
       </div>
 
       <div className="field is-grouped">
         <div className="control">
-          <button type="submit" className="button is-link is-loading">
+          <button
+            type="submit"
+            className={cn('button is-link', { 'is-loading': isLoading })}
+          >
             Add
           </button>
         </div>
 
         <div className="control">
           {/* eslint-disable-next-line react/button-has-type */}
-          <button type="reset" className="button is-link is-light">
+          <button
+            type="reset"
+            className="button is-link is-light"
+            onClick={handleReset}
+          >
             Clear
           </button>
         </div>
diff --git a/src/components/PostDetails.tsx b/src/components/PostDetails.tsx
index 2f82db916..70b8c0d0e 100644
--- a/src/components/PostDetails.tsx
+++ b/src/components/PostDetails.tsx
@@ -1,107 +1,75 @@
-import React from 'react';
-import { Loader } from './Loader';
-import { NewCommentForm } from './NewCommentForm';
+import React, { useEffect, useState } from 'react';
 
-export const PostDetails: React.FC = () => {
-  return (
-    <div className="content" data-cy="PostDetails">
-      <div className="content" data-cy="PostDetails">
-        <div className="block">
-          <h2 data-cy="PostTitle">
-            #18: voluptate et itaque vero tempora molestiae
-          </h2>
-
-          <p data-cy="PostBody">
-            eveniet quo quis laborum totam consequatur non dolor ut et est
-            repudiandae est voluptatem vel debitis et magnam
-          </p>
-        </div>
-
-        <div className="block">
-          <Loader />
+import { Loader, CommentItem, NewCommentForm } from './index';
+import { Post } from '../types';
+import { useComments } from '../hooks/useComments';
 
-          <div className="notification is-danger" data-cy="CommentsError">
-            Something went wrong
-          </div>
+type Props = {
+  selectedPost: Post;
+};
 
-          <p className="title is-4" data-cy="NoCommentsMessage">
-            No comments yet
-          </p>
+export const PostDetails: React.FC<Props> = ({ selectedPost }) => {
+  const { id, title, body } = selectedPost;
 
-          <p className="title is-4">Comments:</p>
+  const [isFormOpened, setIsFormOpened] = useState(false);
+  const { comments, errorMessage, isLoading, deleteComment, addComment } =
+    useComments(id);
 
-          <article className="message is-small" data-cy="Comment">
-            <div className="message-header">
-              <a href="mailto:misha@mate.academy" data-cy="CommentAuthor">
-                Misha Hrynko
-              </a>
-              <button
-                data-cy="CommentDelete"
-                type="button"
-                className="delete is-small"
-                aria-label="delete"
-              >
-                delete button
-              </button>
-            </div>
+  useEffect(() => setIsFormOpened(false), [selectedPost]);
 
-            <div className="message-body" data-cy="CommentBody">
-              Some comment
-            </div>
-          </article>
+  return (
+    <div className="content" data-cy="PostDetails">
+      <div className="block">
+        <h2 data-cy="PostTitle">{`#${id}: ${title}`}</h2>
 
-          <article className="message is-small" data-cy="Comment">
-            <div className="message-header">
-              <a href="mailto:misha@mate.academy" data-cy="CommentAuthor">
-                Misha Hrynko
-              </a>
+        <p data-cy="PostBody">{body}</p>
+      </div>
 
-              <button
-                data-cy="CommentDelete"
-                type="button"
-                className="delete is-small"
-                aria-label="delete"
-              >
-                delete button
-              </button>
-            </div>
-            <div className="message-body" data-cy="CommentBody">
-              One more comment
-            </div>
-          </article>
+      <div className="block">
+        {isLoading && <Loader />}
 
-          <article className="message is-small" data-cy="Comment">
-            <div className="message-header">
-              <a href="mailto:misha@mate.academy" data-cy="CommentAuthor">
-                Misha Hrynko
-              </a>
+        {!isLoading && errorMessage && (
+          <div className="notification is-danger" data-cy="CommentsError">
+            {errorMessage}
+          </div>
+        )}
 
-              <button
-                data-cy="CommentDelete"
-                type="button"
-                className="delete is-small"
-                aria-label="delete"
-              >
-                delete button
-              </button>
-            </div>
+        {!isLoading && !errorMessage && !comments.length && (
+          <>
+            <p className="title is-4" data-cy="NoCommentsMessage">
+              No comments yet
+            </p>
+          </>
+        )}
 
-            <div className="message-body" data-cy="CommentBody">
-              {'Multi\nline\ncomment'}
-            </div>
-          </article>
+        {!isLoading && !errorMessage && !!comments.length && (
+          <>
+            <p className="title is-4">Comments:</p>
+            {comments.map(comment => (
+              <CommentItem
+                comment={comment}
+                onDelete={deleteComment}
+                key={comment.id}
+              />
+            ))}
+          </>
+        )}
+      </div>
 
-          <button
-            data-cy="WriteCommentButton"
-            type="button"
-            className="button is-link"
-          >
-            Write a comment
-          </button>
-        </div>
+      {!isLoading && !errorMessage && !isFormOpened && (
+        <button
+          data-cy="WriteCommentButton"
+          type="button"
+          className="button is-link"
+          onClick={() => setIsFormOpened(true)}
+        >
+          Write a comment
+        </button>
+      )}
 
-        <NewCommentForm />
-      </div>
+      {!isLoading && !errorMessage && isFormOpened && (
+        <NewCommentForm selectedPostId={id} onAddComment={addComment} />
+      )}
     </div>
   );
 };
diff --git a/src/components/PostItem.tsx b/src/components/PostItem.tsx
new file mode 100644
index 000000000..3ee91a72e
--- /dev/null
+++ b/src/components/PostItem.tsx
@@ -0,0 +1,43 @@
+import { Dispatch, FC, SetStateAction } from 'react';
+import cn from 'classnames';
+
+import { Post } from '../types';
+
+type Props = {
+  post: Post;
+  selectedPost: Post | null;
+  onSelectPost: Dispatch<SetStateAction<Post | null>>;
+};
+
+export const PostItem: FC<Props> = ({ post, selectedPost, onSelectPost }) => {
+  const { id, title } = post;
+
+  const isSelected = id === selectedPost?.id;
+
+  const handleSelectPost = () => {
+    if (selectedPost?.id === id) {
+      onSelectPost(null);
+    } else {
+      onSelectPost(post);
+    }
+  };
+
+  return (
+    <tr data-cy="Post">
+      <td data-cy="PostId">{id}</td>
+
+      <td data-cy="PostTitle">{title}</td>
+
+      <td className="has-text-right is-vcentered">
+        <button
+          type="button"
+          data-cy="PostButton"
+          className={cn('button is-link', { 'is-light': !isSelected })}
+          onClick={handleSelectPost}
+        >
+          {isSelected ? 'Close' : 'Open'}
+        </button>
+      </td>
+    </tr>
+  );
+};
diff --git a/src/components/PostsList.tsx b/src/components/PostsList.tsx
index cf90f04b0..9c22e8b34 100644
--- a/src/components/PostsList.tsx
+++ b/src/components/PostsList.tsx
@@ -1,6 +1,19 @@
-import React from 'react';
-
-export const PostsList: React.FC = () => (
+import React, { Dispatch, SetStateAction } from 'react';
+
+import { Post } from '../types';
+import { PostItem } from './index';
+
+type Props = {
+  posts: Post[] | null;
+  selectedPost: Post | null;
+  onSelectPost: Dispatch<SetStateAction<Post | null>>;
+};
+
+export const PostsList: React.FC<Props> = ({
+  posts,
+  selectedPost,
+  onSelectPost,
+}) => (
   <div data-cy="PostsList">
     <p className="title">Posts:</p>
 
@@ -15,71 +28,14 @@ export const PostsList: React.FC = () => (
       </thead>
 
       <tbody>
-        <tr data-cy="Post">
-          <td data-cy="PostId">17</td>
-
-          <td data-cy="PostTitle">
-            fugit voluptas sed molestias voluptatem provident
-          </td>
-
-          <td className="has-text-right is-vcentered">
-            <button
-              type="button"
-              data-cy="PostButton"
-              className="button is-link is-light"
-            >
-              Open
-            </button>
-          </td>
-        </tr>
-
-        <tr data-cy="Post">
-          <td data-cy="PostId">18</td>
-
-          <td data-cy="PostTitle">
-            voluptate et itaque vero tempora molestiae
-          </td>
-
-          <td className="has-text-right is-vcentered">
-            <button
-              type="button"
-              data-cy="PostButton"
-              className="button is-link"
-            >
-              Close
-            </button>
-          </td>
-        </tr>
-
-        <tr data-cy="Post">
-          <td data-cy="PostId">19</td>
-          <td data-cy="PostTitle">adipisci placeat illum aut reiciendis qui</td>
-
-          <td className="has-text-right is-vcentered">
-            <button
-              type="button"
-              data-cy="PostButton"
-              className="button is-link is-light"
-            >
-              Open
-            </button>
-          </td>
-        </tr>
-
-        <tr data-cy="Post">
-          <td data-cy="PostId">20</td>
-          <td data-cy="PostTitle">doloribus ad provident suscipit at</td>
-
-          <td className="has-text-right is-vcentered">
-            <button
-              type="button"
-              data-cy="PostButton"
-              className="button is-link is-light"
-            >
-              Open
-            </button>
-          </td>
-        </tr>
+        {posts?.map(post => (
+          <PostItem
+            post={post}
+            key={post.id}
+            selectedPost={selectedPost}
+            onSelectPost={onSelectPost}
+          />
+        ))}
       </tbody>
     </table>
   </div>
diff --git a/src/components/UserSelector.tsx b/src/components/UserSelector.tsx
index c89442841..995591801 100644
--- a/src/components/UserSelector.tsx
+++ b/src/components/UserSelector.tsx
@@ -1,16 +1,36 @@
-import React from 'react';
+import React, { useState } from 'react';
+import cn from 'classnames';
+
+import { User } from '../types';
+
+type Props = {
+  users: User[];
+  selectedUser: User | null;
+  onSelectUser: (user: User) => void;
+};
+
+export const UserSelector: React.FC<Props> = ({
+  users,
+  selectedUser,
+  onSelectUser,
+}) => {
+  const [isOpened, setIsOpened] = useState(false);
 
-export const UserSelector: React.FC = () => {
   return (
-    <div data-cy="UserSelector" className="dropdown is-active">
+    <div
+      data-cy="UserSelector"
+      className={cn('dropdown', { 'is-active': isOpened })}
+    >
       <div className="dropdown-trigger">
         <button
           type="button"
           className="button"
           aria-haspopup="true"
           aria-controls="dropdown-menu"
+          onBlur={() => setIsOpened(false)}
+          onClick={() => setIsOpened(current => !current)}
         >
-          <span>Choose a user</span>
+          <span>{selectedUser ? selectedUser?.name : 'Choose a user'}</span>
 
           <span className="icon is-small">
             <i className="fas fa-angle-down" aria-hidden="true" />
@@ -20,21 +40,22 @@ export const UserSelector: React.FC = () => {
 
       <div className="dropdown-menu" id="dropdown-menu" role="menu">
         <div className="dropdown-content">
-          <a href="#user-1" className="dropdown-item">
-            Leanne Graham
-          </a>
-          <a href="#user-2" className="dropdown-item is-active">
-            Ervin Howell
-          </a>
-          <a href="#user-3" className="dropdown-item">
-            Clementine Bauch
-          </a>
-          <a href="#user-4" className="dropdown-item">
-            Patricia Lebsack
-          </a>
-          <a href="#user-5" className="dropdown-item">
-            Chelsey Dietrich
-          </a>
+          {users.map(user => {
+            const { id, name } = user;
+
+            const isSelected = id === selectedUser?.id;
+
+            return (
+              <a
+                href={`#user-${id}`}
+                className={cn('dropdown-item', { 'is-active': isSelected })}
+                key={id}
+                onMouseDown={() => onSelectUser(user)}
+              >
+                {name}
+              </a>
+            );
+          })}
         </div>
       </div>
     </div>
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 000000000..7d26d997a
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,7 @@
+export { Loader } from './Loader/Loader';
+export { CommentItem } from './CommentItem';
+export { NewCommentForm } from './NewCommentForm';
+export { PostDetails } from './PostDetails';
+export { PostItem } from './PostItem';
+export { PostsList } from './PostsList';
+export { UserSelector } from './UserSelector';
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
new file mode 100644
index 000000000..666a99735
--- /dev/null
+++ b/src/hooks/index.ts
@@ -0,0 +1,3 @@
+export { useUsers } from './useUsers';
+export { usePosts } from './usePosts';
+export { useComments } from './useComments';
diff --git a/src/hooks/useComments.ts b/src/hooks/useComments.ts
new file mode 100644
index 000000000..54e489e69
--- /dev/null
+++ b/src/hooks/useComments.ts
@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+
+import { Comment } from '../types';
+import * as commentsService from '../api/comments';
+
+export const useComments = (selectedPostId: number) => {
+  const [comments, setComments] = useState<Comment[]>([]);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const loadComments = () => {
+    setErrorMessage('');
+    setIsLoading(true);
+
+    commentsService
+      .getComments(selectedPostId)
+      .then(setComments)
+      .catch(() => setErrorMessage('Unable to load comments'))
+      .finally(() => setIsLoading(false));
+  };
+
+  const deleteComment = (commentId: number) => {
+    return commentsService.deleteComment(commentId).then(() => {
+      setComments(current =>
+        current.filter(comment => comment.id !== commentId),
+      );
+    });
+  };
+
+  const addComment = (newComment: Omit<Comment, 'id'>) => {
+    return commentsService
+      .addComment(newComment)
+      .then(comment => {
+        setComments(current => [...current, comment]);
+      })
+      .catch(() => {
+        setErrorMessage('Unable to add a comment');
+      });
+  };
+
+  useEffect(loadComments, [selectedPostId]);
+
+  return { comments, errorMessage, isLoading, deleteComment, addComment };
+};
diff --git a/src/hooks/usePosts.ts b/src/hooks/usePosts.ts
new file mode 100644
index 000000000..7b4b6ada7
--- /dev/null
+++ b/src/hooks/usePosts.ts
@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import { Post } from '../types';
+import * as postsService from '../api/posts';
+
+export const usePosts = (selectedUserId: number = 0) => {
+  const [posts, setPosts] = useState<Post[] | null>(null);
+  const [selectedPost, setSelectedPost] = useState<Post | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const loadSelectedUserPosts = () => {
+    if (!selectedUserId) {
+      return;
+    }
+
+    setIsLoading(true);
+    setErrorMessage('');
+
+    postsService
+      .getUserPosts(selectedUserId)
+      .then(setPosts)
+      .catch(() => setErrorMessage('Unable to load posts'))
+      .finally(() => setIsLoading(false));
+  };
+
+  useEffect(loadSelectedUserPosts, [selectedUserId]);
+
+  return {
+    posts,
+    selectedPost,
+    setSelectedPost,
+    isLoading,
+    setIsLoading,
+    errorMessage,
+  };
+};
diff --git a/src/hooks/useUsers.ts b/src/hooks/useUsers.ts
new file mode 100644
index 000000000..be9a2b41d
--- /dev/null
+++ b/src/hooks/useUsers.ts
@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import { User } from '../types';
+import * as usersService from '../api/users';
+
+export const useUsers = () => {
+  const [users, setUsers] = useState<User[]>([]);
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const loadUsers = () => {
+    setErrorMessage('');
+
+    usersService
+      .getUsers()
+      .then(res => {
+        const preparedUsers = res.map(user => {
+          const { id, name, email, phone } = user;
+
+          return {
+            id,
+            name,
+            email,
+            phone,
+          };
+        });
+
+        setUsers(preparedUsers);
+      })
+      .catch(() => setErrorMessage('Unable to load users'));
+  };
+
+  useEffect(loadUsers, []);
+
+  return { users, errorMessage, selectedUser, setSelectedUser };
+};
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 000000000..e7eac0c72
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,3 @@
+export type { Comment } from './Comment';
+export type { Post } from './Post';
+export type { User } from './User';