yogeshtakeo commented 1 year ago

Frontend Development Bootcamp - React Form Validation

Task Description

In this task, you will create a React project that involves form validation. You will build a form with validation rules and error messages, passing data from child components to the parent using parameters (props), and implementing a UI design created in Figma.

Prerequisites

Before you begin, ensure you have the following resources:

Node.js (at least version 14.0.0)
npm (Node Package Manager)
A code editor
Figma account (for UI design)

Task Steps

Step 1: UI Design in Figma

Start by designing the user interface for your project using Figma. Create a design that includes a form with various input fields (e.g., name, email, password) and validation error messages. Design a visually appealing layout that adheres to UI/UX principles.
Once your design is complete, export relevant assets (e.g., icons, fonts) if needed.

Step 2: Set Up a React Project

Create a new React project directory using Vite. Open your terminal and navigate to the directory where you want to create your project.
Run the following command to create a new Vite project with React:
```
npm init vite@latest my-react-form-validation --template react
```
Navigate into your project directory:
```
cd my-react-form-validation
```

Step 3: Implement the UI

Create React components for your UI based on the design you created in Figma. This should include a form with input fields and validation error messages.
Use CSS or a CSS-in-JS library like Styled Components to style your components and match the Figma design.

Step 4: Form Validation

Implement form validation rules for the input fields (e.g., required, email format, password strength). You can use the useState hook to manage form state and onChange event handlers to capture user input.
Display error messages next to the relevant input fields when validation fails.

Step 5: Data Passing

Create child components (e.g., InputField) that represent individual form input fields.
Implement data passing from child to parent using props. For instance, when an input field changes, it should send its value to the parent component for validation.

Step 6: Testing

Start the development server by running:
```
npm run dev
```
Open your web browser and navigate to http://localhost:3000 to see your React form validation project in action.
Test the form with various inputs to ensure that validation rules and error messages work correctly.

Step 7: Documentation

Document the steps you took to create the project, including setting up the development environment, designing the UI in Figma, implementing form validation, and passing data from child components to the parent.
Include screenshots or links to your Figma design for reference.