Spring Boot3 React Full-stack App - Yiu

Building for your Full-stack App

Full-stack App using Next.js/React, Java, Spring Boot 3, Spring Data JPA/Hibernate, TypeScript & MySQL.

Introduction · One-click Deploy · Tech Stack + Features · Author

This Spring React Full-stacks Demo Generator by yiu

Live Demo

https://spring-react-one.vercel.app

Quick Start

1. clone project

git clone https://github.com/peter-yiu/spring-react

there are include two modules, one is base on Spring Boot3, and the other is base on next.js so let's start, and strong recommend to use IDEA

2. init database

create your database use mysql

create tables from sql at backend/src/main/resources/sql/install.sql

3. init backend

Create file application-dev.properties under backend/src/main/resources Specify the active profile in application.properties, use the spring.profiles.active property to specify the profile to activate.

spring.profiles.active=dev

application-dev.properties is used by default when running a JUnit Test.

Define configurations in application-dev.properties: Add the configuration properties you want to use in the development environment to this file. For example:

# Database configuration
spring.datasource.url=jdbc:mysql://localhost:3306/mydatabase
spring.datasource.username=myusername
spring.datasource.password=mypassword

# Logging level configuration
logging.level.org.springframework=DEBUG
logging.level.com.example=TRACE

Run the BackendApplication: Use your preferred method to run the Spring Boot application, such as running it from the IDE, using Maven or Gradle commands, or executing the JAR file.

The demo have been integrates Swagger, you can access the API documentation by navigating to the Swagger UI interface For Example : open http://localhost:7080/api-docs.html for preview

Live API Documents for the project

https://soravideo.website/api-docs.html

4. init Frontend

install dependencies

cd frontend
pnpm install

set environmental values

put .env.local under frontend root dir with values list below

WEB_BASE_URI=""
NEXT_PUBLIC_BACKEND_BASE_URI="http://localhost:7080"

NEXT_PUBLIC_BACKEND_BASE_URI is the backend application url

5. local development

pnpm dev

open http://localhost:3000 for preview

Frameworks

• Next.js – React framework for building performant apps with the best developer experience
• Spring – Spring makes programming Java quicker, easier, and safer for everybody

Platforms

• Vercel – Easily preview & deploy changes with git

Tools

• axios Promise based HTTP client for the browser and node.js

UI

• Tailwind CSS – Utility-first CSS framework for rapid UI development
• Radix – Primitives like modal, popover, etc. to build a stellar user experience
• Framer Motion – Motion library for React to animate components with ease
• Lucide – Beautifully simple, pixel-perfect icons
• tailwindcss for page building

Documentation

• Architecture
• Backend Design
• Database Design
• Test Cases

Other Things

if this project is helpful to you, buy be a coffee.