Test Task Level 6-7

• Please fork this repository as boilerplate (make sure you work in 'scaffold' branch).
• Use tailwind css when building UI with Element Plus library
• Please follow all frontend best practices, use Typescript without ‘any’ types, keep code small, split template into multiple components and keep each component code small, readable and maintainable.

Task

1. Get familiar with Softonix guidelines
2. (Optional) Setup IDE
3. Use this link to understand how the app should look like in Figma

App should contain

1. Dropdown with users
2. Initial loading state for page (element plus v-loading)
3. Table with posts with pagination of selected user (frontend side pagination)
4. Search post by post name (search should filter all items in user posts list, not only opened page)
5. When clicking row in posts table, show modal with post details
6. Implement debounce for post search
7. Search inputs state should persist after refreshing the page (use query params) (dropdown with selected user, post search name, pagination page)
8. Show error messages when error happened (use element plus notification component)
9. If no posts, show no posts message
10. If no posts when filtering, show There is no such posts message

P.S. Some additional info you can find in Doc with Requirements

Code Requirements and Packages Requirements

1. Follow Softonix Guidelines
2. Use Tailwind for styles
3. Use Element Plus library
4. Use vue-use for debounce
5. Use https://jsonplaceholder.typicode.com for mocking data
6. You can add additional improvements to the app if you want to, will be a plus

API endpoints Examples how to use API

• https://jsonplaceholder.typicode.com
• **/posts
• **/posts/1
• **/posts/1/comments
• **/users
• **/photos (for user's avatar, use this endpoint, where :photoId is user's id)

Good Luck!!!

Links you might need:

• Softonix guidelines
• Doc with requirements
• Link to Figma
• Tailwind
• ElementPlus