Responsive Multi-Step Form with React and Context API

Most Proud Of:

• Successfully implementing Context API for the first time to manage global state effectively.
• Overcoming the challenges of making form inputs mandatory before allowing navigation to the next step.
• Gaining a deeper understanding of Context API and how to manage complex state interactions.

What I Would Do Differently:

• Optimise the error-handling logic further for better scalability in larger forms.
• Explore custom hooks for cleaner and more reusable state logic.

Challenges:

• Ensuring that users could not proceed to the next step without filling out the required personal information fields.
• Managing the global state using Context API for the first time, especially keeping track of form data across multiple steps.

How I Overcame Them:

• For form validation, I implemented error-checking logic using useEffect and tracked errors in the component state. This ensured users were alerted when a field was left empty.
• By reading documentation and experimenting, I gained a solid understanding of how to structure and use Context API for handling multi-step form state. This included separating state management for plans, add-ons, and form data into logical contexts.