Kanban Board is an operational project that allows user to manage and visualize their workflow. It works exactly like Jira, which is an agile project management tool that is designed to help their users to visualize thier work, limit work-in-progress, and maximize efficiency and flow of their projects.
JavaScript/React/MUI and Python are used for the front-end and the back-end code development. For handling communication between front-end and back-end I used Flask and Axios. For storing and retriving the data from database, I have used MongoDB. You can view the source codes in repository here!
In this project, I learned to create drag and drop on a div elemnt manually, without installing a DND package to do the work.
Initial board, as it fetches previous data from database and siplays.
Users can drag and drop tasks acoss columns and rows, and the order will be saved the same in the database. As moving the tasks along the columns, the status changes as well, depending on where the task is dropped.
Users can drag and drop tasks across the board.
Double clicking a task, opens dialog that allows for leaving comments and viewing pre-existing ones.
Clicking the plus sign near the backlog, allows to add new tasks to the board.
Since this project was a relitively easy, I have also implimnted on NEXT.js framework to become familiar with server side rendering. For handling the front-end code, I have used TypeScript and learned the basics of NEXT.js and TypeScrips and assigning types. The source code is available in the repository.
Initial page as it renders and uploads data from database, to display on table.
I haven't impliment adding commnets and adding new tasks in this application.
The main purpose of this project was to become familiar with NEXT.js, which I find it quite similiar and in some aspects much easier than React, specially for handling rewrites and forwarding to backend.
Dragging across columnes and rows, changes the order and status of tasks on the board as well as database.
As for learning and becoming familiar with typescript, I find it to be extreamly case sensative, where mistakes in one script could result in error in other ones. I think it takes a long time to come up with a proper code, to assing types and make sure its matches the variables and datas that we have, which I think takes forever!
