Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/adrianoescarabote/kanban-task-management-web-app

In this project, I developed a task management application with light/dark mode support. I used Figma files to style the project. The app allows users to organize and manage their tasks, visualizing each workflow step on an intuitive Kanban board.
https://github.com/adrianoescarabote/kanban-task-management-web-app

axios jest nextjs reacthookform redux-toolkit storybook tailwindcss testing-library typescript

Last synced: 12 days ago
JSON representation

In this project, I developed a task management application with light/dark mode support. I used Figma files to style the project. The app allows users to organize and manage their tasks, visualizing each workflow step on an intuitive Kanban board.

Awesome Lists containing this project

README 

        
- Active application: [here](https://kanban-task-management-web-app-adrianoescarabote.vercel.app/)



[https://github.com/AdrianoEscarabote/Kanban-task-management-web-app/assets/101136987/8f150953-fb75-46ea-90a3-b041fe76d1e8](https://github.com/AdrianoEscarabote/Kanban-task-management-web-app/assets/101136987/305b794e-9557-4228-8f2e-1b385b3c1d61)



# Frontend Mentor - Kanban task management web app solution



This is a solution to the [Kanban task management web app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/kanban-task-management-web-app-wgQLt-HlbB). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 



## Table of contents



- [Overview](#overview)

  - [The challenge](#the-challenge)

- [My process](#my-process)

  - [Built with](#built-with)

  - [Continued development](#continued-development)

- [Author](#author)



## 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!



## My process



### Built with



- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- Typescript

- [Next.js](https://nextjs.org/) - React framework

- [TailwindCSS](https://tailwindcss.com/) - CSS framework

- [Redux Toolkit](https://redux-toolkit.js.org/) - for managing and centralizing application state.

- [Jest](https://jestjs.io/pt-BR/) - testing framework

- [axios](https://axios-http.com/docs/intro) - to get data from json

- [React Hook Form](https://react-hook-form.com/) - to validate the form

- [redux-mock-store](https://www.npmjs.com/package/redux-mock-store) - to dispatch actions and verify actions dispatched during component testing

- [Storybook](https://storybook.js.org/) - to test and document the components!



### Continued development



I'm so glad I completed this amazing challenge! I've learned a lot along the way and I feel my development has benefited from this challenging project. While it took a little longer than expected due to my familiarity with some technology, I'm thrilled to finally have it done!



I faced several challenges during the project, especially regarding organization, which was a challenging aspect to maintain. However, I believe I managed to do a good job in this regard. It was my first time working on such a large project with multiple technologies, which made it difficult to organize everything and keep the code clean. Even so, I'm confident I did a good job!



## Author



- Linkedin - [AdrianoEscarabote](https://www.linkedin.com/in/adriano-escarabote-944b02233/)

- Frontend Mentor - [@AdrianoEscarabote](https://www.frontendmentor.io/profile/AdrianoEscarabote)

- Instagram - [@ogdrian](https://www.instagram.com/ogdrian/)

- Twitter - [@drianEscarabote](https://twitter.com/drianEscarabote)