React based web application using redux, shadcn and tailwind.
Design comparison
Solution retrospective
This was my first time working on a feature for switching between light and dark modes. It took me some time to explore the best ways to utilize the available resources effectively.
What challenges did you encounter, and how did you overcome them?This is my first project built from scratch using React. I simultaneously read and worked on features, which helped me grasp the concepts more effectively. At times, I faced challenges with React libraries like React Hook Form and IndexedDB. To overcome these, I referred to the documentation and applied the concepts directly to the project.
What specific areas of your project would you like help with?As I come from an Angular background, I would greatly appreciate your feedback on the following areas:
Component Structure and Usage: Is my approach to handling components—such as their structure, usage of props, and implementation of hooks—well-organized, or are there areas where I could improve?
State Management Choices: Should Redux be used universally for data handling, or is it acceptable to use Context API selectively, as I did in one instance despite having a Redux store?
General Improvements: Any other suggestions for improvement—be it in terms of CSS, best practices, or other aspects—are more than welcome.
Community feedback
- P@karthik2265Posted 9 days ago
Hi akash,
here are my thoughts/feedback on the solution:
the functionality and design looks good. The responsiveness was also well handled. A small bug, I noticed that when a task is added with 0 subtasks (leaving the first subtask field empty when adding the task) it just renders 0 without any additional text to suggest that 0 means 0 subtasks.
code
- good idea to have draggable and droppable components, this way if we want to change the library in the future we only need to change in one place.
- for the file structure, for me it makes sense to have the pages folder inside the src folder instead of inside the components folder and also note that it is better to follow a consistent naming pattern for files, I see that the files under the ui folder do not align with other component file naming structure which is pascal case. Also, the files inside pages folder could be organized better by placing each page file inside a folder and a dedicated folder inside the each page folder to holds the components used inside the page. Ex: home page would have structure like this home/index.tsx (holds the main page content), home/components (holds the components used in home page)
const listeners: Array<(state: State) => void> = [];used for dispatching actions and linked with setState, this could be simplified by using a useReducer hook provided by react.- redux for data handling or context with useEffect for client side data fetching/handling was used in the past but as of now many modern projects use libraries like tanstack query for data handling in the app on client side and another option is to use next.js or remix which handle data related updates on the server side with support for server rendered components. I liked working with remix and next.js, do try them out.
overall the solution looks good, nicely done!
Marked as helpful0P@kakashraoPosted 8 days ago@karthik2265 Thanks, I really appreciate your feedback. There are still many things I need to explore, thanks for pointing this out. I will keep these points in mind in the future projects.
1
Please log in to post a comment
Log in with GitHub
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