## 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.