💉 Video Walkthrough Script & Production Plan

Travel Jabs — CI5320 Group 46
⏱ ~14:45 total 👥 3 members 📋 23 user stories 🗄 9 database entities
Checklist progress 0 / 0

📊 User Story Allocation

#User StoryRoleMemberHTTPEntity
1Register an account (faux login)PatientMember 1—Auth
2Search for clinicsPatientMember 1GETClinics
3View clinics with search/sortPatientMember 1GETClinics
4Add new vaccines to offeringsManagerMember 1POSTVaccines
5Delete a planned vaccination/vaccineManagerMember 1DELETEVaccines
6Create clinician accountsManagerMember 1POSTStaff
7Update clinician account detailsManagerMember 1PUTStaff
8Protected routes + role-based navAllMember 1—Auth
9Create patient accountsManagerMember 2POSTPatients
10Search for patient accountsManagerMember 2GETPatients
11Modify patient detailsManagerMember 2PUTPatients
12Create appointment bookingsManagerMember 2POSTAppointments
13Assign clinician to appointmentManagerMember 2POST/PUTAppointments
14Reschedule appointmentsManagerMember 2PUTAppointments
15Cancel appointmentsManagerMember 2DELETEAppointments
16Reassign clinicians to appointmentsManagerMember 2PUTAppointments
17View assigned appointmentsClinicianMember 3GETAppointments
18View appointment details + booking notesClinicianMember 3GETAppointments
19Record whether vaccination deliveredClinicianMember 3POSTVaccinations
20View vaccination outcomesPatientMember 3GETVaccinations
21Delete a vaccination recordManagerMember 3DELETEVaccinations
22View invoicesManagerMember 3GETInvoices
23Backend architecture + database schemaAllMember 3—All
Member 1
8 stories — Auth, Clinics, Vaccines, Staff
GETPOSTPUTDELETE
~4 min 30 sec
Member 2
8 stories — Patients, Appointments
GETPOSTPUTDELETE
~4 min 30 sec
Member 3
7 stories + Backend demo
GETPOSTDELETE
~4 min 30 sec

✅ Pre-Recording Checklist

🛠 Environment Setup 0 / 13

⏱ Time Log

All Member 1 Member 2 Member 3
SegmentSpeakerDurationCumulative
Group IntroductionAll 30:450:45
Login + Protected RoutesMember 11:001:45
Clinics — Search & ViewMember 10:452:30
Vaccines — Add & DeleteMember 11:153:45
Staff — Create & UpdateMember 11:305:15
Patients — Create, Search, ModifyMember 21:306:45
Appointments — Create & AssignMember 21:308:15
Appointments — Reschedule & CancelMember 21:309:45
Clinician — View AppointmentsMember 31:0010:45
Vaccinations — Add & View & DeleteMember 31:3012:15
Invoices — ViewMember 30:3012:45
Backend + Database DemoMember 31:3014:15
Closing SummaryAll 30:3014:45
TOTAL~14:45

🎬 Scene 1 — Group Introduction

Duration: ~45 seconds  |  All members

▶ Introduction Script M1M2M3
🗣 Says
Member 1 — "Hello, and welcome to the Travel Jabs video demonstration. We are Group 46 from CI5320. My name is [Member 1 Name], and I'll be demonstrating user authentication, clinic search, vaccine management, and staff management."
🖥 Visual / Action
Title slide or Home page visible.
🗣 Says
Member 2 — "I'm [Member 2 Name], and I'll walk you through patient management and the full appointment booking workflow — creating, rescheduling, and cancelling appointments."
🖥 Visual / Action
Home page visible.
🗣 Says
Member 3 — "And I'm [Member 3 Name]. I'll demonstrate the clinician workflow, vaccination recording, invoices, and our Express JS backend with the MySQL database."
🖥 Visual / Action
Home page visible.
🗣 Says
Member 1 — "Travel Jabs is a healthcare web application for managing travel immunisation appointments across UK clinics. It supports three user roles: Manager, Clinician, and Patient. Let's begin."
🖥 Visual / Action
Home page — briefly point out the navigation bar.

🔐 Scene 2 — Member 1: Auth, Clinics, Vaccines & Staff

Duration: ~4 min 30 sec  |  Member 1

2.1 — Login & Protected Routes 1:00

▶ Login + Role-Based Navigation M1
🗣 Says
"The first requirement is that patients can register an account to book and manage appointments. Our application implements a faux login system supporting three roles: Manager, Clinician, and Patient."
🖥 Action
Show the Login page (/login).
✅ Outcome
Login page displayed with three role options.
🗣 Says
"Before logging in, notice that the navbar only shows public routes — Home, Clinics, and Vaccines. If I try to manually navigate to /patients in the URL bar…"
🖥 Action
Type /patients directly in the browser URL bar.
✅ Outcome
User is redirected back to /login — the ProtectedRoute component blocks access.
🗣 Says
"The protected route component redirects unauthenticated users to the login page. This satisfies the requirement for role-based access control."
🖥 Action
Point at the URL showing /login.
✅ Outcome
Redirect confirmed.
🗣 Says
"Now I'll log in as a Manager. Notice how the navbar updates to show all links — Patients, Appointments, Staff, and Invoices."
🖥 Action
Click the Manager faux login button.
✅ Outcome
Navbar shows full menu. All routes accessible.
🗣 Says
"If I log out and log back in as a Patient, the Staff link disappears because only Managers can manage staff — enforced by the allowedRoles prop on the protected route."
🖥 Action
Log out → log in as Patient. Point at navbar.
✅ Outcome
Staff link is hidden. Attempting /staff via URL redirects.

2.2 — Clinics: Search & View 0:45

▶ Clinic Search + phpMyAdmin Verification M1
🗣 Says
"A key patient requirement is the ability to search for clinics to find a convenient location. Let's navigate to the Clinics page."
🖥 Action
Click Clinics in the navbar.
✅ Outcome
Clinic cards displayed — fetched via GET /api/clinics.
🗣 Says
"The clinic list is loaded from our backend via a GET request. Each card shows the clinic name, address, postcode, and contact details."
🖥 Action
Hover over a clinic card, pointing out the fields.
✅ Outcome
Card details visible.
🗣 Says
"We've implemented search and sort functionality. I can type a postcode to filter clinics, or sort alphabetically by name."
🖥 Action
Type "SW" in search box. Change sort dropdown.
✅ Outcome
List filters in real time. Sort reorders the cards.
🗣 Says
🗄 phpMyAdmin "On the right, phpMyAdmin shows the Clinics table — the same data the frontend is displaying."
🖥 Action
Switch to phpMyAdmin → click Clinics table → Browse.
✅ Outcome
Side-by-side: app clinic list matches database rows.

2.3 — Vaccines: Add & Delete 1:15

▶ Vaccine POST + DELETE with DB Verification M1
🗣 Says
"Log back in as Manager. A manager requirement is to add new vaccines to the business's offerings. Let's navigate to Vaccines."
🖥 Action
Log in as Manager → click Vaccines in navbar.
✅ Outcome
Vaccines list view loaded via GET /api/vaccines.
🗣 Says
🗄 phpMyAdmin "First, let me show the Vaccines table — note the current number of rows."
🖥 Action
phpMyAdmin → Vaccines table → Browse. Note row count.
✅ Outcome
Vaccines table displayed with current rows.
🗣 Says
"I'll click Add to open the vaccine form. This is a reusable form component. I'll enter a new vaccine name and cost."
🖥 Action
Click Add → fill: Name = "Zika Vaccine", Cost = "89.99" → click Submit.
✅ Outcome
Modal form appears. Fields fill correctly.
🗣 Says
"The form sends a POST request to /api/vaccines. The new vaccine now appears in our list."
🖥 Action
Point at the new vaccine card in the list.
✅ Outcome
New "Zika Vaccine" card appears in the list.
🗣 Says
🗄 phpMyAdmin "Refreshing phpMyAdmin confirms the new row has been inserted."
🖥 Action
phpMyAdmin → Refresh Vaccines table.
✅ Outcome
New row visible with "Zika Vaccine" and cost 89.99.
🗣 Says
"I can also delete a vaccine. I'll click the delete icon on the vaccine we just added. This sends a DELETE request."
🖥 Action
Click Delete on the "Zika Vaccine" card. Confirm.
✅ Outcome
Card removed from the list.
🗣 Says
🗄 phpMyAdmin "And refreshing phpMyAdmin confirms the row has been removed."
🖥 Action
phpMyAdmin → Refresh.
✅ Outcome
Row no longer present.

2.4 — Staff: Create & Update 1:30

▶ Staff POST + PUT with DB Verification M1
🗣 Says
"As a Manager, I need to create clinician accounts so they can access their schedules. The Staff page is only accessible to Managers."
🖥 Action
Navigate to Staff view.
✅ Outcome
Staff list displayed with name, role, and clinic.
🗣 Says
🗄 phpMyAdmin "Let me show the Staff table before we add a new record."
🖥 Action
phpMyAdmin → Staff table → Browse. Note row count.
✅ Outcome
Staff table with current rows visible.
🗣 Says
"I'll click Add to create a new clinician. The form provides dropdowns for Role and Clinic — populated dynamically from the Roles and Clinics API endpoints."
🖥 Action
Click Add → fill: Firstname = "Sarah", Lastname = "Chen", Role = "Clinician", Clinic = select one → Submit.
✅ Outcome
Form modal with dropdowns populated from API.
🗣 Says
"The POST request creates the new staff member. Sarah Chen now appears in the list as a Clinician."
🖥 Action
Point at the new staff card.
✅ Outcome
New staff card displayed.
🗣 Says
🗄 phpMyAdmin "phpMyAdmin confirms the insertion."
🖥 Action
Refresh phpMyAdmin → Staff table.
✅ Outcome
New row visible.
🗣 Says
"Now I'll demonstrate updating clinician details. I'll click Modify on Sarah's card to open the pre-filled form."
🖥 Action
Click Modify on "Sarah Chen" card.
✅ Outcome
Form opens with existing data pre-filled.
🗣 Says
"I'll change her assigned clinic. The form sends a PUT request to /api/staff/:id."
🖥 Action
Change Clinic dropdown → click Submit.
✅ Outcome
Card updates to show new clinic assignment.
🗣 Says
🗄 phpMyAdmin "phpMyAdmin confirms the StaffClinicID has been updated."
🖥 Action
Refresh phpMyAdmin → find Sarah's row.
✅ Outcome
StaffClinicID changed to new clinic's ID.

👤 Scene 3 — Member 2: Patients & Appointments

Duration: ~4 min 30 sec  |  Member 2

3.1 — Patients: Create, Search & Modify 1:30

▶ Patient POST + GET Search + PUT with DB Verification M2
🗣 Says
"I'll now demonstrate patient management. As a Manager, I need to create patient accounts and search for patient accounts to assist with bookings."
🖥 Action
Logged in as Manager → navigate to Patients.
✅ Outcome
Patients list view with search/sort bar at top.
🗣 Says
🗄 phpMyAdmin "Let me first show the Patients table so we can track changes."
🖥 Action
phpMyAdmin → Patients table → Browse. Note row count.
✅ Outcome
Patients table displayed.
🗣 Says
"I'll create a new patient — first name, last name, address, postcode, and age."
🖥 Action
Click Add → fill: "James", "Walker", "10 River St", "E1 4AB", "34" → Submit.
✅ Outcome
POST request sent. New patient card appears.
🗣 Says
"Now I'll use search to find them — this satisfies the 'search for patient accounts' user story."
🖥 Action
Type "Walker" in the search box.
✅ Outcome
List filters to show only "James Walker".
🗣 Says
"I can also sort patients by first name or last name."
🖥 Action
Clear search → change sort to "Last name".
✅ Outcome
List re-orders alphabetically.
🗣 Says
"Now I'll modify this patient's address — this uses a PUT request."
🖥 Action
Click Modify on "James Walker" → change Address to "25 High Street" → Submit.
✅ Outcome
Card updates with new address.
🗣 Says
🗄 phpMyAdmin "phpMyAdmin confirms both the new row and the updated address."
🖥 Action
Refresh phpMyAdmin → find James Walker's row.
✅ Outcome
Row shows "25 High Street".

3.2 — Appointments: Create & Assign 1:30

▶ Appointment POST + Clinician Assignment + DB Verification M2
🗣 Says
"Next, the core workflow — appointment management. As a Manager, I need to create bookings and assign clinicians."
🖥 Action
Navigate to Appointments view.
✅ Outcome
Appointments list displayed with search/sort.
🗣 Says
🗄 phpMyAdmin "Here's the Appointments table before we create a new booking."
🖥 Action
phpMyAdmin → Appointments → Browse. Note row count.
✅ Outcome
Appointments table visible.
🗣 Says
"The form has dropdown fields for Patient, Clinic, Staff, and Status — all populated from their respective API endpoints."
🖥 Action
Click Add → form opens with dropdown fields.
✅ Outcome
Modal form with 4 dropdowns + datetime field.
🗣 Says
"I'll select James Walker, choose a clinic, assign a clinician, set the date, and set status to Pending."
🖥 Action
Fill all fields → Submit.
✅ Outcome
New appointment card appears with all fields displayed.
🗣 Says
"This satisfies two user stories at once — creating bookings and assigning a clinician."
🖥 Action
Point at the new appointment card.
✅ Outcome
Patient, clinic, clinician, and status all displayed.
🗣 Says
🗄 phpMyAdmin "phpMyAdmin confirms the new row with correct foreign keys."
🖥 Action
Refresh phpMyAdmin → find new row.
✅ Outcome
Correct PatientID, ClinicID, StaffID, StatusID.

3.3 — Appointments: Reschedule, Reassign & Cancel 1:30

▶ Appointment PUT + DELETE with DB Verification M2
🗣 Says
"Managers also need to reschedule and reassign clinicians. I'll click Modify on the appointment we just created."
🖥 Action
Click Modify on the new appointment card.
✅ Outcome
Form opens pre-filled with current data.
🗣 Says
"I'll change the date and assign a different clinician. This sends a PUT request to /api/appointments/:id."
🖥 Action
Change datetime + Staff dropdown → Submit.
✅ Outcome
Card updates with new date and clinician.
🗣 Says
🗄 phpMyAdmin "phpMyAdmin confirms both the datetime and StaffID have been updated."
🖥 Action
Refresh phpMyAdmin → find appointment row.
✅ Outcome
Updated datetime and StaffID visible.
🗣 Says
"Finally, I'll cancel/delete the appointment to keep the schedule accurate."
🖥 Action
Click Delete on the appointment card. Confirm.
✅ Outcome
Appointment card removed.
🗣 Says
🗄 phpMyAdmin "And the row is removed from the database — a full DELETE operation."
🖥 Action
Refresh phpMyAdmin → Appointments table.
✅ Outcome
Row no longer present.
🗣 Says
"That covers the full appointment lifecycle — creating, assigning, rescheduling, reassigning, and cancelling — all backed by our Express JS API."
🖥 Action
Brief pause on the Appointments list.
✅ Outcome
Clean appointments list displayed.

💊 Scene 4 — Member 3: Clinician, Vaccinations, Invoices & Backend

Duration: ~4 min 30 sec  |  Member 3

4.1 — Clinician: View Assigned Appointments 1:00

▶ Clinician Login + Appointment Viewing M3
🗣 Says
"I'll now demonstrate the clinician's perspective. As a clinician, I need to view my assigned appointments."
🖥 Action
Log out → log in as Clinician.
✅ Outcome
Navbar updates — Staff link hidden (Clinician role).
🗣 Says
"Notice the navbar shows Appointments and Invoices, but not Staff — that's role-based navigation."
🖥 Action
Point at the navbar links.
✅ Outcome
Only Clinician-appropriate links visible.
🗣 Says
"Each card displays the patient name, clinic, assigned clinician, date, and status."
🖥 Action
Click Appointments in navbar.
✅ Outcome
Appointments list with full details.
🗣 Says
"I can search by patient name, clinic, or status — and sort by date. This helps manage workload."
🖥 Action
Type a patient name in search. Change sort to "Date".
✅ Outcome
List filters and re-sorts.

4.2 — Vaccinations: Add, View & Delete 1:30

▶ Vaccination POST + DELETE with DB Verification M3
🗣 Says
"A critical requirement is recording whether vaccination was delivered. Let me switch to Manager to demonstrate the full workflow."
🖥 Action
Log out → log in as Manager → navigate to Appointments.
✅ Outcome
Appointments view as Manager.
🗣 Says
🗄 phpMyAdmin "First, the Vaccinations table in phpMyAdmin."
🖥 Action
phpMyAdmin → Vaccinations → Browse. Note row count.
✅ Outcome
Vaccinations table displayed.
🗣 Says
"I'll expand an appointment card to see its vaccinations. Each shows the vaccine name and cost."
🖥 Action
Click Expand on an appointment card.
✅ Outcome
Vaccination cards appear below the appointment.
🗣 Says
"I'll add a new vaccination. The form provides a dropdown of available vaccines."
🖥 Action
Click Add Vaccination → select "Hepatitis A" → Submit.
✅ Outcome
New vaccination card appears under the appointment.
🗣 Says
🗄 phpMyAdmin "phpMyAdmin confirms the new row, linked via VaccinationAppointmentID."
🖥 Action
Refresh phpMyAdmin → find new row.
✅ Outcome
Correct VaccinationAppointmentID and VaccinationVaccineID.
🗣 Says
"I can also delete a vaccination — for example if recorded in error."
🖥 Action
Click Delete on the new vaccination card.
✅ Outcome
Vaccination card removed.
🗣 Says
🗄 phpMyAdmin "And the row is removed from the Vaccinations table."
🖥 Action
Refresh phpMyAdmin.
✅ Outcome
Row deleted.

4.3 — Invoices: View 0:30

▶ Invoices GET Report + DB Verification M3
🗣 Says
"Managers can view invoices generated for appointments — a read-only report showing invoice ID, appointment, date, and payment status."
🖥 Action
Navigate to Invoices view.
✅ Outcome
Invoice cards displayed via GET /api/invoices.
🗣 Says
"I can search by status or appointment ID, and sort by date or status."
🖥 Action
Type "Paid" in search. Change sort dropdown.
✅ Outcome
List filters and re-sorts.
🗣 Says
🗄 phpMyAdmin "These records match the Invoices table in our database."
🖥 Action
phpMyAdmin → Invoices → Browse.
✅ Outcome
Side-by-side match confirmed.

4.4 — Backend Architecture & Database Demo 1:30

▶ Express JS + MySQL Architecture Walkthrough M3
🗣 Says
"The backend is built with Express JS and connects to MySQL using mysql2 with promise-based queries."
🖥 Action
Switch to VS Code → show backend file tree.
✅ Outcome
Folder structure visible: app.js, Controller.js, database.js, models/.
🗣 Says
"database.js establishes the MySQL connection using mysql2/promise."
🖥 Action
Open database.js in VS Code.
✅ Outcome
Connection config visible.
🗣 Says
"Controller.js implements a generic CRUD controller — a single class for any entity using model query builders."
🖥 Action
Open Controller.js → scroll through methods.
✅ Outcome
Generic get/post/put/delete methods visible.
🗣 Says
"app.js imports all nine entity models, creates Controller instances, and defines API routes with CORS middleware."
🖥 Action
Open app.js → scroll through routes.
✅ Outcome
All 9 entities with their routes visible.
🗣 Says
"Each model file defines SQL queries. appointmentsModel.js includes LEFT JOINs to resolve foreign keys."
🖥 Action
Open models/appointmentsModel.js → show SELECT with JOINs.
✅ Outcome
SQL with LEFT JOINs visible.
🗣 Says
🗄 phpMyAdmin "Here's the full schema — nine tables matching our nine entities."
🖥 Action
phpMyAdmin → traveljabsv1db → show table list.
✅ Outcome
All 9 tables listed.
🗣 Says
"The relational structure uses foreign keys — e.g. AppointmentStaffID references Staff. This ensures data integrity."
🖥 Action
Appointments → Structure tab → point at FK columns.
✅ Outcome
Column names and types visible.

🏁 Scene 5 — Closing Summary

Duration: ~30 seconds  |  All members

▶ Closing Script M1M2M3
🗣 Says
Member 3 — "To summarise, our Travel Jabs application implements a full-stack architecture using React JS on the frontend and Express JS with MySQL on the backend."
🖥 Action
App Home page on screen.
🗣 Says
Member 1 — "We demonstrated GET, POST, PUT, and DELETE operations across multiple entities — Clinics, Vaccines, Staff, Patients, Appointments, Vaccinations, and Invoices."
🖥 Action
Home page visible.
🗣 Says
Member 2 — "We also showed role-based authentication, protected routes, search and sort, and verified every database operation through phpMyAdmin. Thank you for watching."
🖥 Action
Home page visible.

📋 Appendix A — Scene Checklist

🗄 Database States to Prep 0 / 3

🖥 Screens to Prep 0 / 10

🎥 Recording Setup 0 / 6

📝 Appendix B — Intro/Outro Script Templates

30-Second Group Introduction

"Hello and welcome. We are Group 46 from CI5320 — Web Application Development. Our project is Travel Jabs, a web application for managing travel immunisation appointments across UK clinics. The app is built with React JS on the frontend and Express JS with MySQL on the backend. Today, [Member 1 Name] will cover authentication, clinics, vaccines, and staff management. [Member 2 Name] will demonstrate patient and appointment workflows. And [Member 3 Name] will show the clinician experience, vaccinations, invoices, and our backend architecture. Let's get started."

15-Second Closing

"That concludes our demonstration of the Travel Jabs application. We've shown a full-stack implementation covering all major CRUD operations, role-based access control, and database integration across nine entities. Thank you for watching — Group 46."