Full-Stack Integration

🔗 The Full-Stack Data Flow (5–20 min)

💻 Live Coding — Fix CORS + Wire Frontend (20–40 min)

// CORS config — allow frontend to call your API
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("http://localhost:3000", "http://localhost:5500")
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .allowedHeaders("*");
    }
}

// Full-stack: frontend script calling real API
const API_BASE = 'http://localhost:8080/api';

async function loadDashboard() {
    const [students, courses] = await Promise.all([
        fetch(`${API_BASE}/students`).then(r => r.json()),
        fetch(`${API_BASE}/courses`).then(r => r.json())
    ]);

    document.getElementById('student-count').textContent = students.length;
    document.getElementById('course-count').textContent  = courses.length;

    document.getElementById('student-list').innerHTML =
        students.slice(0, 5).map(s => `
          <tr>
            <td>${s.name}</td>
            <td>${s.dept}</td>
            <td><span class="badge">${s.gpa}</span></td>
          </tr>
        `).join('');
}

loadDashboard();