Multi-Step Form with React.js

This project is a solution to the Multi-Step Form challenge from Frontend Mentor. It is built using React.js, Tailwind CSS, Redux Toolkit for state management, and React Router for navigation.

Table of Contents

• Overview
  • Challenge
  • Screenshot
  • Links
• Features
• Technologies Used
• Getting Started
• Usage
• Screenshots
• Author

Overview

Challenge

The challenge was to create a multi-step form that allows users to complete each step, go back to a previous step, see a summary of their selections on the final step, and confirm their order. Users should also be able to view the optimal layout for the interface depending on their device's screen size and see hover and focus states for all interactive elements on the page. Additionally, form validation messages should be displayed if any field has been missed or if the email address is not correctly formatted.

Screenshot

Links

• Live Site URL

Features

• Multi-step form with navigation between steps.
• Form validation with error messages.
• Summary page to review selections.
• Responsive design for various screen sizes.
• Hover and focus states for interactive elements.

Technologies Used

• React.js
• Tailwind CSS
• Redux Toolkit
• React Router

Getting Started

To get started with this project, follow these steps:

1. Clone the repository:

   git clone https://github.com/Israa27/multistep-form.git
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm start
   

Author

• Israa Adnan
• GitHub: GitHub Profile