# Site

## Pages

- [Page not found](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/404/): That page doesn't exist, or it has moved since you last looked
- [Three applications, one progression](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/assessments/): Build the reader, its editorial desk, then a typed consultation service.
- [Assignment 1: Vue 2 Mobile Content App](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/assessments/assignment-1/): Make an inherited interview article reader dependable across routes, requests and shared account state.
- [Assignment 2: Vue 3 Admin Dashboard](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/assessments/assignment-2/): Move from a reader to its editorial desk, with one place for identity, request policy and reusable management behaviour.
- [Assignment 3: Typed Consultation App](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/assessments/assignment-3/): Transfer the architecture to a fictional patient consultation service and leave evidence that another developer can safely change it.
- [The course](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/course/): A maintenance studio for the frontend you inherit, the migration you must justify and the service someone else will maintain.
- [Twelve weeks](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/lectures/): From a saved flag to a service another developer can maintain.
- [Thinking in Vue](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/lectures/week-01/): The inherited careers site changes button labels with querySelector. Its saved flag says one thing; the screen says another. Before adding features, replace those competing instructions with one state model.
- [Directives, Events and Forms](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/lectures/week-02/): A student edits an interview title, then filters the list. The draft appears beside a different article. The list looks tidy, but the interface has lost the identity of the thing being edited.
- [Derived State and Application Timing](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/lectures/week-03/): The feed stores both articles and filteredArticles. Removing an article updates only one array. Meanwhile, an old search response arrives after a newer one and silently replaces it.
- [Components and Data Flow](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/lectures/week-04/): Search, profile, article cards and save handlers share one large file. Every change can reach every variable. Extracting files alone will not fix that: a child that mutates its prop preserves the same hidden coupling.
- [Component Interfaces and Reusable UI](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/lectures/week-05/): A modal works only on the profile page because it reaches into that parent through $refs. A loading spinner blocks clicks but says nothing to a keyboard user. Reuse exposes contracts that the first caller never had to name.
- [Routing, APIs and Mobile Applications](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/lectures/week-06/): The feed works until someone shares a URL, refreshes a detail page or loses their connection. A successful click-through demo has concealed three application-level failures.
- [Shared State with Vuex](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/lectures/week-07/): The header still displays a name after the account page logs out. The saved list has another copy of the user. Three correct components have produced one inconsistent application.
- [Moving to Vue 3](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/lectures/week-08/): A rewrite can remove old bugs and quietly introduce new ones. The team wants Composition API; readers still want their saved articles. Make an acceptance contract before comparing syntax.
- [Vue 3 Application Architecture](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/lectures/week-09/): The editor opens two management pages and receives two different error messages for the same expired session. Token injection, redirects and loading flags have spread into every component.
- [TypeScript for Vue Developers](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/lectures/week-10/): The new service can hold paid: true and paymentFailed: true at once. Both are valid booleans. Neither explains what the interface should show. A larger domain needs a model with fewer contradictory states.
- [Vue 3 with TypeScript](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/lectures/week-11/): The department selector emits a display label while the request layer expects an ID. JavaScript accepts the handoff; the next screen loses its selection. Type the seam where two components disagree.
- [Production Vue](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/lectures/week-12/): The happy path works. A double click creates two consultations, a slow response overwrites a newer screen, and a hidden action can still be called directly. The handover is where those assumptions become visible.
- [At the review desk](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/people/): Meet Guochen Wang, the course convenor and an ANU Advanced Computing student exploring Vue, React, TypeScript and machine learning.
- [Guochen Wang](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/people/guochen-wang/): ANU Advanced Computing (Honours) student and frontend development enthusiast exploring Vue, React, TypeScript and machine learning.
- [Policies and support](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/policies/): The working agreements for this fictional SlopU studio: individual work, visible assistance, accessible interfaces and honest handovers.
- [The workbench](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/resources/): Version-aware references, local fixtures and the small contracts shared by the three projects.
- [A reactive interview profile](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/sessions/week-01/): Who changes the interface when the state changes?
- [An editable interview shortlist](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/sessions/week-02/): Why did editing one article change the wrong row?
- [A searchable article feed with honest states](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/sessions/week-03/): Should this value be stored, computed or watched?
- [A componentised article reader](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/sessions/week-04/): Which component is allowed to change this article?
- [A reusable reader UI kit](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/sessions/week-05/): Can a second caller use this component without opening its source?
- [A routed mobile article browser](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/sessions/week-06/): Can a reader open this article directly, then recover from a failed request?
- [One identity and collection store](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/sessions/week-07/): What should happen everywhere when the reader logs out?
- [A behaviour-preserving Vue 3 migration](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/sessions/week-08/): What must stay the same when the implementation changes?
- [An editorial dashboard with one request boundary](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/sessions/week-09/): Where does an expired session get handled once?
- [A typed consultation state model](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/sessions/week-10/): Which impossible state does this JavaScript object allow?
- [A typed consultation form workflow](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/sessions/week-11/): Can the component contract reject an invalid consultation?
- [A consultation service handover](https://comp4020-agentic-coding-studio.github.io/comp4020-ass2-u7663394/sessions/week-12/): Could another developer safely change this tomorrow?