Developed Kanban using React, Typescript, Zustand and RadixUi
Design comparison
Solution retrospective
Creating a functional and attractive Kanban site: I managed to implement all the necessary functions while maintaining an aesthetic and user-friendly interface.
Successful integration of Zod and UseFormHook: Careful work on the integration of these libraries allowed us to ensure smooth work with forms and data validation.
Accessible Design: The use of Radix and extensive testing ensured that the site was accessible to users with disabilities.
Theme Switching: Implement the feature of switching between light and dark theme without compromising performance and usability.
What challenges did you encounter, and how did you overcome them?Difficulties:
- Zod and UseFormHook Integration: Both libraries are designed to work with forms, which required careful integration to ensure smooth operation.
- Accessibility: Creating inclusive UI components using Radix required extensive testing and ensuring compliance with WCAG standards.
- Themes: Implementation of switching between light and dark theme without compromising performance and usability.
Overcoming:
- Zod and UseFormHook: A thorough study of the documentation and code examples of both libraries allowed us to find solutions for their effective integration. The use of hooks and function composition promoted modularity and code reuse.
- Accessibility: Regular testing with accessibility tools and use of accessible Radix components ensured WCAG compliance.
- Topics: Using CSS variables and media queries made it possible to change the color scheme of the entire site with minimal coding. Careful performance optimizations ensured smooth switching between themes.
Enhancing the project:
- Clarity and conciseness: Ensure your description is clear, concise, and easy to understand for a non-technical audience.
- Highlighting key features: Emphasize the most impactful features and functionalities of your project.
- Quantifying achievements: Use metrics and data whenever possible to demonstrate the success of your project.
- Tailoring to the audience: Adapt your description to the specific interests and expectations of your target audience.
Community feedback
- @alex931dPosted 7 months ago
Hey im sure you have all the functionality but on mobil the sidebar fills up 80% of my screen and the modals are not fitted for mobil view and to be honestly i don’t understand when i make a new kanban board that each column needs 4 or 5 characters it wouls be nice with some user feedback and more error handling to me it looks like you haven’t tested your page very much and i think you should work more on the accessibility especially when creating larger apps like the kanban app even if its just purely a frontend project :) hope it helps
Marked as helpful0@mad-zephyrPosted 7 months ago@alex931d Hi, thank you very much for taking the time to look over my solution. I agree that adaptation for mobile devices needs to be delayed and I will decide this in the coming days. with the rest, I would say not. the limit of perfection and as a basis I took the figma design with all business requirements including convenience for users. In any case, thank you for such detailed feedback.
0@alex931dPosted 7 months ago@mad-zephyr glad to hear i will check out your solution in the coming days soo :)
0@mad-zephyrPosted 7 months ago@alex931d Don’t rush to check it, I'll let you know when it's ready :)
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