Skip to content
Submitted 22 days ago

Kanban Task Management Web App

next, strapi, zustand, react, react-hook-form
P
LVL 4
BarrieDirk1,200
@barriedirk
A solution to the Kanban task management web app challenge

Solution retrospective


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

I focused on solving real-world engineering challenges:

🔹 State Orchestration: Used Zustand with shallow listeners to keep the UI snappy, even with complex board structures. 🔹 Optimistic UI: Implemented Server Actions combined with useTransition and toast.promise to ensure a zero-latency experience during task reordering. 🔹 Efficient Persistence: Developed a Numerical Fractional Indexing algorithm to handle drag-and-drop updates in O(1) time complexity, avoiding expensive database re-indexing. 🔹 Decoupled Architecture: Integrated a Strapi Headless CMS as the source of truth, using the Mapper Pattern to keep the frontend agnostic of the backend schema.

Frontend Environment: Next.js Tailwind CSS Zustand (State Management) @hello-pangea/dnd (Drag and Drop Interactions)

Backend Environment: Strapi Cloud (Headless CMS) SQLite (Local configuration)

The Infrastructure Challenge This project is powered by a Strapi Headless CMS hosted on the free tier. To ensure a smooth experience for reviewers, I've implemented a scheduled warm-up (Cron Job) that keeps the API active from 7 AM to 6 PM (EST) only for a week.

If you access the demo outside these hours, you might experience a 10-20 second delay on the first load while the instance "wakes up." Once active, the Optimistic UI and Zustand state management ensure an O(1) interaction speed.

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

The biggest challenge was managing Strapi, as it was new to me and I wanted to use it for this project.

Understanding how it returns data and how to send it took some time. Additionally, with SQLite (local), orphaned columns were left when a board was deleted, and a lifecycles.ts file had to be configured to remove the board's child columns.

Fortunately, the documentation and a Google search provided solutions to most of my questions.

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

For this challenge, I focused on delivering a solid MVP (minimum viable product), so I’m satisfied with the current result.

Overall, I’m happy with how it turned out and definitely open to feedback — there’s always something new to learn.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on BarrieDirk’s solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord