[React, TS, Recoil, Router, Formik + Yup, DND, vite] Kanban web app

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

I'm most proud of effectively utilizing React Router (react-router-dom) to manage routing and modals within the application. By leveraging React Router's capabilities, I implemented modal dialogs that are seamlessly integrated into the app's routing system. This approach allows users to navigate directly to specific tasks or boards via URLs, enhancing the user experience and making the application more intuitive.

Additionally, I'm pleased with how I used Recoil for state management. Recoil provided a simple and efficient way to manage global state without the complexities of prop drilling or the overhead of more cumbersome state management libraries. It made the state management process straightforward and scalable.

Next time, I would aim to optimize the component structure earlier in the development process. Initially, I considered creating separate components for the sidebar and the mobile navigation modal. However, I realized that by using native CSS features, I could control this group of components more effectively. By applying CSS techniques like media queries and conditional rendering, I was able to create a single Sidebar component that adapts to both desktop and mobile views. This approach reduced code duplication and simplified maintenance.

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

One of the main challenges was designing a responsive sidebar that functions well on both desktop and mobile devices. My initial plan was to create two separate components:

Sidebar for desktop view. Mobile Navigation Modal for mobile view. However, this would have led to duplicated logic and styling inconsistencies. To overcome this challenge, I explored native CSS solutions that would allow a single component to adapt its layout based on the viewport.

By utilizing CSS media queries and flexbox layouts, I managed to create a single Sidebar component that:

Displays as a sidebar on larger screens. Transforms into a modal navigation menu on smaller screens. This approach not only streamlined the component architecture but also improved the user experience by providing consistent behavior across devices.

Another challenge was implementing modals using React Router. I wanted the modals (e.g., task details, edit forms) to be part of the routing system so that each modal could have its own URL. This allows users to share links to specific modals and enhances navigation.

To achieve this, I used React Router's useLocation hook and managed background locations to control the rendering of modals over the existing content.

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

State Management Best Practices: While Recoil has been effective, I'd appreciate feedback on best practices for scaling state management in larger applications. Are there patterns or techniques within Recoil (or alternative libraries) that could improve efficiency and maintainability?

Performance Optimization: Any suggestions on optimizing the performance of the drag-and-drop feature would be helpful. I'm curious if there are more efficient ways to implement this or if there are alternative libraries that might offer better performance.

Please feel free to provide any feedback or suggestions on these areas or any other parts of the project you think could be improved.