Submitted almost 2 years ago

Kanban task management web w/ (React + Javascript + Tailwind )

react, tailwind-css, react-router

MrDannie•50

@MrDannie

A solution to the Kanban task management web app challenge

Preview Code

Solution retrospective

Hi guys!👨‍💻 I'm super exited completing this challenge! I've a learnt a whole lot as this is first largest app I have built using React and Tailwind (I have always been an Angular developer). I encountered a lot of challenges, bugs and errors in the process of developing this application, which I learnt a lot from. And also thanks to Google, youtube & stack overflow, I would probably had been stuck on some errors forever 😂 :)

Some of major areas I encountered challenges while developing this application were State Management & Passing data btw components. However I believe was able to do a good Job at this as it pushed me to learn how to effectively utilize tools like Context Api, useRef, useEffect, props and callback.

I will love to receive feedbacks from the community :

How long did it take you to complete this project (it took me 1 and half month)?
What was the biggest thing you learnt building this project?
What were your most difficult areas?

Pls kindly also rate my work on a scale of 1-10, I would be also pleased to know what areas I should in improve on?

Thanks! 😊

Code

Please log in to post a comment

Community feedback

Fazza Razaq Amiarso•2,320
@fazzaamiarso
Posted almost 2 years ago
Hi @MrDannie! It's awesome that you complete this complex project while learning a new framework!

I just have a couple suggestions for you:
- I noticed that you use react-hooks-global-state for Global State. I suggest to take a look at Jotai which do the same thing and same maintainer, but still active and maintained.
- For some side-effects like inserting item into LocalStorage, it's better to first do it inside Event Handler, rather than useEffect that can be tricky to track. You can refer to this docs. For example in App.jsx
```
// instead of this
useEffect(() => {
    localStorage.setItem("BoardData", JSON.stringify(boardData));
  }, [boardData]);

// do this
  const updateAppData = (data) => {
    setAppBoardData(data);
    // here, what trigger the side effect is immediately obvious
     localStorage.setItem("BoardData", JSON.stringify(data));
  };
```
I hope it helps! Cheers!
Marked as helpful

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