Develop Dynamic AWS Service Forms React Component with JSONSchema Structuring
Budget: ₹600 – ₹1,500 INR
I am looking for a freelancer who can develop a dynamic AWS Service Forms React component with JSONSchema structuring. The desired functionality of this component is to have dynamic form generation based on JSONSchema.
Description:
Objective:
Develop a React component that seamlessly renders AWS Service forms similar to the form from the AWS Price Calculator (https://calculator.aws/#/addService). The component should utilize the react-jsonschema-forms library along with Material UI Theming for a consistent and visually appealing user interface.
Skills and experience required:
- Intermediate level of experience with React and JSONSchema
- Knowledge of JSONSchema structuring with react-jsonschema-forms library
- Proficiency in React component development
- Familiarity with user input validation and error handling in React components
Requirements:
Props:
The component should accept the service name as a prop.
Example: <AWSServiceForms serviceName="EC2" />
Dynamic Rendering:
The component should dynamically render the form for the specified AWS service using sample data with all the fields in AWS price calculator.
Form Validation:
Implement form validation according to the standards set by the AWS Price Calculator.(Ex: Lambda Service page in the duration field, the duration cannot be more than 900000 in ms. Check the screenshot attached)
For validations use react-jsonschema-forms vaildations
Dependencies:
Include any dependencies in the form based on the selected AWS service.(Ex: In S3 Service Page Screen Shot Attached)
Ensure that dependencies are accurate and aligned with the AWS Price Calculator.
Avoid Duplication:
Prevent duplication of form field options across different services.
Example: If "Region" is a common field, reuse the options created for it without duplication.
Additional Notes:
Refer to the AWS Price Calculator for specific field configurations and ensure accurate alignment with the provided sample data.
- Switch component can be replaced with dropdown select component
- JSONSchema, UISchema, and FormData should be organized as arrays of objects, with each object's key corresponding to a service name.
- Example:
JSONSchema = [{
"ec2": {
// EC2 FORM SPECIFIC PROPERTIES
}
},
{
"awss3": {
// AWS S3 FORM SPECIFIC PROPERTIES
}
}]
- Ensure that the structure allows for easy extension and addition of new AWS services in the future.
- Each service's properties in the JSONSchema object should accurately reflect the specific form requirements for that service.
- Pay attention to the organization of JSONSchema, UISchema, and FormData to maintain clarity and simplicity.
- Follow a consistent naming convention for keys and properties within each service's JSONSchema.
- Follow best practices for code modularity, readability, and re-usability.
- Provide clear comments and documentation for ease of maintenance.
- Need to have a review for the component after creating JSONSchema, UISchema, and FormData for 1 services
- Please go through the AWS price calculator, react-jsonschema-forms library/ before accepting
- payment will be released only after completion as per the requirement
- Please apply only if you have prior experience in react-jsonschema-forms. Material UI and ReactJS
Acceptance Criteria:
The component renders forms dynamically based on the provided service name.
Form validation is implemented and aligned with AWS Price Calculator standards.
Dependencies are accurately included, matching the specifications of the selected service.
No duplication of form field options across different services.
Duration: 2 Weeks
Definition of Done:
Ensure that the created component meets all the mentioned requirements and passes testing. Provide clear documentation for future reference.
Need to create JSONSchema, UISchema, and FormData for all the services mentioned in AWS price calculator(approx 150 services)
Description:
Objective:
Develop a React component that seamlessly renders AWS Service forms similar to the form from the AWS Price Calculator (https://calculator.aws/#/addService). The component should utilize the react-jsonschema-forms library along with Material UI Theming for a consistent and visually appealing user interface.
Skills and experience required:
- Intermediate level of experience with React and JSONSchema
- Knowledge of JSONSchema structuring with react-jsonschema-forms library
- Proficiency in React component development
- Familiarity with user input validation and error handling in React components
Requirements:
Props:
The component should accept the service name as a prop.
Example: <AWSServiceForms serviceName="EC2" />
Dynamic Rendering:
The component should dynamically render the form for the specified AWS service using sample data with all the fields in AWS price calculator.
Form Validation:
Implement form validation according to the standards set by the AWS Price Calculator.(Ex: Lambda Service page in the duration field, the duration cannot be more than 900000 in ms. Check the screenshot attached)
For validations use react-jsonschema-forms vaildations
Dependencies:
Include any dependencies in the form based on the selected AWS service.(Ex: In S3 Service Page Screen Shot Attached)
Ensure that dependencies are accurate and aligned with the AWS Price Calculator.
Avoid Duplication:
Prevent duplication of form field options across different services.
Example: If "Region" is a common field, reuse the options created for it without duplication.
Additional Notes:
Refer to the AWS Price Calculator for specific field configurations and ensure accurate alignment with the provided sample data.
- Switch component can be replaced with dropdown select component
- JSONSchema, UISchema, and FormData should be organized as arrays of objects, with each object's key corresponding to a service name.
- Example:
JSONSchema = [{
"ec2": {
// EC2 FORM SPECIFIC PROPERTIES
}
},
{
"awss3": {
// AWS S3 FORM SPECIFIC PROPERTIES
}
}]
- Ensure that the structure allows for easy extension and addition of new AWS services in the future.
- Each service's properties in the JSONSchema object should accurately reflect the specific form requirements for that service.
- Pay attention to the organization of JSONSchema, UISchema, and FormData to maintain clarity and simplicity.
- Follow a consistent naming convention for keys and properties within each service's JSONSchema.
- Follow best practices for code modularity, readability, and re-usability.
- Provide clear comments and documentation for ease of maintenance.
- Need to have a review for the component after creating JSONSchema, UISchema, and FormData for 1 services
- Please go through the AWS price calculator, react-jsonschema-forms library/ before accepting
- payment will be released only after completion as per the requirement
- Please apply only if you have prior experience in react-jsonschema-forms. Material UI and ReactJS
Acceptance Criteria:
The component renders forms dynamically based on the provided service name.
Form validation is implemented and aligned with AWS Price Calculator standards.
Dependencies are accurately included, matching the specifications of the selected service.
No duplication of form field options across different services.
Duration: 2 Weeks
Definition of Done:
Ensure that the created component meets all the mentioned requirements and passes testing. Provide clear documentation for future reference.
Need to create JSONSchema, UISchema, and FormData for all the services mentioned in AWS price calculator(approx 150 services)