How purshink/reactjs-spring-boot-full-stack-app works
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: web REST controllers · repostiory Repositories · model Domain model · react-frontend Browser
Components 19
React frontend
Browser presentation layer and client-side API boundary.
- Browser · End user entry point for the React application.
react-frontend - Route guards · Guest, user, and business wrappers that gate pages by role.
react-frontend/src/components/protectedRoutes - Shell UI · Reusable header, footer, background, logo, navbar, and pop-up fragments.
react-frontend/src/components/root/fragments - Journey pages · Home, login, signup, user account, hobby browsing, offer management, and test forms.
react-frontend/src/components/root - API services · Domain-specific service modules that centralize calls to the backend.
react-frontend/src/api - Axios config · 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 · Home, hobby, user, and test controllers exposing HTTP endpoints.
spring-backend/src/main/java/backend/hobbiebackend/web - Security · Spring Security setup, JWT filter, user details service, and token utility.
spring-backend/src/main/java/backend/hobbiebackend/security - User service · User and role orchestration for profiles, registration, and account operations.
spring-backend/src/main/java/backend/hobbiebackend/service - Hobby service · Business logic for hobbies, offers, categories, and locations.
spring-backend/src/main/java/backend/hobbiebackend/service - Test service · Service for test-related domain operations and results.
spring-backend/src/main/java/backend/hobbiebackend/service - Support services · Notification, category, location, and shared domain helpers.
spring-backend/src/main/java/backend/hobbiebackend/service - Repositories · Spring Data repositories for users, hobbies, categories, locations, roles, and tests.
spring-backend/src/main/java/backend/hobbiebackend/model/repostiory - Domain model · Entities, DTOs, JWT payloads, roles, and enums forming the API-data boundary.
spring-backend/src/main/java/backend/hobbiebackend/model - MySQL · Primary relational datastore for application state.
spring-backend - Mail notifications · Email-based notification flow backed by Spring Mail and external credentials.
spring-backend/src/main/java/backend/hobbiebackend/service/NotificationService.java - API support · Global exception handling, OpenAPI docs, configuration beans, and app bootstrap.
spring-backend/src/main/java/backend/hobbiebackend - DB init · Startup data seeding and local initialization support.
spring-backend/src/main/java/backend/hobbiebackend/init/DBInit.java - Container runtime · Dockerfile and compose setup for running the backend with dependencies locally.
spring-backend
Connections 24
- 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.