/multistep-form-test

Primary LanguageTypeScript

Frontend Mentor - Multi-step Form Challenge Using React, TypeScript, SASS, Formik, Yup, and Next.js

Design preview for the Multi-step form coding challenge using React, TypeScript, and other technologies

Welcome! 👋

Thanks for checking out my front-end coding challenge submission.

This project was an excellent opportunity to improve my coding skills by building a realistic project, focusing on creating a multi-step form with various technologies.

Technologies Used:

  • React
  • TypeScript
  • SASS
  • Formik
  • Yup
  • Next.js

Project Duration:

Approximately 2.5 days

The Challenge

The challenge was to build out a multi-step form, ensuring it closely resembles the provided design. The goal was to create an efficient and user-friendly form, taking into consideration various user interactions and validations.

Key Features:

  • Users can complete each step of the form sequence.
  • Ability to go back and update selections in previous steps.
  • A summary of selections is available on the final step for confirmation.
  • Responsive design for optimal layout on different screen sizes.
  • Interactive elements with hover and focus states.
  • Form validation using Yup for scenarios like missed fields or incorrect email formats.

Implementation Approach

I started by setting up the project environment with Next.js, integrating TypeScript for type safety and SASS for styling. Formik was instrumental in managing the form state, and Yup provided a seamless way to implement validations.

Each step of the form was carefully crafted to ensure a smooth user experience, with the ability to navigate back and forth between steps without losing data. The responsive design was meticulously tested to ensure functionality across various devices.

Project Deployment

The project was deployed using Vercel, providing a live demonstration of the multi-step form. This deployment showcases the interactive elements, responsive design, and the overall functionality of the form.

Reflections and Learnings

This challenge was a valuable learning experience, particularly in managing complex form states and validations. It also provided practical experience in using a combination of React, TypeScript, SASS, Formik, Yup, and Next.js in a real-world project scenario.

The project's codebase is available on my GitHub repository for review and feedback. I welcome any suggestions or comments to further improve the project.

Enjoy exploring the multi-step form! 🚀