Simple Task Manager

This assessment requires the development of a real-time task manager, featuring a Kanban board interface. Data synchronization will be achieved through a WebSocket service.

Note

• ❤️ Feel free to add any improvements or suggestions you consider.

1. Goals
2. Tech Stack
3. Installation and running the project
4. Samples
5. Dev notes
6. Next steps

🎯 Goals

More details in CHALLENGE.md file

• Enable real-time synchronization of tasks using a provided mock WebSocket server.
• Create a task board with three columns: To Do, In Progress, and Done.
• Implement drag-and-drop functionality to reorder tasks or move them between columns.
• Load a pre-populated list of 50-100 tasks from a mock API

Tech Stack

This conceptual test has been developed using the following technologies:

• Front-end
  • React
  • TypeScript
  • Ant Design

Installation and running the project

The project requires:

• NodeJS

Clone the repository:

git clone https://github.com/christianjtr/simple-task-manager.git

Scripts:

Before executing these scripts, you must run npm install in the directory you just downloaded/cloned the codebase. Other scripts are in package.json file. Also, you may consult the CHALLENGE.md file.

# Start the development environment
> npm run dev

# Run unit tests
> npm run test

Samples

1. Basic kanban board

Dev notes

Strategy followed

1. Basic implementation of Kanban Board UI (Component Composition)
2. Integrate WebSocket Data Synchronization (Custom Hook)
3. Redux integration (WebSocket/MockAPI orchestration)
4. Implement task management features
5. Ensure some real-time updates

Component composition

graph TD
    A[TaskBoard] -->|Stages| B(TaskBoardStage 1);
    A -->|Stages| C(TaskBoardStage 2);
    A -->|Stages| D(TaskBoardStage 3);
    B -->|Tasks| E[TaskCard 1];
    B -->|Tasks| F[TaskCard 2];
    C -->|Tasks| G[TaskCard 3];
    D -->|Tasks| H[TaskCard 4];
    D -->|Tasks| I[TaskCard 5];
    style A fill:#f9f,stroke:#333,stroke-width:2px;

Loading

Next steps

1. Fine-tune the application and enhance overall styles.
   • Align components with third-party design framework (Ant Design).
2. Polish interactions, e.g., transition tasks across statuses.
   • Work on transitions, animations, affordance, and similar.
3. Improve the syncing process between the service layer and state manager.
   • Better management of WebSocket/Redux layers.
   • Offline support.
4. Optimize performance and elevate error handling.
   • Manage assets, caching strategies, etc.
   • Make sure that potential flaws are covered.
5. Add unit tests to the implementation.