React DragDrop TaskBoard Project

This is a complete taskboard app with DragDrop capability. It is built in ReactJS.

1. DragDrop Taskboard

This is a taskboard application with drag and drop feature.

Tech Stack

• Language: TypeScript
• UI-Components: Ant Design
• Icons: Ant Design Icons
• Drag & Drop: react-beautiful-dnd
• Styling: styled-components
• Linting: ESLint
• Code Formatting: Prettier
• Deployment: GitHub Actions
• Hosting: GitHub Pages

Features

Create, edit & delete tasks
Change task order and status by drag & drop
Tasks are persisted to localStorage
Sync between tabs
Automated deployments with GitHub Actions

Step 1: Download

Download code here.

Step 2: npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Step 3: npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Sample Code

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app/App';
import reportWebVitals from './reportWebVitals';
import 'antd/dist/antd.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.tsx

import { Typography } from 'antd';
import Layout, { Content, Header } from 'antd/lib/layout/layout';
import styled from 'styled-components';
import { colors } from '../shared/SharedUtils';
import Taskboard from '../taskboard/Taskboard';

const StyledLayout = styled(Layout)`
  /* We can't use "height: 100vh; width: 100vw;" here.
  Otherwise, when there is a horizontal scrollbar etc, 
  because that we set a constant height, there will be a vertical one too.  */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
`;

const StyledHeader = styled(Header)`
  display: flex;
  align-items: center;
  background-color: #fff;
`;

const StyledContent = styled(Content)`
  background-color: ${colors.primary[6]};
`;

function App() {
  return (
    <StyledLayout>
      <StyledHeader>
        <Typography.Title level={3} type="secondary">
          Drag & Drop Taskboard
        </Typography.Title>
      </StyledHeader>
      <StyledContent>
        <Taskboard />
      </StyledContent>
    </StyledLayout>
  );
}

export default App;

Find full code below.

Reference

Live demo is here.
Download code here.
Follow code author here.

Read Individually.

---