Assigned Readings

1. Intro to React
2. TypeScript & JavaScript Patterns
3. Front-End Design with Mantine UI & Tailwind
4. Testing with Vitest

For this homework assignment, your team will implement Module CRUD in the web UI, similar to the reference implementation in the instructor’s health-app UI. This involves

1. Implementing Create / Read / Update / Delete for Modules in tma-starter-app/ui.
2. Handling loading / error / empty / success states.
3. Keeping your code TypeScript-safe and easy to adjust if your endpoint shape changes.

You can parallelize this work if you agree on shared types + helper functions early. Start by creating GitHub issues that match the “Person X checklist” items in Section 6, then have each person work from their issues.

1. New Files to Add

Your UI does not need to match these files exactly, but the behavior should feel similar.

Component	File
Create module page	ui/src/pages/courses/CreateModulePage.tsx
Module detail page (edit + delete)	ui/src/pages/courses/ModuleDetailPage.tsx
Edit modal	ui/src/components/courses/EditModuleModal.tsx
Module API helpers (Module section)	ui/src/utils/api.ts
Module types (Module section)	health-app/ui/src/types/api.ts

2. Team workflow requirement

1. Each teammate must open at least one PR that includes React/TypeScript changes.
2. All HW4 changes must be merged into main by the deadline.
3. Before coding, create issues for your work:
   1. Make 1+ GitHub issues per teammate (one per “Person X checklist” in Section 6 works well).
   2. Put a short checklist + acceptance criteria in each issue (what should work when you’re done).
   3. Assign each issue to one person.
   4. Each PR should reference the issue(s) it addresses (and close them when merged).

3. UI requirements (Module CRUD)

3.1. Where the UI should live Everyone

1. Add Module UI under the Course area (recommended), so Modules feel “part of Courses”.
2. At minimum, support deep links to a module page via a route (not just a modal).

3.2. Routes Person 1

Add routes in tma-starter-app/ui/src/App.tsx similar to how other dashboard routes are defined.

1. Create module route (example): /dashboard/courses/:courseId/modules/new
2. Module detail route (example): /dashboard/courses/:courseId/modules/:moduleId

If your backend does not use courseId in the module endpoints, you can still keep these routes for the UI.

3.3. List/Read Person 2

1. Update the course detail page (tma-starter-app/ui/src/pages/courses/CourseDetailPage.tsx) to show a Modules section.
2. Show a “Create Module” action that navigates to the create page route.
3. Each module should be clickable to navigate to its Module detail route.
4. Handle UI states: loading, error, empty, success.

3.4. Create Person 3

1. Build a Create Module page with a simple form:

   • title (required)
   • description (optional)
   • color (optional)

2. On submit, call your backend “create module” endpoint and then navigate back to the course detail page (or the new module’s detail page).

3. You can eventually refactor this page’s form into a reusable component (for example, to reuse it in a modal).

3.5. Update Person 4

1. On the Module detail page, provide an “Edit” action.
2. Your edit UI can be a modal (like the reference) or a separate edit page.
3. On submit, call your backend “update module” endpoint and refresh the displayed module data.

3.6. Delete Person 5 (optional)

1. On the Module detail page, provide a “Delete” action.
2. Ask for confirmation before deleting.
3. If delete succeeds, navigate back to the course detail page (or a modules list).
4. If delete fails (for example due to dependencies), show the error message.

4. TypeScript + code organization requirements Person 1 Everyone

1. Define Module, ModuleCreate, and ModuleUpdate types that match your backend.

2. No any for module data or props.

3. Put module API calls in one place (either):

   • Add a “Module API” section to tma-starter-app/ui/src/utils/api.ts, or
   • Create a new file like tma-starter-app/ui/src/utils/modulesApi.ts).

5. Minimal testing requirement

1. Add 2 Vitest tests for one pure helper you wrote for this feature (examples: buildModulesUrl, normalizeApiError, validateModuleTitle).
2. Keep tests small: test logic, not Mantine widgets.

6. Suggested Division of Labor

Person 1 (shared foundations)

Person 2 (Course detail “Modules” section)

Update ui/src/pages/courses/CourseDetailPage.tsx.

Person 3 checklist (Create Module page)

Update ui/src/pages/courses/CreateModulePage.tsx.

Person 4 checklist (Module detail + Edit)

Update ui/src/pages/courses/ModuleDetailPage.tsx (and optionally ui/src/components/courses/EditModuleModal.tsx if using a modal for editing).

Person 5 checklist (optional: Delete + testing + polish)

7. Individual Reflection

Each student must complete an individual reflection in their shared Google document (LastName_FirstName_373).

Under today’s date, respond (200–350 words total):

1. How did working with shared types and API helpers (or coordinating without them) affect your development process?
2. What was most challenging about building the Module CRUD UI? Why?
3. Since you’re working with a new team for this assignment, how did you establish workflow and coordinate work? What worked well, and what would you do differently?

Paste your reflection into the Weekly Reflection Form as usual.

8. Submission Checklist

Team Requirements

Implementation

Process

Individual Submission