Pictures sharing app with Expo, React Native, Apollo GraphQL, and AWS Amplify.
Plush is a full-stack mobile application for pictures sharing. It uses Expo and React Native for the front end, AWS Amplify as the back-end service, and the API service is built with GraphQL.
Demo video of the app functionalities in here.
After sign up/sign in, users can perform the following:
Users are authenticated using out of the box AWS Amplify authentication flow.
Users a redirected to the only screen of the app: the feed.
When a user uploads a picture:
When a user flags inappropriate content:
When a user likes/unlikes a picture:
When a user deletes a picture:
When a user refreshes the feed:
To run this app on your local machine, you need the following tools:
npm install -g expo-cli
npm install -g @aws-amplify/cli
amplify configure
(link for a step by step video).git clone https://github.com/yhenni1989/plush
cd plush
yarn add aws-amplify aws-amplify-react-native
# or
npm install aws-amplify aws-amplify-react-native
amplify init
amplify add auth
# When prompt, choose: Yes, use the default configuration.
amplify add storage
# Choose: Content (Images, audio, video, etc.)
# Give access to only authenticated users.
# Give users read/write acces.
amplify add api
# Choose GraphQL as the API service.
# Choose an authorization type for the API: Amazon Cognito User Pool
# Do you have an annotated GraphQL schema? Yes
# Provide your schema file path: src/graphQL/schema.graphql
type Picture @model {
id: ID!
pictureOwnerId: String!
pictureOwnerUsername: String!
visibility: Visibility
file: S3Object
likes: [Like] @connection(name: "PictureLikes")
flags: [Flag] @connection(name: "PictureFlags")
}
type Like @model {
id: ID!
likeOwnerId: String!
likeOwnerUsername: String!
picture: Picture @connection(name: "PictureLikes")
}
type Flag @model {
id: ID!
flagOwnerId: String!
flagOwnerUsername: String!
picture: Picture @connection(name: "PictureFlags")
}
type S3Object {
bucket: String!
region: String!
key: String!
uri: String!
}
enum Visibility {
public
private
}
amplify push
Do you want to generate code for your newly created GraphQL API: No.
The AWS Amplify CLI will create an Amazon Cognito User Pool and Identity Pool, an Amazon S3 bucket to store each users pictures and an AWS AppSync GraphQL API that uses Amazon DynamoDB to store metadata about the pictures (i.e. bucket name, likes, flags, owner, date of creation ... etc).
yarn
# or
npm install
src/myKeys.js
file of your project.const keys = {
accessKey: 'blablabla',
secretKey: 'blablabla',
}
export default keys
expo start --ios
# or
expo start --android
If the application runs successfully you should be able to press the camera icon, allow access to the device library, and select a picture from your device. This will upload the picture to S3 then make a GraphQL call to enter the record into DynamoDB.
You can then press the refresh button to display the picture on the screen.
You can like/unlike and flag other users pictures, and delete your own pictures.