Karban Task Management

Drag and Drop

During this project, I've learned how to work with dnd-kit and make draggable content based on examples provided by their playground. You can use drag and drop to change board order on the big screen. You can drag any task between columns. On AddBoardModal and EditBoardModal you can change column order. On AddTaskModal or EditTaskModal you can change the subtask order

Radix-UI

First time I've used it. I wanted to try to improve accessibility features on my project. Beginning was hard but I managed to prepare this app using Radix-UI

FireBase

You can log in by clicking the login button, LoginModal will open if you don't have an account, you have to sign up using RegisterModal, and any changes you do to your task will be uploaded to the FireBase. It also tracks if you have DarkMode On and which current opened board.

React-firebase-hooks

It was used for login and sign-in purposes

useCreateUserWithEmailAndPassword(auth);

useSignInWithEmailAndPassword(auth);

React-loading-skeleton

To improve the user experience when the web is loading

Recoil

For managing states through project boardAtom - when the page is loaded, it keeps all boards, and it's updated with every change modalAtom - keep tracking if any of the models are opened and if yes which one should be opened settingsModalAtom - tracks:

darkMode: boolean;
isSidebarOpen: boolean;
isLoaded: boolean;
activeBoard: string;
isBoardModalListOpen: boolean;
activateColumn: number;
activateTask: number;
activateTaskName: string;

Features improvement

On Firebase all users' boards are uploaded with one property, for performance and readability, creating a collection for each board will be better. In some situations, the code is not DRY. In the future refactor the code to be drier.

Also because the database has a lot of nested levels I'm not sure mapping a couple of times to update a task is a good practice but I couldn't find another solution for this And this nested mapping is occurring a few times in my project.

const updatedBoard = boardState.map((board) => {
if (board.name === settingState.activeBoard) {
const activatedColumns = board.columns.map((col) => {
if (col.name === getValues("status")) {
const updatedTask = col.tasks.map((task) => {
return task.id === editedTask?.id ? editedTask : task;
});
return { ...col, tasks: updatedTask };
}
return col;
});
return { ...board, columns: activatedColumns };
}
return board;
});