React js Front-end
Paid on delivery
1. Create a React application with the following components:
a. TaskList: Display a grid of tasks with columns for task name, description,
category, and the date last edited. The number of columns displayed should vary
based on the screen size (3 columns on Desktop, 2 on Tablet, and 1 on Mobile).
b. TaskForm: A form to add or edit tasks. Include fields for title, description,
category, and status (completed or not).
c. TaskTable: Display a table view of tasks with columns for task name,
description, category, and the date last edited. The table should always match
the width of the grid.
d. SearchBar: Allow users to search for tasks. The search should match task
names and descriptions. Support exact matches when the search query contains
a phrase within double quotes.
e. SortDropdown: Allow users to sort tasks by name or date last edited.
f. Pagination: Implement pagination using 'page numbers' style. Each page should
display a specified number of tasks (e.g., 10 tasks per page).
g. CategoryList: Display a list of categories and allow users to create, edit, and
2. Use React Router to create different routes for task management (e.g., '/tasks',
3. Implement a Redux store to manage the application's state. Define actions, reducers,
and selectors for tasks and categories.
4. Connect components to the Redux store for data management.
5. Implement a responsive layout that adapts to different screen sizes (Desktop, Tablet,
1. Ensure that the UI state is preserved when the web page is refreshed. The data loaded
after a refresh should match the search query and sorting criteria.
Simulate API calls using local state. Create functions for fetching, creating, editing, and
deleting tasks and categories.
Users can search for tasks by entering a search query.
The search should match task names and descriptions.
Support exact matches when the query contains a phrase within double quotes (similar
Users should be able to filter tasks by category.
Users can sort tasks by name, category or date last edited.
Provide a dropdown to select the sorting criterion.
Implement pagination using 'page numbers' style.
Show links to navigate between pages.
Display the total count of tasks matching the current search and sort criteria.
The grid content should be paginated based on the search and sort criteria.
The table rows should match the data displayed in the grid.
Preserve UI state when the web page is refreshed. Ensure that the loaded data aligns
with the search query and sorting criteria.
Consider using routes/URLs to manage UI states for the entire app.
Write meaningful unit tests for components and functions where appropriate.
Avoid using 3rd-party styling/component frameworks.
Provide a Git repository link containing project files.
If following a Test-Driven Development (TDD) approach, commit in a sequence that
Include a [login to view URL] file with instructions on how to run your project and a brief
explanation of your design choices.
Implement any necessary validation for form inputs (e.g., title and description fields).
Ensure proper error handling for API calls or user interactions.
Project ID: #37470491
About the project
24 freelancers are bidding on average ₹2050 for this job
I am a fullstack developer, I'm interested to work with you. I will be more helpful to you. Give me design if you have. I'm ready to discuss your project and start immediately. Looking forward to hearing from you.