Project Breakdown

Kanban Board

Provide a user friendly task management app that allows a user to do basic CRUD functions to keep better track of their tasks.

Role
Web Developer
Tools
Next.jsTypeScriptTailwind CSSMongoDBNext AuthShadCNFigmaJest

Authorization

  1. Users encounter a login/registration interface upon visiting the home page.
  2. Existing logged-in users with active sessions are redirected automatically to the kanban interface.
  3. Authentication occurs via email credentials or email/password account creation.
  4. Next Auth validates and either checks existing accounts or creates new ones while establishing sessions.
  5. The server forwards session credentials to the client to grant access.

CRUD Functionality

React's useContext hook manages two state layers: user data and selected board information. These track details for editing, deletion, or user display.

Create

Users add tasks by clicking an add button, completing a form, submitting to the server, and viewing new tasks on the board.

Read

Users view all tasks on the kanban board and access task details by selecting individual cards.

Update

Users edit tasks through card selection and form modification, with changes saved to the database.

Delete

Users remove tasks via card selection and delete button, with removal reflected immediately on the board.