Symphoni Social frontend coding interview challenge 1 - Multi-step form solution

This is a solution to the Multi-step form challenge of Symphoni Social.

Overview

The challenge

Users should be able to:

• Complete each step of the sequence
• Go back to a previous step to update their selections
• See a summary of their selections on the final step and confirm their order
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Receive form validation messages if:
  • A field has been missed
  • The email address is not formatted correctly
  • A step is submitted, but no selection has been made

Screenshot

• Below is a screenshot showing validation messages

• Below is a screenshot showing an error message when a user doesn't choose a plan

• Below is a screenshot of a selected plan

• Below is a screenshot of multiple add - ons selection

• Below is a screenshot displaying the overall choices of the user

• Below is a screenshot displaying a thank you message on confirmation

Links

• GitHub Solution URL: https://github.com/nguHelon/symphoni_frontend_1
• Live Site URL: https://symphoni-multi-step-solution.netlify.app/

My process

Built with

• React Router Dom - For seamless Navigation
• Tailwind CSS - CSS Utility library
• Zustand - State management library
• TypeScript - To add Type Safety features
• React Hook Form - For Form Validation
• React - JS library

What I learned

1. Zustand State Management:

• I learned how to efficiently manage state using Zustand, leveraging a single store setup and custom hooks for seamless state updates and access.

2. React Hook Form for Form Validation:

• I learned how to streamline form validation with React Hook Form, employing its lightweight API to set up validation rules and provide real-time feedback for improved user interaction.

Continued development

I plan to continue refining my skills in React and it's useful library. Without forgetting to increase my skillset and my overall efficiency in the stack.

Useful resources

• Zustand Documentation - Documentation and examples for Zustand state management library.
• React Documentation - Official documentation for React.
• React hook form Documentation - Official documentation for React.

Author

• Ngu Helon