A small full‑stack example: a Spring Boot backend (Maven) and a Vite + React frontend. This README explains the project layout, how to run both services locally on Windows (PowerShell), and quick troubleshooting steps.
-
Backend-Application/
— Spring Boot backend (Maven wrapper included)pom.xml
— Maven project filemvnw
,mvnw.cmd
— Maven wrapper scriptssrc/main/java/com/Sidharth/BackendApp/
— Java sourcesController/
— REST controllers (UserController.java)Model/
— JPA entities (User.java)Repository/
— Spring Data repositories (UserRepository.java)Exception/
— custom exceptions and advice
src/main/resources/application.properties
— app configuration
-
Frontend-Application/Frontend/
— Vite + React frontendpackage.json
— frontend dependencies and scriptssrc/
— React source filesLayout/
— UI layout components (Navbar)Pages/
— page components (Home)Users/
— Add/Edit/View user pages
-
HELP.md
— (project helper file, if present)
-
Backend: REST API for basic user CRUD (endpoints used by the frontend):
POST /addUser
— create a new userGET /getUser
— list usersGET /getUser/{id}
— get single user by idPUT /updateUser/{id}
— update user by idDELETE /deleteUser/{id}
— delete user by id
-
Frontend: React app (Vite) that calls the backend using axios and includes simple pages:
Home
— lists usersAddUser
— simple form to add a userEditUser
— edit form for a userViewUser
— view details
The frontend expects the backend at http://localhost:8080 and the Vite dev server runs at http://localhost:5173. The backend controller already includes CORS allowing
http://localhost:5173
.
- Java 17+ (or the version your
pom.xml
requires). If you don't have Java installed, install an SDK and make surejava
is on your PATH. - Node.js 18+ and npm (for the frontend) — or pnpm/yarn if you prefer (adjust commands accordingly).
- PowerShell (instructions below use PowerShell syntax).
Open PowerShell and run:
cd Java\Backend-Application
# Use the included Maven wrapper to build & run
.\mvnw spring-boot:run
Notes:
- If the app fails to start, inspect the console for the stack trace. Typical problems:
- Port 8080 already in use — change
server.port
insrc/main/resources/application.properties
or stop the other service. - Database configuration missing — check
application.properties
(this project may use an in-memory DB or expect external DB credentials).
- Port 8080 already in use — change
Open a second PowerShell window and run:
cd 'Frontend-Application\Frontend'
# Install deps if you haven't already
npm install
# Run the dev server
npm run dev
Open http://localhost:5173 in your browser.
- Start backend first (.\mvnw spring-boot:run). Confirm it listens on port 8080.
- Start frontend (npm run dev).
- Open the UI and test features (add, edit, view, delete users).
- If the frontend shows CORS or network errors, check backend console and browser DevTools (Network tab) for the exact request/response.
- Browser DevTools (Network tab): inspect the failing request, its
Request Payload
, and the response status/body. - Backend logs (where you ran
mvnw
): look for exceptions and stack traces. Common Jackson errors indicate JSON mismatches. - If the frontend reports
Uncaught ReferenceError: id is not defined
, the frontend route/link is missing the id (the app passes id via query string?id=
). Edit links should include?id={id}
or you can change routes to use/edit-user/:id
. - If PUT/POST returns 400, verify Content-Type is
application/json
and that the payload has the expected fields (seeUser
model:id
,name
,userName
,email
).
This project doesn't include automated tests by default. You can add unit/integration tests for the backend using Spring Boot Test and for the frontend using your preferred React testing library.
- Run backend:
cd ...\Backend-Application; .\mvnw spring-boot:run
- Build backend jar:
cd ...\Backend-Application; .\mvnw clean package
- Run frontend:
cd ...\Frontend-Application\Frontend; npm install; npm run dev
- Lint / format: use available linters (none provided by default in this repo)
- Add a README inside
Backend-Application
andFrontend-Application/Frontend
with service-specific details. - Add environment variables support (e.g.
application-dev.properties
) and document expected DB connection info. - Add simple integration tests for the backend REST API and CI workflow (GitHub Actions).
- Make frontend routes consistent: either use query strings (
?id=...
) everywhere or convert to path params (/edit-user/:id
).
If you run into issues, paste the browser network request details (headers/payload/response) and backend console output here and I can help debug the exact error.
If you'd like, I can also:
- Add a shorter README specifically inside
Frontend-Application/Frontend
and another insideBackend-Application
. - Create a sample
.env.example
or document exact Java version and Node version used.
Tell me which extras you want and I'll add them.