MoviesApp

React Native, AWS AppSync, AWS Amplify, AWS Cognito, GraphQL, DynamoDB. Please note: this is a work still in progress, and many features are not fully developed yet.

Update 24th July:

AWS Amplify library can be modularized: https://github.com/aws-amplify/amplify-js/wiki/Amplify-Modularization

There are some new helpers also available to reduce boilerplate code, see this article for details: https://medium.com/open-graphql/save-hundreds-of-lines-of-code-in-your-next-graphql-app-with-this-one-weird-trick-3bef9ef0d45a

Screenshots

iOS

Technology stack:

• aws-amplify
• aws-amplify-react-native
• aws-appsync
• aws-appsync-react
• aws-sdk
• graphql-tag
• lodash
• moment
• prop-types
• react-apollo
• react-native-app-intro-slider
• react-native-elements
• react-native-modal
• react-native-splash-screen
• react-native-vector-icons
• react-navigation
• react-navigation-material-bottom-tabs
• react-navigation-tabs
• uuid

Installation

React Native setup:

brew install node
brew install watchman
npm install -g react-native-cli

And also install Xcode for iOS simulator + Android Studio / Genymotion for Android simulator. Alternatively connect up a hardware device.

Project setup:

Clone the repo: git clone https://github.com/pjay79/MoviesApp.git
Change to the project folder: cd MoviesApp
Add dependencies: npm install or yarn

Amazon

Sign up to AWS Free Tier:
https://aws.amazon.com/free/

AWS Mobile CLI setup

(note: you will be directed to create a new IAM user and prompted to enter the accessKeyId and secretAccessKey, store these in a safe place):

npm install -g awsmobile-cli
awsmobile configure
awsmobile init (in the project folder)

awsmobile user-signin enable
awsmobile push
awsmobile console (opens the aws console in browser)

This project's source directory is 'app'.

AWS AppSync setup:

In the aws console Services section locate AWS AppSync and then do the following:

• select Create API

• enter API name AWS Movies App and select authorization type to Amazon Cognito User Pool

• select Custom Schema

Paste the following into the Custom Schema box:

type Movie {  
    id: ID!  
    title: String!  
    genre: String!  
    director: String!  
    reviews: [Review]  
    likes: Int!  
    author: String!  
    createdAt: String!  
}

type Review {  
    id: ID!  
    movieID: ID!  
    rating: Int!  
    content: String!  
    author: String!  
    createdAt: String!  
}

type Query {  
    fetchMovie(id: ID!): Movie
}

schema {  
    query: Query  
}

Select Save and then Create Resources, then select type Movie with table name MovieTable. Repeat the same process for type Review with table name ReviewTable.

Update resolvers

Back in the AppSync console, find the Data Type Movie and attach a resolver to the reviews field, it should look like this:

Back again in the AppSync console, find the Data Type Query and modify resolver for the listReviews field, it should look like this:

DynamoDB table index:

From your AppSync console:

• select DataSources
• select ReviewTable
• select Create index in DynamoDB
• select primary key movieID, and index name movieID-index
• set read and write capacity to 1 unit each

Add AppSync configuration

Download the React Native AppSync.js file:

Add the contents of this file to app/aws-appsync.js as follows:

export default {  
    graphqlEndpoint: 'ENTER_ENDPOINT',  
    region: 'ENTER_REGION',  
    authenticationType: 'AMAZON_COGNITO_USER_POOLS',  
    apiKey: 'null',  
};

AWS Cognito

In the aws console Services section locate Cognito and select Manage User Pools. Here you can customise the user and authorisation settings. For this project MFA has been set to OPTIONAL.

Launch

Run on ios: react-native run-ios
Run on android: react-native run-android