Project structure · Full stack
Spring Boot with React project structure
Opens with creditsA Spring Boot API from Spring Initializr in server/ and a React app from Vite in client/, side by side in one repository. The Vite dev server and Nginx both proxy /api to Spring, so the browser sees one origin with session cookies and CSRF tokens, and TypeScript types are generated from Spring's OpenAPI document. It grows from two scaffolds to a tested, containerised, observable app with contract tests and release automation; the example feature is orders.
Curated by Tauseef FayyazIntermediate251 files and foldersSpring Boot 4.1, Spring Security 7.1, Java 25 LTSChecked October 2026How it grows
Each stage opens the explorer there
- 1Day 1What the scaffold and your first hour give you67 files and folders
- 2GrowingWhat a real app with features and tests adds+109 files and folders
- ProductionWhat running it for real users adds+35 files and foldersOpens with credits
- ExpertWhat a team needs to keep it healthy for years+40 files and foldersOpens with credits
How it is organised
- Two folders, two build tools: server/ is a normal Maven project and client/ is a normal Vite project. Each opens on its own in its natural editor, and every tutorial you read for either still applies.
- The contract between them is the HTTP API, described by the OpenAPI document springdoc generates. The client turns it into TypeScript types, so a renamed Java field shows up as a compile error in React. At Expert, Pact contract tests add proof of behaviour on top of shapes.
- One origin, always: Vite proxies /api to Spring in development and Nginx does the same in production. The browser never needs CORS, and Spring Security's session cookie and csrf.spa() token work the same everywhere.
- Feature first on both sides: com.example.orders.order on the server, src/features/orders on the client. Server classes stay package-private and features talk through events; client features do not import each other.
- Errors have one shape: the server answers with RFC 9457 problem details and the client's API layer maps them to messages and form field errors.
- Test at the cheapest level that proves the point: Mockito and slices on the server, Vitest with Testing Library and MSW on the client, then a few Playwright journeys against the real stack. Contract, accessibility, visual and load tests come at Expert.
- Two ways to ship. Separate (shown here): the client is static files served by Nginx, which forwards /api to the Spring container. Alternative: build React into server/src/main/resources/static with the frontend-maven-plugin and ship one jar. One jar is simpler to run; separate deploys let each side release on its own.
- Spring Initializr now defaults to Gradle. Maven is shown because most Spring guides and company codebases still use it; with Gradle only the build files change.
At the top of the project
Open one in the explorer for the full story
- orders-app/
- .git/Git history for both halves of the project.
- .vscode/Shared VS Code settings, extensions and debug configurations for both halves.3 inside
- client/The React app, created by the Vite react-ts template.16 inside
- server/The Spring Boot API, generated by Spring Initializr as a Maven project.11 inside
- .editorconfigIndentation and line endings: 4 spaces for Java, 2 for TypeScript, YAML and JSON.
- .gitignoreRepository-wide ignores: .env files, OS files and editor folders.
- AGENTS.mdInstructions for AI coding agents working across server/ and client/.
- CLAUDE.mdA one-line pointer to AGENTS.md for Claude Code (@AGENTS.md).
- lefthook.ymlGit hooks for both halves: Spotless on staged Java, oxlint and Prettier on staged TypeScript.
- README.mdHow to run, test and deploy both halves.
Learn more on Sefism
Roadmaps, cheat sheets and projects that go with Spring Boot with React.
- Roadmap· Spring Boot and ReactFull stack development roadmapBuild and ship whole web apps
- Roadmap· JavaBackend development roadmapAPIs, databases, auth, deploys
- Roadmap· ReactFrontend development roadmapHTML, CSS, JavaScript and a framework
- RoadmapQA and test automation roadmapManual testing to automated suites
- Cheat sheetFull stack development cheat sheetBuild and ship whole web apps.
- Cheat sheetBackend development cheat sheetAPIs, databases, auth, deploys.
- Cheat sheetFrontend development cheat sheetHTML, CSS, JavaScript and a framework.
- Cheat sheetQA and test automation cheat sheetManual testing to automated suites.
- FYP idea· IntermediateJob Shop Work Order Tracker for Small ManufacturersA web app for small manufacturers and job shops (fabrication, furniture, printing, garments) to turn customer orders into work orders, track each operation on the shop floor from a shared tablet, and compare quoted versus actual time and cost. An intermediate final year project in manufacturing software.
See 11 moreShow fewer
- FYP idea· BeginnerForm Backend Service for Static Sites with Spam FilteringA developer-facing web service that gives static and no-code websites a form endpoint: submissions are stored, filtered for spam, emailed to the owner and sent to webhooks, with a dashboard and CSV export. A beginner-friendly final year project in backend development with a clear SaaS model.
- FYP idea· IntermediateDiagnostic Lab Reporting System with Verifiable ReportsA web system for small diagnostic and pathology labs that tracks each sample from collection to signed report, flags abnormal and critical values against age and sex specific reference ranges, and issues reports patients can verify with a QR code. A healthcare final year project with real safety and integrity problems.
- QuestionHow do I build a developer portfolio as a beginner with nothing to show?Start with two or three small but complete projects that solve a real problem, each with a clear README, screenshots and a live link or easy run steps. Put them on a simple one-page site or a tidy GitHub profile. Depth and finish matter far more than the number of projects or a fancy design.
- QuestionHow do I learn Git and GitHub properly instead of just copying commands?Learn the model first: commits are snapshots, branches are pointers, and remotes are copies. Then use Git daily on your own projects, practise a team workflow with branches and pull requests, and break things on purpose, such as merge conflicts, so you learn to recover calmly.
- QuestionDo I need Docker and Kubernetes as a junior developer?Docker, yes: learn the basics, because nearly every team uses containers and you will be expected to run the project locally and read a Dockerfile. Kubernetes, mostly no: understand what it does and a few core terms, but deep Kubernetes can wait until your job or a DevOps direction needs it.
- QuestionWhich final year project will actually help me get a job?Pick an FYP that matches the role you want, solves a real problem for a real user, uses the tools that role uses, and that your group can finish and deploy. A modest idea done properly, with clean code, tests and a clear demo, helps far more in interviews than an ambitious idea that never fully works.
- Resource· GuideSpring Boot Reference DocumentationThe official reference for Spring Boot: starters, auto-configuration, externalised configuration and profiles, data access, security, testing, packaging and Actuator. The place to find out what a property or starter really does in the release you are running.
- Resource· GuideSpring Security Reference DocumentationThe official reference for Spring Security: the filter chain architecture, authentication, authorisation, OAuth2, CSRF and CORS protection, and testing. What you need to secure a Spring Boot API properly instead of switching protections off.
- Resource· GuideReact DocumentationThe official React documentation at react.dev is a full course as well as a reference. Its Learn track moves from a quick start through describing the UI, adding interactivity, managing state and escape hatches, with interactive sandboxes and challenges on nearly every page. It suits anyone learning React and any React developer whose habits come from older class-based tutorials, and it should be read before paying for a React course.
- Resource· GuideVitest DocumentationThe official documentation for Vitest, the test runner built on Vite. Its getting started guide has you writing and running a real test in minutes, then covers matchers, async tests, setup and teardown, mocking (functions, modules, timers, dates, requests), snapshots, coverage, the UI dashboard and browser mode for component tests. It uses a Jest-compatible API, so it suits JavaScript and TypeScript developers starting to test, and teams moving from Jest.
- Resource· GuidePlaywright DocumentationThe official documentation for Playwright, Microsoft's open-source framework for end-to-end testing in real Chromium, Firefox and WebKit browsers, with mobile emulation. It walks you from installation to your first test, then covers locators, assertions, fixtures, authentication, API testing, parallel runs and CI. Tools such as the code generator, UI mode and trace viewer make first tests easy. It suits developers and QA engineers adding reliable browser tests to a web app.
Checked against 22 official sources, October 2026. If something has changed, the docs win.Show sourcesHide sources
- Spring Initializr
- Spring Boot: Structuring your code
- Spring Boot: Docker Compose support
- Spring Boot: Testing and Testcontainers
- Spring Boot: Database initialization with Flyway
- Spring Boot: Static content
- Spring Boot: Efficient container images
- Spring Boot: Tracing with OpenTelemetry
- Spring Security: CSRF for single-page applications
- Spring Security: Form login
- Spring Framework: Error responses (ProblemDetail)
- Spring Modulith reference
- springdoc-openapi
- Vite: server.proxy option
- openapi-typescript and openapi-fetch
- React Router: route modules and lazy
- TanStack Query: query options
- Vitest guide
- Mock Service Worker
- Playwright: authentication and visual comparisons
- Pact: consumer-driven contract testing
- release-please manifest releaser
Best practices and checklists for this stack
Picked from the other libraries by shared topics.
Best practices
See all- TypeScript Best PracticesModern TypeScript best practices for 2026: strict settings, TypeScript 7, modeling data with unions, safe narrowing, runtime validation, generics and typed linting.
- Next.js App Router Best PracticesNext.js 16 App Router best practices: Server Components, Cache Components and use cache, secure Server Actions, proxy.ts, metadata and images.
- React Best PracticesModern React best practices for 2026: pure components, lean state, fewer effects, React Compiler, form actions, accessibility and testing.
Checklists
See all- Web Accessibility ChecklistA practical web accessibility checklist built on WCAG 2.2 level AA, with a severity and a concrete way to verify every check.
- Web Performance ChecklistA practical web performance checklist built on Core Web Vitals: LCP, INP and CLS, with a severity and a concrete way to verify every check.
- Web Application Security ChecklistA practical web application security checklist built on the OWASP Top 10:2025 and ASVS 5.0, with a severity and a way to verify every check.
Work with me
Stuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
- 1:1 Mentorship
- Fresh Graduate Mentorship
- Career Guidance
Brand deals, promos and partnerships: tauseeffayyaz@gmail.com