codersforcauses / codersforcauses/transplant

Create registration form (frontend)

Open
#15 1 comment 0 reactions 3 assignees Claimed by @adriaan-vdb View on GitHub
design difficulty::medium frontend priority::high
Dominant language
TypeScript
Stars
3
Forks
0
PR merge metrics
No merged PRs in 30d

Description

## Story:
**AS A** participant/supporter for the Transplant Games,
**I WANT** to be able to register for the Games using an intuitive, multi-step form,
**SO THAT** I can save my progress and return to the form later before submitting.

## Details:
Create the registration form system with multi-step navigation and autosave functionality.
- Use something like React Hook Form https://react-hook-form.com/ for efficient state management
- Form fields should be rendered conditionally based on certain user selections - remember that both Participants and Supporters are types of registrants, the only difference being that Participants have received a transplant. They will both use this form to register for the games.
For example:
- "Which State/Territory will you represent" should not be accessible to competitors who wish to represent a country other than Australia
- Users who select "Supporter" option should not be asked about transplants, hospitals etc.
- Integration with registration API endpoints - requires #14
- Break this issue into sub-issues as required, would be good to have multiple people work on this
---
## Acceptance Criteria:

### Design
- [x] Wireframe done [here](https://www.figma.com/design/gO5ypJMayuGg3UzQCxh98N/Transplant-Australia?node-id=2455-666&t=FfXzWBBo18X8PZDz-0)

![Image](https://github.com/user-attachments/assets/5f782b47-3190-4a4f-9898-f6686c358920)

- [ ] Figma done
- [ ] Mobile-responsive design

### Fields, navigation & UX:
- [ ] Form contains the fields listed [here](https://codersforcauses.notion.site/Transplant-Aus-MVP-22300d5d9d3c80b19ac4e0ee0470d512) (under Registration form)
- [ ] Form has multiple steps similar to the following, reworked as needed:
- 1: Personal Information (name, address, contact details, emergency contact)
- 2: Country and language info (birth country, Aboriginal and Torres Strait Islander status, languages)
- 3: Competition info (representing state or country, supporter or participant, competitor or non-competitor)
- 4: For participants (not supporters): Medical Information (transplant type, hospital details, other medical info)
- supporters should not be shown most of these fields except for dietary
- 5: Add tshirt size, Review and Submit
- show summary and price based on combination of age group, supporter/participant status, competitor/non-competitor status and then confirm final submission

- [ ] A way to indicate progress - includes current step and whether or not its complete/has been saved
- [ ] Next/Previous navigation with validation at each step - save and exit button?
- [ ] Mobile-responsive design implemented
- [ ] Save status indicators and visual feedback (saving, saved, error states)

**Autosave:**
- [x] Autosave - debounce 2-3 seconds after user stops typing
- [ ] Integration with backend autosave API endpoint (if finished)
- [ ] Form state should persist when page refreshes
- [ ] Appropriate error handling

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.