Using AWS Amplify UI for Creating Biodata Application

gavaskar07

GAVASKAR

Posted on July 8, 2022

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”
Image description
Step-3:Now start the development server using the below command
npm start
Image description
Step-4:Now you can see your development server is running in the web browser
Image description
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;
Enter fullscreen mode Exit fullscreen mode

Step-7:Run the app in the browser using the URL http://localhost:3000/. Now the Biodata React App will be displayed below
Image description
Conclusion:
Thus we have created a Biodata Application using AWS AmplifyUI and React.

💖 💪 🙅 🚩
gavaskar07
GAVASKAR

Posted on July 8, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related