Overview

You're building the registration flow for "VentureConnect", a platform connecting startups with investors. This task involves creating a multi-step form that guides users through submitting their startup's profile. The form must handle state transitions, validate user input at each step, and provide clear navigation. This problem focuses on robust form management, state logic, and user experience in React.

What you need to do / Task

1. Implement a multi-step form structure with at least three distinct steps.
2. Each step should have specific input fields with appropriate HTML5 types (e.g., text, email, number, URL, textarea).
3. Implement client-side validation for each step, preventing progression to the next step if current fields are invalid.
4. Display clear error messages for invalid inputs.
5. Allow users to navigate between steps using "Next" and "Previous" buttons.
6. The "Previous" button should always be enabled except on the first step.
7. The "Next" button should be disabled if the current step's fields are invalid.
8. Upon completing the final step, display a summary of all submitted data.
9. Ensure the form is accessible, including proper labels, input types, and focus management.

UI/UX expectations

• Layout: The form should be centrally aligned, clearly indicating the current step (e.g., "Step 1 of 3: Company Info").
• Navigation: "Previous" and "Next" buttons should be clearly visible. The "Next" button should visually indicate its disabled state when validation fails.
• Feedback: Error messages for invalid fields should appear immediately after a field loses focus or on an attempt to proceed.
• Accessibility: All form inputs must have associated <label> elements. Navigate with keyboard (Tab, Shift+Tab) should work correctly. Error messages should be programmatically associated with their inputs (e.g., using aria-describedby).

Acceptance criteria

• [ ] The form renders with the first step visible.
• [ ] Each step correctly displays its designated input fields.
• [ ] "Next" button is disabled if required fields on the current step are empty or invalid.
• [ ] "Next" button enables when all required fields on the current step are valid.
• [ ] Clicking "Next" (when enabled) transitions the user to the subsequent step.
• [ ] "Previous" button is disabled on the first step.
• [ ] Clicking "Previous" (when enabled) transitions the user to the prior step, preserving input data.
• [ ] Error messages are displayed for invalid inputs.
• [ ] Upon reaching the final step and clicking "Submit" (or equivalent), a summary of all collected data is shown.
• [ ] Keyboard navigation (Tab, Shift+Tab) works as expected within the form.
• [ ] All form fields have visible and programmatically associated labels.

Clarifications

• Q: What validation rules are required?
  • A: At a minimum, ensure all fields are non-empty. For specific fields: Company Name (text), Founder Email (email format), Funding Goal (number, min 1000), Website URL (URL format), Description (textarea, min 50 chars).
• Q: Should I use a state management library?
  • A: No, manage form state and step transitions using React's built-in useState and useReducer hooks.
• Q: Is routing required?
  • A: No, the entire multi-step form should exist within a single component. Step transitions are handled internally, not via URL changes.