Trello UI

Technical Stack

• Framework: NextJS 14
• UI / CSS Library: MUI v6
• State Management: Tanstack Query v5, Zustand
• Form Management: React Hook Form
• Drag and Drop: Dnd-kit
• Realtime: socket.io
• Notification: react-toastify
• API: Rest APIs of repo trello-api
• More...

Main feature in project

• Auth

  • Register account
  • Verification account by link from email
  • Login with verified account
  • Refresh token
  • Protected routes

• Profile

  • Update profile
  • Change password

• Board List

  • Display board list
  • Pagination board list
  • Create new board
  • Search board

• Board Detail

  • Drag and drop columns in board
  • Drag and drop cards between columns
  • View details active card
  • Add new column
  • Add new card

• Invitation

  • Invite user to board
  • Accept invitation to board
  • Reject invitation to board

• Notification

  • Using socket.io to handle realtime notification

• Light/dark mode