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

Multi step form
https://github.com/codersuresh/multi-step-form

Last synced: 3 months ago
JSON representation

Multi step form

• Host: GitHub
• URL: https://github.com/codersuresh/multi-step-form
• Owner: coderSuresh
• Created: 2023-08-29T06:32:28.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-06-25T14:03:17.000Z (11 months ago)
• Last Synced: 2025-01-07T20:11:53.329Z (5 months ago)
• Language: TypeScript
• Homepage: https://multi-step-form-pi-five.vercel.app
• Size: 750 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Mentor - Multi-step form

![Design preview for the Multi-step form coding challenge](./public/assets/design/desktop-preview.jpg)

## Table of contents

- [The challenge](#the-challenge)

- [Solution Screenshot](#solution-screenshot)

- [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Continued development](#continued-development)

- [Author](#author)

- [Acknowledgments](#acknowledgments)

## The challenge

Your challenge is to build out this multi-step sign up form and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Your 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

## Solution Screenshot

![Solution Screenshot](./public/assets/design/screenshot.png)

## Links

-   Solution URL: [https://github.com/coderSuresh/multi-step-form](https://github.com/coderSuresh/multi-step-form)

-   Live Site URL: [https://multi-step-form-pi-five.vercel.app/](https://multi-step-form-pi-five.vercel.app/)

## My process

### Built with

- Nextjs

- Tailwindcss

- Typescript

### What I learned

I learned to make a multi-step form with Nextjs and Tailwindcss. I also learned to use the context api to manage the state of the form.

### Continued development

I want to continue to learn more about the context api and how to use it to manage the state of the form.

## Author

-   Github - [@coderSuresh](https://github.com/coderSuresh)

-   Frontend Mentor - [@coderSuresh](https://www.frontendmentor.io/profile/codersuresh)

-   Linkedin - [@coderSuresh](https://www.linkedin.com/in/codersuresh)

## Acknowledgments

I want to thank Frontend Mentor for providing me with this challenge.