https://github.com/gonferreyra/multi-step-form

Multi-step form where the user must complete the steps in sequence and in the last step see the summary of their selections, to confirm the order or go back and edit it.
https://github.com/gonferreyra/multi-step-form

react react-hook-form tailwind typescript zustand

Last synced: 28 days ago
JSON representation

Multi-step form where the user must complete the steps in sequence and in the last step see the summary of their selections, to confirm the order or go back and edit it.

• Host: GitHub
• URL: https://github.com/gonferreyra/multi-step-form
• Owner: gonferreyra
• Created: 2024-09-10T19:58:12.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-23T14:18:04.000Z (about 2 months ago)
• Last Synced: 2024-09-28T17:23:31.731Z (about 1 month ago)
• Topics: react, react-hook-form, tailwind, typescript, zustand
• Language: TypeScript
• Homepage: https://multi-step-form-lemon-tau.vercel.app
• Size: 715 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Multi-step Form App

This is a solution to the [Multi-step form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/multistep-form-YVAnSdqQBJ).

## Table of contents

- [Multi-step Form App](#multi-step-form-app)

  - [Table of contents](#table-of-contents)

  - [Overview](#overview)

    - [The challenge](#the-challenge)

    - [Screenshot](#screenshot)

    - [Mobile 375px](#mobile-375px)

    - [Small Desktop 15" 1351px](#small-desktop-15-1351px)

    - [Large Desktop MacBook Pro 1440px](#large-desktop-macbook-pro-1440px)

  - [My process](#my-process)

    - [Built with](#built-with)

  - [Author](#author)

## 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

### Mobile 375px

![](/preview/iPhone%206-7-8-1727099363770.jpeg)

![](preview/iPhone%206-7-8-1727099467055.jpeg)

### Small Desktop 15" 1351px

![](/preview/Laptop%2015"-1727099582756.jpeg)

![](/preview/Laptop%2015"-1727099585908.jpeg)

### Large Desktop MacBook Pro 1440px

![](/preview/MacBook%20Pro-1727099495825.jpeg)

![](/preview/MacBook%20Pro-1727099520778.jpeg)

## My process

### Built with

- [React](https://reactjs.org/) - JS library

- [TypeScript](https://www.typescriptlang.org/)

- [Tailwind CSS](https://tailwindcss.com/) - CSS library

- [Zustand](https://github.com/pmndrs/zustand) - Global State management

- [React-Hook-Form](https://react-hook-form.com/)

- Mobile-first workflow

## Author

- LinkedIn: [Gonzalo](https://www.linkedin.com/in/ferreyragonzalo/)