Scribd
Upload
8 views

Assignment for React Developer

The document outlines the requirements for a task management application assignment divided into three milestones: Basic, Intermediate, and Advanced. Milestone 1 includes creating a task list with add/delete functionality, a task form with validation, and basic styling, while Milestone 2 focuses on enhancing task properties, validation, interactions, and state management. The 'Good to Have' section suggests advanced features like performance optimization, UI/UX enhancements, and data persistence, with evaluation criteria based on milestone completion and deliverables including a GitHub repository and README file.

Uploaded by

Zaid Siddiqui
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

Assignment for React Developer

The document outlines the requirements for a task management application assignment divided into three milestones: Basic, Intermediate, and Advanced. Milestone 1 includes creating a task list with add/delete functionality, a task form with validation, and basic styling, while Milestone 2 focuses on enhancing task properties, validation, interactions, and state management. The 'Good to Have' section suggests advanced features like performance optimization, UI/UX enhancements, and data persistence, with evaluation criteria based on milestone completion and deliverables including a GitHub repository and README file.

Uploaded by

Zaid Siddiqui
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Please find below the user interface that you need to follow for the assignment-

https://drive.google.com/drive/folders/1QrtifJAE3o1jSph-Rrv659iwtxAQBLst

Milestone 1 (Basic - Must Complete)

1. Task List Display:


* Create a simple list to display tasks with title and description.
* Implement basic add and delete functionality for tasks.

2. Task Form:
* Create a form to add new tasks with title and description fields.
* Implement basic form validation (e.g., title and description cannot be empty).

3. State Management:
* Use React's useState hook to manage the list of tasks.

4. Styling:
* Apply basic CSS to make the application presentable.
* Addition of Accordion is not compulsory. User can directly click on the task and go the the
Edit popup.

Milestone 2 (Intermediate)

1. Enhanced Task Properties:


* Add due date and priority (Low, Medium, High) to tasks.
* Implement edit functionality for existing tasks.

2. Advanced Validation:
* Ensure task titles are unique.
* Validate that due dates are today or in the future.

3. Task Interactions:
* Add a "Completed/ Done task" feature with visual distinction for completed tasks.
* Implement a basic search functionality to filter tasks by title.

4. Improved State Management:


* Use useReducer or Context API for more complex state management.

5. Responsive Design:
* Ensure the application works well on both desktop and mobile devices.
Good to Have (Advanced)

1. Performance Optimization:
* Implement virtualization for the task list to handle large numbers of tasks.
* Use React.memo() and useCallback() to optimize re-renders.

2. Advanced Features:
* Implement a "snooze" feature to postpone due dates.
* Add a "priority sort" function to arrange tasks by priority and due date.
* Addition of Accordion as shown in the UI

3. UI/UX Enhancements:
* Create a dark mode toggle with smooth transition.
* Implement drag-and-drop functionality to reorder tasks.

4. Data Persistence:
* Use localStorage to save tasks between page reloads.

5. Error Handling:
* Implement error boundaries and display user-friendly error messages.

6. Analytics:
* Create a simple dashboard showing task completion rates and overdue tasks.

Evaluation Criteria:

* Milestone 1: Candidates must complete this to qualify.


* Milestone 2: Completion indicates intermediate skill level.
* Good to Have: Any of these features demonstrate advanced skills.

Deliverables:

1. GitHub repository with commit history showing incremental development.


2. README.md file with:
* Setup and run instructions
* Brief explanation of completed features and any known issues
* List of additional features implemented (if any)

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy