This device is not compatible.
PROJECT
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.
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.
Skills
Web Development
React Components
Web Frameworks
Prerequisites
Good understanding of JavaScript
Good understanding of Redux
Good understanding of Firestore
Basic understanding of React functional components, states, and Hooks
Technologies
React
Redux
Firebase
Javascript
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:
Project Tasks
1
Introduction
Task 0: Getting Started
2
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
3
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
4
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
Congratulations
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.