Skip to content

Social Media template with live chat using react-native , AWS appsync client (offline and online modes), APOLLO client, Amplify, Cognito, graphql, NodeJS, javascript. Developed by Murali indiacitys.com technologies Coimbatore Tamil Nadu India

License

Notifications You must be signed in to change notification settings

muraliwebworld/social-media-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Social Media Android app template using react-native

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

https://play.google.com/store/apps/details?id=com.indiacities.chennaicommunityforum

Screenshots

social3 social2 social4 social5 social6 social1

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

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

  2. 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
  3. Install dependencies
    npm install

  4. Delete the amplify folder

  5. Initialize a new Amplify project
    amplify init

  6. Add Authentication

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

  7. 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.

About

Social Media template with live chat using react-native , AWS appsync client (offline and online modes), APOLLO client, Amplify, Cognito, graphql, NodeJS, javascript. Developed by Murali indiacitys.com technologies Coimbatore Tamil Nadu India

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published