lisawagner / beautiful-dnd-issue-tracker

DropTrak | Simple Drag and Drop Experiment

DropTrak Issue Tracker | React Beautiful DnD

A simple issue tracker test project

Featuring drag and drop capabilities, DropTrak provides the user with a simple way to view and organize code issues.

Features

Users can have fun moving their issues and tasks around. DropTrak features:

• Ability to drag columns into a new order
• Ability to move tasks to different columns
• Ability to re-order tasks in a column
• Accessibility: Custom screen reader logic added

Demo

Technology

1. Reactjs
2. @hello-pangea/dnd instead of react-beautiful-dnd (see known issues)
3. TailwindCSS
4. Netlify Deployment

🐞 Bugs and Known Issues

Currently, installation of react-beautiful-dnd (v13.1.0) fails with React 18. Workarounds include:

• Downgrade to React 17
• Install using -peer-legacy command via npm + disabling <React.StrictMode>
• Use an alternate Drag and Drop package

See react-beautiful-dnd issues for more details. Disabling <React.StrictMode> is also currently required for projects using beautiful-dnd that recently upgraded to React 18.

An alternate package was recently released based on a fork of react-beautiful-dnd which supports React 18 and strict mode called @hello-pangea/dnd

1. npm install @hello-pangea/dnd
2. Replace all imports of react-beautiful-dnd with @hello-pangea/dnd
3. Enjoy!

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installation

Easily set up a local development environment

• clone or download zip file
• cd into root
• npm install
• npm start

Usage

Simply click and drag an issue from one column to the next. Changing the task order within columns is super easy too!

To test the accessibility implementation, please turn on systems screen reader:

Windows 10 - Narrator

• Go to Settings ⚙️ > Ease of Access > Narrator, and then turn on the toggle under Use Narrator.
• IMPORTANT: Press capslock and spacebar keys to turn on/off scan mode. If the screen reader is in scan mode, you will not be able to navigate the page with your keyboard as intended.

Deployment

DropTrak is hosted on Netlify. To deploy your own copy, you will first need to set up a Netlify account.

Before deploying to Netlify you need to create a build:

$ npm run build

It is a good idea to test your build by serving it on your localhost. Once you are happy with your build, open up your Netlify Account.

For a basic deploy, you can simply drag and drop the build folder onto your Netlify Sites directory. See Get started with Netlify for details.

Acknowledgments

• Beautiful & Accessible Drag and Drop with react-beautiful-dnd - by Alex Reardon
• shouldComponentUpdate in function components - Stack Overflow