React Kanban Board by CodebaseMentor

This is an advanced project in React that allows you to create a dynamic and interactive Kanban board. However, it currently has several issues that need to be resolved:

1. Tasks aren't fetched from the server.
2. The application doesn't handle the onDragStart, onDragOver, onDrop, and onDragEnd events.
3. Task changes aren't being stored server side, so changes are lost during refresh.

Learning Objectives

You will learn and gain experience with:

• Implementing drag-and-drop functionality in React by handling various drag events, such as drag start, drag over, and drop.
• Managing application state during drag-and-drop operations to ensure consistent behavior.
• Updating data on the server after making client-side changes.
• Properly resetting application state after each drag-and-drop operation to ensure the UI behaves correctly.

How to start working

1. Fork this repo and clone it locally.
2. Install the dependencies by running npm i
3. Run the app locally by running npm run dev:client to start the frontend, and npm run dev:server to start the backend.
4. Open localhost:3000 in your browser to see the current state of the project.
5. Fix all the issues (hints are provided as TODO comments in the code)
6. Once all your solutions are complete, create a single Pull Request to this repository
7. Check if your solutions passes our automated tests. You need to create an account on CodebaseMentor to do this.

Need help?

The best way to ask for help is to ask our Discord community.

Click here to join the CodebaseMentor Discord.

Want more challenges?

Sign up to view more challenges and join our Discord to get notified when new challenges are released.