Skip to content

WhatsApp-like Real-Time & Offline Serverless Messaging Mobile/Web App using AWS Amplify & AppSync

🎯🎯🎯 Bridging the gap between RealTime / Offline & AI/ML Capabilities in the Modern Serverless Mobile/Web Messaging Apps to deliver great Customer Experience.
Chats List Screen Chat Room Screen

1. 💡 Modern Mobile/Web App Challenges

!!! Success "🚀 Modern Mobile & Web Apps to deliver great Customer Experience 🏅"

Challenge         | Solution                                           | AWS Technology
:---------------- |:-------------------------------------------------- |:-----------
**Anybody**       | AuthN & AuthZ Authentication & Authorization | Amazon Cognito
**Anywhere**      | Mobility Responsive & Progressive            | AWS Amplify CLI
**On Anything**   | Cloud Platform Serverless & No Servers       | AWS Amplify Console 
**In an Instant** | Real-time Instantaneous, Real-time Feedback  | AWS AppSync & GraphQL
**At any Time**   | Offline always Available                     | PWA
Real-Time & Offline-Ready
AI/ML Capabilities
Serverless & DevOps

Real-Time & Offline-Ready (conflict resolution handled for you when user comes back online) Messenging App written with GraphQL, AWS AppSync, AWS Amplify, React.

2. 💬 WhatsApp-like Messaging-App Product Features

F0. User Management: Sign up, Log in, Settings
  • [x] Sign up with Email
  • [ ] Sign up with Linkedin
  • [ ] Sign up with Facebook
  • [ ] Sign up with Google
  • [x] Log in with Email
  • [ ] Log in with Linkedin
  • [ ] Log in with Facebook
  • [ ] Log in with Google
  • [x] Forgot password
  • [x] Settings
🎯 F1. Chats Listing, New Chat, New Chat Group
🎯 F2. Chat Room & Multimedia Sharing

WhatsApp-like SmartChat Desktop

  • [x] Chat Room Screen: Header, Message Box, Message List
  • [x] Chat Room Screen: Text, Image, Audio, Video, File
  • [x] Chat Room Screen: Quick Reply
  • [x] Chat Room Screen: Shared Location using Google Maps, Emoji
  • [x] Chat Room Screen:
  • [x] Group Details
️⚡️ F3. WhatsApp-like Business Features

Businesses can interact with Customers easily by using tools to automate, sort, and quickly respond to messages.

Feature Prototype Screen
F3.3. Business Profile Quick Replies
F3.4. Quick Replies Quick Replies
F3.5. Labels Quick Replies
  • [x] F3.1. MVP/MLP > DnD Question & Answer
  • [x] F3.2. MVP/MLP > Send Structured Message
  • [ ] F3.3. Company/Business Profile > Be Seen: Create a Business Profile with helpful information for your Customers like your Address, Business Description, Email Address, and Website.
  • [ ] F3.4. Quick Replies > Message More, Work Less: let you save and reuse messages you frequently send so you can easily answer common questions in no time.
  • [ ] F3.5. Labels > Stay Organized: Organize your contacts or chats with labels, so you can easily find them again.
  • [ ] F3.6. Automated Messages > Respond Instantly: Set an away message when you are unable to answer so your customers know when to expect a response. You can also create a greeting message to introduce your customers to your business.

3. High-Level Architecture & Technology:

SmartChat High-Level Architecture

1. AWS DynamoDB NoSQL Database
  • [x]
2. AWS Amplify
  • [x]
3. AWS AppSync & GraphQL 
    type User 
    @model 
    @auth(rules: [{ allow: owner, ownerField: "id", queries: null }]) {
    id: ID!
    username: String!
    conversations: [ConvoLink] @connection(name: "UserLinks")
    messages: [Message] @connection(name: "UserMessages")
        createdAt: String
        updatedAt: String
    }

    type Conversation
    @model(
        mutations: { create: "createConvo" }
        queries: { get: "getConvo" }
        subscriptions: null
    )
    @auth(rules: [{ allow: owner, ownerField: "members" }]) {
    id: ID!
    messages: [Message] @connection(name: "ConvoMsgs", sortField: "createdAt")
    associated: [ConvoLink] @connection(name: "AssociatedLinks")
    name: String!
    members: [String!]!
        createdAt: String
        updatedAt: String
    }

    type Message 
    @model(subscriptions: null, queries: null) 
    @auth(rules: [{ allow: owner, ownerField: "authorId" }]) {
    id: ID!
    author: User @connection(name: "UserMessages", keyField: "authorId")
    authorId: String
    content: String!
    conversation: Conversation! @connection(name: "ConvoMsgs")
    messageConversationId: ID!
        createdAt: String
        updatedAt: String
    }

    type ConvoLink 
    @model(
        mutations: { create: "createConvoLink", update: "updateConvoLink" }
        queries: null
        subscriptions: null
    ) {
    id: ID!
    user: User! @connection(name: "UserLinks")
    convoLinkUserId: ID
    conversation: Conversation! @connection(name: "AssociatedLinks")
    convoLinkConversationId: ID!
        createdAt: String
        updatedAt: String
    }

    type Subscription {
    onCreateConvoLink(convoLinkUserId: ID!): ConvoLink
        @aws_subscribe(mutations: ["createConvoLink"])
    onCreateMessage(messageConversationId: ID!): Message
        @aws_subscribe(mutations: ["createMessage"])
    }
4. AWS ElasticSearch
  • [x]
5. AWS Lambda, API-Gateway, S3
  • [x]
6. React Router, MobX (or Redux ?), Glamor
  • [x]

4. Prototype & Demo Script

Whatsapp-like Prototype

Whatsapp-like-SmartChat-Desktop-Prototype

F0. User Management: Sign up, Log in, Settings
🎯 F1.1. Chats Listing
[Screen] Sprint1 WhapApp-like [Screen] Ready for Sales
🎯 F1.2. New Chat
[Screen] Sprint1 WhapApp-like [Screen] Ready for Sales
🎯 F1.3. New Group
[Screen] Sprint1 WhapApp-like [Screen] Ready for Sales
🎯 F2.1. Chat Room & Multimedia Sharing
  • [ ] Group Messaging
  • [x] Offline Message Sending
  • [ ] User Status Visibility
  • [ ] Can See Chat History
  • [x] Emoji
  • [x] Easy File Transfer
  • [Nice to Have] Voice & Video Call
  • [Nice to Have] Location Sharing
[Screen] Sprint1 WhapApp-like [Screen] Ready for Sales
🎯 F2.2. Group Details
[Screen] Sprint1 WhapApp-like [Screen] Ready for Sales
️⚡️ F3.1. DnD Question & Answer > Respond Instantly

You can also create a greeting message to introduce your customers to your business.

️⚡️ F3.2. Send Structured Message > Quick Survey

Useful for Sales Processes, Intake Meeting Form

️⚡️ F3.3. Company/Business Profile > Be Seen

Create a Business Profile with helpful information for your Customers like your Address, Business Description, Email Address, and Website.

️⚡️ F3.4. Quick Replies > Message More, Work Less

Let you save and reuse messages you frequently send so you can easily answer common questions in no time.

️⚡️ F3.5. Labels > Stay Organized

Organize your contacts or chats with labels, so you can easily find them again."

5. Agile Product Development