This application displays a series of posts/articles by calling API.
The Brief:
Objective: Develop a responsive web application that retrieves data from a mock API, displays it in a list view with appropriate properties, and includes a category filter.
Requirements:
Retrieve Data: Utilize the provided mock API to retrieve the necessary data for the application.
List View: Display the retrieved data in a list format, ensuring the properties displayed are suitable for a list view.
Category Filter: Implement a category filter, allowing users to select one or multiple categories for filtering the displayed data.
Instant Post Search: The application provides real-time search results. Meaning the user search shows up while they typing the query.
Semantic Markup: Utilize semantic markup wherever possible to enhance the accessibility and structure of the web application.
Responsive Layout: Create a responsive layout using HTML and CSS that can be seamlessly used on a public-facing website. Consider implementing a grid-based card layout for optimal display.
Additional Features:
Pagination: Implement pagination functionality, either using traditional numbered pages or a “load more” mechanism, to enhance the user experience when navigating through the data.
Persist Filter State: Preserve the filter state in the query string of the URL, ensuring that users can bookmark or share filtered views of the data.
Animated Transitions: Include animated transitions between different application states, such as when applying filters, to provide a visually appealing and smooth user experience.
Styled Components: Utilize styled components instead of plain CSS to enhance code organization and maintainability.
Client-side Routing: Implement client-side routing to create a separate “detail” page for individual items. This page should display the title and author name of the selected item.
Github link to clone the project – https://github.com/aurysilva/react-developer-assessment.git
