Click any module to expand. This is NOT a "learn Spring and learn React separately" module — it's an INTEGRATED full stack where every backend concept is immediately connected to a frontend consumer. Students build applications, not exercises.
Project setup, dependency injection, REST APIs — the backend starts here
Spring Initializr (start.spring.io): selecting dependencies, project structure (src/main/java, resources, test). Maven vs Gradle (Maven for this module). pom.xml: dependency management, parent POM, starter dependencies. Running a Spring Boot app: @SpringBootApplication, embedded Tomcat. The "Hello World" that actually serves HTTP.
Inversion of Control: Spring creates and manages objects (beans). @Component, @Service, @Repository, @Controller — stereotype annotations. @Autowired: constructor injection (preferred), field injection, setter injection. @Bean and @Configuration for manual bean creation. Bean scopes: singleton (default), prototype, request, session. Why DI matters: testability, loose coupling, modularity.
@RestController = @Controller + @ResponseBody. @GetMapping, @PostMapping, @PutMapping, @PatchMapping, @DeleteMapping. Path variables: @PathVariable. Query parameters: @RequestParam. Request body: @RequestBody. Response: ResponseEntity (status code + body + headers). Building a complete CRUD API for a resource. REST conventions: nouns in URLs, HTTP verbs as actions.
application.yml (preferred over .properties). Configuration properties: server port, database URL, custom settings. @Value for injecting properties. @ConfigurationProperties for typed config. Profiles: application-dev.yml, application-prod.yml. Activating profiles: spring.profiles.active. Environment-specific database URLs, feature flags, logging levels. The 12-Factor App principle: config in environment.
Bean Validation: @NotNull, @NotBlank, @Size, @Email, @Min, @Max on DTOs. @Valid on @RequestBody to trigger validation. Custom validators with @Constraint. Global exception handling: @ControllerAdvice + @ExceptionHandler. Custom error response format (timestamp, message, path). Handling 404, 400, 500 gracefully. Never expose stack traces to clients.
Controller → Service → Repository (the standard Spring architecture). Why layers: separation of concerns, testability, maintainability. DTO (Data Transfer Object): separate API shape from database entity. MapStruct or manual mapping for Entity ↔ DTO conversion. @Service for business logic. @Repository for data access. Never expose JPA entities directly in REST responses.
springdoc-openapi: auto-generates API docs from your controllers. Swagger UI: interactive API testing in the browser. @Operation, @ApiResponse, @Schema annotations for enriching docs. Exporting OpenAPI spec (JSON/YAML). Why API documentation matters: frontend developers consume your API using these docs. Swagger UI replaces Postman for basic API testing during development.
Database layer — entities, repositories, relationships, and migrations
@Entity, @Table, @Id, @GeneratedValue. Column mapping: @Column(nullable, unique, length). Data types: String, Integer, Long, LocalDate, LocalDateTime, BigDecimal, enum (@Enumerated). Naming strategies: camelCase Java → snake_case SQL. Entity lifecycle: transient → managed → detached → removed.
@OneToMany / @ManyToOne (most common: department has many employees). @OneToOne (user has one profile). @ManyToMany (students enrolled in courses). Cascade types: PERSIST, MERGE, REMOVE, ALL. Fetch types: LAZY (default for collections — load on access) vs EAGER (load immediately). Orphan removal. Bidirectional vs unidirectional. The N+1 query problem: what it is and how @EntityGraph or JOIN FETCH solves it.
JpaRepository: built-in CRUD (save, findById, findAll, deleteById). Derived query methods: findByNameAndCity, findByAgeBetween, findByEmailContaining — Spring generates SQL from method names. @Query for custom JPQL and native SQL. Pagination: Pageable, Page, Sort. Projections: return specific fields, not entire entities. Specification API for dynamic queries.
Why migrations: schema changes must be versioned, repeatable, and automated. Flyway: SQL-based migration files (V1__create_users.sql, V2__add_email_column.sql). Migration ordering and checksums. Running on startup (Spring Boot auto-detection). Rolling back vs rolling forward. Why "just use spring.jpa.ddl-auto=update" is DANGEROUS in production — Flyway is the professional approach.
@Transactional: declarative transaction management. Propagation: REQUIRED (default — join existing or create new), REQUIRES_NEW, SUPPORTS. Isolation levels. Read-only transactions for query optimization. Transaction rollback: rollbackFor, noRollbackFor. Why understanding transactions matters: data consistency in multi-step operations (e.g., order creation = insert order + deduct inventory + charge payment).
Why cache: reduce database load for frequently read, rarely changed data. Spring Cache abstraction: @Cacheable, @CacheEvict, @CachePut. Redis as distributed cache: docker run redis. spring-boot-starter-data-redis configuration. Cache-aside pattern. TTL (Time-To-Live) for cache expiry. When to cache: read-heavy data (product catalog, user profiles). When NOT to cache: write-heavy, real-time data.
JWT auth, role-based access control, and securing APIs — the module every production app needs
Security filter chain: every request passes through filters before reaching your controller. Authentication (who are you?) vs Authorization (what can you do?). SecurityFilterChain bean configuration (Spring Security 6.x style — no more WebSecurityConfigurerAdapter). Permitting public endpoints, securing protected ones. CORS configuration for frontend integration.
JSON Web Token: header.payload.signature (Base64 encoded). Stateless authentication: no server-side session. Login flow: POST /auth/login → validate credentials → generate JWT → return token. Subsequent requests: Authorization: Bearer
BCryptPasswordEncoder: one-way hashing with salt. Never store plaintext passwords. Registration flow: validate input → check duplicate email → hash password → save user. Login flow: find user → compare BCrypt hashes → generate JWT. Custom UserDetailsService implementation. Account verification flow (optional): email confirmation link.
Roles: ADMIN, USER, MODERATOR. @PreAuthorize("hasRole('ADMIN')") on controller methods. Method-level security: @Secured, @RolesAllowed. Roles stored in database with user-role relationship. Role hierarchy: ADMIN inherits USER permissions. Securing endpoints: /api/admin/** requires ADMIN, /api/users/** requires USER. How to handle "403 Forbidden" gracefully on the frontend.
OAuth 2.0 authorization flow: Authorization Code Grant (most secure for web apps). Google/GitHub login integration with Spring Security OAuth2 Client. Resource server: protecting APIs with OAuth2 tokens. Difference between OAuth (authorization) and OpenID Connect (authentication). When to use JWT-based auth vs OAuth2: internal apps vs third-party integrations.
Real-world features that every production application needs beyond CRUD
MultipartFile handling in Spring Boot. Storing files: local filesystem vs cloud storage (S3). File size limits, type validation (accept images only). Serving files: streaming responses. Profile picture upload flow: React form → multipart POST → Spring saves → return URL. Best practice: store files externally (S3/CloudFront), store only URLs in database.
WebSocket vs HTTP: persistent bidirectional connection. Spring WebSocket with STOMP protocol. SockJS fallback for browser compatibility. Use cases: live chat, notifications, real-time dashboards, collaborative editing. Building a simple chat feature: React frontend + Spring WebSocket backend. When WebSocket is overkill (SSE — Server-Sent Events for one-way push).
Spring Boot Mail (spring-boot-starter-mail): sending emails via SMTP (Gmail, SendGrid, AWS SES). Thymeleaf email templates (HTML emails, not plain text). Use cases: welcome email, password reset link, order confirmation. Async email sending with @Async (don't block the request thread). Rate limiting and queue-based sending for bulk emails.
@Scheduled for periodic tasks: cron expressions, fixedRate, fixedDelay. Use cases: daily report generation, cache refresh, expired token cleanup. @Async for non-blocking operations: fire-and-forget tasks. @EnableAsync + @EnableScheduling configuration. Thread pool configuration for async tasks. When to use Spring scheduling vs a message queue.
SLF4J + Logback: log levels (TRACE, DEBUG, INFO, WARN, ERROR), log format, file output. Structured logging for production. Spring Boot Actuator: /health, /info, /metrics, /env endpoints. Micrometer for metrics (counters, gauges, timers). Custom health indicators. Why Actuator matters: Kubernetes health probes, monitoring dashboards (Prometheus + Grafana). Production observability basics.
Web fundamentals + TypeScript — the prerequisites for React development
Semantic tags: header, nav, main, section, article, footer. Forms: input types (text, email, password, date, file, checkbox, radio), form validation (required, pattern, minlength). Accessibility basics: labels, alt text, ARIA attributes. Why semantic HTML matters for SEO and screen readers.
Flexbox (the layout model for components) and CSS Grid (the layout model for pages). Media queries for responsive breakpoints. CSS custom properties (variables). Box model, positioning (relative, absolute, fixed, sticky). Tailwind CSS introduction: utility-first classes, responsive modifiers (md:, lg:), dark mode. Why Tailwind dominates modern frontend styling.
let/const, arrow functions, template literals, destructuring, spread/rest, optional chaining (?.), nullish coalescing (??). Array methods: map, filter, reduce, find, some, every. Promises, async/await, fetch API. Modules: import/export. Why ES6+ is the language React uses — you can't write React without understanding modern JS.
Why TypeScript: catch errors at compile time, not runtime. Type annotations: string, number, boolean, arrays, objects. Interfaces and type aliases. Union types and literal types. Generics basics. Enums. Optional properties (?:). TypeScript with React: typing props, state, events, API responses. tsconfig.json configuration. The modern React stack uses TypeScript by default.
Building interactive UIs with the world's most popular frontend library
Vite (not Create React App — CRA is deprecated/unmaintained). npm create vite@latest my-app -- --template react-ts. Project structure: src/, public/, components/, pages/, services/. JSX syntax: HTML-in-JavaScript. React DevTools for debugging. Hot Module Replacement (HMR) for instant development feedback. Why Vite replaced CRA: 10x faster dev server, native ESM.
Functional components (class components are legacy). Props: passing data from parent to child. TypeScript props: interface Props { name: string; age?: number; }. Children props. Component composition. Thinking in components: break UI into reusable pieces. Key prop for lists. Conditional rendering: ternary, &&, early return.
useState: component-level state. useEffect: side effects (API calls, subscriptions, DOM manipulation). Dependency array: [] (mount only), [dep] (when dep changes), none (every render). Cleanup function for subscriptions/timers. useRef: DOM references and mutable values that don't trigger re-render. Rules of Hooks: only at top level, only in components/custom hooks.
Custom hooks: extract reusable logic (useAuth, useFetch, useDebounce, useLocalStorage). useMemo: memoize expensive calculations. useCallback: memoize functions (prevent unnecessary child re-renders). useReducer: complex state with actions (mini-Redux). useContext: share state without prop drilling. When to use useReducer vs useState (complex state transitions).
React Context: createContext, Provider, useContext for global state (auth, theme, language). Context limitations: causes re-renders for all consumers on any change. Zustand (lightweight alternative to Redux): simple store creation, selective subscriptions, no boilerplate. When to use Context (simple global state) vs Zustand (complex or frequent updates) vs Redux (enterprise-scale with dev tools). Why Redux is often overkill for most apps.
react-router-dom v6+: BrowserRouter, Routes, Route, Link, NavLink. Dynamic routes: /users/:id with useParams. Nested routes and Outlet for layout composition. Programmatic navigation: useNavigate. Protected routes: redirect unauthenticated users to login. 404 page with catch-all route. Route-based code splitting with React.lazy + Suspense.
Connecting React to the Spring Boot backend — where frontend meets backend
React Hook Form: performant, minimal re-renders. register, handleSubmit, formState (errors, isSubmitting). Validation: required, minLength, pattern, custom validators. Error messages. Multi-step forms. File upload with React Hook Form. Why React Hook Form beats Formik: less re-renders, simpler API, smaller bundle.
Axios: HTTP client with interceptors (auto-attach JWT token), base URL config, error handling. React Query (TanStack Query): server state management — caching, refetching, loading/error states, pagination. useQuery for GET, useMutation for POST/PUT/DELETE. Why React Query: eliminates manual loading/error state management. Axios interceptor for 401 → redirect to login.
Login form → POST /auth/login → receive JWT → store in localStorage/httpOnly cookie. AuthContext: track isAuthenticated, user, token. Protected route component: check auth → render or redirect. Auto-logout on token expiry. Axios interceptor: attach Authorization header to all requests. Registration flow with validation. The complete auth lifecycle from React to Spring Security.
Server-side pagination: page, size, sort parameters → Spring Pageable → React page controls. Search: debounced input → API call → filtered results. Multi-filter: category, price range, date range → query parameters. URL-based filters (sync with browser URL for shareable links). Infinite scroll vs page numbers. The pattern every e-commerce and admin panel uses.
Tailwind CSS for rapid styling: utility classes, responsive breakpoints, dark mode. shadcn/ui: accessible, customisable component primitives (Button, Input, Dialog, Toast, Table). Headless UI for complex interactions (Dropdown, Combobox). Lucide icons. Responsive layout: mobile-first, Tailwind's sm:/md:/lg: modifiers. Toast notifications for success/error feedback. Loading skeletons for better UX.
Error boundaries: catch rendering errors, show fallback UI (not a blank screen). React.lazy + Suspense: code splitting by route (load only what's needed). Image optimisation: lazy loading, WebP format. Lighthouse performance audit. Web Vitals: LCP, FID, CLS — what they measure and how to improve them. Production build: npm run build, Vite optimisation, tree shaking.
JUnit 5, Mockito, integration tests, React Testing Library — proving your code works
JUnit 5: @Test, @BeforeEach, @AfterEach, @DisplayName. Assertions: assertEquals, assertTrue, assertThrows, assertAll. Mockito: @Mock, @InjectMocks, when().thenReturn(), verify(). Testing service layer: mock the repository, test business logic. Testing controllers with MockMvc: mock HTTP requests, assert response status/body. Why testing matters: prevents regressions, enables confident refactoring.
@SpringBootTest: loads full application context. @DataJpaTest: test repository layer with embedded H2 database. TestRestTemplate / WebTestClient for testing live endpoints. @Testcontainers: run real PostgreSQL in Docker for tests. Test profiles: application-test.yml with H2 database. Integration tests vs unit tests: when to use which. Testing the complete request → response cycle.
React Testing Library: test behavior, not implementation. render(), screen.getByText(), screen.getByRole(). User events: userEvent.click(), userEvent.type(). Testing async components: waitFor, findByText. MSW (Mock Service Worker): mock API responses for frontend tests. Testing forms, navigation, authenticated views. Vitest as the test runner (faster than Jest with Vite).
Connecting React + Spring Boot into a complete application — the "glue" module
What CORS is: browser security preventing frontend on localhost:5173 from calling backend on localhost:8080. Spring CORS: @CrossOrigin on controllers or global WebMvcConfigurer. Allowed origins, methods, headers. Credentials (cookies, auth headers) require specific CORS config. Pre-flight OPTIONS requests. The error every full-stack developer hits first — and how to fix it properly.
Frontend: .env files (VITE_API_URL=http://localhost:8080). Backend: application-dev.yml, application-prod.yml. Docker environment variables. Why hardcoded URLs break: localhost doesn't exist in production. API base URL configuration in Axios. Feature flags for dev-only features. The pattern every production app uses.
API versioning: /api/v1/users (URL-based, most common), Accept header (less common). Consistent error response format: { timestamp, status, message, path, errors[] }. Error mapping: Spring exceptions → HTTP status codes → React error handling. Global error interceptor in Axios. Toast notifications for user-facing errors. How frontend and backend agree on data formats.
Why microservices: independent deployment, technology flexibility, team autonomy. When monolith is better (most student projects). API Gateway: single entry point for multiple services. Service Discovery: how services find each other. Circuit Breaker: handle service failures gracefully. This is an OVERVIEW — not implementation. Understanding the concepts for interview discussions and future architecture decisions.
Ship your application — from local development to production deployment
Dockerfile for Spring Boot: multi-stage build (builder stage compiles, runtime stage runs — smaller image). Dockerfile for React: build stage (npm run build) + Nginx serve stage. docker-compose.yml: Spring Boot + PostgreSQL + Redis + React in one command. Docker volumes for database persistence. Docker networking: services communicate by name. The complete "docker compose up" that runs the entire stack locally.
Feature branch workflow: main → feature/add-auth → PR → review → merge. Meaningful commits: "feat: add JWT authentication" not "update files." .gitignore for Java (.class, target/, .idea/) and React (node_modules/, dist/, .env). README.md: project description, setup instructions, API docs, screenshots. Making your GitHub profile interview-ready: pinned repos, clean commit history.
Continuous Integration: on every push — build, test, lint. Continuous Deployment: on merge to main — build Docker image, push to registry, deploy. GitHub Actions workflow: .github/workflows/ci.yml. Steps: checkout → setup Java → mvn test → build image → push. Parallelise: backend tests + frontend tests simultaneously. Why CI/CD matters: "works on my machine" doesn't count — if tests pass in CI, it works everywhere.
Options for students: Railway (easiest, free tier), Render (good free tier), AWS Elastic Beanstalk (enterprise). Deploying Spring Boot: JAR + database connection string. Deploying React: static files on Vercel/Netlify (free). Custom domain setup. HTTPS with Let's Encrypt. Environment variables in cloud platforms. Production checklist: CORS, HTTPS, error logging, database backups. "Here's the live URL of my project" — the strongest portfolio statement in any interview.
Not exercises, not todo apps — real applications with auth, database, file upload, pagination, and deployment. Each project is portfolio-ready and interview-demonstrable.
Product catalog, shopping cart, user auth (JWT), order management, payment integration (mock), admin dashboard, image upload, search + filtering with pagination.
Kanban board with drag-and-drop, team collaboration, task assignment, real-time updates (WebSocket), role-based access (admin/member), activity timeline.
Rich text editor, markdown support, categories/tags, comments, user profiles, image upload, SEO-friendly URLs, admin content management.
Trainers build features live — from empty Spring Initializr to deployed application. Students code alongside. Every session adds a working feature to the project. Not slides — live code.
Between sessions, students implement features on their own project. Git-based submissions: push to GitHub, trainer reviews PRs. The development workflow used at real companies.
Trainers review student code: naming, structure, error handling, security, testing. The feedback loop that transforms "works" into "works correctly, securely, and maintainably."
Every student deploys their application to the cloud with a live URL. The URL goes on their resume. "Here's my deployed project" is the strongest statement in any interview.
The majority of enterprise India runs on Java. Spring Boot is the default framework. Service companies hire thousands of Java full stack developers annually. Students who can build Spring Boot APIs and connect them to a React frontend are immediately employable in these roles.
Flipkart, Swiggy, Razorpay, PhonePe — product companies expect developers who can build end-to-end. "Build a feature from database to UI" is the standard interview assignment. This module trains exactly that: database schema → API → frontend → deployment.
A deployed full-stack project with JWT auth, database, and a live URL is worth more than any number of MCQ scores. When an interviewer asks "Tell me about a project you built," students have a real answer with architecture decisions, code on GitHub, and a working deployment.
Companies pay more for full-stack developers than single-skill developers. A backend-only developer earns X. A full-stack developer who can build React frontends, Spring Boot backends, and deploy with Docker earns X + 30–50%. This module builds the complete skill set that commands higher compensation.
E-305, Industrial Area, Sahibzada Ajit Singh Nagar, Punjab 160055, IN
