Skip to content

Java project to show how to run front-end (React) and back-end (Java) using Spring

License

Notifications You must be signed in to change notification settings

luizgustavocosta/16-bits-zero-to-hero

Repository files navigation

16-bits-zero-to-hero

Build Status


Node.js CI

Java CI

Quality Gate Status

Project title


🗒 Zero to hero 🚀 using React and SpringBoot

Motivation


Create a project with front-end and back-end to run easily locally or through the browser

Solution


Architecture

Database diagram

database

Architecture

Layered Architecture Style

The layered architecture, also known as the n-tiered architecture style, is one of the most common architecture styles. This style of architecture is the de facto standard for most applications, primarily because of its simplicity, familiarity, and low cost. It is also a very natural way to develop applications due to Conway’s law, which states that organizations that design systems are constrained to produce designs which are copies of the communication structures of these organizations. In most organizations there are user interface (UI) developers, backend developers, rules developers, and database experts (DBAs). These organizational layers fit nicely into the tiers of a traditional layered architecture, making it a natural choice for many business applications. The layered architecture style also falls into several architectural anti-patterns, including the architecture by implication anti-pattern and the accidental architecture anti-pattern. If a developer or architect is unsure which architecture style they are using, or if an Agile development team “just starts coding,” chances are good that it is the layered architecture style they are implementing. (Mark Richards, Neal Ford)

Layer Architecture

Tech / Framework used

fe

  • JavaScript
  • React 17.0.2
  • MUI 5
  • Jest
  • GitHub actions

be

  • Java 11
  • SpringBoot 2.6.3
  • Spring
  • Hibernate
  • Swagger - OpenAPI 1.6.7
  • MapStruct
  • JUnit 5
  • GitHub actions

Back-end code style


Java Code Conventions


Installation


How to use it?


Docker

docker-compose up

Locally

 cd back-end/zero2hero && ./gradlew bootRun

Swagger documentation

Disable security

Back-end

 cd back-end/zero2hero && ./gradlew bootRun
Endpoints

Swagger documentation

Front-end

cd front-end/ui-app && npm install && npm start

Open this link and use the Username and Password on the login screen

Gitpod

Steps

  1. Clone the repo https://github.com/luizgustavocosta/16-bits-zero-to-hero
  2. Open the Gitpod, be sure you're logged in
  3. Add the project hitting the button New Workspace
  4. Open the terminal for the back-end
  5. type cd back-end/zero2hero && ./gradlew bootRun
  6. Make the URL public
  7. Back-end up and running Back-end
  8. Open the file application.json inside the UI project and update the value for SERVER_URL. The server URL should be the back-end URL.
  9. Type the command cd front-end/ui-app && npm install && npm start
  10. Voilà app up and running Front-end

References

License