Kanba

Overview

Kanba is a project where I challenged myself to build a simple, usable Kanban board — without following a ready-made design system. Instead, I studied real-world tools like Trello and Jira, gathered inspiration, and applied my knowledge of frontend technologies to recreate a functional, minimal Kanban experience.

The goal wasn't to reinvent task management, but to turn learning into action — building something real while deepening my understanding of UI architecture, state management, and modern React development.

Technologies

• React — Core frontend framework
• Redux Toolkit — For state management
• Material-UI (MUI) — For fast, consistent component styling
• Vite — For a fast and efficient development environment
• React Router — For page navigation
• hello-pangea/dnd — For intuitive drag-and-drop
• LocalStorage API — To persist data between sessions
• React Hook Form & Zod — For form validation

Key Features

• Minimal & clean Kanban board layout
• Light and Dark mode toggle
• Create, move, and delete tasks, lists and boards
• Smooth drag-and-drop functionality
• State persistence with LocalStorage
• Fully responsive across different screen sizes

What I Learned

• State Management at Scale, Implementing Redux helped me manage complex UI interactions and keep the app scalable and predictable.
• UI/UX Principles, Without a pre-made design file, I learned to think like a product designer — focusing on simplicity, clarity, and usability.
• Theming and Customization, Working with MUI, I learned how to implement dynamic light/dark themes and customize component styles beyond defaults.
• Drag-and-Drop, Implementing DnD taught me how to enhance user experience with natural, touch-friendly interactions.
• Performance Considerations, Building without a backend pushed me to optimize local state management and client-side storage.

Reflection

Kanba is a clear reminder that learning by building is the fastest way to grow as a developer. Rather than focusing on every possible feature, I focused on the essentials — delivering a minimal, polished app where every detail was an opportunity to practice and learn. It strengthened not just my React and Redux skills, but also my ability to think critically about user experience, design, and product development.