✨ Efficient Task Management ✨
---Here’s a sneak peek at the amazing chart visualizations:
This project is built using:
- React.js: For building interactive UIs.
- Next.js: For creating dynamic routes and navigations
- API Integration Layer: To fetch and manage data seamlessly.
- TypeScript (optional): For enhanced type safety and development efficiency.
Feel free to explore the code and learn how it works! 🌟
Follow the steps below to get the project running on your local machine:
- Clone the repo:
git clone https://github.com/adityaS011/taskManagement - Navigate to the project folder:
cd taskManagement - Install dependencies:
npm install - Run the development server:
npm run dev - Open
http://localhost:3000to view it in the browser.
- Tabs: Three task status tabs: Open, In Progress, and Closed.
- Listing tasks: Each tab lists tasks in a table with infinite scroll.
- Keyboard traversing in table: Up/Down to navigate, Enter to open task.
- Task in focus: Opens task in modal with details, comments, and status change options.
- Keyboard traversing in focus modal: Right/Left to navigate, keys 1-3 for status actions.
Task in Focus: When a task is selected (clicked or Entered), it opens in a modal, providing an expanded view of the task details. The status of the task will be shown and can be modified through a dropdown. This modal supports two key functions:
- Adding comments: A comment input box will allow users to add new comments, with an API call made to fetch comments when the task is initially opened.
- Changing task status: Users can change the task status via the dropdown. When a status change is triggered, a confirmation modal appears with options to Proceed or Cancel. Once confirmed, the task is removed from the current list while the modal remains in focus mode until data is refreshed.
Keyboard Traversing in Focus Modal: The modal supports keyboard navigation for quick status changes: 1 for Open, 2 for In Progress, and 3 for Closed.
Additional Features:
- Filter and search support within the table for easy task retrieval.
- Task counts displayed and maintained in tabs.
- Sorting functionality based on creation or update timestamps.
Check out the workflow chart detailing how I approached the problem:
Developed with ❤️ by Aditya Singh. Feel free to connect and collaborate!
This project is licensed under the MIT License - see the LICENSE file for details.