Multi-step Form Solution

This is my solution to the desafío Multi-step Form en Frontend Mentor. This challenge helped me improve my skills in building interactive user interfaces and managing state in modern applications.

Table of contents

• Overview
  • The challenge
  • Screenshots
• My process
  • Built with
  • What I learned
  • Future Development
  • Useful Resources
• Autor

Overview

The Challenge

Users should be able to:

• Complete each step of the form sequence
• Go back to a previous step to update their selections
• See a summary of their selections in the final step and confirm their order
• View a responsive design depending on their device screen size
• See hover and focus states for all interactive elements
• Receive validation messages if:
  • A required field is missing
  • The email format is incorrect
  • A step is submitted without a selection

Screenshots

My process

Construido con

• Next.js - React framework for web applications
• Zustand - State management library
• Tailwind CSS - Utility-first CSS framework for fast and modern design

What I Learned

• Using Zustand to manage global form state
• Implementing a multi-step form flow with Next.js
• Form validation with React Hook Form (or any other solution you used)
• Best practices for responsive design with Tailwind CSS

Future Development

Some improvements I might add in the future:

• Persisting form state in localStorage to prevent data loss
• Adding animations between steps for a better user experience
• Implementing tests with Jest or Cypress

Recursos útiles

• Next.js Documentation
• Zustand Official Guide
• Tailwind CSS Docs

Autor

• Fiorela Azahuanche
• LinkedIn
• Portafolio

This project was developed as part of the Frontend Mentor challenge. Any feedback is welcome! 😊