[Murali]

Social Media template with live chat using react-native, react-navigation, AWS appsync client (offline and online modes), APOLLO client, Amplify, Cognito, graphql, NodeJS, javascript

This app allows user to publish social media like activities, upload images, live chat for every activity with live graphql subscription, offline content storage using AWS appsync. It uses react context provider instead of redux store to pass credentials to child elements. It also uses withApollo to pass AWSappsync client downstream to all child elements

To install, it requires AWS Amplify CLI to create required AWS appsync setup with authorization using cognito and other dynamodb tables. Please refer schema.graphql to create required dynamodb table and modify as per your requirement. Some of details sensitive credentials are removed in amplify folder, it must be setup as per your AWS credentials using Amplify CLI

Demo Download this app
https://play.google.com/store/apps/details?id=com.indiacities.chennaicommunityforum

Before proceeding with below build app procedure, please refer react native documents to install react native app and replace/modify src and android folder by copying files from this repository
#Procedure to build app

Install Amplify CLI and configure
npm install -g @aws-amplify
amplify configure

Installing this repository
please refer react native documents to install react native app and replace/modify src and android folder by copying files from this repository
Install dependencies
npm install

Delete the amplify folder

Initialize a new Amplify project
amplify init

Add Authentication

amplify add auth
(Configure using cognito with username as email address and also third party logins like faceboook)

Add API
amplify add api

(Choose Cognito User Pools as the authentication type(read write update delete) and also API for read only)
(When prompted for the GraphQL schema, use the following schema:)
type Usermadras @aws_api_key @aws_cognito_user_pools
@model
@auth(rules: [{ allow: owner, operations: [create, update, delete] },{allow:private, operations:[read]},{allow:public, operations:[read]}]) {
id: ID!
username: String!
useravatar: String
bio: String
website: String
location: String
activityidlikes: [String]
chatrooms: [RoomLinkmadras] @connection(name: “UserLinksmadras”)
messages: [Messagemadras] @connection(name: “UserMessagesmadras”)
createdAt: String
updatedAt: String
comments: [Commentmadras] @connection(keyName: “byUsermadras”, fields: [“id”])
}

type PushNotificationsubscribersmadras @aws_cognito_user_pools
@model
@auth(rules: [{ allow: owner, operations: [create, update, delete]},{allow:private, operations:[read, create]},{allow:public, operations:[read, create]}]) {
id: ID!
subscription: String
tempfield: String
createdAt: String
updatedAt: String
}

type UserNotificationsmadras @aws_cognito_user_pools
@model
@auth(rules: [{ allow: owner, ownerField: “userID”, operations: [create, update, delete] }]) {
id: ID!
userID: ID!
messages: String
readstatus: Boolean
createdAt: String
updatedAt: String
}

type Chatroommadras @aws_cognito_user_pools
@model(
mutations: { create: “createRoommadras”, update: “updateRoommadras”, delete: “deleteRoommadras” }
queries: { get: “getRoommadras”, list: “listRoomsmadras” }
subscriptions: null
)
@auth(rules: [{ allow: owner, ownerField: “memberids” , operations: [create, update, delete, read]}]) {
id: ID!
messages: [Messagemadras] @connection(name: “RoomMsgsmadras”, sortField: “createdAt”)
associated: [RoomLinkmadras] @connection(name: “AssociatedLinksmadras”)
name: String!
members: [String!]!
memberids: [String!]!
ownerId: String
Moderators: [String]
createdAt: String
updatedAt: String
}

type Messagemadras @aws_cognito_user_pools
@model(subscriptions: null, queries: null)
@auth(rules: [{ allow: owner, ownerField: “authorId”, operations: [create, update, delete] }]) {
id: ID!
author: Usermadras @connection(name: “UserMessagesmadras”, keyField: “authorId”)
authorId: String
authorName: String!
authorImage: String!
content: String!
chatroom: Chatroommadras! @connection(name: “RoomMsgsmadras”)
messageRoomId: ID!
messageChatroomId: ID!
createdAt: String
updatedAt: String
}

type RoomLinkmadras @aws_cognito_user_pools
@model(
mutations: { create: “createRoomLinkmadras”, update: “updateRoomLinkmadras”, delete: “deleteRoomLinkmadras” }
queries: { get: “getRoomlinkmadras”, list: “listRoomlinkmadras” }
subscriptions: null
)
@auth(rules: [{ allow: owner, ownerField: “members”, operations: [create, update, delete] }]) {
id: ID!
user: Usermadras! @connection(name: “UserLinksmadras”)
roomLinkUserId: ID
chatroom: Chatroommadras! @connection(name: “AssociatedLinksmadras”)
roomLinkChatroomId: ID!
chatroomName: String
createdAt: String
updatedAt: String
}

type Blogmadras @aws_api_key @aws_cognito_user_pools @model
@auth(rules: [{ allow: owner, operations: [create, update, delete] },{allow:private, operations:[read]},{allow:public, operations:[read]}]) {
id: ID!
name: String!
posts: [Postmadras] @connection(keyName: “byBlogmadras”, fields: [“id”])
}

type Postmadras @aws_api_key @aws_cognito_user_pools @model @key(name: “byBlogmadras”, fields: [“blogID”], queryField: “byBlogmadras”)
@auth(rules: [{ allow: owner, operations: [create, update, delete] },{allow:private, operations:[read]},{allow:public, operations:[read]}]) {
id: ID!
title: String!
content: String
blogID: ID!
blog: Blogmadras @connection(fields: [“blogID”])
comments: [Commentmadras] @connection(keyName: “byPostmadras”, fields: [“id”])
}

type Groupmadras @aws_api_key @aws_cognito_user_pools @model
@auth(rules: [{ allow: owner, operations: [create, update, delete] },{allow:private, operations:[read]},{allow:public, operations:[read]}]) {
id: ID!
name: String
groupslug: String
content: String
description: String
groupImage: String
activities: [Activitymadras] @connection(keyName: “byGroupmadras”, fields: [“id”])
}

type Activitymadras @aws_api_key @aws_cognito_user_pools @model
@key(name: “orderbyupdatedIDmadras”, fields: [“sorTid”, “updatedAt”], queryField: “orderbyupdatedIDmadras”)
@auth(rules: [{ allow: owner, operations: [create, update, delete] },{allow:private, operations:[read,update]},{allow:public, operations:[read]}]) {
id: ID!
sorTid: ID!
title: String
slug: String
content: String
contentLowercase: String
groupID: ID!
likeids: [Int]
group: Groupmadras @connection(fields: [“groupID”])
authorId: ID!
authorName: String
userdetails: Usermadras @connection(fields:[“authorId”])
authorImage: String
activityImage: String
createdAt: AWSDateTime
updatedAt: AWSDateTime
}

type Commentmadras @aws_api_key @aws_cognito_user_pools @model(subscriptions: null)
@key(name: “byPostmadras”, fields: [“postID”, “content”], queryField: “byPostmadras”)
@key(name: “byUsermadras”, fields: [“authorId”], queryField: “byUsermadras”)
@auth(rules: [{ allow: owner, operations: [create, update, delete] },{allow:private, operations:[read]},{allow:public, operations:[read]}]){
id: ID
postID: ID!
post: Postmadras @connection(fields: [“postID”])
content: String!
authorId: ID!
authorName: String!
userdetails: Usermadras @connection(fields:[“authorId”])
authorImage: String!
createdAt: String
updatedAt: String
}

type Subscription @aws_api_key @aws_cognito_user_pools {
onCreateRoomLinkmadras(roomLinkUserId: ID!): RoomLinkmadras
@aws_subscribe(mutations: [“createRoomLinkmadras”])
onDeleteRoomLinkmadras(roomLinkUserId: ID!): RoomLinkmadras
@aws_subscribe(mutations: [“deleteRoomLinkmadras”])
onCreateUsernotificationmadras(userID: ID!): UserNotificationsmadras
@aws_subscribe(mutations: [“createUserNotificationsmadras”])
onDeleteUserNotificationmadras(userID: ID!): UserNotificationsmadras
@aws_subscribe(mutations: [“deleteUserNotificationsmadras”])
onCreateMessagemadras(messageRoomId: ID!,messageChatroomId: ID!): Messagemadras
@aws_subscribe(mutations: [“createMessagemadras”])
onDeleteMessagemadras(messageRoomId: ID!,messageChatroomId: ID!): Messagemadras
@aws_subscribe(mutations: [“deleteMessagemadras”])
onCreateCommentmadras(postID: ID): Commentmadras
@aws_subscribe(mutations: [“createCommentmadras”])
onDeleteCommentmadras(postID: ID): Commentmadras
@aws_subscribe(mutations: [“deleteCommentmadras”])
}
8.Run the push command to create the resources in your account:
amplify push

9. Run the project as per react native cli instructions standalone using
npx react-native start and npx react-native run-android simultaneously in two terminals.

[Author]

Posts