Week 2 Learning Journal- CST438

This week's lab was a practical and comprehensive project where I built a React frontend from the ground up to interface with our existing Spring Boot backend. The main takeaway was a clear understanding of how React's core features work in a full-stack context. I learned to build the application's structure entirely from components, creating separate, reusable pieces of UI like Register, Login, and OrderHistory. I also became very familiar with React's hooks: useState was essential for managing all form inputs, useEffect was used to fetch data once when the OrderHistory component loaded, and useRef provided a way to directly control the EditOrder dialog modal.

In my opinion, React's primary strength is how it simplifies UI development through component reusability and state management. Being able to create a single Messages component and use it on multiple pages was very efficient. The way useState automatically updates the UI when the state changes is also a powerful feature that feels much simpler than manual DOM manipulation. Finally, using react-router-dom to create a Single Page Application (SPA) made the app feel very fast, as navigating between pages didn't require a full browser reload.

The main weakness, or challenge, I found was not with React itself, but with the complexity of integrating it into a secure, full-stack system. A significant amount of time was spent debugging connection issues between the frontend and backend. Browser error messages were often misleading; for instance, a "Failed to execute 'json'" error was actually caused by a 401 (Unauthorized) response from the server. These issues forced me to debug the entire application flow, from the React fetch call to the Java DTOs and the Spring Security configuration. This process highlighted how critical it is for the frontend and backend data contracts to be in perfect alignment, as the final bug was fixed by correcting a single field name mismatch (token vs. jwtToken) between my CustomerLoginDTO.java and Login.jsx files as i mistakenly named it differently. It was really hard to find where the bug was but at the end I figured it out.