Development Time

This project is a task management application built with a modern web stack, focusing on modularity and reusability. Below is a breakdown of its structure and features:

this application is available at Vercel, Click here to access

• React 19: Used for building the user interface with a component-based architecture.
• TypeScript (v5+): Provides static typing, improving tooling and preventing common bugs by enforcing types.
• Vite (v5+): A fast build tool and development server that optimizes the development experience with features like hot module replacement.
• React Router (v7+): Manages client-side routing to navigate between different views of the application, such as HomePage and TodoPage.
• Tailwind CSS (v3+): A utility-first CSS framework used to style the application quickly and consistently.
• Dnd Kit (v6): Used to implement drag-and-drop functionality, allowing tasks to be reordered interactively.

• Component-Based Design: Reusable and modular components like BoardSection, SortableTaskItem, and InputCustom.
• State Management: Centralized global state using ManageDataContext with scalable logic for tasks.
• Drag-and-Drop Functionality: Interactive task reordering with @dnd-kit/core and @dnd-kit/sortable.
• Responsive Design: Consistent and adaptable UI with Tailwind CSS, optimized for all devices.
• Testing Strategy: Reliable components tested with Vitest for functionality and behavior.
• Separation of Concerns: Organized directories for components, contexts, services, icons, and utilities.
• Backend Integration-Ready: Local state logic can be easily replaced by API calls in the future.

• Reusability: The project is designed with reusable components such as BoardSection, InputCustom, and SortableTaskItem. These self-contained components can be easily reused across different parts of the application.
• Tests: The project uses Vitest for unit testing to ensure component reliability. Tests for components like BoardSection, InputCustom, and SortableTaskItem validate their behavior. Additionally, tests are run using Playwright for end-to-end testing.
• Context Management: The ManageDataContext manages the state for tasks, providing functions for adding, updating, and reordering tasks. This approach allows the application to scale and maintains a clear separation of concerns. The functions in the context could eventually be replaced with API calls.
• Drag-and-Drop: The project includes drag-and-drop functionality using @dnd-kit/core and @dnd-kit/sortable, enabling users to reorder tasks within sections.
• Responsive Design: The application is designed to be responsive, adapting to various screen sizes and orientations. The drag-and-drop functionality is also optimized for touch devices, making it suitable for mobile use.

1. Clone the repository:

git clone https://github.com/wevertoum/code-assessment-fe.git

2. Install the dependencies:

yarn install

3. Run the application:

yarn dev

4. Access the application at http://localhost:5172.

1. On the root folder, run the following command:

yarn test