Prepare to interview

Installing

1. Clone this repo and use this command:

npm install

2. Run server with npm run dev

Please, don't watch files. This is example

Tasks

1. Install React + TypeScript

npm create vite@latest

2. Install Axios

npm install axios

3. Create component <Block /> with 2 props - title and children. It can be useful in the future

<Block title="Title">
  <div>This is description</div>
</Block>

4. Create interface about Post using this data:

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
]

5. Create <PostList /> element where we have one prop posts. In the PostList you need to iterate <PostItem />. If we don't have posts, we need to show text Not Found or smth similar.

Place it in <App />

5. In the <App /> you need to fetch data from api endpoint using axios and place all posts to <PostList />

https://jsonplaceholder.typicode.com/posts

6. Create <PostListControl /> with button refresh. This button need to refresh this list from api.

Place it in the <App />

In <PostListControl /> you need to place 2 props: refresh and setRefresh

7. Add search field for <PostListControl and we need to filter these posts.

Use arr.filter in the <App />