nishantdev365 / kanban-app

Frontend Mentor - Kanban task management web app solution

This is a solution to the Kanban task management web app challenge on Frontend Mentor.

This project was bootstrapped with Create React App, using the Redux and Redux Toolkit TS template.

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
• Allow users to drag and drop tasks to change their status and re-order them in a column
• Keep track of any changes, even after refreshing the browser (localStorage could be used for this if you're not building out a full-stack app)

Links

• Solution URL: Github
• Live Site URL: Netlify

My Process

Built with

• React
• Redux Toolkit
• Redux Persist
• TailwindCSS
• TypeScript
• Mobile-first workflow

Getting Started

1. Clone the repo

git clone https://github.com/yjcyun/kanban-app.git

2. In the project root directory, install NPM packages

npm install

3. Start developing

npm run start

4. Builds the app for production to the build folder.

npm run build

5. Deploy on Netlify 🚀