Step 1 • Foundations
Cross-stack Project Foundations and Conventions beginner Align project structure, TypeScript configuration, API contract conventions, and environment rules across the React frontend and Spring Boot backend before writing features.
8h Step 2 • Frontend
React UI Architecture and Routing beginner Build a route structure, shared layout system, and accessible component primitives that can absorb product complexity driven by backend data.
9h Step 3 • Frontend
React State, Hooks, Forms, and Data Fetching beginner Handle local state, controlled forms with Zod validation, and server state with TanStack Query without coupling UI to backend implementation details.
10h Step 4 • Frontend
Advanced React Patterns and Performance intermediate Apply code splitting, Zustand for global state, memoization, and suspense boundaries to keep the UI fast and maintainable at scale.
8h Step 5 • Backend
Spring Boot REST API Core beginner Build the HTTP layer with controllers, services, DTOs, request validation, and exception handling so the React frontend has a stable API contract.
10h Step 6 • Backend
Spring Boot Configuration, Profiles, and Secrets beginner Manage configuration safely with @ConfigurationProperties, environment profiles, and secret injection so local, test, and production environments never drift.
7h Step 7 • Backend
JPA Modeling, Flyway Migrations, and PostgreSQL intermediate Model relational data with Spring Data JPA, manage schema evolution with Flyway, and keep query performance visible with EXPLAIN ANALYZE.
10h Step 8 • Security
Spring Security Authentication and JWT intermediate Implement login with BCrypt, JWT token issuance and refresh, and OAuth2 resource server configuration so the React client can rely on predictable auth behavior.
Spring Security 10h
Step 9 • Security
RBAC, Method Security, and Resource Guards intermediate Enforce role-based access at route and service levels with @PreAuthorize and resource ownership checks that the React client can trust.
Spring Security 8h
Step 10 • Integration
React API Integration and Auth-aware Caching intermediate Build a frontend data layer with auth-aware Axios interceptors, TanStack Query cache invalidation, optimistic updates, and graceful error display.
9h Step 11 • Integration
OpenAPI Contracts, Error Mapping, and Type Sharing intermediate Generate OpenAPI docs from the Spring API, share type definitions with the React frontend, and map backend errors to usable frontend states.
8h Step 12 • Product Features
Caching, Background Jobs, and Realtime Feedback intermediate Cache hot reads with Redis, move expensive operations to async workers, and surface job progress to the React UI with SSE or WebSocket.
8h Step 13 • Quality
Frontend, Backend, and End-to-end Testing advanced Build a layered test strategy: RTL for component behavior, Spring MockMvc + Testcontainers for API integration, and Playwright for critical user journeys.
10h Step 14 • Quality
Observability, Logging, and Distributed Tracing advanced Add Spring Boot Actuator health checks, Micrometer metrics, structured logging with trace IDs, and OpenTelemetry instrumentation for tracing across the stack.
8h Step 15 • Ship It
CI/CD, Docker, and Production Deployment advanced Deploy the React frontend to a CDN, containerize Spring Boot, run database migrations in CI, and maintain rollback procedures for both code and schema changes.
9h 