# purshink/reactjs-spring-boot-full-stack-app architecture

> Architecture diagram of the GitHub repository purshink/reactjs-spring-boot-full-stack-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/purshink/reactjs-spring-boot-full-stack-app
- Repository: https://github.com/purshink/reactjs-spring-boot-full-stack-app

## Overview

1. This repository is a two-tier full-stack monorepo: a React frontend in `react-frontend` and a Spring Boot REST backend in `spring-backend`. The frontend is the presentation layer; the backend owns authentication, business rules, persistence, and API exposure.

2. The frontend is organized by user journey rather than by technical layer. Major screens cover public home content, login/signup, consumer user account and hobby browsing, and business-owner offer management. Shared UI pieces such as header, footer, background, navigation, and modal/pop-up components are reused across pages.

3. Access control is enforced in the frontend with route wrappers for guest, user, and business roles. This suggests role-aware navigation and page gating at the UI boundary, with separate experiences for anonymous visitors, consumer accounts, and business accounts.

4. The frontend’s data access is centralized in `src/api`. Each domain area has its own service module: authentication/login, signup, hobbies/offers, user profiles, tests, and home data. These services are the only layer that should talk to the backend, which makes the UI-to-API boundary clear for an architecture diagram.

5. JWT is the key cross-cutting mechanism. Users authenticate through the backend, receive an access token, and the frontend attaches that token to requests for secured endpoints. The presence of a custom Axios configuration and mocked Axios tests indicates request interception/configuration is part of the client architecture.

6. The backend follows a conventional Spring layered design. Controllers in `web` expose REST endpoints, services in `service` and `service/impl` contain business logic, repositories under `model/repostiory` handle persistence, and entities/DTOs under `model` define the data boundary between API, service, and database layers.

7. The backend domain is centered on users, hobbies/offers, categories, locations, and test-related data. Separate DTOs exist for app-client signup, business registration, hobby info/update, and user/business profile updates, which indicates deliberate separation between persistence models and API payloads.

8. Security is a first-class backend subsystem. `SecurityConfiguration`, `JwtFilter`, `HobbieUserDetailsService`, and `JWTUtility` show stateless token-based auth with Spring Security. This is the main boundary between public endpoints and secured operations like profile updates, saved hobbies, and business offer management.

9. Persistence is backed by MySQL, as noted in the README. The repositories and entity model map the domain to relational storage, while `DBInit` suggests seed or bootstrap data on startup. Tests in the backend cover services and controllers, reinforcing the service/repository separation.

10. There are also supporting cross-cutting subsystems: `GlobalAdvice` and custom exceptions handle API error translation, `OpenApi30Config` exposes Swagger/OpenAPI docs, and `NotificationService` plus Spring Mail integration support email-related flows. The README’s warning about mail credentials means notifications are optional infrastructure-dependent functionality.

11. Deployment is container-oriented on the backend side. A `Dockerfile` and `docker-compose.yml` indicate the backend and its dependencies are meant to run together locally, while the frontend is a standard React app started with npm. This creates a clean split between a browser-based client and a containerized Java API.

12. For an architecture diagram, the main data flow is: browser user interacts with React components → frontend API services call Spring controllers → controllers delegate to services → services use repositories/entities to read/write MySQL → security filters validate JWT on protected requests → notifications or other integrations are triggered from the backend when needed.

Main entry points: [`spring-backend/src/main/java/backend/hobbiebackend/web`](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/web) (REST controllers), [`spring-backend/src/main/java/backend/hobbiebackend/model/repostiory`](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/model/repostiory) (Repositories), [`spring-backend/src/main/java/backend/hobbiebackend/model`](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/model) (Domain model), [`react-frontend`](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/react-frontend) (Browser)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["React frontend"]
  node_browser(("Browser<br/>client"))
  node_route_guards{{"Route guards<br/>access control"}}
  node_shell_ui["Shell UI<br/>shared components"]
  node_journey_pages["Journey pages<br/>screens"]
  node_api_services["API services<br/>client services"]
  node_axios_config["Axios config<br/>http client"]
end

subgraph group_backend["Spring backend"]
  node_controllers["REST controllers<br/>api layer"]
  node_security{{"Security<br/>auth layer"}}
  node_user_service["User service<br/>business logic"]
  node_hobby_service["Hobby service<br/>business logic"]
  node_test_service["Test service<br/>business logic"]
  node_support_services["Support services<br/>infrastructure logic"]
  node_repositories["Repositories<br/>persistence"]
  node_domain_model["Domain model<br/>entities and dto"]
  node_mysql[("MySQL<br/>relational db")]
  node_notifications["Mail notifications<br/>integration"]
  node_api_support["API support<br/>cross-cutting"]
  node_db_init["DB init<br/>bootstrap<br/>[DBInit.java]"]
  node_runtime["Container runtime<br/>deployment"]
end

node_browser -->|"navigation"| node_route_guards
node_browser -->|"render"| node_shell_ui
node_browser -->|"use"| node_journey_pages
node_journey_pages -->|"data access"| node_api_services
node_route_guards -->|"gate"| node_journey_pages
node_api_services -->|"http client"| node_axios_config
node_api_services -->|"REST calls"| node_controllers
node_controllers -->|"protect"| node_security
node_controllers -->|"delegate"| node_user_service
node_controllers -->|"delegate"| node_hobby_service
node_controllers -->|"delegate"| node_test_service
node_user_service -->|"persist"| node_repositories
node_hobby_service -->|"persist"| node_repositories
node_test_service -->|"persist"| node_repositories
node_support_services -->|"support data"| node_repositories
node_repositories -->|"store"| node_mysql
node_user_service -->|"uses"| node_domain_model
node_hobby_service -->|"uses"| node_domain_model
node_test_service -->|"uses"| node_domain_model
node_security -->|"auth data"| node_domain_model
node_support_services -->|"send"| node_notifications
node_api_support -->|"wrap"| node_controllers
node_db_init -->|"seed"| node_mysql
node_runtime -->|"run"| node_controllers

click node_browser "https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/react-frontend"
click node_route_guards "https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/react-frontend/src/components/protectedRoutes"
click node_shell_ui "https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/react-frontend/src/components/root/fragments"
click node_journey_pages "https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/react-frontend/src/components/root"
click node_api_services "https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/react-frontend/src/api"
click node_axios_config "https://github.com/purshink/reactjs-spring-boot-full-stack-app/blob/main/react-frontend/src/api/customAxiosConfig/CustomAxiosConfig.js"
click node_controllers "https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/web"
click node_security "https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/security"
click node_user_service "https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/service"
click node_hobby_service "https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/service"
click node_test_service "https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/service"
click node_support_services "https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/service"
click node_repositories "https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/model/repostiory"
click node_domain_model "https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/model"
click node_mysql "https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend"
click node_notifications "https://github.com/purshink/reactjs-spring-boot-full-stack-app/blob/main/spring-backend/src/main/java/backend/hobbiebackend/service/NotificationService.java"
click node_api_support "https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend"
click node_db_init "https://github.com/purshink/reactjs-spring-boot-full-stack-app/blob/main/spring-backend/src/main/java/backend/hobbiebackend/init/DBInit.java"
click node_runtime "https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_browser,node_route_guards,node_shell_ui,node_journey_pages,node_api_services,node_axios_config toneBlue
class node_controllers,node_security,node_user_service,node_hobby_service,node_test_service,node_support_services,node_repositories,node_domain_model,node_mysql,node_notifications,node_api_support,node_db_init,node_runtime toneAmber
```

## Components

### React frontend

Browser presentation layer and client-side API boundary.

- [Browser](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/react-frontend): client · End user entry point for the React application. · `react-frontend`
- [Route guards](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/react-frontend/src/components/protectedRoutes): access control · Guest, user, and business wrappers that gate pages by role. · `react-frontend/src/components/protectedRoutes`
- [Shell UI](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/react-frontend/src/components/root/fragments): shared components · Reusable header, footer, background, logo, navbar, and pop-up fragments. · `react-frontend/src/components/root/fragments`
- [Journey pages](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/react-frontend/src/components/root): screens · Home, login, signup, user account, hobby browsing, offer management, and test forms. · `react-frontend/src/components/root`
- [API services](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/react-frontend/src/api): client services · Domain-specific service modules that centralize calls to the backend. · `react-frontend/src/api`
- [Axios config](https://github.com/purshink/reactjs-spring-boot-full-stack-app/blob/main/react-frontend/src/api/customAxiosConfig/CustomAxiosConfig.js): http client · Custom Axios setup for request behavior such as JWT attachment. · `react-frontend/src/api/customAxiosConfig/CustomAxiosConfig.js`

### Spring backend

REST API, security, business logic, and persistence layer.

- [REST controllers](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/web): api layer · Home, hobby, user, and test controllers exposing HTTP endpoints. · `spring-backend/src/main/java/backend/hobbiebackend/web`
- [Security](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/security): auth layer · Spring Security setup, JWT filter, user details service, and token utility. · `spring-backend/src/main/java/backend/hobbiebackend/security`
- [User service](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/service): business logic · User and role orchestration for profiles, registration, and account operations. · `spring-backend/src/main/java/backend/hobbiebackend/service`
- [Hobby service](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/service): business logic · Business logic for hobbies, offers, categories, and locations. · `spring-backend/src/main/java/backend/hobbiebackend/service`
- [Test service](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/service): business logic · Service for test-related domain operations and results. · `spring-backend/src/main/java/backend/hobbiebackend/service`
- [Support services](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/service): infrastructure logic · Notification, category, location, and shared domain helpers. · `spring-backend/src/main/java/backend/hobbiebackend/service`
- [Repositories](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/model/repostiory): persistence · Spring Data repositories for users, hobbies, categories, locations, roles, and tests. · `spring-backend/src/main/java/backend/hobbiebackend/model/repostiory`
- [Domain model](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend/model): entities and dto · Entities, DTOs, JWT payloads, roles, and enums forming the API-data boundary. · `spring-backend/src/main/java/backend/hobbiebackend/model`
- [MySQL](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend): relational db · Primary relational datastore for application state. · `spring-backend`
- [Mail notifications](https://github.com/purshink/reactjs-spring-boot-full-stack-app/blob/main/spring-backend/src/main/java/backend/hobbiebackend/service/NotificationService.java): integration · Email-based notification flow backed by Spring Mail and external credentials. · `spring-backend/src/main/java/backend/hobbiebackend/service/NotificationService.java`
- [API support](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend/src/main/java/backend/hobbiebackend): cross-cutting · Global exception handling, OpenAPI docs, configuration beans, and app bootstrap. · `spring-backend/src/main/java/backend/hobbiebackend`
- [DB init](https://github.com/purshink/reactjs-spring-boot-full-stack-app/blob/main/spring-backend/src/main/java/backend/hobbiebackend/init/DBInit.java): bootstrap · Startup data seeding and local initialization support. · `spring-backend/src/main/java/backend/hobbiebackend/init/DBInit.java`
- [Container runtime](https://github.com/purshink/reactjs-spring-boot-full-stack-app/tree/main/spring-backend): deployment · Dockerfile and compose setup for running the backend with dependencies locally. · `spring-backend`

## Connections

- Browser → Route guards: navigation · Users enter role-aware routes through guarded front-end entry points.
- Browser → Shell UI: render · Shared chrome and fragments frame the application experience.
- Browser → Journey pages: use · The browser interacts with the main user journey screens.
- Journey pages → API services: data access · Pages delegate all backend calls to domain API services.
- Route guards → Journey pages: gate · Guest, user, and business wrappers control which screens are reachable.
- API services → Axios config: http client · Service modules use the configured client for requests and JWT handling.
- API services → REST controllers: REST calls · Frontend services call the Spring REST endpoints.
- REST controllers → Security: protect · Protected endpoints rely on JWT validation and Spring Security.
- REST controllers → User service: delegate · User-related requests flow into user and role business logic.
- REST controllers → Hobby service: delegate · Home, hobby, and offer requests flow into hobby business logic.
- REST controllers → Test service: delegate · Test endpoints delegate to the test service.
- User service → Repositories: persist · User operations read and write through repositories.
- Hobby service → Repositories: persist · Hobby and offer operations use repository-backed persistence.
- Test service → Repositories: persist · Test data flows through repository access.
- Support services → Repositories: support data · Category, location, and notification flows rely on shared persistence and integration support.
- Repositories → MySQL: store · Repositories map entities to the MySQL database.
- User service → Domain model: uses · User service works with entities, DTOs, roles, and JWT payloads.
- Hobby service → Domain model: uses · Hobby service uses the hobby, category, location, and DTO model.
- Test service → Domain model: uses · Test service uses the test domain model.
- Security → Domain model: auth data · JWT request and response types support authentication boundaries.
- Support services → Mail notifications: send · Notification service triggers email-related flows when needed.
- API support → REST controllers: wrap · Global advice and API docs shape the exposed HTTP surface.
- DB init → MySQL: seed · Startup initialization populates or primes the database.
- Container runtime → REST controllers: run · Container setup packages the backend application and dependencies for local execution.