React Kanban Task management web app : react , redux , tailwind

Pubblicato il: 21 aprile 2023
sul canale di: code with DearBoy
47,254
1k

📚 Materials/References:
GitHub Code (give it a star ⭐):
github.com/Hesam-Dearboy/kanban-task-management-react-tailwind (copy this line)
demo (URL) :
kanban-task-management-react-tailwind.vercel.app (copy this line)


In this video, I'm excited to showcase my solution to the Kanban task management web app challenge from Frontend Mentor. The challenge required me to build a web app where users can create, read, update, and delete boards and tasks, mark subtasks as complete, and move tasks between columns. I also implemented a bonus feature that allows users to drag and drop tasks to a new column.

To build this app, I used TailwindCSS for styling, React and Redux for state management, and the Drag and Drop API for the bonus feature. In the video, I'll walk you through the app's features, demonstrate how to use it, and explain the code behind it.

Overall, this project was a great opportunity for me to improve my coding skills and learn new technologies. I hope my solution inspires you and helps you in your own coding journey. Thanks for watching!

Timestamps

00:00 Intro
00:47 show app
01:30 Environment setup
07:40 create dark mode hook
13:05 create header component
28:11 configure redux
34:46 create header dropdown
01:03:05 create add & edit board modal
01:47:45 create add & edit task modal
02:32:14 create elipsis munu
03:03:00 create empty board component
03:13:17 create center component (column and tasks)
03:37:00 create task modal
04:35:42 drag and drop api (drag and drop tasks)
04:48:35 create Sidebar component


In questa pagina del sito puoi guardare il video online React Kanban Task management web app : react , redux , tailwind della durata di ore minuti seconda in buona qualità , che l'utente ha caricato code with DearBoy 21 aprile 2023, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 47,254 volte e gli è piaciuto 1 mille spettatori. Buona visione!