## Front End Developer Assignment ### Overview Build a small, single-page React application that fetches and displays a list of tasks from a public API. The application should allow the user to filter tasks by status (completed or pending) and search by task title. You should also handle loading and error states appropriately. ### Requirements 1. **Project Setup** - You may use [Create React App](https://create-react-app.dev/) or [Vite](https://vitejs.dev/) (or any boilerplate of your choice) to set up the project. - Use functional components and React Hooks (e.g., `useState`, `useEffect`). 2. **Fetching Data** - Fetch a list of tasks from the following API: `https://jsonplaceholder.typicode.com/todos` - Note: Each task object has at least the following properties: - `id` - `title` - `completed` (boolean) - Ignore `userId` property. 3. **Displaying Data** - Display the list of tasks in a clear and organized manner (e.g., a table or list). - Each task should show its title and completion status. 4. **Filtering** - Implement filtering functionality: - A filter control to switch between viewing **All**, **Completed**, and **Pending** tasks. - Implement a search box that filters tasks based on the title (case-insensitive substring match). 5. **Loading and Error States** - Display a loading indicator while the data is being fetched. - Handle and display an error message if the API call fails. 6. **Code Quality** - Organize your code with reusable and modular components. - Use appropriate state management with hooks. - Consider using PropTypes (or TypeScript, if you prefer) to type-check your components. - Write clean, maintainable code with comments where necessary. 7. **Styling (Optional)** - You can use plain CSS, CSS modules, or a CSS-in-JS solution like styled-components. - Focus on functionality first; a basic but clear UI is sufficient. 8. **Bonus (Optional)** - Implement sorting (e.g., by title or status). - Add a button to toggle the completion state of a task (note: this is a UI-only change, as the API is read-only). ### Deliverables - **Code:** A link to your repository (e.g., GitHub) with clear instructions on how to run the project. - **Readme:** A short README that outlines: - Your approach. - Any assumptions you made. - Instructions for running the app. - Any additional features or improvements you implemented. ### Evaluation Criteria - **Functionality:** Does the app fetch and display data? Do the filtering and search features work as expected? - **Code Quality:** Is the code organized and maintainable? Are best practices followed? - **Error Handling:** Are loading and error states handled gracefully? - **User Experience:** Is the UI clear and usable? - **Bonus Features:** Any additional enhancements will be considered a plus. --- **Time Suggestion:** Aim to complete the core requirements within 2 hours. If you don’t finish all the optional parts, focus on delivering high-quality core functionality.