This is a full stack web app allowing authenticated users to manage their projects and tasks in Kanban boards. The design is adapted from the Kanban task management web app challenge on Frontend Mentor.
- Solution URL: https://github.com/nadlgit/kanban-task-app
- Live Site URL: https://nadl-kanban-task-app.netlify.app or directly demo page https://nadl-kanban-task-app.netlify.app/demo
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 (
localStoragecould be used for this if you're not building out a full-stack app) - Bonus: Build this project as a full-stack application
Users should be able to:
- Register, log in and log out
- Drag and drop columns to re-order them
- Drag and drop projects to re-order them => requirement abandoned because it needs to be designed in accessible way
Project should:
- Follow clean architecture principles
- Respect some accessibility guidelines
- Next.js framework
- Typescript
- Backend: Firebase Authentication and Firebase Cloud Firestore
- Responsive design with mobile-first workflow
- Semantic HTML5 markup
- Tested with Jest, Testing Library and Faker
Additional librairies:
- React Hook Form and yup for form validation
- Ariakit for some components such as modals
- react-beautiful-dnd (rbd) for drag and drop
- react-hot-toast for notifications
- react-error-boundary