Expense Tracker with Spring Boot REST API, React.JS and PostgreSQL

Learn to use Spring Boot and Java to create a complete REST API. We will use PostgreSQL as the relational...
Expense Tracker APP with Spring Boot PostgreSQL and React JS

Learn to use Spring Boot and Java to create a complete REST API. We will use PostgreSQL as the relational database and Spring JdbcTemplate for interacting with that. Apart from this, we will add authentication using JWT (JSON Web Tokens).

We will use REST APIs developed to create Expense Tracker PWA App using React JS framework.

 

PART I – Contents for Backend APIs

  1. Introduction
  2. Project Setup & Creating Database Objects
  3. Persisting User Information on Register
  4. Login and Hashing Password
  5. JWT Authentication
  6. Adding New Categories
  7. Category – Find & Update Functionality
  8. Adding Category Transactions
  9. Transaction – Find and Update
  10. Deleting – Category & Transactions
  11. CORS & Testing from Web Client
  12. Summary and Code

PART II – Contents for Frontend PWA App

  1. Frontend App UI Overview
  2. Project Setup
  3. User Registration and Authentication
  4. Handling JWT Token
  5. Adding New Categories
  6. Category – Find & Update Functionality
  7. Adding Category Transactions
  8. Transaction – Find and Update
  9. Deleting – Category & Transactions
  10. Summary and Code

 

Article 1: Introduction

Course Learning Objectives

By the end of this course, you will be able to:

  • Build a real-world Expense Tracker application from scratch
  • Design and develop RESTful APIs using Spring Boot
  • Implement user authentication and authorization using JWT
  • Secure user credentials with password hashing
  • Design and manage relational data using PostgreSQL
  • Perform full CRUD operations for categories and transactions
  • Handle CORS and test APIs from a frontend client
  • Build a modern React.js Progressive Web App (PWA)
  • Integrate frontend and backend using secure API communication
  • Manage authentication state and JWT tokens on the client side
  • Create a portfolio-ready full-stack project

Course Prerequisites

To follow this course comfortably, you should have:

  • Basic knowledge of Java and object-oriented programming
  • Familiarity with Spring Boot fundamentals (controllers, services, repositories)
  • Basic understanding of REST APIs and HTTP methods
  • Working knowledge of SQL and relational databases
  • Basic experience with JavaScript and React.js
  • A general understanding of how web applications work

Note: You don’t need to be an expert in all these areas. Each concept will be explained as we build the project step by step.

 

Course Overview

Welcome to this hands-on full-stack development course, where we will build a complete Expense Tracker application using Spring Boot REST APIs, React.js, and PostgreSQL. This course is designed to simulate a real-world development workflow, making it perfect for developers preparing for jobs, interviews, or portfolio projects.

The course is divided into two structured parts for better clarity and learning flow.

In Part I – Backend Development, we will start by setting up the Spring Boot project and designing the database schema. You will learn how to implement user registration, securely store passwords, and build a login system using JWT-based authentication. As the course progresses, we will create REST APIs for managing expense categories and transactions, including find, update, and delete operations. We will also configure CORS and test our APIs from a web client to ensure frontend compatibility.

In Part II – Frontend Development, we will build a React.js Progressive Web App (PWA) that consumes the backend APIs. You will learn how to handle user registration and login, store and manage JWT tokens, and build user interfaces for adding, updating, and deleting categories and transactions. By the end of this part, you will have a fully functional frontend connected to a secure backend.

This course focuses on learning by building, with each lesson adding a new feature to the application. By the end of the series, you won’t just understand the concepts—you’ll have a complete, production-style application that you can showcase with confidence.

Let’s get started by setting up our backend project and creating the required database objects next next article.

What’s Next in This Series?

Now that you understand the course structure, learning objectives, and tools we’ll be using, it’s time to start building the application.

In the next article, we will:

  • Set up the Spring Boot backend project
  • Configure PostgreSQL
  • Create the required database schema
  • Prepare the project for scalable API development

👉 Next Article:
Project Setup & Creating Database Objects

 

Want to contribute an education article? Visit our Write for Us page.

  • About
    Prasad Pawar

Leave A Reply

You May Also Like

Index