Kanban board using React, TypeScript, and Tailwind CSS

What are you most proud of, and what would you do differently next time?

Since this was the first big frontend project I have done, I am proud of the organization of my file structure, having a components, hooks, models, and store folder to organize the files. I am also proud of how well I matched the design!

Next time, I believe setting the correct typography and colors from the start would be helpful. Also I want to try creating a detailed component tree of each section, and building out the common UI components of the app before starting the full build. Also I would try different technologies, such as Jotai and Zustand, rather than Redux, for state management, and CSS modules instead of Tailwind CSS.

What challenges did you encounter, and how did you overcome them?

The first challenge I faced was how to start building such a huge project. I came to the idea of creating a component tree for the main sections of the app, and breaking them down everything into components and sub-components (example below).

• Sidebar
  • Logo
  • BoardItem
  • LightSwitch

Another challenge I faced was creating a dropdown on a modal. For some reason, it would show behind the modal, so I had to programmatically define the element that the dropdown would anchor to and just hardcode values such as its position on the screen (if user resizes while dropdown is open, then this messes up its UI)

Another challenge was working with Redux-Toolkit. I created model types for the board, column, task and subtask, and I was receiving a serializable error. So I had to implement a toPlainObject() function to convert the data and also implement a serializeMiddleware() function

What specific areas of your project would you like help with?

The last 2 challenges I mentioned above.

For the first challenge, I hard-coded the values to determine the position of the dropdown. So if there is a better way to do this, then that would be helpful. Or maybe I just have to rely on the default browser element and not create a custom dropdown on a modal. (this component is StatusDropdown.tsx in src/components/Task)

For the second challenge, which was working with Redux-Toolkit, I was just wondering if my redux store followed the best practice. Files like board-slice.ts and index.ts in src/store.