Case Study: Patient Treatment Management Interface (PTMI) A ...

Prompt

Case Study: Patient Treatment Management Interface (PTMI) A UK medical clinic requires a modern, responsive mobile web application to help its staff view and manage patient treatment information efficiently. You are required to design and develop a Patient Treatment Management Interface (PTMI) using React, HTML, CSS and JavaScript. The application should follow a mobile-first design approach, providing an interactive and user-friendly interface that adapts appropriately to different screen sizes, including smartphones, tablets and desktop computers. The clinic maintains treatment records containing the following information: - Treatment ID: A unique identifier for each treatment - Treatment Type: The type or category of medical treatment provided - Treatment Name: The name or description of the treatment - Start Date: The date on which the treatment begins The PTMI should enable clinic staff to view treatment records, filter treatments according to their types, and enter and display treatment information through an interactive form. Application Development Requirements: The development of PTMI will be undertaken in two stages. Stage 1: Front-End Development (Assessment 1): You are required to design and implement the client-side mobile web application using React. The application should demonstrate appropriate component-based architecture, interactive user interface elements, state management using React Hooks, and responsive design principles. The application must use predefined treatment records stored locally within the React application. Users should be able to view and filter predefined treatment records by treatment type. An interactive form should also allow users to enter and display treatment details without adding them to the existing records. At this stage, no backend server, REST API, database connectivity or persistent data storage is required. Stage 2: Full-Stack Development (Assessment 2): You will extend the PTMI developed in Assessment 1 by implementing a Node.js backend, RESTful web services and database connectivity. This stage will introduce the ability to insert, retrieve and store treatment records persistently in a database through RESTful web services. The overall objective is to develop PTMI progressively, beginning with a responsive and interactive mobile web interface and extending it into a functional full-stack mobile web application. Assessment 1: Programming for React – PTMI Development and Supporting Report Module: Mobile Web Application Development Academic Year: 2026/27 Assessment Weighting: 30% Total Marks: 30 Submission Deadline: Thursday 19 November 2026, 11:00 PM Submission: One ZIP file via Blackboard Task 1: Wireframe and Development Progression (10 Marks): You are required to plan and document the design of your Patient Treatment Management Interface (PTMI): 1. Wireframe (4 marks): Design a final mobile-first PTMI wireframe using Figma, Axure RP or a similar application, illustrating the treatment records, filtering control and treatment entry form. 2. Design Justification (2 marks): Briefly justify your interface design decisions, considering usability and mobile responsiveness. 3. Development Progression and Evidence (4 marks): Provide two screenshots: one showing your final PTMI wireframe and another showing the implemented React interface running in a web browser. Briefly explain how your wireframe was translated into the final application. Provide your design justification and development evidence in the supporting report. Task 2: Functional React Interface (10 Marks): You are required to develop a functional, responsive PTMI application using React: 1. Treatment Records Display (3 marks): Display at least five predefined treatment records, each containing Treatment ID, Treatment Type, Treatment Name and Start Date. 2. Treatment Filtering (2 marks): Provide a filtering control that allows users to display treatments according to their type. 3. Treatment Entry Form (3 marks): Create an interactive form allowing users to enter all four treatment attributes and display the entered information when a button is clicked. 4. Responsive Interface (2 marks): Ensure the application is visually organised, user-friendly and adapts appropriately to mobile and desktop screen sizes. Note: All treatment data must be stored locally within the React application. The form should display the entered information without adding it to the predefined treatment records. No backend, REST API or database is required. Task 3: Programming Competence (10 Marks): You are required to demonstrate appropriate React programming techniques when implementing PTMI. 1. React Components and Props (3 marks): Use functional React components and props to organise the application and pass treatment information between components. 2. React Hooks and Event Handling (3 marks): Use useState() and appropriate event handlers, such as onChange and onClick, to manage user input and interactions. 3. JSON, Arrays and .map() (3 marks): Represent predefined treatment records using structured JavaScript/JSON data and use .map() to render treatment information dynamically. 4. Code Quality (1 mark): Ensure the code is appropriately organised, readable and uses meaningful variable and component names. Submission Requirements Submit one ZIP file named PTMI_StudentID.zip containing: 1. Wireframe: Submit a clear screenshot of your final mobile-first PTMI wireframe designed using Figma, Axure RP or a similar application. The screenshot must clearly show the proposed interface layout and its required components. No editable wireframe project file is required. 2. React Project: The complete React/Vite project files required to run the application using Node.js and Visual Studio Code. Exclude the node_modules folder. 3. Supporting Report (PDF): A maximum of 2 A4 pages and 1,000 words, whichever limit is reached first, the final wireframe screenshot, the implemented React interface screenshot, and a brief design justification and explanation of the development progression.

A system prompt was added to support web rendering