Using AWS Amplify UI for Creating Biodata Application

Introduction:
​​AWS Amplify UI is an open-source UI library that brings the simplicity and extensibility of AWS Amplify to UI development. It consists of connected components that simplify complex workflows like authentication and dynamic data, primitive components that form the building blocks of a UI, and themes to make Amplify UI fit any brand. Extensibility and customization are at the forefront of Amplify UI allowing easy integration into any application regardless of the front-end tech stack.

Steps in creating Biodata Application using React and AWS Amplify UI
Step-1:Use command prompt and execute the following command
npx create-react-app mybiodata && cd mybiodata
Step-2:Now the basic react app required for creating the Biodata Application is created with the name “mybiodata”

Step-3:Now start the development server using the below command
npm start

Step-4:Now you can see your development server is running in the web browser

Step-5:install the Amplify UI React package using the command given below
npm i @aws-amplify/ui-react aws-amplify
Step-6:Creating Biodata Reactapp Component using the code given below in app.js file

import { Button, Flex, Heading, Image, Text } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
function App() {
  return (
    <Flex
      direction={{ base: 'column', large: 'row' }}
      maxWidth="32rem"
      padding="1rem"
      width="100%"
    >
      <Image
        alt="My Biodata"
        height="21rem"
        src="mybio.png"
        width="100%"
      />
      <Flex justifyContent="space-between" direction="column">
        <Heading level={3}>Sample BioData</Heading>
        <Text>
          Name:Ramu<br></br>
          Date of Birth:03-05-1984<br></br>
          Qualification:B.Tech M.E<br></br>
          Address:Street1
                  Village1,
                  State 
                  Country<br></br>
          Hobbiles:Singing playing,listening music<br></br>
        </Text>
        <Button
          variation="primary"
          onClick={() => alert('View More!')}
        >
          View More...
        </Button>
      </Flex>
    </Flex>
  );
}
export default App;

Step-7:Run the app in the browser using the URL http://localhost:3000/. Now the Biodata React App will be displayed below

Conclusion:
Thus we have created a Biodata Application using AWS AmplifyUI and React.