diff --git a/community/sample-apps/whatsapp-clone-typescript-react/react-app/.dockerignore b/community/sample-apps/whatsapp-clone-typescript-react/react-app/.dockerignore
new file mode 100644
index 00000000000..3c3629e647f
--- /dev/null
+++ b/community/sample-apps/whatsapp-clone-typescript-react/react-app/.dockerignore
@@ -0,0 +1 @@
+node_modules
diff --git a/community/sample-apps/whatsapp-clone-typescript-react/react-app/.gitignore b/community/sample-apps/whatsapp-clone-typescript-react/react-app/.gitignore
index c81b8d31916..efc1042ea9d 100644
--- a/community/sample-apps/whatsapp-clone-typescript-react/react-app/.gitignore
+++ b/community/sample-apps/whatsapp-clone-typescript-react/react-app/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 npm-debug.log
 .env
+build
diff --git a/community/sample-apps/whatsapp-clone-typescript-react/react-app/Dockerfile b/community/sample-apps/whatsapp-clone-typescript-react/react-app/Dockerfile
new file mode 100644
index 00000000000..5ed75c85f6a
--- /dev/null
+++ b/community/sample-apps/whatsapp-clone-typescript-react/react-app/Dockerfile
@@ -0,0 +1,21 @@
+FROM node:carbon
+
+# Create app directory
+WORKDIR /app
+
+# Install app dependencies
+RUN npm -g install serve
+# A wildcard is used to ensure both package.json AND package-lock.json are copied
+COPY package*.json ./
+
+RUN npm install
+
+# Bundle app source
+COPY . /app
+#Build react/vue/angular bundle static files
+#RUN npm run generate
+RUN npm run build
+
+EXPOSE 8080
+# serve build folder on port 8080
+CMD ["serve", "-s", "build", "-p", "8080"]
diff --git a/community/sample-apps/whatsapp-clone-typescript-react/react-app/README.md b/community/sample-apps/whatsapp-clone-typescript-react/react-app/README.md
index 9562337531a..a8adf4b744a 100644
--- a/community/sample-apps/whatsapp-clone-typescript-react/react-app/README.md
+++ b/community/sample-apps/whatsapp-clone-typescript-react/react-app/README.md
@@ -12,7 +12,7 @@ Run codegen to generate TypeScript types
 
     yarn generate
 
-**Note**: The types are generated from the server! So if you have `admin secret` enabled in your graphql-engine server, make sure to update the headers in `codegen.yml` file.
+**Note**: The types are generated from the server! So if you have `admin secret` enabled in your graphql-engine server, make sure to update the headers in `codegen.js` file.
 
 Set environment variables. Open `.env` file and add the following env
 
diff --git a/community/sample-apps/whatsapp-clone-typescript-react/react-app/codegen.js b/community/sample-apps/whatsapp-clone-typescript-react/react-app/codegen.js
new file mode 100644
index 00000000000..29f59144a87
--- /dev/null
+++ b/community/sample-apps/whatsapp-clone-typescript-react/react-app/codegen.js
@@ -0,0 +1,24 @@
+module.exports = {
+    "schema": [
+        {
+            "http://localhost:8080/v1alpha1/graphql": {
+                "headers": {
+                    "x-hasura-admin-secret": ""
+                }
+            }
+        }
+    ],
+    "documents": [
+        "./src/**/*.tsx",
+        "./src/**/*.ts"
+    ],
+    "overwrite": true,
+    "generates": {
+        "./src/graphql/types.ts": {
+            "plugins": [
+                "typescript-common",
+                "typescript-client"
+            ]
+        }
+    }
+};
diff --git a/community/sample-apps/whatsapp-clone-typescript-react/react-app/codegen.yml b/community/sample-apps/whatsapp-clone-typescript-react/react-app/codegen.yml
deleted file mode 100644
index 3e0eca92ba4..00000000000
--- a/community/sample-apps/whatsapp-clone-typescript-react/react-app/codegen.yml
+++ /dev/null
@@ -1,13 +0,0 @@
-schema:
-  - http://localhost:8080/v1alpha1/graphql:
-      #headers:
-      #  x-hasura-admin-secret: 
-documents:
-  - ./src/**/*.tsx
-  - ./src/**/*.ts
-overwrite: true
-generates:
-  ./src/graphql/types.ts:
-    plugins:
-      - typescript-common
-      - typescript-client
diff --git a/community/sample-apps/whatsapp-clone-typescript-react/react-app/package.json b/community/sample-apps/whatsapp-clone-typescript-react/react-app/package.json
index 5ce049d8100..a3a5e42d966 100644
--- a/community/sample-apps/whatsapp-clone-typescript-react/react-app/package.json
+++ b/community/sample-apps/whatsapp-clone-typescript-react/react-app/package.json
@@ -46,7 +46,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "generate": "gql-gen",
+    "generate": "gql-gen --config codegen.js",
     "generate:watch": "nodemon --exec yarn generate -e graphql"
   },
   "eslintConfig": {
diff --git a/community/sample-apps/whatsapp-clone-typescript-react/react-app/public/favicon.ico b/community/sample-apps/whatsapp-clone-typescript-react/react-app/public/favicon.ico
deleted file mode 100755
index a11777cc471..00000000000
Binary files a/community/sample-apps/whatsapp-clone-typescript-react/react-app/public/favicon.ico and /dev/null differ
diff --git a/community/sample-apps/whatsapp-clone-typescript-react/react-app/public/favicon.png b/community/sample-apps/whatsapp-clone-typescript-react/react-app/public/favicon.png
new file mode 100755
index 00000000000..133502f91b4
Binary files /dev/null and b/community/sample-apps/whatsapp-clone-typescript-react/react-app/public/favicon.png differ
diff --git a/community/sample-apps/whatsapp-clone-typescript-react/react-app/public/index.html b/community/sample-apps/whatsapp-clone-typescript-react/react-app/public/index.html
index 1edfae24af9..0d4fbcd3692 100755
--- a/community/sample-apps/whatsapp-clone-typescript-react/react-app/public/index.html
+++ b/community/sample-apps/whatsapp-clone-typescript-react/react-app/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
diff --git a/community/sample-apps/whatsapp-clone-typescript-react/react-app/public/manifest.json b/community/sample-apps/whatsapp-clone-typescript-react/react-app/public/manifest.json
index 1f2f141fafd..194fffce753 100755
--- a/community/sample-apps/whatsapp-clone-typescript-react/react-app/public/manifest.json
+++ b/community/sample-apps/whatsapp-clone-typescript-react/react-app/public/manifest.json
@@ -1,9 +1,9 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "WhatsApp Clone",
+  "name": "WhatsApp Clone",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "favicon.png",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     }
diff --git a/community/sample-apps/whatsapp-clone-typescript-react/react-app/src/components/ChatRoomScreen/ChatNavbar.tsx b/community/sample-apps/whatsapp-clone-typescript-react/react-app/src/components/ChatRoomScreen/ChatNavbar.tsx
index 5f127b60210..4f4de5a511a 100644
--- a/community/sample-apps/whatsapp-clone-typescript-react/react-app/src/components/ChatRoomScreen/ChatNavbar.tsx
+++ b/community/sample-apps/whatsapp-clone-typescript-react/react-app/src/components/ChatRoomScreen/ChatNavbar.tsx
@@ -15,7 +15,7 @@ import styled from 'styled-components'
 import * as fragments from '../../graphql/fragments'
 import * as queries from '../../graphql/queries'
 import { useMe } from '../../services/auth.service';
-import { ChatList, DeleteChat, ChatsListQueryCache } from '../../graphql/types'
+import { ChatList, DeleteChat, ChatsListCacheQuery } from '../../graphql/types'
 
 const Style = styled.div`
   padding: 0;
@@ -76,7 +76,7 @@ const query = gql`
 `
 
 const queryCache = gql`
-  query ChatsListQueryCache($userId: Int!) {
+  query ChatsListCacheQuery($userId: Int!) {
     chat(order_by:[{messages_aggregate:{max:{created_at:desc}}}]) {
       ...chat
       users(where:{user_id:{_neq:$userId}}) {
@@ -125,7 +125,7 @@ export default ({ chatId, history }: ChatNavbarProps) => {
       update: (client, { data: { delete_chat } }) => {
         let chats
         try {
-          chats = client.readQuery<ChatsListQueryCache.Query, ChatsListQueryCache.Variables>({
+          chats = client.readQuery<ChatsListCacheQuery.Query, ChatsListCacheQuery.Variables>({
             query: queryCache,
             variables: {userId: me.id}
           }).chat
@@ -136,7 +136,7 @@ export default ({ chatId, history }: ChatNavbarProps) => {
           // filter current parsedChatId
           chats = chats.filter((chat) => chat.id !== parsedChatId);
           try {
-            client.writeQuery<ChatsListQueryCache.Query, ChatsListQueryCache.Variables>({
+            client.writeQuery<ChatsListCacheQuery.Query, ChatsListCacheQuery.Variables>({
               query: queryCache,
               variables: {userId: me.id},
               data: { chat: chats },
diff --git a/community/sample-apps/whatsapp-clone-typescript-react/react-app/src/components/GroupDetailsScreen/index.tsx b/community/sample-apps/whatsapp-clone-typescript-react/react-app/src/components/GroupDetailsScreen/index.tsx
index 2946b2de99a..39357b9fdd1 100644
--- a/community/sample-apps/whatsapp-clone-typescript-react/react-app/src/components/GroupDetailsScreen/index.tsx
+++ b/community/sample-apps/whatsapp-clone-typescript-react/react-app/src/components/GroupDetailsScreen/index.tsx
@@ -199,9 +199,9 @@ export default ({ location, match, history }: RouteComponentProps) => {
 
     if (!file) return
 
-    const { url } = await uploadProfilePicture(file)
+    const { secure_url } = await uploadProfilePicture(file)
 
-    setChatPicture(url)
+    setChatPicture(secure_url)
   }
 
   return (
diff --git a/community/sample-apps/whatsapp-clone-typescript-react/react-app/src/components/SettingsScreen/SettingsForm.tsx b/community/sample-apps/whatsapp-clone-typescript-react/react-app/src/components/SettingsScreen/SettingsForm.tsx
index 4f149cb3d6a..72385ee3c02 100644
--- a/community/sample-apps/whatsapp-clone-typescript-react/react-app/src/components/SettingsScreen/SettingsForm.tsx
+++ b/community/sample-apps/whatsapp-clone-typescript-react/react-app/src/components/SettingsScreen/SettingsForm.tsx
@@ -105,9 +105,9 @@ export default ({ history }: RouteComponentProps) => {
 
     if (!file) return
 
-    const { url } = await uploadProfilePicture(file)
+    const { secure_url } = await uploadProfilePicture(file)
 
-    setMyPicture(url)
+    setMyPicture(secure_url)
   }
 
   return (