Team MERN capstone: exam and patient workflows in React and Redux

COVID-era clinical UI sounds dramatic until you hit the boring failure mode: Redux holds patient data, but the route never mounts. Our 2022 team capstone on a React/Express monorepo was my first serious pass at wiring list ↔ detail flows end to end.

#TL;DR

In 2022 I contributed to a team capstone built on a standard React + Express monorepo template (client on :8000, API on :3000). Public repository: innovators-covid-project. We aimed at a COVID-era clinical workflow UI: exams, patient detail views, admin screens, and sortable tables backed by MongoDB.

My integration work shipped displayPatient, routing fixes, and API routes supporting an exam table refactor.

#Architecture in practice

The client’s App.js is a router Switch with explicit pages: Exams, CreateExams, DisplayExam, DisplayPatientInfo, Admin, etc. State flows through connect() and bindActionCreators — verbose today, but it forced me to see action → reducer → props on every feature.

The template README split setup across client/README.md and server/README.md. Our team’s product work was integrating patient views with exam listing so clinicians (in the fictional workflow) could move between list and detail without broken routes — the kind of bug that only shows up when frontend and backend slugs disagree.

#What went well

• Feature integration — patient display working end-to-end was the milestone that made the demo credible.
• Table UX — react-table + MUI was the right tool for dense exam grids.
• Deployment literacy — we documented Amplify and Beanstalk paths even when demos ran locally.
• Team integration — aligning frontend routes with backend handlers before calling the demo done.

#What I’d improve now

#Patient route integration (February 2022)

The integration pass that made the demo credible wired /Patient in the React router and a DisplayPatientInfo page that reads PATIENT_ID from navigation state, then loads exams via getExamsByPatientId. Without that route, the Redux store could hold patient data while the table view never mounted — classic “API works in Postman, UI shows nothing.”

// routes.js
const DISPLAYPATIENT = '/Patient';
 
// DisplayPatientInfo.js — guard when deep-linked without state
if (props.location.state !== undefined) {
  let patient_Id = props.location.state.PATIENT_ID;
  // fetch exams, render ExamTable
} else {
  component = <div>Patient Not Found</div>;
}

The same integration pass refactored the exam table component and aligned backend routes with the client API module (~244 lines changed across eleven files in that release window).

#Closing thought

Capstone repos fail in the seams: a working Redux reducer does not help if the patient route and the API path disagree. Treat frontend routes and backend handlers as one checklist before you call the demo done.

#Reader field guide

When this monorepo pattern shows up: CRA client + Express API in one repo; Redux + react-router v5; dense tables (react-table + MUI); list/detail navigation that must agree on slugs and IDs.

Operational checklist

• Single root quickstart with copy-paste env — not split READMEs that hide nested client/
• Patient/detail routes guard missing navigation state (deep links should fail visibly)
• Verify API path in the client module matches Express handler before debugging Redux
• Push filters to query params when the API supports them — avoid post-fetch filtering on large lists
• Pick one design system — mixed Bootstrap + MUI reads as template debt
• Document Amplify (client) and Beanstalk (API) paths even if demos stay local

#Related reading

#On this site

#References (curated)

The capstone repo is a time capsule; these links are what I’d assign a team redoing the same UI today.