|
1 | | -# rsvp |
2 | | -Website for UIUC students to RSVP to ACM @ UIUC events. |
| 1 | +# ACM @ UIUC — RSVP Portal |
| 2 | + |
| 3 | +Frontend for the ACM @ UIUC event RSVP system. Built with React, TypeScript, Vite, and Mantine UI. |
| 4 | + |
| 5 | +## Stack |
| 6 | + |
| 7 | +- **React 19** + **TypeScript** |
| 8 | +- **Vite** — dev server and bundler |
| 9 | +- **Mantine v8** — UI components and notifications |
| 10 | +- **`@acm-uiuc/core-client`** — typed SDK for the Core API |
| 11 | +- **`@azure/msal-react`** — Microsoft SSO authentication |
| 12 | +- **Cloudflare Turnstile** — bot protection on RSVP/cancel/profile actions |
| 13 | +- **React Router v7** — client-side routing |
| 14 | + |
| 15 | +## Getting Started |
| 16 | + |
| 17 | +```bash |
| 18 | +yarn install |
| 19 | +yarn dev # local-dev (points to QA API) |
| 20 | +yarn dev:qa # dev build against QA API |
| 21 | +``` |
| 22 | + |
| 23 | +## Build |
| 24 | + |
| 25 | +```bash |
| 26 | +yarn build # production build |
| 27 | +yarn build:dev # dev environment build |
| 28 | +yarn build:prod # production environment build |
| 29 | +yarn typecheck # type-check without emitting |
| 30 | +``` |
| 31 | + |
| 32 | +## Environments |
| 33 | + |
| 34 | +Configured in `src/config.ts` via `VITE_RUN_ENVIRONMENT`: |
| 35 | + |
| 36 | +| Environment | Value | API | |
| 37 | +|-------------|-------------|----------------------------------| |
| 38 | +| Local dev | `local-dev` | `core.aws.qa.acmuiuc.org` | |
| 39 | +| QA/Dev | `dev` | `core.aws.qa.acmuiuc.org` | |
| 40 | +| Production | `prod` | `core.acm.illinois.edu` | |
| 41 | + |
| 42 | +## Project Structure |
| 43 | + |
| 44 | +``` |
| 45 | +src/ |
| 46 | +├── common/ |
| 47 | +│ ├── types/ # Shared types (re-exported from SDK + enrichment types) |
| 48 | +│ └── utils/ # apiError, notifyError helpers |
| 49 | +├── components/ |
| 50 | +│ ├── AuthContext/ # MSAL auth provider + useAuth() |
| 51 | +│ ├── EventsContext/ # Fetches all events on mount; useEvents() |
| 52 | +│ ├── ProfileContext/ # Fetches RSVP profile after auth; useProfile() |
| 53 | +│ ├── RsvpsContext/ # Fetches user RSVPs, enriches with event data; useRsvps() |
| 54 | +│ ├── Layout/ # MainLayout shell |
| 55 | +│ └── Logo/ |
| 56 | +├── pages/ |
| 57 | +│ ├── events/ # Upcoming events list + RSVP flow |
| 58 | +│ ├── rsvps/ # My RSVPs (view, cancel) |
| 59 | +│ ├── profile/ # RSVP profile create/edit |
| 60 | +│ └── Home.page.tsx # Dashboard |
| 61 | +└── App.tsx / Router.tsx / main.tsx |
| 62 | +``` |
| 63 | + |
| 64 | +## Architecture Notes |
| 65 | + |
| 66 | +- **Context-based caching** — `EventsContext`, `ProfileContext`, and `RsvpsContext` each fetch once and expose a `refetch()` for manual refresh. Provider order in `main.tsx`: `Auth → Events → Profile → RSVPs`. |
| 67 | +- **SDK usage** — all API calls go through `@acm-uiuc/core-client`. Auth tokens (`xUiucToken`) and Turnstile tokens (`xTurnstileResponse`) are passed as typed request parameters, not headers. |
| 68 | +- **Empty-body responses** — RSVP POST and DELETE return 201/200 with empty bodies. Use the `Raw` SDK variant (`apiV1Rsvp...Raw`) and skip `.value()` to avoid JSON parse errors. |
| 69 | +- **Error notifications** — all errors surface via `showApiErrorNotification()` (`src/common/utils/notifyError.tsx`) which shows a Mantine notification with the error title, message, optional request ID, and a mailto report link. |
0 commit comments