Frontend Mentor - Multi-step contact form

This is a solution to the Multi-step form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Screenshots
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

Screenshots

Links

• Solution URL: Multi-Step form with Zod validation | React Hook Form | Tailwind CSS
• Live Site URL: (https://multistep-form-javierdesant.netlify.app/)

My process

Built with

• Flexbox & Grid
• React - JS library
• Vite - Build tool
• Tailwind CSS - CSS framework
• react-hook-form - For form validation
• Zod - For schema validation
• tailwindcss-forms - To make form customization easier

What I learned

In this project, I learned the following:

Form Management & Validation

• Implementing form validation with React Hook Form
• Mastering the useForm hook
• Managing form state with FormProvider
• Validating schemas with Zod
• Conditionally displaying error messages

Data Handling & Computation

• Searching and filtering data in arrays
• Dynamically calculating totals
• Formatting data for presentation

Performance & Optimization

• Enhancing performance with useMemo

Type Safety & Structure

• Ensuring type safety using TypeScript

Component Interaction

• Passing props between components
• Conditionally rendering elements based on state

Tailwind CSS

• Designing responsive layouts with Tailwind CSS
• Utilizing utility-first classes for styling
• Managing component spacing and alignment with Tailwind
• Creating custom themes and extending Tailwind configurations
• Applying conditional styling based on state with Tailwind

Author

• LinkedIn - Javier de Santiago Soto
• Frontend Mentor - @javierdesant