🚩 Project developed based on tutorials by Fernanda Kipper - kipperDev.
This guide provides a structured approach to developing a full-stack application using Java Spring, React, and PostgreSQL. The process is divided into two key phases: backend development and frontend development.
This section details the construction of the application's backend using the Java Spring framework. It begins with the creation of a Spring Boot project, configuring both H2 for testing and PostgreSQL for development, and implementing database migrations using Liquibase. The guide then covers the creation of data models and RESTful controllers to manage CRUD operations within the application. The utilisation of essential libraries, such as Spring Data JPA, will be explored to streamline data access and manipulation. Environment-specific configurations and the use of environment variables are also covered.
| Technology | Version | Description |
|---|---|---|
| 📐 IntelliJ IDEA | 2024.3 |
Integrated Development Environment (IDE) |
| ☕ Java | 21 |
Backend programming language |
| 🌱 Spring Boot | 3.4.2 |
Framework for creating Spring applications |
| 🐦 Maven | 3.9.9 |
Build automation and dependency management |
| 🐘 PostgreSQL | 17 |
Relational database management system |
| 🗃️ H2 Database | 2.3.232 |
In-memory relational database for testing |
| 🛢️ Liquibase | 4.22.0 |
Database migration management tool |
| 👩🚀 Postman | 11.19 |
API testing and development tool |
| Dependency | Category | Description |
|---|---|---|
| 🛠️ Spring Boot DevTools | Developer Tools | Provides fast application restarts, LiveReload, and configurations for enhanced development experience |
| 🌐 Spring Web | Web | Build web, including RESTful, applications using Spring MVC. Uses Apache Tomcat as the default embedded container |
| 💾 Spring Data JPA | SQL | Persist data in SQL stores with Java Persistence API using Spring Data and Hibernate |
| 🗃️ H2 Database Engine | SQL | Provides a fast in-memory database that supports JDBC API and R2DBC access, with a small (2mb) footprint |
| 🐘 PostgreSQL Driver | SQL | A JDBC and R2DBC driver that allows Java programs to connect to a PostgreSQL database using standard, database-independent Java code |
| 🛢️ Liquibase Core | SQL | Manages database schema migrations, providing version control and seamless updates to the database schema |
| 🗝️ dotenv-java | Configuration | Loads environment variables from a .env file into the application, aiding in secure configuration management |
This section focuses on developing the application's frontend using the React library and TypeScript. The process includes creating React components and leveraging React Hooks to implement the application's functionalities. The guide also explores the use of TypeScript to enhance code maintainability. Furthermore, it details the connection of the frontend to the backend (developed in Part 1) using Axios for HTTP requests and React Query for fetching, caching, synchronising, and updating server state within the application.
| Technology | Version | Description |
|---|---|---|
| ✒️Visual Studio Code | 1.96 |
Code editor for modern web and cloud projects |
| ⚡ Vite | 6.0.11 |
Next Generation Frontend Tooling |
| ⚛️ React | 18.3.1 |
Framework for building user interfaces |
| 📜 TypeScript | 5.6.2 |
Strongly typed programming language |
| 📦 Node.js | 18.x |
JavaScript runtime environment |
| Dependency | Category | Description |
|---|---|---|
| ⚛️ React | Core | Library for building user interfaces |
| ⚛️ React DOM | Core | Renders React components in the browser |
| 📜 TypeScript | Core | Enables type-checking and development with TypeScript |
| ⚙️ Vite Plugin React | Build Tools | Plugin to support React in Vite projects |
| ✅ ESLint | Development | Linter tool to ensure code quality |
| 🎯 TypeScript ESLint | Development | Integrates TypeScript with ESLint |
| 🔍 @types/react | Type Definitions | Provides TypeScript definitions for React |
| 🔍 @types/react-dom | Type Definitions | Provides TypeScript definitions for React DOM |
| 🌍 Globals | Development | Provides global variables and functions for ESLint rules |
| ✒️ React Hooks ESLint | Development | Ensures proper usage of React Hooks |
| 🔧 React Refresh ESLint | Development | Provides linting for Vite’s fast-refresh mechanism |
| 🔄 @tanstack/react-query | API Management | Data fetching and caching for React applications |
| 🔗 Axios | API Management | Promise-based HTTP client for making API requests |
- Part 1: Backend Development with Java Spring and PostgreSQL;
- Part 2: Frontend Development with React and TypeScript.
