Kennan task management web app with workmode

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

2. State Management with Redux Toolkit Managing state efficiently in complex applications can be challenging, but with Redux Toolkit, I implemented a streamlined state management system. Features like:

Updating the status of tasks (e.g., moving a task from "To Do" to "In Progress") Real-time syncing of task changes across the app These elements ensured that my app provides a consistent and intuitive user experience.

3. User-Centric Features I put a strong focus on usability and features that improve productivity, such as:

Dynamic Drag-and-Drop Functionality: Users can move tasks between columns effortlessly, making task organization intuitive. Subtask Management: The ability to track subtasks within larger tasks ensures users can break down their workload effectively. Pomodoro Timer Integration: By including a Pomodoro clock, users can boost their focus and manage their time better while working on tasks. 4. Modern Design with Tailwind CSS Design is an essential part of user engagement, and I’m especially proud of how I used Tailwind CSS to create a responsive and modern UI. Key highlights include:

A dark mode toggle to improve accessibility and visual comfort. Clean and minimalistic designs that align with the principles of user experience. 5. Learning and Problem-Solving During development, I faced challenges, such as managing complex forms with React Hook Form and validation with Yup. Overcoming these hurdles required creativity and persistence, which I’m proud to say helped me grow as a developer.

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

1. Managing Complex State Across the Application One of the biggest challenges was handling the complex state of the app, particularly with tasks, subtasks, and their statuses. Ensuring that changes were reflected across all components (e.g., moving a task from "To Do" to "In Progress") required a reliable and scalable state management solution.

How I Overcame It:

I used Redux Toolkit to centralize and manage the state effectively. Leveraging createSlice and thunk middleware, I streamlined task updates and ensured consistent state changes across the app. This approach allowed me to manage data flow predictably and minimize bugs when updating or reordering tasks.

2. Implementing Drag-and-Drop Functionality Adding a drag-and-drop feature for moving tasks between columns was technically challenging, as it involved tracking the task’s position and dynamically updating the UI without disrupting other features.

How I Overcame It:

I used the React Beautiful DnD library, which simplified implementing drag-and-drop interactions while maintaining accessibility. By thoroughly testing the feature in various use cases, I ensured the task reordering worked seamlessly. This not only improved user experience but also taught me how to debug intricate UI interactions.

3. Responsive and Accessible UI Design Building a responsive and accessible design was another challenge. Tailwind CSS provided a strong foundation, but fine-tuning the layout for different devices and ensuring accessibility (e.g., keyboard navigation and dark mode) required extra attention.

How I Overcame It:

I used Tailwind’s utility classes to achieve a responsive layout and tested the app on various screen sizes to refine the design. For accessibility, I followed WAI-ARIA guidelines, ensuring keyboard navigation and focus states were fully functional. This resulted in a modern, user-friendly design that works well across all devices.

4. Validating Forms and Handling Errors Form handling was tricky, especially when implementing features like adding subtasks or updating a task’s status. I needed robust validation to ensure all input data was accurate without overwhelming the user with error messages.

How I Overcame It:

I integrated React Hook Form for efficient form handling and Yup for schema-based validation. I built custom error messages to provide clear feedback to users while maintaining an intuitive user flow. This solution ensured that users could interact with forms seamlessly while minimizing potential mistakes.