Setting Up Project

Setting Up Project

Preview unavailable

You must log in or sign up to view this lesson.

Build Expense Manager App Using React And TypeScript

Buy nowLearn more

Introduction

Application Demo2

Read This Before Starting The Course

Course Content

Setting Up Project1

Setting Up Backend Server

Fetch Backend API Data From React

Displaying Expenses List On Dashboard3

Creating Add Expense Page

Making API Call To Add Expense

Automatically Refresh Expense List To See Newly Added Expense

Creating Edit Expense Page

Integrating Update Expense API

Implementing Delete Expense Functionality2

Format Date, Amount And Description For Better User Experience

Implementing Row Highlight Functionality While Deleting Expense

Creating Search Expenses Page

Implementing Search Expenses Functionality

Implementing Filter By Expense Type And Expense Year Functionality

Implementing Sort By Expense Year Functionality

Creating Profile Page WIth Update Functionality

Improving Code For Loading And Error States Across The Application

Creating Register User Page

Making API Call To Register User2

Adding Extra Validations For Register User Form

Creating Login Page And Integrating API

Maintaining Logged In User Session Using Custom Hook

Implementing Route Protection In The Application

JWT Authentication Backend Coding

Using Code Splitting(Lazy Loading) To Improve Application Performance

How To Better Manage Imports

Implementing Dark/Light Mode

Making CSS Changes For Actual Dark/Light Mode Functionality

Maintain Dark/Light Mode Selection Even After Page Refresh

Route Navigation Improvements

Create Responsive Full Screen Mobile Menu

Application Source Code

expense-manager-app-react-typescript.zip

Using Redux Toolkit Query(RTK Query)

Introduction

Getting All Expenses Using RTK Query

Adding Expense Using RTK Query

Updating Expense Using RTK Query

Deleting Expense Using RTK Query

Error Handling With RTK Query

Getting Single Expense While Editing Expense Using RTK Query

Organizing APIs Using RTK Query

Getting and Updating Profile Using RTK Query

Auto Hiding Success Message Using RTK Query

Registering User Using RTK Query

User Login Using RTK Query

Code Improvements

updated-source-code.zip

Using Axios Instead Of Fetch API With RTK Query

final-source-code.zip

You Reached End Of The Course!

Build Ecommerce App Using React + TypeScript + Redux Toolkit + Firebase Login Authentication

Application Demo

Setting Up Firebase Authentication + Database To Run Application Locally

Deploying Application To Production

react-ecommerce-app-with-typescript.zip

react-ecommerce-app-without-typescript.zip

Useful Resources

What's Next

Course Certificate

Share Your Feedback

Your Course Completion Certificate