Kanban Web App
Manage and track your tasks with my full-stack MERN web app. Switch between dark and light modes to suit your style. You can sign up to save your data or use it without an account, thanks to local storage. Enjoy intuitive drag-and-drop task management.
- MongoDB
- Express.js
- React
- Node.js
- Tailwind
- Zustand
- MongoDB
- Express.js
- React
- Node.js
- Tailwind
- Zustand
For this project, I used the MERN stack (MongoDB, Express, React, Node.js), Tailwind CSS, Zustand, Radix UI, and Beautiful DnD.
MERN Stack: The MERN stack was a solid choice. MongoDB was perfect for storing all the task data with its flexible, document-based structure. Express provided a strong backbone for the backend, allowing me to build a robust API. React’s component-based architecture made the frontend development smooth, and Node.js brought everything together on the server-side. It felt like having a well-oiled machine at my fingertips.
Tailwind CSS and Zustand: I used Tailwind CSS and Zustand because I’m already familiar with them from previous projects. Tailwind’s utility-first approach let me build a clean, responsive UI without drowning in custom CSS, and Zustand’s simplicity and flexibility made state management a breeze.
Radix UI and Beautiful DnD: To enhance the user experience, I used Radix UI for accessible and customizable UI components, ensuring a consistent look and feel across the app. For drag-and-drop functionality, Beautiful DnD made implementing smooth and intuitive interactions straightforward, essential for the dynamic reordering of tasks on the Kanban board.
Project Insights
After completing several projects, I was itching to create something that would really up my productivity game. That’s when I decided to build a Kanban web app. I needed an efficient tool to manage tasks, and what better way to improve my skills than by building something I’d actually use every day? My main goal was to master the MERN stack and develop a tool that could help others streamline their workflow just as much as it would help me.
Keeping everything in sync with tasks updating, drag-and-drop features, and user logins was tough. But, thanks to Zustand's easy-to-use tools, managing the app’s state became possible.
Making the app fast and easy to use was essential. The MERN stack (MongoDB, Express.js, React, and Node.js) gave me a strong base, but I had to make sure database queries were quick and React components were optimized for better performance. Tailwind CSS was a big help in creating a responsive and clean interface without much hassle.
Using Radix UI had its learning moments. It took some time to get the hang of it, but it made the app accessible and visually appealing, which was a key goal.
Adding drag-and-drop functionality with Beautiful DnD added complexity. It was challenging but rewarding to implement smooth interactions, making the Kanban board user-friendly.
Throughout the project, my focus was on creating a seamless and efficient user experience. I wanted the app to look great and work well. Lessons from my previous projects, like maintaining clean code and effective state management, were invaluable.
In hindsight, this project was a turning point. It helped me refine my skills and deepen my understanding of full-stack development. The challenges I faced taught me important lessons about performance, design, and state management, which will benefit me in future projects.
This project was a treasure trove of lessons. Creating a working and complete project using the MERN stack was a major milestone. Building a full-stack application from scratch gave me a deep understanding of how the different parts interact, from database management with MongoDB to creating dynamic user interfaces with React and server-side scripting with Node.js.
Radix UI was a game-changer in terms of accessibility and customization. It taught me the importance of building inclusive applications that everyone can use. The pre-built components saved me time and ensured a polished, professional look.
Lastly, Beautiful DnD made creating a dynamic and interactive user experience much easier, which is essential for a Kanban board.
Other Projects
- Javascript
- Sass
- HTML
A Pomodoro-inspired timer that is a progressive web app, allowing offline use. It features customizable appearance options and provides notification alerts.
Explore
- Next.js
- Tailwind
- Zustand
This multi-page e-commerce website, built with Next.js, is fully responsive and uses local storage to retain cart items. It features a modern design and intuitive navigation for an enhanced shopping experience.
ExploreMessage Me
Got an idea you want to bring to life? Let's team up and make something amazing. Whether it's a web app, an online store, or a personal portfolio, I have the experience and passion to help you make it happen.