This device is not compatible.
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.
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!