This device is not compatible.


Build the Frontend of a Financial Application Using React

In this project, we’ll learn how to build the frontend of a financial application using React. We’ll then integrate the frontend with a Ktor backend with MongoDB for the database to create a finance management web application.

Build the Frontend of a Financial Application Using React

You will learn to:

Master the fundamentals of React.js, covering components, state management, and lifecycle methods to construct dynamic user interfaces.

Develop responsive and visually appealing interfaces using HTML, CSS, JavaScript, and Bootstrap.

Implement effective state management in React.

Integrate the frontend seamlessly with a Ktor backend API, understanding asynchronous programming and request handling.


Web Development

Front-end Development

HTTP Request Methods


Proficiency in React and Bootstrap for frontend development

Prior experience in building web applications

Basic understanding of RESTful API concepts

Familiarity with CRUD operations (create, read, update, delete) in a web application context






Project Description

In this project, we’ll build a robust frontend for a financial app using React and Bootstrap, and integrate it with a powerful backend developed with Ktor and supported by a MongoDB database. This finance management web application will empower users to efficiently handle various aspects of financial operations.

We’ll start with setting up the MongoDB for the app and then dive into the implementation of key components relating to partners, products, invoices, transactions, ledgers, etc. Each component will represent a crucial facet of financial management, from adding and editing partners and products to creating and analyzing invoices, transactions, and ledger reports.

Project Tasks



Task 0: Get Started


Implement Partner Components

Task 1: Implement the AddPartner Component

Task 2: Implement the Partners Component

Task 3: Implement the EditPartner Component


Implement Product Components

Task 4: Implement the AddProduct Component

Task 5: Implement the Products Component

Task 6: Implement the EditProduct Component


Implement Invoice Components

Task 7: Implement the AddInvoice Component (JavaScript Part)

Task 8: Implement the AddInvoice Component (JSX Part)

Task 9: Implement the Invoices Component

Task 10: Implement the InvoiceReport Component


Implement Transaction Components

Task 11: Implement the AddTransaction Component (JavaScript Part)

Task 12: Implement the AddTransaction Component (JSX Part)

Task 13: Implement the Transactions Component


Implement Ledger and Home Components

Task 14: Implement the Ledger Component

Task 15: Implement the LedgerReport Component

Task 16: Implement the Home Component