Skip to content

sasanqc/kanban-web-app-nextjs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

510cc55 · Jun 26, 2023

History

19 Commits
Jun 25, 2023
Jun 24, 2023
Jun 25, 2023
Jun 24, 2023
Jun 25, 2023
Jun 24, 2023
Jun 24, 2023
Jun 25, 2023
Jun 14, 2023
Jun 26, 2023
Jun 22, 2023
Jun 24, 2023
Jun 24, 2023
Jun 21, 2023
Jun 14, 2023
Jun 14, 2023
Jun 26, 2023
Jun 15, 2023
Jun 25, 2023
Jun 25, 2023
Jun 14, 2023
Jun 25, 2023
Jun 14, 2023

Repository files navigation

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

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

Built with

  • Typescript
  • Next.js - React framework
  • React - JS library
  • MongoDB and mongoose library to persist data on server side.
  • Tailwind CSS for styling
  • Redux toolkit for UI state management
  • react-query for remote state management
  • react-beautiful-dnd for drag and drop

Author