React native Social media template

Social Media Android app template using react-native

Viewing 5 posts - 1 through 5 (of 6 total)
  • Author
    Posts
  • #88
    Murali
    Keymaster

    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.

    #911
    Murali
    Keymaster

    test 2.04 version PNFPB reply forum topic test

    #912
    Murali
    Keymaster

    test2

    • This reply was modified 2 weeks ago by Murali.
    #914
    Murali
    Keymaster

    test673

    • This reply was modified 2 weeks ago by Murali.
    #916
    Murali
    Keymaster

    test678

Viewing 5 posts - 1 through 5 (of 6 total)
  • You must be logged in to reply to this topic.

Manage push notifications

notification icon
We would like to show you notifications for the latest news and updates.
notification icon
You are subscribed to notifications
notification icon
We would like to show you notifications for the latest news and updates.
notification icon
You are subscribed to notifications
Would you like to install our app?
PNFPB Install PWA using share icon

Install our app using add to home screen in browser. In phone/ipad browser, click on share icon in browser and select add to home screen in ios devices or add to dock in macos

PNFPB Install PWA using share icon

Install our app using add to home screen in browser. In phone/ipad browser, click on share icon in browser and select add to home screen in ios devices or add to dock in macos

Progressive Web App (PWA) is installed successfully. It will also work in offline

Push notification permission blocked in browser settings. Reset the notification settings for website/PWA