Debug a React Watch List Where Added Movies Never Appear

The React frontend section of a full-stack online assessment gives you a small movie website with a frontend and a backend. A signed-in user can add a movie to their watch list from the movie detail page, and the watch list page shows the movies the user has added. On the backend, a `watchListController` handles the watch-list requests. The reported bug: the user adds a movie, but when they open the watch list page the movie is not there. The section tests React state management and the AJAX calls between the frontend and the backend. Find the root cause, fix it, and show that the fix works. The report does not say what the root cause was, because the candidate ran out of time before finding it. Treat the task as a diagnosis that starts from the symptom. Practical conditions of the environment: - Reproducing the bug requires signing in, and you will sign in repeatedly while testing. The test user's credentials are given in the task text but cannot be pasted into the app's sign-in form. - An AI assistant is available. It answers syntax and navigation questions, such as listing every AJAX call in the project and the file behind each operation, but declines questions that point at the root cause, such as asking about a specific piece of React state or a specific call path. ### Clarifying Questions - Is the watch list stored only on the backend per user, or is it also held in shared client state (a context or a store) that both pages read? - How does the frontend identify the user to the backend: a token in a header, a cookie, or a user id sent as a parameter? - Does the bug happen for every movie and every user, and does a full page reload change what the watch list page shows? - May I change the backend controller, or only the frontend? ### Part 1 — Locate the root cause Describe how you would narrow the symptom down to one layer: the detail page's state, the add request, the controller, the fetch request, or the watch list page's rendering. ```hint Follow both requests Put the add request and the watch-list fetch side by side and compare which user each one identifies and when each one is sent. ``` ```hint The button is not the server A button that switches to "added" tells you what the component believes, not what the backend stored. ``` #### What This Part Should Cover - Reproducing the bug efficiently despite repeated sign-in - Reading the network traffic and the controller for both the add path and the fetch path - A decision procedure that maps each observation to the layer at fault ### Part 2 — Fix it and prove the fix For each layer that could be at fault, describe the fix you would make. Then explain how you would show that an added movie now appears on the watch list page and that nothing else broke. ```hint Where the truth lives Decide which side owns the watch list, and check that both pages agree with it after navigation and after a reload. ``` #### What This Part Should Cover - Fixes for the state, identity and fetch failure classes, made at the source rather than patched around - Keeping the detail page's "in watch list" state consistent with the server - Verification across navigation, reload and a second user, plus a regression test ### What a Strong Answer Covers - A systematic trace from the click to the rendered list instead of guessing at components - A check of how the controller determines the user id (parameter or token) on every watch-list endpoint - A clear separation of component state from server state, with a refetch or cache update after the mutation - Fixes verified end to end, with no credentials or debugging code left in the submission - Use of the assistant to map the codebase while doing the root-cause reasoning yourself ### Follow-up Questions - Why should the controller take the user id from the token rather than from a request parameter, and what attack does the parameter version allow? - How would you make adding a movie feel instant with an optimistic update, and what happens when the request fails? - The watch list is open in two tabs and the user adds a movie in one of them. How would you keep the other tab correct? - What automated test would have caught this bug before release?