Frontend Mentor - Kanban task management web app solution

This is a solution to the Kanban task management web app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Create, read, update, and delete boards and tasks
• Receive form validations when trying to create/edit boards and tasks
• Mark subtasks as complete and move tasks between columns
• Hide/show the board sidebar
• Toggle the theme between light/dark modes
• Bonus: Allow users to drag and drop tasks to change their status and re-order them in a column
• Bonus: Keep track of any changes, even after refreshing the browser (localStorage could be used for this if you're not building out a full-stack app)
• Bonus: Build this project as a full-stack application

Screenshot

Links

• Solution URL: david-tejada/fem-kanban-task-management
• Live Site URL: Frontend Mentor | Kanban task management web app

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vite
• React - JS library
• React Router
• Tailwind CSS
• Headless UI

What I learned

Selecting the stack for this project has been tricky. Originally I picked NextJS. I thought it would be a good idea to create this project full stack from the beginning and I already had used NextJS. Mid project I realized that I needed to learn more about databases and backend. At that point I was more interested in practicing more with React so I decided to just use local storage. Using local storage with NextJS quickly becomes a mess of hydration errors. At that point I decided to just use React and Vite to get more practice building React apps. Further ahead I added React Router to the stack, which brought some additional challenges.

The most important lesson that I have learned doing this challenge is that no matter what stack you pick you're gonna face many difficulties. If I went back I would just keep on with my initial idea of using NextJS and learn more about backend development.

Author

• Website - David Tejada
• Frontend Mentor - @david-tejada