This device is not compatible.

PROJECT


Build a Trello Clone in Angular using NgRx

Learn how to build a Trello clone with Angular using NgRx for state management.

Build a Trello Clone in Angular using NgRx

You will learn to:

Use NgRx to manage states in Angular.

Sync the states in local storage using NgRx.

Share data between components in Angular.

Add drag-and-drop functionality using Material UI.

Skills

Web Development

State Management

Web Frameworks

Prerequisites

Basic understanding of Angular framework

Working knowledge of NgRx Store

Understanding of browser's local storage

Technologies

NgRx

Angular

Material UI

Project Description

In this project, we'll create a clone of Trello, the kanban-style list-making application. We will manage the states using NgRx. The ngrx-store-localstorage node package will be used to sync the NgRx store with the local storage of the browser.

We'll make a dashboard with multiple columns. Each column will, in turn, contain multiple tasks. We will allow the user to add, delete, or update tasks present in a column. The user will also be able to reorder columns using the drag-and-drop functionality.

We'll start by setting up the reducers and actions for the NgRx store, and then we'll create a board, its columns, and tasks for each column. We'll also add a new task addition option in each column. Next, we'll add drag-and-drop features not only for tasks but also for columns. We will implement this functionality using the Angular CDK's drag-and-drop feature. Finally, we'll sync our NgRx store with the local storage.

The final Trello board display
The final Trello board display

Project Tasks

1

Getting Started

Task 0: Introduction

2

Set Up the Trello Board

Task 1: Set and Implement the Board

Task 2: Develop and Implement the Columns

Task 3: Develop and Implement the Task Cards

Task 4: Create Actions and Reducers to Add Tasks

Task 5: Register the Reducer

Task 6: Develop and Implement the Task Add Functionality

Task 7: Create Actions and Reducers to Update and Delete Tasks

Task 8: Develop the Task Edit Functionality

Task 9: Implement the Task Edit Functionality

Task 10: Create Actions and Reducers to Drag Columns and Tasks

Task 11: Add the Drag-and-Drop Functionality

3

Sync Local Storage

Task 12: Implement the Storage Sync

Task 13: Include StorageSync in MetaReducers

Congratulations!