React js Front end

Đã Đóng Đã đăng vào 3 tháng trước Thanh toán khi bàn giao
Đã Đóng Thanh toán khi bàn giao

Note: I need this project today by EOD.

Hey, thanks for agreeing to take up the coding exercise! This exercise will give us a good idea

about your coding style and approach to building software. It would also form the basis of our

future discussions in the hiring process. Please go through it and let us know the date by when

you would submit the solution.

Implement a Task Management Application

Project Overview:

The task is to create a task management web application using React that allows users to

create, manage and organize tasks. The application should include features like searching for

tasks, sorting tasks, and implementing pagination for a responsive layout.

Requirements:

Front-End Development:

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

delete categories.

2. Use React Router to create different routes for task management (e.g., '/tasks',

'/categories').

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,

and Mobile).

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.

API Integration:

 Simulate API calls using local state. Create functions for fetching, creating, editing, and

deleting tasks and categories.

Search:

 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

to Google).

 Users should be able to filter tasks by category.

Sort:

 Users can sort tasks by name, category or date last edited.

 Provide a dropdown to select the sorting criterion.

Pagination:

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

State Management:

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

Testing:

 Write meaningful unit tests for components and functions where appropriate.

Other Requirements:

 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

demonstrates it.

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

Do let us know if you have questions at any time during the assignment. 

Good luck!

Thiết kế trang web React.js JavaScript CSS3 HTML5

ID dự án: #37475230

Về dự án

10 đề xuất Dự án từ xa 1 tháng trước đang mở

10 freelancer chào giá trung bình₹1325 cho công việc này

Hazimbhat

Dear, Thank you for entrusting me with the coding exercise. I am eager to demonstrate my coding style and approach to building software through the implementation of the Task Management Application using React. **Pro Thêm

₹600 INR trong 1 ngày
(5 Nhận xét)
1.9
Siddharth032001

Hello I have read about your project. I'm currently working as js developer. I'm able to make this like you want in single day. If yoh really want this end of the day then message me so i can start working and deliver Thêm

₹4500 INR trong 1 ngày
(4 Nhận xét)
2.1
jadavvijayrr0

Hi, I have read Your project description And I am interested to work on it. I can strongly assure you that you will "GET 101% SATISFACTION" and "HIGH QUALITY WORK" from my end.:) I would love to build an awesome worki Thêm

₹1050 INR trong 7 ngày
(0 Nhận xét)
0.0
surendrab5345

Being a passionated web developer i can fit to complete this project.i have some experience in e-commerce dashboard crud functionality.

₹800 INR trong 7 ngày
(0 Nhận xét)
0.0
kapoorparas1997

Hi, I am having industrial experience of more than 5 years and I will help you to get your work done. Looking forward for your reply yo discuss more on the requirement Thanks Paras Kapoor

₹1500 INR trong 3 ngày
(0 Nhận xét)
0.0
ms7620281

Hello, Greetings! I hope you are doing great. I am writing to express my enthusiasm for the opportunity to collaborate on this project. With over 12 years of dedicated experience in the field, I bring a wealth of exper Thêm

₹1050 INR trong 7 ngày
(0 Nhận xét)
0.0