https://github.com/MrHertal/react-admin-amplify-demo

React Admin Amplify demo app.
https://github.com/MrHertal/react-admin-amplify-demo

aws-amplify demo react-admin

Last synced: 3 months ago
JSON representation

React Admin Amplify demo app.

• Host: GitHub
• URL: https://github.com/MrHertal/react-admin-amplify-demo
• Owner: MrHertal
• License: mit
• Created: 2020-06-23T13:41:27.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2023-11-10T23:27:29.000Z (6 months ago)
• Last Synced: 2024-01-14T08:08:59.056Z (4 months ago)
• Topics: aws-amplify, demo, react-admin
• Language: JavaScript
• Homepage: https://master.d3os44oci7szj2.amplifyapp.com
• Size: 2.53 MB
• Stars: 44
• Watchers: 3
• Forks: 18
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-aws-amplify - React Admin Amplify Demo

README

        
# React Admin Amplify Demo

This project aims to demonstrate the use of [React Admin Amplify](https://github.com/MrHertal/react-admin-amplify).

The demo is accessible here: .

Feel free to play with it!

## About React Admin Amplify

[React Admin Amplify](https://github.com/MrHertal/react-admin-amplify) is a module that connects a react-admin frontend to an Amplify backend.

It includes the data and auth providers, but also some components that make things easier to set up.

## About this demo

The schema used in this demo is a variant of the [schema with 17 patterns related to relational designs](https://docs.amplify.aws/cli/graphql-transformer/dataaccess).

## How to clone this project

If you want to use this project as a bootstrap. Follow these steps:

```sh

git clone https://github.com/MrHertal/react-admin-amplify-demo.git && cd react-admin-amplify-demo

```

Install dependencies:

```sh

yarn

```

Init Amplify project:

```sh

amplify init

```

Push project to the cloud:

```sh

amplify push

```

Do not retrieve demo user avatar and remove the custom login page:

```jsx

// in App.js

// Get the demo user avatar

// authProvider.getIdentity = async () => {

//   try {

//     const userData = await API.graphql(

//       graphqlOperation(queries.getUser, { id: "demo" })

//     );

//     const url = await Storage.get(userData.data.getUser.picture.key);

//     return {

//       id: "demo",

//       fullName: "Demo",

//       avatar: url,

//     };

//   } catch (e) {

//     console.log(e);

//   }

// };

function App() {

  return (

    

  );

}

```

Create a user using the cognito console for example. If you want to change the status `FORCE_CHANGE_PASSWORD` of your newly created user, use the AWS cli as explained [here](https://stackoverflow.com/a/56948249/4140356).

Finally, add the user to the `admin` group.

Start the project:

```sh

yarn start

```

You should be able to login with your user.

## Learn More

See [react-admin](https://marmelab.com/react-admin/Readme.html) and [Amplify](https://docs.amplify.aws).