This device is not compatible.


Build a Trello Clone in React with Firebase Integration

In this project, we’ll build a Trello clone using the react-beautiful-dnd library that’ll enable users to move columns and the individual tasks within them.

Build a Trello Clone in React with Firebase Integration

You will learn to:

Use Redux and React Hooks to develop an application.

Use Firebase with a React application.

Use cloud functions for Firebase to perform CRUD operations.

Build accessible drag-and-drop experiences into an application.


Web Development

React Components

Web Frameworks


Good understanding of JavaScript

Good understanding of Redux

Good understanding of Firestore

Basic understanding of React functional components, states, and Hooks






Project Description

The drag-and-drop feature is an interaction that allows someone to drag and drop an item. The react-beautiful-dnd library allows us to create accessible drag-and-drop lists with minimal code.

In this project, we’ll use react-beautiful-dnd to build a Trello clone with drag-and-drop functionality for tasks and columns. We’ll also integrate Firebase into our application to perform CRUD operations on tasks.

First, we’ll create a simple board to display the tasks and columns on the screen. Then, we’ll add drag-and-drop functionality to move the columns horizontally. Next, we’ll create task cards to represent a task in a column, with the functionality to edit or delete a task. We’ll also integrate Firebase to fetch and store the tasks and columns data in a database. The final version of the application will allow moving tasks between columns and the columns themselves. It will also allow adding, updating, and deleting tasks from any column.

The final layout of the board will look like the following image:

The final layout of the Trello board
The final layout of the Trello board

Project Tasks



Task 0: Getting Started


Develop the Board Component

Task 1: Create Reducers to Set up Initial State

Task 2: Implement the Board Component

Task 3: Create Reducers for Drag Events

Task 4: Define the onDragEnd Function


Develop the Column and Task Components

Task 5: Implement the Column Component

Task 6: Style the Column Component

Task 7: Implement the TaskCard Component

Task 8: Create Reducers to Edit Tasks

Task 9: Implement the TaskAddButton Component

Task 10: Implement the EditTaskDialog Component

Task 11: Import the EditTaskDialog Component


Integrate Firebase

Task 12: Setup Firestore

Task 13: Add a new Task to Firestore

Task 14: Update Firestore on Drag Events

Task 15: Update or Delete a Task in Firestore

Task 16: Get all Tasks from the Database

Task 17: Set Data in the Redux Store