initial commit

.gitignore

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

Guide.txt

+TensorFlow.js
+1. https://www.youtube.com/watch?v=CM92pIh1Unw
+2. https://www.youtube.com/watch?v=3MqJzMvHE3E
+
+
+https://www.tensorflow.org/js/guide/nodejs
+https://levelup.gitconnected.com/build-ad-dog-classifier-with-react-and-tensorflow-js-in-minutes-f08e98608a65
+https://experiments.withgoogle.com/collection/ai
+https://teachablemachine.withgoogle.com/
+https://www.npmjs.com/package/ml5
+https://p5js.org/

README.md

+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

next-env.d.ts

+/// <reference types="next" />
+/// <reference types="next/types/global" />

next.config.js

+module.exports = {
+    env: {
+        appName: 'com',
+        dev_url: 'http://localhost:3000',
+        host_url: 'https://noon-interview.vercel.app',
+        hosting: false,
+        FIREBASE_PROJECT_ID: "noon-4a6cf",
+        FIREBASE_CLIENT_EMAIL: "firebase-adminsdk-au73o@noon-4a6cf.iam.gserviceaccount.com",
+        FIREBASE_PRIVATE_KEY: "-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDMly3SvQ3pgobE\naZDDFfjfcoYTsTmfpP8MDFJRw4MHYL45ejg8YeB8joBiHn0xgfkd0Tza6+Cse4gl\nos2vA2PJZ9zg10W64b5CecAlvB6yoNj2T8Vc6S+uRqEfx+4Ab6KQ4DyV79za2AUD\nmLML9j/swYojP92TzcxFkIs3e1x0IaB3L7HqhDaCotVICNs+HHLghOHFmOHPTZVt\nST0wFxbiAxG/IhGVFk6JybEc9fpy2bWL9125jW2Q81TYTDZNHS2oLBiY0yhVuUtQ\nSdiVsPYTrgygDRjC59+QI0uKrMhIvYZ3ZogDgntHFOk1mA29g9LdRDWD7i1oMylo\n7nMEdS71AgMBAAECggEAOkYZZDw7OTbXghx7gkXA5IxvSi6htio+B0V/MRDaQoC4\nzhBU8kYCthe0073RdQeLWIXfqo+jKB3rkqTDp0T06EowLM7Eas2f7rlVFKp3p/OO\nuOHR2nwE+8PcYvwEe5VQnalxOFfg9WiwTOzymsaiQKKD4TRwvYfR1kKslLoLhHwI\nglL/wPopWGPb2PAoc/Yh/Ai3mriMxMLN2V5r/CIoZjggbYIEobnkNONQ2I2z4bd1\nJ6363VRgBp6ZmhC4VnaXNuqZfOKfwQmi1rzcdTMn5DhZySeWVmJ6cExkHvkMz6Ji\nEfP2tA9ssfZKaghywLT5cYmr33OQdV+1OtYXBhgfxQKBgQD8ixKxOzcGXxr893Sj\nsLYwIMGpYAXCl5OVNr+XdjXwh3o3q1PQvidheHyTKR/jxUKcQgI1KksVcREX5oLW\nmFVtFApcloAVZv8zoNTCRywXA8toxQJcsqinTmzNwjYbn68ICgJtkqZLc6Ph45h7\nDoNWC3/hwGLcsTD1JloBQ8QtQwKBgQDPZBOmDItgdaJBRWbmg7ISnEnXn973tAlX\nhyioJVc77zOHJ1CMaE8FcMHsUrrcORy667L+k6FyPHSJUpNuVieFlmywl6Q2Dw8t\nFn69OC8kw+8CklMxX65jYG9EwU1wdcbzpntr/3h9NX9CNDacQP3aN/1ivOaOWLxr\nN+7x+fkTZwKBgBSgo2k4hfkOQZ0R9UP9hhQOSOM1xaKsUNCqRSHw9Nzto+zyIIl3\nTq4mcj5u6HzpOtSai6WeC733m0bRfDRdAvVC4snHPTUCUav84gPwXkiO9clb9iJu\nMVphDIAN8e91ro1AjAw5Iz4cdvFXbrf2aoHXtJ1S4oBWNMKBXG6oA1kTAoGASHAx\nOL+K8z9DVD8UiRGY4k06sZkCvUxiMvNfrROV27ZaLiv6Q4CvkTvoUE45PHCqa1Om\naqtQKeGZ5tkz68cl+NAo2Kmuzr8F0v7Xd+om9VWGp0RK0KUV+VoWo1JNZSmOO058\nL6XFBR7pe0tXg85jnJQP6iwG79NoxJ591IE2kaMCgYEAzOw4Bfhctj5ipWfB/May\nFsiihBsDKA2Qo74XOrxpjtJJ9t1mjLuPeyZgPP6CIqIIrPDUktwnsw2AGc2S9ovu\npKtkn4E5vd9W1mGx91uUuY9OUIjjDVV+ToH4gELXhhAlz9a6pevv1Fx5ULNuszLo\n9t95t+XCkuqRyytTbDLYY6w=\n-----END PRIVATE KEY-----\n",
+    },
+    i18n: {
+        locales: ['en','jp','sin'],
+        defaultLocale: 'en'
+    },
+    reactStrictMode: true,
+}

package.json

+{
+  "name": "video-conferencing",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@tensorflow-models/handpose": "^0.0.7",
+    "@tensorflow/tfjs": "^3.2.0",
+    "@tensorflow/tfjs-backend-webgl": "3.3.0",
+    "@tensorflow/tfjs-converter": "3.3.0",
+    "@tensorflow/tfjs-core": "3.3.0",
+    "fingerpose": "^0.0.2",
+    "next": "10.0.7",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-webcam": "^5.2.3",
+    "styled-components": "^5.2.1"
+  },
+  "devDependencies": {
+    "@types/node": "^14.14.31",
+    "@types/react": "^17.0.2",
+    "@types/styled-components": "^5.1.7",
+    "babel-plugin-styled-components": "^1.12.0",
+    "prettier": "^2.2.1",
+    "tslib": "2.1.0",
+    "typescript": "^4.2.2"
+  },
+  "resolutions": {
+    "styled-components": "^5"
+  }
+}

public/images/3d.svg

+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" fill="#888"><g><path d="m443.397 208.569c-7.236-4.043-16.377-1.523-20.449 5.654-4.087 7.207-1.553 16.362 5.654 20.449 33.794 19.146 53.398 42.7 53.398 66.328 0 41.06-56.444 79.863-138.974 96.577-8.13 1.655-13.374 9.565-11.733 17.681 1.669 8.195 9.687 13.379 17.681 11.733 98.422-19.936 163.026-69.389 163.026-125.991 0-34.907-25.009-67.734-68.603-92.431z"/><path d="m181 430.115v50.885c0 5.537 3.047 10.62 7.925 13.228 4.81 2.58 10.745 2.353 15.396-.747l90-60c4.175-2.783 6.68-7.471 6.68-12.48s-2.505-9.697-6.68-12.48l-90-60c-4.614-3.047-10.547-3.369-15.396-.747-4.878 2.606-7.925 7.689-7.925 13.226v38.419c-87.702-15.025-151-54.931-151-98.419 0-23.628 19.604-47.183 53.397-66.328 7.207-4.087 9.741-13.242 5.654-20.449-4.072-7.178-13.198-9.697-20.449-5.654-43.593 24.697-68.602 57.524-68.602 92.431 0 61.108 72.834 112.066 181 129.115z"/><path d="m376 74.228-113.291-56.646c-4.219-2.109-9.199-2.109-13.418 0l-113.296 56.649 120.005 59.997z"/><path d="m391 241v-140.727l-120 60c0 3.08 0 153.08 0 150l111.709-55.854c5.083-2.55 8.291-7.735 8.291-13.419z"/><path d="m121 241c0 5.684 3.208 10.869 8.291 13.418l111.709 55.855c0-10.53 0-153.082 0-150l-120-59.995z"/></g></svg>
\ No newline at end of file

public/images/3dActive.svg

+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" fill="#fff"><g><path d="m443.397 208.569c-7.236-4.043-16.377-1.523-20.449 5.654-4.087 7.207-1.553 16.362 5.654 20.449 33.794 19.146 53.398 42.7 53.398 66.328 0 41.06-56.444 79.863-138.974 96.577-8.13 1.655-13.374 9.565-11.733 17.681 1.669 8.195 9.687 13.379 17.681 11.733 98.422-19.936 163.026-69.389 163.026-125.991 0-34.907-25.009-67.734-68.603-92.431z"/><path d="m181 430.115v50.885c0 5.537 3.047 10.62 7.925 13.228 4.81 2.58 10.745 2.353 15.396-.747l90-60c4.175-2.783 6.68-7.471 6.68-12.48s-2.505-9.697-6.68-12.48l-90-60c-4.614-3.047-10.547-3.369-15.396-.747-4.878 2.606-7.925 7.689-7.925 13.226v38.419c-87.702-15.025-151-54.931-151-98.419 0-23.628 19.604-47.183 53.397-66.328 7.207-4.087 9.741-13.242 5.654-20.449-4.072-7.178-13.198-9.697-20.449-5.654-43.593 24.697-68.602 57.524-68.602 92.431 0 61.108 72.834 112.066 181 129.115z"/><path d="m376 74.228-113.291-56.646c-4.219-2.109-9.199-2.109-13.418 0l-113.296 56.649 120.005 59.997z"/><path d="m391 241v-140.727l-120 60c0 3.08 0 153.08 0 150l111.709-55.854c5.083-2.55 8.291-7.735 8.291-13.419z"/><path d="m121 241c0 5.684 3.208 10.869 8.291 13.418l111.709 55.855c0-10.53 0-153.082 0-150l-120-59.995z"/></g></svg>
\ No newline at end of file

public/images/group.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve" fill="#888">
+<g>
+	<g>
+		<path d="M438.09,273.32h-39.596c4.036,11.05,6.241,22.975,6.241,35.404v149.65c0,5.182-0.902,10.156-2.543,14.782h65.461
+			c24.453,0,44.346-19.894,44.346-44.346v-81.581C512,306.476,478.844,273.32,438.09,273.32z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M107.265,308.725c0-12.43,2.205-24.354,6.241-35.404H73.91c-40.754,0-73.91,33.156-73.91,73.91v81.581
+			c0,24.452,19.893,44.346,44.346,44.346h65.462c-1.641-4.628-2.543-9.601-2.543-14.783V308.725z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M301.261,234.815h-90.522c-40.754,0-73.91,33.156-73.91,73.91v149.65c0,8.163,6.618,14.782,14.782,14.782h208.778
+			c8.164,0,14.782-6.618,14.782-14.782v-149.65C375.171,267.971,342.015,234.815,301.261,234.815z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M256,38.84c-49.012,0-88.886,39.874-88.886,88.887c0,33.245,18.349,62.28,45.447,77.524
+			c12.853,7.23,27.671,11.362,43.439,11.362c15.768,0,30.586-4.132,43.439-11.362c27.099-15.244,45.447-44.28,45.447-77.524
+			C344.886,78.715,305.012,38.84,256,38.84z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M99.918,121.689c-36.655,0-66.475,29.82-66.475,66.475c0,36.655,29.82,66.475,66.475,66.475
+			c9.298,0,18.152-1.926,26.195-5.388c13.906-5.987,25.372-16.585,32.467-29.86c4.98-9.317,7.813-19.946,7.813-31.227
+			C166.393,151.51,136.573,121.689,99.918,121.689z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M412.082,121.689c-36.655,0-66.475,29.82-66.475,66.475c0,11.282,2.833,21.911,7.813,31.227
+			c7.095,13.276,18.561,23.874,32.467,29.86c8.043,3.462,16.897,5.388,26.195,5.388c36.655,0,66.475-29.82,66.475-66.475
+			C478.557,151.509,448.737,121.689,412.082,121.689z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/images/groupActive.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve" fill="#8cc22c">
+<g>
+	<g>
+		<path d="M438.09,273.32h-39.596c4.036,11.05,6.241,22.975,6.241,35.404v149.65c0,5.182-0.902,10.156-2.543,14.782h65.461
+			c24.453,0,44.346-19.894,44.346-44.346v-81.581C512,306.476,478.844,273.32,438.09,273.32z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M107.265,308.725c0-12.43,2.205-24.354,6.241-35.404H73.91c-40.754,0-73.91,33.156-73.91,73.91v81.581
+			c0,24.452,19.893,44.346,44.346,44.346h65.462c-1.641-4.628-2.543-9.601-2.543-14.783V308.725z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M301.261,234.815h-90.522c-40.754,0-73.91,33.156-73.91,73.91v149.65c0,8.163,6.618,14.782,14.782,14.782h208.778
+			c8.164,0,14.782-6.618,14.782-14.782v-149.65C375.171,267.971,342.015,234.815,301.261,234.815z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M256,38.84c-49.012,0-88.886,39.874-88.886,88.887c0,33.245,18.349,62.28,45.447,77.524
+			c12.853,7.23,27.671,11.362,43.439,11.362c15.768,0,30.586-4.132,43.439-11.362c27.099-15.244,45.447-44.28,45.447-77.524
+			C344.886,78.715,305.012,38.84,256,38.84z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M99.918,121.689c-36.655,0-66.475,29.82-66.475,66.475c0,36.655,29.82,66.475,66.475,66.475
+			c9.298,0,18.152-1.926,26.195-5.388c13.906-5.987,25.372-16.585,32.467-29.86c4.98-9.317,7.813-19.946,7.813-31.227
+			C166.393,151.51,136.573,121.689,99.918,121.689z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M412.082,121.689c-36.655,0-66.475,29.82-66.475,66.475c0,11.282,2.833,21.911,7.813,31.227
+			c7.095,13.276,18.561,23.874,32.467,29.86c8.043,3.462,16.897,5.388,26.195,5.388c36.655,0,66.475-29.82,66.475-66.475
+			C478.557,151.509,448.737,121.689,412.082,121.689z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/images/message.svg

+<svg height="512pt" viewBox="0 -45 512 511" width="512pt" xmlns="http://www.w3.org/2000/svg" fill="#888"><path d="m407 .5h-302c-57.898438 0-105 47.101562-105 105v162.171875c0 46.199219 30.332031 86.4375 74.285156 99.316406l50.710938 50.714844c2.816406 2.8125 6.628906 4.394531 10.609375 4.394531 3.976562 0 7.792969-1.582031 10.605469-4.394531l46.519531-46.523437h214.269531c57.898438 0 105-47.101563 105-105v-160.679688c0-57.898438-47.101562-105-105-105zm-261.242188 211.851562c0-8.285156 6.714844-15 15-15h190.484376c8.285156 0 15 6.714844 15 15 0 8.285157-6.714844 15-15 15h-190.484376c-8.285156 0-15-6.714843-15-15zm205.484376-38.023437h-190.484376c-8.285156 0-15-6.714844-15-15 0-8.28125 6.714844-15 15-15h190.484376c8.285156 0 15 6.71875 15 15 0 8.285156-6.714844 15-15 15zm0 0"/></svg>
\ No newline at end of file

public/images/messageActive.svg

+<svg height="512pt" viewBox="0 -45 512 511" width="512pt" xmlns="http://www.w3.org/2000/svg" fill="#8cc22c"><path d="m407 .5h-302c-57.898438 0-105 47.101562-105 105v162.171875c0 46.199219 30.332031 86.4375 74.285156 99.316406l50.710938 50.714844c2.816406 2.8125 6.628906 4.394531 10.609375 4.394531 3.976562 0 7.792969-1.582031 10.605469-4.394531l46.519531-46.523437h214.269531c57.898438 0 105-47.101563 105-105v-160.679688c0-57.898438-47.101562-105-105-105zm-261.242188 211.851562c0-8.285156 6.714844-15 15-15h190.484376c8.285156 0 15 6.714844 15 15 0 8.285157-6.714844 15-15 15h-190.484376c-8.285156 0-15-6.714843-15-15zm205.484376-38.023437h-190.484376c-8.285156 0-15-6.714844-15-15 0-8.28125 6.714844-15 15-15h190.484376c8.285156 0 15 6.71875 15 15 0 8.285156-6.714844 15-15 15zm0 0"/></svg>
\ No newline at end of file

public/images/microphone.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 450.56 450.56" style="enable-background:new 0 0 450.56 450.56;" xml:space="preserve" fill="#888">
+<g>
+	<g>
+		<g>
+			<path d="M225.322,332.758c46.342-0.023,83.903-37.585,83.926-83.926V83.456C308.966,37.282,271.455-0.001,225.28,0
+				c-46.175-0.001-83.686,37.282-83.968,83.456v165.376C141.335,295.206,178.947,332.781,225.322,332.758z"/>
+			<path d="M336.384,151.04v99.328c-0.01,61.361-49.761,111.096-111.122,111.086c-61.347-0.01-111.076-49.739-111.086-111.086
+				V151.04h-30.72v99.328c-0.138,72.4,54.465,133.193,126.464,140.8v28.672h-60.928v30.72h152.576v-30.72H240.64v-28.672
+				c71.999-7.607,126.602-68.4,126.464-140.8V151.04H336.384z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/images/microphoneActive.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 450.56 450.56" style="enable-background:new 0 0 450.56 450.56;" xml:space="preserve" fill="#fff">
+<g>
+	<g>
+		<g>
+			<path d="M225.322,332.758c46.342-0.023,83.903-37.585,83.926-83.926V83.456C308.966,37.282,271.455-0.001,225.28,0
+				c-46.175-0.001-83.686,37.282-83.968,83.456v165.376C141.335,295.206,178.947,332.781,225.322,332.758z"/>
+			<path d="M336.384,151.04v99.328c-0.01,61.361-49.761,111.096-111.122,111.086c-61.347-0.01-111.076-49.739-111.086-111.086
+				V151.04h-30.72v99.328c-0.138,72.4,54.465,133.193,126.464,140.8v28.672h-60.928v30.72h152.576v-30.72H240.64v-28.672
+				c71.999-7.607,126.602-68.4,126.464-140.8V151.04H336.384z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/images/settings.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" fill="#888">
+<g>
+	<g>
+		<path d="M490.667,405.333h-56.811C424.619,374.592,396.373,352,362.667,352s-61.931,22.592-71.189,53.333H21.333
+			C9.557,405.333,0,414.891,0,426.667S9.557,448,21.333,448h270.144c9.237,30.741,37.483,53.333,71.189,53.333
+			s61.931-22.592,71.189-53.333h56.811c11.797,0,21.333-9.557,21.333-21.333S502.464,405.333,490.667,405.333z M362.667,458.667
+			c-17.643,0-32-14.357-32-32s14.357-32,32-32s32,14.357,32,32S380.309,458.667,362.667,458.667z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M490.667,64h-56.811c-9.259-30.741-37.483-53.333-71.189-53.333S300.736,33.259,291.477,64H21.333
+			C9.557,64,0,73.557,0,85.333s9.557,21.333,21.333,21.333h270.144C300.736,137.408,328.96,160,362.667,160
+			s61.931-22.592,71.189-53.333h56.811c11.797,0,21.333-9.557,21.333-21.333S502.464,64,490.667,64z M362.667,117.333
+			c-17.643,0-32-14.357-32-32c0-17.643,14.357-32,32-32s32,14.357,32,32C394.667,102.976,380.309,117.333,362.667,117.333z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M490.667,234.667H220.523c-9.259-30.741-37.483-53.333-71.189-53.333s-61.931,22.592-71.189,53.333H21.333
+			C9.557,234.667,0,244.224,0,256c0,11.776,9.557,21.333,21.333,21.333h56.811c9.259,30.741,37.483,53.333,71.189,53.333
+			s61.931-22.592,71.189-53.333h270.144c11.797,0,21.333-9.557,21.333-21.333C512,244.224,502.464,234.667,490.667,234.667z
+			 M149.333,288c-17.643,0-32-14.357-32-32s14.357-32,32-32c17.643,0,32,14.357,32,32S166.976,288,149.333,288z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/images/settingsActive.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" fill="#fff">
+<g>
+	<g>
+		<path d="M490.667,405.333h-56.811C424.619,374.592,396.373,352,362.667,352s-61.931,22.592-71.189,53.333H21.333
+			C9.557,405.333,0,414.891,0,426.667S9.557,448,21.333,448h270.144c9.237,30.741,37.483,53.333,71.189,53.333
+			s61.931-22.592,71.189-53.333h56.811c11.797,0,21.333-9.557,21.333-21.333S502.464,405.333,490.667,405.333z M362.667,458.667
+			c-17.643,0-32-14.357-32-32s14.357-32,32-32s32,14.357,32,32S380.309,458.667,362.667,458.667z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M490.667,64h-56.811c-9.259-30.741-37.483-53.333-71.189-53.333S300.736,33.259,291.477,64H21.333
+			C9.557,64,0,73.557,0,85.333s9.557,21.333,21.333,21.333h270.144C300.736,137.408,328.96,160,362.667,160
+			s61.931-22.592,71.189-53.333h56.811c11.797,0,21.333-9.557,21.333-21.333S502.464,64,490.667,64z M362.667,117.333
+			c-17.643,0-32-14.357-32-32c0-17.643,14.357-32,32-32s32,14.357,32,32C394.667,102.976,380.309,117.333,362.667,117.333z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M490.667,234.667H220.523c-9.259-30.741-37.483-53.333-71.189-53.333s-61.931,22.592-71.189,53.333H21.333
+			C9.557,234.667,0,244.224,0,256c0,11.776,9.557,21.333,21.333,21.333h56.811c9.259,30.741,37.483,53.333,71.189,53.333
+			s61.931-22.592,71.189-53.333h270.144c11.797,0,21.333-9.557,21.333-21.333C512,244.224,502.464,234.667,490.667,234.667z
+			 M149.333,288c-17.643,0-32-14.357-32-32s14.357-32,32-32c17.643,0,32,14.357,32,32S166.976,288,149.333,288z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/images/streaming.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve" fill="#888">
+<g>
+	<g>
+		<g>
+			<path d="M213.333,106.667c-58.88,0-106.667,47.787-106.667,106.667S154.453,320,213.333,320S320,272.213,320,213.333
+				S272.213,106.667,213.333,106.667z"/>
+			<path d="M213.333,0C95.467,0,0,95.467,0,213.333s95.467,213.333,213.333,213.333S426.667,331.2,426.667,213.333
+				S331.2,0,213.333,0z M213.333,384c-94.293,0-170.667-76.373-170.667-170.667S119.04,42.667,213.333,42.667
+				S384,119.04,384,213.333S307.627,384,213.333,384z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/images/streamingActive.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve" fill="#FF6347">
+<g>
+	<g>
+		<g>
+			<path d="M213.333,106.667c-58.88,0-106.667,47.787-106.667,106.667S154.453,320,213.333,320S320,272.213,320,213.333
+				S272.213,106.667,213.333,106.667z"/>
+			<path d="M213.333,0C95.467,0,0,95.467,0,213.333s95.467,213.333,213.333,213.333S426.667,331.2,426.667,213.333
+				S331.2,0,213.333,0z M213.333,384c-94.293,0-170.667-76.373-170.667-170.667S119.04,42.667,213.333,42.667
+				S384,119.04,384,213.333S307.627,384,213.333,384z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/images/videoCamera.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 467.968 467.968" style="enable-background:new 0 0 467.968 467.968;" xml:space="preserve" fill="#888">
+<g>
+	<g>
+		<path d="M264.704,96.512H51.2c-28.16,0-51.2,23.04-51.2,51.2v172.544c0,28.16,23.04,51.2,51.2,51.2h213.504
+			c28.16,0,51.2-23.04,51.2-51.2V147.712C315.904,119.04,292.864,96.512,264.704,96.512z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M430.08,124.672c-3.072,0.512-6.144,2.048-8.704,3.584l-79.872,46.08V293.12l80.384,46.08
+			c14.848,8.704,33.28,3.584,41.984-11.264c2.56-4.608,4.096-9.728,4.096-15.36V154.368
+			C467.968,135.424,450.048,120.064,430.08,124.672z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/images/videoCameraActive.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 467.968 467.968" style="enable-background:new 0 0 467.968 467.968;" xml:space="preserve" fill="#fff">
+<g>
+	<g>
+		<path d="M264.704,96.512H51.2c-28.16,0-51.2,23.04-51.2,51.2v172.544c0,28.16,23.04,51.2,51.2,51.2h213.504
+			c28.16,0,51.2-23.04,51.2-51.2V147.712C315.904,119.04,292.864,96.512,264.704,96.512z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M430.08,124.672c-3.072,0.512-6.144,2.048-8.704,3.584l-79.872,46.08V293.12l80.384,46.08
+			c14.848,8.704,33.28,3.584,41.984-11.264c2.56-4.608,4.096-9.728,4.096-15.36V154.368
+			C467.968,135.424,450.048,120.064,430.08,124.672z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/vercel.svg

+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>
\ No newline at end of file

src/common/styles/baseStyle.ts

+// --- Breakpoints
+const maxMobile = 576; // (for phones)
+const minTablet = 576; // (for tablet)
+const minTabletLC = 769; // (landscape of tablet)
+const minDesktopSM = 992; // (for small Laptop)
+const minDesktopLG = 1201; // (for large laptop)
+const min4K = 1441; // (for 4k)
+
+export const breakpoints = {
+  maxMobile: `only screen and (max-width: ${maxMobile}px)`,
+  minTablet: `only screen and (min-width: ${minTablet}px)`,
+  minTabletLC: `only screen and (min-width: ${minTabletLC}px)`,
+  minDesktopSM: `only screen and (min-width: ${minDesktopSM}px)`,
+  minDesktopLG: `only screen and (min-width: ${minDesktopLG}px)`,
+  min4K: `only screen and (min-width: ${min4K}px)`,
+};
+
+export const clearfix = `
+    &:after,
+    &:before{
+        content: "";
+        display: table;
+    }
+    &:after {
+        clear: both;
+    }
+`;
+
+export const noSelect = `
+    -webkit-touch-callout: none;
+    user-select: none;
+`;
+
+export const noCallout = `
+  -webkit-touch-callout: none;
+`;
+
+export const noAction = `
+  touch-action: none;
+`;
+
+export const imgNoClick = `
+  position: relative;
+`;
+
+export const imgNoClickCover = `
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+`;
+
+export const focusRingIssue = `
+  outline: -webkit-focus-ring-color auto 5px;
+`;
+
+export const tapHighlightIssue = `
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+`;
+
+export const breakWords = `
+  word-wrap: break-word;
+`;
+
+export const wrapWords = `
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  hyphens: auto;
+`;

src/common/translations/english.tsx

+import { Ttranslations } from "../types/localize"
+
+export const en : Ttranslations = {
+    login: "help"
+}

src/common/translations/japanese.tsx

+import { Ttranslations } from "../types/localize"
+
+export const jp  : Ttranslations = {
+    login: "助けて"
+}

src/common/translations/sinhala.tsx

+import { Ttranslations } from "../types/localize"
+
+export const sin : Ttranslations = {
+    login: "උදව්"
+}

src/common/types/localize.ts

+export type Tlocale = 'en' | 'sin' | 'jp';
+export type Ttranslations = {
+    login : string
+};

src/common/utils/localize.tsx

+import { useRouter } from "next/router";
+import { Tlocale, Ttranslations } from "../types/localize";
+import { en } from "../translations/english"
+import { jp } from "../translations/japanese"
+import { sin } from "../translations/sinhala"
+
+
+export const selectedLocale = (): Ttranslations => {
+  const router = useRouter();
+  switch (router.locale) {
+    case "en":
+      return en;
+    case "jp":
+      return jp;
+    case "sin":
+      return sin;
+    default:
+      return en;
+  }
+};
+
+export const toggleLanguage = (locale: Tlocale) => {
+  const router = useRouter();
+  switch (locale) {
+    case "en":
+      router.push("/", "/", { locale: "en" });
+      break;
+    case "sin":
+      router.push("/", "/", { locale: "sin" });
+      break;
+    case "jp":
+      router.push("/", "/", { locale: "jp" });
+      break;
+    default:
+      break;
+  }
+};
+
+export {en as english, jp as japanese, sin as sinhala}

src/components/utilities.ts

+type TFingerJoints = {
+  thumb: number[];
+  indexFinger: number[];
+  middleFinger: number[];
+  ringFinger: number[];
+  pinky: number[];
+};
+
+// Points for finger
+const fingerJoints: TFingerJoints = {
+  thumb: [0, 1, 2, 3, 4],
+  indexFinger: [0, 5, 6, 7, 8],
+  middleFinger: [0, 9, 10, 11, 12],
+  ringFinger: [0, 13, 14, 15, 16],
+  pinky: [0, 17, 18, 19, 20],
+};
+
+// Infinity Gauntlet Style
+const style = {
+  0: { color: "yellow", size: 15 },
+  1: { color: "gold", size: 6 },
+  2: { color: "green", size: 10 },
+  3: { color: "gold", size: 6 },
+  4: { color: "gold", size: 6 },
+  5: { color: "purple", size: 10 },
+  6: { color: "gold", size: 6 },
+  7: { color: "gold", size: 6 },
+  8: { color: "gold", size: 6 },
+  9: { color: "blue", size: 10 },
+  10: { color: "gold", size: 6 },
+  11: { color: "gold", size: 6 },
+  12: { color: "gold", size: 6 },
+  13: { color: "red", size: 10 },
+  14: { color: "gold", size: 6 },
+  15: { color: "gold", size: 6 },
+  16: { color: "gold", size: 6 },
+  17: { color: "orange", size: 10 },
+  18: { color: "gold", size: 6 },
+  19: { color: "gold", size: 6 },
+  20: { color: "gold", size: 6 },
+};
+
+// Drawing function
+export const drawHand = (predictions: any, ctx: any) => {
+  // Check if we have predictions
+  if (predictions.length > 0) {
+    // Loop through each prediction
+    predictions.forEach((prediction: any) => {
+      // Grab landmarks
+      const landmarks = prediction.landmarks;
+
+      // Loop through fingers
+      for (let j = 0; j < Object.keys(fingerJoints).length; j++) {
+        let finger = Object.keys(fingerJoints)[j];
+        //  Loop through pairs of joints
+        for (let k = 0; k < fingerJoints[finger].length - 1; k++) {
+          // Get pairs of joints
+          const firstJointIndex = fingerJoints[finger][k];
+          const secondJointIndex = fingerJoints[finger][k + 1];
+
+          // Draw path
+          ctx.beginPath();
+          ctx.moveTo(
+            landmarks[firstJointIndex][0],
+            landmarks[firstJointIndex][1]
+          );
+          ctx.lineTo(
+            landmarks[secondJointIndex][0],
+            landmarks[secondJointIndex][1]
+          );
+          ctx.strokeStyle = "plum";
+          ctx.lineWidth = 4;
+          ctx.stroke();
+        }
+      }
+
+      // Loop through landmarks and draw em
+      for (let i = 0; i < landmarks.length; i++) {
+        // Get x point
+        const x = landmarks[i][0];
+        // Get y point
+        const y = landmarks[i][1];
+        // Start drawing
+        ctx.beginPath();
+        ctx.arc(x, y, style[i]["size"], 0, 3 * Math.PI);
+
+        // Set line color
+        ctx.fillStyle = style[i]["color"];
+        ctx.fill();
+      }
+    });
+  }
+};

src/pages/_app.tsx

+import "../styles/common/normalize.css";
+import "../styles/common/global.css";
+import { AppProps } from "next/app";
+import Head from "next/head";
+
+function MyApp({ Component, pageProps }: AppProps): React.ReactElement {
+  return (
+    <>
+      <Head>
+        <meta charSet="UTF-8" />
+        <title>{process.env.appName}</title>
+        <meta
+          name="viewport"
+          content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no, shrink-to-fit=no"
+        />
+        <meta name="author" content="Sachin Kodagoda" />
+        <meta name="keywords" content="Niro International" />
+        <meta
+          name="description"
+          content="Job vacancy and Srilankan products selling"
+        />
+        <meta name="theme-color" content="#000" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="#000" />
+        <link
+          rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Abel&display=swap"
+          rel="stylesheet"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Galada&display=swap"
+          rel="stylesheet"
+        />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap"
+          rel="stylesheet"
+        />
+        <link
+          href="https://fonts.googleapis.com/css?family=Arima+Madurai&display=swap"
+          rel="stylesheet"
+        />
+        <link
+          href="https://fonts.googleapis.com/css?family=Montserrat:600&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
+      <Component {...pageProps} />
+    </>
+  );
+}
+
+export default MyApp;

src/pages/_document.tsx

+// pages/_document.js
+import { ServerStyleSheet } from "styled-components";
+import Document, { DocumentContext } from "next/document";
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+}

src/pages/api/hello.js

+import * as tf from "@tensorflow/tfjs-node";
+
+export default async (req, res) => {
+  try {
+
+    res.status(200).json({
+      success: true,
+      type: "success",
+      message: "successfully added",
+    });
+  } catch (error) {
+    res.status(400).json({
+      success: false,
+      type: "error",
+      message: "internal error",
+    });
+  }
+};

src/pages/index.tsx

+import { useEffect, useRef, useState } from "react";
+import styled from "styled-components";
+import * as tf from "@tensorflow/tfjs";
+import * as handpose from "@tensorflow-models/handpose";
+import Webcam from "react-webcam";
+import { drawHand } from "../components/utilities";
+import "@tensorflow/tfjs-backend-webgl";
+
+const Body = (): JSX.Element => {
+  const [threeMenuOn, setThreeMenuOn] = useState(false);
+  const [settingsMenuOn, setSettingsMenuOn] = useState(false);
+  const webcamRef = useRef<Webcam | null>(null);
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  const [streaming, setStreaming] = useState(false);
+  const [videoOn, setVideoOn] = useState(false);
+  const [microphoneOn, setMicrophoneOn] = useState(false);
+
+  const [showLeftBar, setShowLeftBar] = useState(true);
+  const [showRightBar, setShowRightBar] = useState(true);
+
+  const threeMenuIcon = threeMenuOn ? "3dActive" : "3d";
+  const settingsMenuIcon = settingsMenuOn ? "settingsActive" : "settings";
+
+  const videoIcon = videoOn ? "videoCameraActive" : "videoCamera";
+  const streamingIcon = streaming ? "streamingActive" : "streaming";
+  const microphoneIcon = microphoneOn ? "microphoneActive" : "microphone";
+
+  const usersIcon = showLeftBar ? "groupActive" : "group";
+  const messageIcon = showRightBar ? "messageActive" : "message";
+
+  const messageArray = [
+    {
+      message: "Hi",
+      time: "",
+    },
+    {
+      message: "Test",
+      time: "",
+    },
+  ];
+
+  const runHandpose = async () => {
+    const net = await handpose.load();
+    console.log("Handpose model loaded.");
+    //  Loop and detect hands
+    setInterval(() => {
+      detect(net);
+    }, 10);
+  };
+
+  const detect = async (net: any) => {
+    const videoReference = webcamRef?.current?.video as HTMLVideoElement;
+    const canvasReference = canvasRef?.current as HTMLCanvasElement;
+    if (
+      typeof webcamRef.current !== "undefined" &&
+      webcamRef.current !== null &&
+      videoReference.readyState === 4 &&
+      net
+    ) {
+      //Get video properties
+      const videoWidth = videoReference.videoWidth;
+      const videoHeight = videoReference.videoHeight;
+      //Set video width
+      videoReference.width = videoWidth;
+      videoReference.height = videoHeight;
+      //Set canvas height
+      canvasReference.width = videoWidth;
+      canvasReference.height = videoHeight;
+      // Make Detections
+      const hand = await net.estimateHands(videoReference);
+      // Draw mesh
+      const ctx = canvasReference.getContext("2d");
+      drawHand(hand, ctx);
+    }
+  };
+
+  useEffect(() => {
+    runHandpose();
+  }, []);
+
+  return (
+    <Container showLeftBar={showLeftBar} streaming={streaming}>
+      <div className="videoContainer">
+        <div className="videoContainerInner">
+          {showLeftBar && (
+            <div className="videoMenuLeft">
+              <div className="videoItem">D.G.Kodagoda</div>
+              <div className="videoItem">Y.Abinaya</div>
+              <div className="videoItem">Y.R.Kodagoda</div>
+              <div className="videoItem">S.Kodagoda</div>
+              <div className="videoItem">I.Kumarasinghe</div>
+              <div className="videoItem">Thilina</div>
+              <div className="videoItem">User1</div>
+              <div className="videoItem">User2</div>
+              <div className="videoItem">User3</div>
+              <div className="videoItem">User4</div>
+              <div className="videoItem">User5</div>
+              <div className="videoItem">User6</div>
+            </div>
+          )}
+
+          <div className="videoMenuMiddle">
+            {videoOn ? (
+              <>
+                <Webcam ref={webcamRef} className="videoObject" />
+                <canvas ref={canvasRef} className="canvasObject" />
+              </>
+            ) : (
+              <div className="videoPlaceholder">
+                <div className="userName">Duminda Kodagoda</div>
+                <div className="userMessage">Your video is off!</div>
+              </div>
+            )}
+          </div>
+          {showRightBar && (
+            <div className="videoMenuRight">
+              <div className="chatItemCover">
+                {messageArray.map((item, index) => (
+                  <div className="chatItem" key={`chatItem-${index + 1}`}>
+                    {item.message}
+                  </div>
+                ))}
+              </div>
+              <div className="chatInput">
+                <input type="text" className="chatInputItem" />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="bottomBar">
+        <div className="left">
+          <span
+            className="hoverIconCover"
+            onMouseEnter={() => {
+              setThreeMenuOn(true);
+            }}
+            onMouseLeave={() => {
+              setThreeMenuOn(false);
+            }}
+          >
+            <img
+              src={`/images/${threeMenuIcon}.svg`}
+              alt=""
+              className="iconBottomBar"
+            />
+          </span>
+          <span className="hoverIconCover">
+            <img
+              src={`/images/${settingsMenuIcon}.svg`}
+              alt=""
+              className="iconBottomBar"
+              onMouseEnter={() => {
+                setSettingsMenuOn(true);
+              }}
+              onMouseLeave={() => {
+                setSettingsMenuOn(false);
+              }}
+            />
+          </span>
+        </div>
+        <div className="middle">
+          <img
+            src={`/images/${videoIcon}.svg`}
+            alt=""
+            className="iconBottomBar"
+            onClick={() => {
+              const tempState = videoOn;
+              setVideoOn(!tempState);
+            }}
+          />
+          <img
+            src={`/images/${streamingIcon}.svg`}
+            alt=""
+            className="iconBottomBar"
+            onClick={() => {
+              setStreaming(!streaming);
+            }}
+          />
+          <img
+            src={`/images/${microphoneIcon}.svg`}
+            alt=""
+            className="iconBottomBar"
+            onClick={() => {
+              setMicrophoneOn(!microphoneOn);
+            }}
+          />
+        </div>
+        <div className="right">
+          <img
+            src={`/images/${usersIcon}.svg`}
+            alt=""
+            className="iconBottomBar"
+            onClick={() => {
+              setShowLeftBar(!showLeftBar);
+            }}
+          />
+          <img
+            src={`/images/${messageIcon}.svg`}
+            alt=""
+            className="iconBottomBar"
+            onClick={() => {
+              setShowRightBar(!showRightBar);
+            }}
+          />
+        </div>
+      </div>
+    </Container>
+  );
+};
+const bottomBarHeight = 60;
+
+type TContainerProps = { showLeftBar: boolean; streaming: boolean };
+const Container = styled.div<TContainerProps>`
+  background: #000;
+  .videoContainer {
+    height: calc(100vh - ${bottomBarHeight}px);
+    padding: 20px;
+    .videoContainerInner {
+      width: 100%;
+      height: 100%;
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .videoMenuLeft {
+      flex-grow: 0;
+      flex-shrink: 0;
+      width: 200px;
+      height: 100%;
+      border-radius: 10px;
+      display: flex;
+      flex-direction: column;
+      overflow-y: scroll;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      & {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+      }
+      .videoItem {
+        flex-shrink: 0;
+        flex-grow: 0;
+        width: 100%;
+        height: 200px;
+        color: #fff;
+        background: #333;
+        border-radius: 10px;
+        margin-bottom: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 20px;
+        font-weight: 900;
+      }
+    }
+    .videoMenuMiddle {
+      flex-grow: 1;
+      height: 100%;
+      width: 100%;
+      margin: 0 20px;
+      ${({ showLeftBar }): string =>
+        showLeftBar ? `margin-left: 20px` : `margin-left: 0`};
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 10px;
+      position: relative;
+      .videoObject {
+        width: 100% !important;
+        height: auto !important;
+        transform: scaleX(-1);
+      }
+      .videoPlaceholder {
+        background: #444;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        color: #fff;
+        font-size: 3rem;
+      }
+
+      .canvasObject {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        transform: scaleX(-1);
+      }
+    }
+    .videoMenuRight {
+      flex-grow: 0;
+      flex-shrink: 0;
+      background: #333;
+      width: 300px;
+      height: 100%;
+      border-radius: 10px;
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
+      .chatItemCover {
+        flex-grow: 1;
+        font-size: 18px;
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+        flex-direction: column;
+        padding: 15px 15px 0px;
+        .chatItem {
+          display: inline-block;
+          margin-bottom: 15px;
+          border-radius: 10px 20px 20px 0px;
+          color: #fff;
+          background: #666;
+          padding: 0.5em 1em;
+          font-weight: 900;
+        }
+      }
+      .chatInput {
+        flex-grow: 0;
+        flex-shrink: 0;
+        border-top: 10px solid #000 !important;
+        .chatInputItem {
+          opacity: 1;
+          border: none;
+          outline: none;
+          width: 100%;
+          padding: 0.8em;
+          background: #444 !important;
+          background-image: none !important;
+          border-radius: 0 0 10px 10px;
+          font-size: 18px;
+          color: #fff;
+          font-weight: 900;
+        }
+      }
+    }
+  }
+  .bottomBar {
+    width: 100%;
+    height: ${bottomBarHeight}px;
+    background: #333;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 20px;
+    .iconBottomBar {
+      cursor: pointer;
+      height: 40px;
+      width: auto;
+      margin: 0 10px;
+    }
+    .left {
+      flex-grow: 1;
+      .hoverIconCover {
+        display: inline-block;
+        margin: 0 10px;
+      }
+      .iconBottomBar {
+        margin: 0;
+      }
+    }
+    .middle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #000;
+      padding: 10px 20px;
+      border-radius: 10px;
+      .iconBottomBar {
+        height: 30px;
+      }
+    }
+    .right {
+      flex-grow: 1;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+`;
+
+export default Body;

src/styles/common/global.css

+*,
+*::after,
+*::before {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  font-family: "Abel", sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  margin: 0;
+  padding: 0;
+  background-color: #000;
+  color: #000;
+  width: 100%;
+  height: 100%;
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+
+html {
+  overflow-x: hidden;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-size-adjust: 100%;
+  font-weight: 400;
+}
+
+h1 {
+  font-size: 36px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+h3 {
+  font-size: 24px;
+}
+
+h4 {
+  font-size: 20px;
+}
+
+h5 {
+  font-size: 18px;
+}
+
+h6 {
+  font-size: 16px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Segoe UI", Arial, sans-serif;
+  font-weight: 400;
+  margin: 10px 0;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid #eee;
+  margin: 20px 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
+
+em {
+  font-style: italic;
+}
+
+p {
+  margin: 0 0 20px 0;
+  font-weight: 400;
+  font-size: 15px;
+}
+
+i {
+  line-height: 0;
+  text-align: center;
+  vertical-align: middle;
+}
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #000;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  background-color: #000;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #ccc;
+  background-clip: content-box;
+}

src/styles/common/normalize.css

+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

tsconfig.json

+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "importHelpers": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "lib": ["dom", "es7"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "plugins": [
+      {
+        "name": "@typescript-eslint"
+      }
+    ],
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "target": "es5"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}