Spring Boot with React project structure

Spring Boot with React project structure

Explorer

  • .git…
  • .vscodenew
  • extensions.jsonnew
  • settings.jsonnew
  • launch.jsonnew
  • client
  • dist…new, not committed
  • node_modules…, not committed
  • .gitignore
  • .nvmrcnew
  • .oxlintrc.json
  • .prettierrc.jsonnew
  • index.html
  • package-lock.json
  • package.json
  • README.md
  • tsconfig.app.json
  • tsconfig.json
  • tsconfig.node.json
  • vite.config.ts
  • server
  • target…, not committed
  • .gitattributes
  • .gitignore
  • compose.yaml
  • HELP.md, not committed
  • mvnw
  • mvnw.cmd
  • pom.xml
  • .editorconfig
  • .gitignore
  • AGENTS.mdnew
  • CLAUDE.mdnew
  • lefthook.ymlnew
  • README.md
  1. # Create the repository folder

    mkdir orders-app && cd orders-app && git init
  2. # Generate the Spring Boot server with Spring Initializr (or use start.spring.io in the browser)

    curl https://start.spring.io/starter.zip -d type=maven-project -d javaVersion=25 -d configurationFileFormat=yaml -d artifactId=server -d packageName=com.example.orders -d dependencies=web,data-jpa,postgresql,flyway,validation,actuator,docker-compose,testcontainers -o server.zip && unzip server.zip -d server
  3. # Scaffold the React client with Vite

    npm create vite@latest client -- --template react-ts
  4. # Run the API (Spring starts the Postgres container from compose.yaml)

    cd server && ./mvnw spring-boot:run
  5. # Run the client in a second terminal

    cd client && npm install && npm run dev
  6. # When the app grows: add routing, data fetching, forms, styling and typed API calls to the client

    cd client && npm install react-router @tanstack/react-query react-hook-form @hookform/resolvers zod react-error-boundary openapi-fetch tailwindcss @tailwindcss/vite
  7. # Add client tests and the API type generator

    cd client && npm install -D vitest @vitest/coverage-v8 jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom @testing-library/user-event msw openapi-typescript