Scribd
Upload
49 views

React - Js Intern Assignment

Uploaded by

Puthin Dungala
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
49 views

React - Js Intern Assignment

Uploaded by

Puthin Dungala
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Frontend Developer Assignment: Multi-Step Form with React

Objective:
Create a responsive multi-step form with three steps, ensuring data validation, error handling,
and navigation controls using React.js. The form should persist data to local storage and
enforce sequential completion of steps.
Requirements:

1. Form Structure:

o Implement a multi-step form with three steps:


 Step 1: Personal Information (Name, Email, Phone)
 Step 2: Address Information (Address Line 1, Address Line 2, City,
State, Zip Code)
 Step 3: Confirmation (Review all entered data)

2. Navigation and Buttons:

o Use tabbed navigation to switch between steps.


o Disable the back button on the first step.
o Disable the next button on the last step and replace it with a submit button.

3. Validation:

o Implement client-side validation to ensure all fields are filled before allowing
navigation to the next step.
o Display appropriate error messages if fields are empty or invalid (e.g., email
format).
o Highlight the fields with errors.

4. State Management:

o Manage form data using React state.


o Use hooks like useState and useEffect where appropriate.
o Ensure state updates reflect user inputs and form navigation.

5. Local Storage:

o Persist entered data to local storage when the user navigates between steps.
o Retrieve and pre-fill form fields if the user revisits the form.

6. Responsive Design:

o Ensure the form is responsive and works well on desktop, tablet, and mobile
screens.
o Use appropriate CSS and possibly a CSS framework (like Bootstrap or
Material UI) for layout and responsiveness.

7. Bonus Points (Optional):


o Implement error handling for network requests (e.g., simulate API calls with
setTimeout).
o Enhance UX with animations or transitions between steps.
o Write unit tests for critical components or validation functions.

Submission Guidelines:

 Fork this repository and create a branch with your name.


 Structure your project using reusable components and clear separation of concerns.
 Document any assumptions or decisions made during implementation.
 Include a README file with setup instructions and any additional notes.

Notes:

 This assignment aims to assess your understanding of React state management, form
validation, responsive design principles, and local storage usage.
 Feel free to reach out for clarification or assistance if needed.

You might also like