Create registration form (frontend)

[allyharrison]

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 Create model for registrant details #14
• Break this issue into sub-issues as required, would be good to have multiple people work on this

---

Acceptance Criteria:

Design

• Wireframe done here

• Figma done
  • Mobile-responsive design

Fields, navigation & UX:

• Form contains the fields listed here (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:

• 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

[github-actions]

Branch issue-15-Create_registration_form_frontend created!