diff --git a/web-service/client/.gitignore b/web-service/client/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..927d17bb9c5b470bcd9d57344db0523d2adadbd9
--- /dev/null
+++ b/web-service/client/.gitignore
@@ -0,0 +1,18 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
diff --git a/web-service/client/package.json b/web-service/client/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..9205962d86c298203faeabcf806caf2c06aecc13
--- /dev/null
+++ b/web-service/client/package.json
@@ -0,0 +1,17 @@
+{
+ "name": "client",
+ "version": "0.1.0",
+ "private": true,
+ "dependencies": {
+ "react": "^16.9.0",
+ "react-dom": "^16.9.0",
+ "react-scripts": "0.9.5"
+ },
+ "devDependencies": {},
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
\ No newline at end of file
diff --git a/web-service/client/public/index.html b/web-service/client/public/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..aab5e3b00ce4f614e5cbc31db5c28c744a00399a
--- /dev/null
+++ b/web-service/client/public/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+ <!--
+ Notice the use of %PUBLIC_URL% in the tag above.
+ It will be replaced with the URL of the `public` folder during the build.
+ Only files inside the `public` folder can be referenced from the HTML.
+
+ Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+ work correctly both with client-side routing and a non-root public URL.
+ Learn how to configure a non-root public URL by running `npm run build`.
+ -->
+ <title>React App</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <!--
+ This HTML file is a template.
+ If you open it directly in the browser, you will see an empty page.
+
+ You can add webfonts, meta tags, or analytics to this file.
+ The build step will place the bundled scripts into the <body> tag.
+
+ To begin the development, run `npm start`.
+ To create a production bundle, use `npm run build`.
+ -->
+ </body>
+</html>
diff --git a/web-service/client/src/App.css b/web-service/client/src/App.css
new file mode 100644
index 0000000000000000000000000000000000000000..75bd321fd9bb3c192b1b6229bfc7ea58afacb6fc
--- /dev/null
+++ b/web-service/client/src/App.css
@@ -0,0 +1,40 @@
+b {
+ vertical-align: center;
+}
+a {
+ -webkit-tap-highlight-color: transparent;
+ text-decoration: none;
+ }
+
+ .button {
+ display: inline-block;
+ max-width: 300px;
+ margin-top: 50px;
+ border: 0;
+ padding: 0 18px;
+ text-align: left;
+ width: 100%;
+ height: 37px;
+ border-radius: 4px;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -moz-font-feature-settings: "liga" on;
+ color: rgba(0, 0, 0, 0.84) !important;
+ fill: rgba(0, 0, 0, 0.84) !important;
+ box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
+ font: inherit;
+ outline: none;
+ }
+
+ .button .svgIcon {
+ vertical-align: middle;
+ fill: rgba(0, 0, 0, 0.54);
+ padding-right: 4px;
+ height: 37px;
+ display: inline-block;
+ }
+
+.div {
+ vertical-align: center;
+ text-align: center
+}
\ No newline at end of file
diff --git a/web-service/client/src/App.js b/web-service/client/src/App.js
new file mode 100644
index 0000000000000000000000000000000000000000..e42e2b88f6de621eb59b5de4a546bdb53eae53ba
--- /dev/null
+++ b/web-service/client/src/App.js
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import './App.css'
+//import Streams from 'Streams'
+
+const App = () => {
+
+ const [user, setUser] = useState(null);
+ const [username, setUsername] = useState('');
+
+ const handleLogin = async (event) => {
+ /* User clicks on the image of either Haka login or Google Oauth
+ This will */
+ }
+
+ if(user === null){
+ return (
+ <div>
+ <h2>Welcome to Future Technology Lab</h2>
+ <h3>Please login!</h3>
+ <a href="/auth/google" class="button">
+ <div>
+ <span class="svgIcon t-popup-svg">
+ <svg
+ class="svgIcon-use"
+ width="25"
+ height="37"
+ viewBox="0 0 25 25"
+ >
+ <g fill="none" fill-rule="evenodd">
+ <path
+ d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z"
+ fill="#4285F4"
+ />
+ <path
+ d="M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z"
+ fill="#34A853"
+ />
+ <path
+ d="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z"
+ fill="#FBBC05"
+ />
+ <path
+ d="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z"
+ fill="#EA4335"
+ />
+ </g>
+ </svg>
+ </span>
+ <span class="button-label">Sign in with Google</span>
+ </div>
+ </a>
+ </div>
+
+ )
+ }else {
+ return
+ <div>
+ {/* <Streams /> */}
+ </div>
+ }
+}
+export default App;
\ No newline at end of file
diff --git a/web-service/client/src/Streams.js b/web-service/client/src/Streams.js
new file mode 100644
index 0000000000000000000000000000000000000000..a3b02ca4aa74bd28b9fc67dd2e1fe2f606d5b95d
--- /dev/null
+++ b/web-service/client/src/Streams.js
@@ -0,0 +1,7 @@
+
+
+/* This file will contain list of streams.
+The user is able to select which stream he/she will WebAuthentication.
+
+The user will be redirected to Stream.js file
+*/
\ No newline at end of file
diff --git a/web-service/client/src/index.js b/web-service/client/src/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..0ea36197ba1f815939c15fda13525bdae220f416
--- /dev/null
+++ b/web-service/client/src/index.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+ <App />,
+ document.getElementById('root')
+);