Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

MrDannie 50

@MrDannie

Desktop design screenshot for the Kanban task management web app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
5guru
View challenge

Design comparison


SolutionDesign

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! 😊

Community feedback

@fazzaamiarso

Posted

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

0

MrDannie 50

@MrDannie

Posted

Thank you so much @fazzaamiarso, I appreciate the feedback, twas really helpful. I will revisit the code and see how I can incorporate that. Thanks a bunch!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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