Peerlist Profile Kanban Board 💚

This Drag and drop board has been made using NextJS, React Beautiful DND, Tailwind CSS, React-table and React Toastify.

Features:

• Drag and Drop applicants

  The major purpose of the drag and drop board is to drag applicants to different stages of their job application. Three statuses that I mentioned are
  

  • REJECTED
  • APPLIED
  • SHORTLISTED

• Search

  It allows you to search within these drag and drop lists, it updates on realtime when you search.

• State Management

  I have used Redux for the ease of state management and manipulation for the drag and drop

• State Persistence

  I have used redux-persist to persist the state of the board so that even refresh does not hamper the state of your lists!!!

• You can Reject Me

  I would ask you to reject me on the board, there is a sweet and simple message for you, I hope you enjoy the Pun 💚

Performance Metrics and Enhancements

• The Total Blocking Time of the app is 10ms (which is quite good :)
• The First Contentful Paint of the app is 0.5s
• Overall performance of the app is 100(Desktop) and 94(Mobile) with 100 SEO rating.

Have a look at the ratings report here

Assumptions and Default App Behaviour

• I have used Inter font family from google fonts.

• The lists are not draggable, as I feel it's a cool Tinder like UI right now,

  • Right Swipe Shortlisted
  • Left Swipe Rejected

• I have created a ts file initialState.js with a certain set of random applicant's detail, it could be easily replaced via an API call, as Redux is managing the whole state management of the board.