{"id":13532602,"url":"https://github.com/pjay79/MoviesApp","last_synced_at":"2025-04-01T21:30:44.819Z","repository":{"id":118470673,"uuid":"132297598","full_name":"pjay79/MoviesApp","owner":"pjay79","description":"React Native Movies App: AWS Amplify, AWS AppSync, AWS Cognito, GraphQL, DynamoDB","archived":false,"fork":false,"pushed_at":"2018-07-24T08:28:10.000Z","size":1305,"stargazers_count":83,"open_issues_count":2,"forks_count":16,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-02T19:34:16.872Z","etag":null,"topics":["appsync","aws","aws-amplify-react-native","aws-appsync","dynamodb","graphql","offline-capable","react-native","subscriptions"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pjay79.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-06T01:36:25.000Z","updated_at":"2024-07-04T04:44:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"1ed85d72-76bd-4847-8acc-2d8c7982f45f","html_url":"https://github.com/pjay79/MoviesApp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjay79%2FMoviesApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjay79%2FMoviesApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjay79%2FMoviesApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pjay79%2FMoviesApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pjay79","download_url":"https://codeload.github.com/pjay79/MoviesApp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246712927,"owners_count":20821819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["appsync","aws","aws-amplify-react-native","aws-appsync","dynamodb","graphql","offline-capable","react-native","subscriptions"],"created_at":"2024-08-01T07:01:12.213Z","updated_at":"2025-04-01T21:30:44.813Z","avatar_url":"https://github.com/pjay79.png","language":"JavaScript","funding_links":[],"categories":["Example Projects"],"sub_categories":["Other blogs \u0026 tutorials"],"readme":"# MoviesApp\n\nReact Native, AWS AppSync, AWS Amplify, AWS Cognito, GraphQL, DynamoDB.\nPlease note: this is a work still in progress, and many features are not fully developed yet.\n\n**Update 24th July:**\n\nAWS Amplify library can be modularized:\nhttps://github.com/aws-amplify/amplify-js/wiki/Amplify-Modularization\n\nThere are some new helpers also available to reduce boilerplate code, see this article for details:\nhttps://medium.com/open-graphql/save-hundreds-of-lines-of-code-in-your-next-graphql-app-with-this-one-weird-trick-3bef9ef0d45a\n\n![screenflow](https://user-images.githubusercontent.com/14052885/41508913-19d8108a-728f-11e8-9c49-7a40f4bb3799.jpeg)\n\n## Screenshots\n\n### iOS\n\n![simulator screen shot - iphone x - 2018-06-18 at 16 00 02](https://user-images.githubusercontent.com/14052885/41520887-3a79dede-7313-11e8-95fa-8706bd85dff4.png)\n![simulator screen shot - iphone x - 2018-06-18 at 16 00 44](https://user-images.githubusercontent.com/14052885/41520888-3aaff99c-7313-11e8-8014-713f3d2c62d2.png)\n![simulator screen shot - iphone x - 2018-06-18 at 16 05 25](https://user-images.githubusercontent.com/14052885/41520889-3ae482ac-7313-11e8-8995-7983088cc70d.png)\n![simulator screen shot - iphone x - 2018-06-18 at 16 06 02](https://user-images.githubusercontent.com/14052885/41520890-3b18997a-7313-11e8-9bc3-34571ee5cdc7.png)\n![simulator screen shot - iphone x - 2018-06-18 at 16 06 09](https://user-images.githubusercontent.com/14052885/41520891-3b4dcc62-7313-11e8-878f-e9c3319c7560.png)\n![simulator screen shot - iphone x - 2018-06-18 at 16 07 04](https://user-images.githubusercontent.com/14052885/41520892-3b832a6a-7313-11e8-8faa-e03d46f3e56c.png)\n![simulator screen shot - iphone x - 2018-06-18 at 16 07 19](https://user-images.githubusercontent.com/14052885/41520893-3bb73fe4-7313-11e8-82b7-1dcf533cbc20.png)\n![simulator screen shot - iphone x - 2018-06-18 at 16 07 24](https://user-images.githubusercontent.com/14052885/41520894-3bec8762-7313-11e8-86eb-0b215dc26797.png)\n![simulator screen shot - iphone x - 2018-06-18 at 16 08 09](https://user-images.githubusercontent.com/14052885/41520895-3c230d3c-7313-11e8-90c7-04f369c57206.png)\n![simulator screen shot - iphone x - 2018-06-18 at 16 08 47](https://user-images.githubusercontent.com/14052885/41520896-3c599eb0-7313-11e8-8cdc-f1442ee31b8c.png)\n![simulator screen shot - iphone x - 2018-06-18 at 16 09 44](https://user-images.githubusercontent.com/14052885/41520897-3c915b48-7313-11e8-8018-4c2cf58c80a9.png)\n![simulator screen shot - iphone x - 2018-06-18 at 16 09 47](https://user-images.githubusercontent.com/14052885/41520898-3cc73862-7313-11e8-9fd6-b2f827a885fe.png)\n\n## Technology stack:\n\n- aws-amplify\n- aws-amplify-react-native\n- aws-appsync\n- aws-appsync-react\n- aws-sdk\n- graphql-tag\n- lodash\n- moment\n- prop-types\n- react-apollo\n- react-native-app-intro-slider\n- react-native-elements\n- react-native-modal\n- react-native-splash-screen\n- react-native-vector-icons\n- react-navigation\n- react-navigation-material-bottom-tabs\n- react-navigation-tabs\n- uuid\n\n## Installation\n\n### React Native setup:\n\n`brew install node`  \n`brew install watchman`  \n`npm install -g react-native-cli`\n\nAnd also install Xcode for iOS simulator + Android Studio / Genymotion for Android simulator. Alternatively connect up a hardware device.\n\n### Project setup:\n\nClone the repo:\n`git clone https://github.com/pjay79/MoviesApp.git`  \nChange to the project folder:\n`cd MoviesApp`  \nAdd dependencies:\n`npm install` or `yarn`\n\n### Amazon\n\nSign up to AWS Free Tier:  \nhttps://aws.amazon.com/free/\n\n### AWS Mobile CLI setup\n\n(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):\n\n`npm install -g awsmobile-cli`  \n`awsmobile configure`  \n`awsmobile init` (in the project folder)\n\n![awsmobile2](https://user-images.githubusercontent.com/14052885/41520984-b04a9234-7313-11e8-9d6e-ead22f033725.jpeg)\n\n`awsmobile user-signin enable`  \n`awsmobile push`  \n`awsmobile console` (opens the aws console in browser)\n\nThis project's source directory is 'app'.\n\n### AWS AppSync setup:\n\nIn the aws console **Services** section locate **AWS AppSync** and then do the following:\n\n- select **Create API**\n\n![appsync-starter](https://user-images.githubusercontent.com/14052885/41519711-0afcbaf6-730d-11e8-87d8-255a19960345.jpeg)\n\n- enter API name **AWS Movies App** and select authorization type to **Amazon Cognito User Pool**\n\n![appsync-settings](https://user-images.githubusercontent.com/14052885/41507521-184374f2-7277-11e8-9b26-ab5d22a56ba3.jpeg)\n![appsync-settings-userpool](https://user-images.githubusercontent.com/14052885/41507522-18768892-7277-11e8-9c6b-355653347db1.jpeg)\n\n- select **Custom Schema**\n\nPaste the following into the Custom Schema box:\n\n```\ntype Movie {  \n    id: ID!  \n    title: String!  \n    genre: String!  \n    director: String!  \n    reviews: [Review]  \n    likes: Int!  \n    author: String!  \n    createdAt: String!  \n}\n\ntype Review {  \n    id: ID!  \n    movieID: ID!  \n    rating: Int!  \n    content: String!  \n    author: String!  \n    createdAt: String!  \n}\n\ntype Query {  \n    fetchMovie(id: ID!): Movie\n}\n\nschema {  \n    query: Query  \n}\n```\n\nSelect **Save** and then **Create Resources**, then select type **Movie** with table name **MovieTable**. Repeat the same process for type **Review** with table name **ReviewTable**.\n\n![create resources](https://user-images.githubusercontent.com/14052885/41507580-4a4fe6b4-7278-11e8-87c6-6dcfd3df5657.jpeg)\n\n### Update resolvers\n\nBack in the AppSync console, find the Data Type **Movie** and **attach** a resolver to the **reviews** field, it should look like this:\n\n![resolver-reviews](https://user-images.githubusercontent.com/14052885/41519804-977471ea-730d-11e8-8abb-047845e242c9.jpeg)\n\nBack again in the AppSync console, find the Data Type **Query** and modify resolver for the **listReviews** field, it should look like this:\n\n![resolver-query](https://user-images.githubusercontent.com/14052885/41508261-38668d92-7285-11e8-9ba0-d2efd369eb22.jpeg)\n\n### DynamoDB table index:\n\nFrom your AppSync console:\n\n- select **DataSources**\n- select **ReviewTable**\n- select **Create index** in DynamoDB\n- select primary key **movieID**, and index name **movieID-index**\n- set read and write capacity to 1 unit each\n\n![create-index](https://user-images.githubusercontent.com/14052885/41519854-f0a4d624-730d-11e8-89cc-c1b3a1ea5348.jpeg)\n\n![index-table](https://user-images.githubusercontent.com/14052885/41508128-1d491220-7283-11e8-9d08-2f581042fd48.jpeg)\n\n### Add AppSync configuration\n\nDownload the React Native AppSync.js file:\n\n![appsync-config](https://user-images.githubusercontent.com/14052885/41519914-43c0cfe8-730e-11e8-9ee8-4a0329ec2b12.jpeg)\n\nAdd the contents of this file to **app/aws-appsync.js** as follows:\n\n```\nexport default {  \n    graphqlEndpoint: 'ENTER_ENDPOINT',  \n    region: 'ENTER_REGION',  \n    authenticationType: 'AMAZON_COGNITO_USER_POOLS',  \n    apiKey: 'null',  \n};\n```\n\n### AWS Cognito\n\nIn 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**.\n\n![cognito-page](https://user-images.githubusercontent.com/14052885/41520257-1d1a67b2-7310-11e8-81a4-ae8696976e09.jpeg)\n\n### Launch\n\nRun on ios:\n`react-native run-ios`  \nRun on android:\n`react-native run-android`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpjay79%2FMoviesApp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpjay79%2FMoviesApp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpjay79%2FMoviesApp/lists"}