emmarcaber / webdev-multistepform

Winning Project in TechXPlosion : Web Development Competition

Multi-Step Form React App

This is a simple multi-step form built with React that allows users to input personal information, contact details, and educational background in a step-by-step manner.

Table of Contents

• Features
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Live Demo
• Contributing
• License

Features

• Multi-step form with Personal Information, Contact Information, and Educational Background steps.
• Form data is stored in localStorage to maintain user progress even if the page is refreshed.
• Validation for required fields and basic email/number formats.
• Display of submitted data in the final step.
• Option to create a new form, clearing stored data.

Getting Started

Prerequisites

Make sure you have Node.js and npm installed on your machine.

Installation

1. Clone the repository:

   git clone https://github.com/emmarcaber/WebDev-MultiStepForm.git

2. Navigate to the project directory:

   cd WebDev-MultiStepForm

3. Install dependencies:

   npm install

Usage

1. Start the development server:

   npm run dev

2. Open your browser and visit http://localhost:3000.

3. Follow the steps in the multi-step form to input your information.

4. Optionally, refresh the page to see that your form progress is maintained using localStorage.

5. Submit the form to see the displayed result.

Live Demo

Visit the live demo of the application in: Multi-Step Form Demo

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or create a pull request.

License

This project is licensed under the MIT License.