From 51ee033f7a59eb37e702b65fb4a18e74856a4b31 Mon Sep 17 00:00:00 2001
From: Jorge Polanco <jorge.polanco@dowjones.com>
Date: Fri, 19 Feb 2021 22:39:41 -0600
Subject: [PATCH 1/9] - Remove unnecessary code

---
 .prettierrc                                  |  2 +-
 src/components/Fortune/Fortune.component.jsx | 12 -----
 src/components/Fortune/Fortune.styles.css    |  5 ---
 src/components/Fortune/index.js              |  1 -
 src/components/Layout/Layout.component.jsx   |  9 ----
 src/components/Layout/Layout.styles.css      |  9 ----
 src/components/Layout/index.js               |  1 -
 src/components/Private/Private.component.jsx | 14 ------
 src/components/Private/index.js              |  1 -
 src/pages/Login/Login.page.jsx               | 39 ----------------
 src/pages/Login/Login.styles.css             | 47 --------------------
 src/pages/Login/index.js                     |  1 -
 src/pages/NotFound/NotFound.page.jsx         | 17 -------
 src/pages/NotFound/NotFound.styles.css       | 13 ------
 src/pages/NotFound/index.js                  |  1 -
 src/pages/Secret/Secret.page.jsx             | 24 ----------
 src/pages/Secret/index.js                    |  1 -
 src/providers/Auth/Auth.provider.jsx         | 44 ------------------
 src/providers/Auth/index.js                  |  1 -
 src/utils/constants.js                       |  3 --
 src/utils/fns.js                             |  5 ---
 src/utils/hooks/useFortune.js                | 31 -------------
 src/utils/storage.js                         | 17 -------
 23 files changed, 1 insertion(+), 297 deletions(-)
 delete mode 100644 src/components/Fortune/Fortune.component.jsx
 delete mode 100644 src/components/Fortune/Fortune.styles.css
 delete mode 100644 src/components/Fortune/index.js
 delete mode 100644 src/components/Layout/Layout.component.jsx
 delete mode 100644 src/components/Layout/Layout.styles.css
 delete mode 100644 src/components/Layout/index.js
 delete mode 100644 src/components/Private/Private.component.jsx
 delete mode 100644 src/components/Private/index.js
 delete mode 100644 src/pages/Login/Login.page.jsx
 delete mode 100644 src/pages/Login/Login.styles.css
 delete mode 100644 src/pages/Login/index.js
 delete mode 100644 src/pages/NotFound/NotFound.page.jsx
 delete mode 100644 src/pages/NotFound/NotFound.styles.css
 delete mode 100644 src/pages/NotFound/index.js
 delete mode 100644 src/pages/Secret/Secret.page.jsx
 delete mode 100644 src/pages/Secret/index.js
 delete mode 100644 src/providers/Auth/Auth.provider.jsx
 delete mode 100644 src/providers/Auth/index.js
 delete mode 100644 src/utils/constants.js
 delete mode 100644 src/utils/fns.js
 delete mode 100644 src/utils/hooks/useFortune.js
 delete mode 100644 src/utils/storage.js

diff --git a/.prettierrc b/.prettierrc
index 064b2ce08..3c9308fee 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,6 +1,6 @@
 {
   "trailingComma": "es5",
-  "tabWidth": 2,
+  "tabWidth": 4,
   "printWidth": 90,
   "semi": true,
   "singleQuote": true,
diff --git a/src/components/Fortune/Fortune.component.jsx b/src/components/Fortune/Fortune.component.jsx
deleted file mode 100644
index fdd00219c..000000000
--- a/src/components/Fortune/Fortune.component.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { useFortune } from '../../utils/hooks/useFortune';
-import './Fortune.styles.css';
-
-function Fortune() {
-  const { fortune } = useFortune();
-
-  return <span className="fortune">{fortune} </span>;
-}
-
-export default Fortune;
diff --git a/src/components/Fortune/Fortune.styles.css b/src/components/Fortune/Fortune.styles.css
deleted file mode 100644
index 360014874..000000000
--- a/src/components/Fortune/Fortune.styles.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.fortune {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-}
diff --git a/src/components/Fortune/index.js b/src/components/Fortune/index.js
deleted file mode 100644
index 3e887bf31..000000000
--- a/src/components/Fortune/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Fortune.component';
diff --git a/src/components/Layout/Layout.component.jsx b/src/components/Layout/Layout.component.jsx
deleted file mode 100644
index b82ea3517..000000000
--- a/src/components/Layout/Layout.component.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-import './Layout.styles.css';
-
-function Layout({ children }) {
-  return <main className="container">{children}</main>;
-}
-
-export default Layout;
diff --git a/src/components/Layout/Layout.styles.css b/src/components/Layout/Layout.styles.css
deleted file mode 100644
index e873b7c07..000000000
--- a/src/components/Layout/Layout.styles.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.container {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-top: -3rem;
-}
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
deleted file mode 100644
index 46c368b74..000000000
--- a/src/components/Layout/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Layout.component';
diff --git a/src/components/Private/Private.component.jsx b/src/components/Private/Private.component.jsx
deleted file mode 100644
index 4298a0cdf..000000000
--- a/src/components/Private/Private.component.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Route, Redirect } from 'react-router-dom';
-
-import { useAuth } from '../../providers/Auth';
-
-function Private({ children, ...rest }) {
-  const { authenticated } = useAuth();
-
-  return (
-    <Route {...rest} render={() => (authenticated ? children : <Redirect to="/" />)} />
-  );
-}
-
-export default Private;
diff --git a/src/components/Private/index.js b/src/components/Private/index.js
deleted file mode 100644
index 2252ad618..000000000
--- a/src/components/Private/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Private.component';
diff --git a/src/pages/Login/Login.page.jsx b/src/pages/Login/Login.page.jsx
deleted file mode 100644
index 89367f276..000000000
--- a/src/pages/Login/Login.page.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { useHistory } from 'react-router';
-
-import { useAuth } from '../../providers/Auth';
-import './Login.styles.css';
-
-function LoginPage() {
-  const { login } = useAuth();
-  const history = useHistory();
-
-  function authenticate(event) {
-    event.preventDefault();
-    login();
-    history.push('/secret');
-  }
-
-  return (
-    <section className="login">
-      <h1>Welcome back!</h1>
-      <form onSubmit={authenticate} className="login-form">
-        <div className="form-group">
-          <label htmlFor="username">
-            <strong>username </strong>
-            <input required type="text" id="username" />
-          </label>
-        </div>
-        <div className="form-group">
-          <label htmlFor="password">
-            <strong>password </strong>
-            <input required type="password" id="password" />
-          </label>
-        </div>
-        <button type="submit">login</button>
-      </form>
-    </section>
-  );
-}
-
-export default LoginPage;
diff --git a/src/pages/Login/Login.styles.css b/src/pages/Login/Login.styles.css
deleted file mode 100644
index d4cfdde73..000000000
--- a/src/pages/Login/Login.styles.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.login {
-  width: 300px;
-}
-
-.login h1 {
-  text-align: center;
-  letter-spacing: -1px;
-}
-
-.login-form {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.form-group {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1rem;
-}
-
-.form-group strong {
-  display: block;
-  font-weight: 700;
-  text-transform: capitalize;
-  margin-bottom: 0.4rem;
-}
-
-.form-group input {
-  color: white;
-  font-size: 1.2rem;
-  width: 100%;
-  padding: 0.4rem 0.6rem;
-  border-radius: 3px;
-  border: 1px solid white;
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-.login-form button[type='submit'] {
-  width: 5rem;
-  margin-top: 1rem;
-  padding: 0.4rem 0.6rem;
-  font-size: 1.2rem;
-  border: none;
-  border-radius: 3px;
-}
diff --git a/src/pages/Login/index.js b/src/pages/Login/index.js
deleted file mode 100644
index c9af65e37..000000000
--- a/src/pages/Login/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Login.page';
diff --git a/src/pages/NotFound/NotFound.page.jsx b/src/pages/NotFound/NotFound.page.jsx
deleted file mode 100644
index 8b05bbe62..000000000
--- a/src/pages/NotFound/NotFound.page.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-import './NotFound.styles.css';
-
-function NotFoundPage() {
-  return (
-    <section className="not-found">
-      <Link to="/" className="home-link">
-        home
-      </Link>
-      <img src="404.gif" alt="page not found" />
-    </section>
-  );
-}
-
-export default NotFoundPage;
diff --git a/src/pages/NotFound/NotFound.styles.css b/src/pages/NotFound/NotFound.styles.css
deleted file mode 100644
index 07437df2e..000000000
--- a/src/pages/NotFound/NotFound.styles.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.home-link {
-  font-size: 1rem;
-  text-decoration: none;
-  display: block;
-  text-align: right;
-  padding: 0.2rem 0.3rem;
-}
-
-.home-link::before {
-  content: '←';
-  padding-right: 0.2rem;
-  display: inline-block;
-}
diff --git a/src/pages/NotFound/index.js b/src/pages/NotFound/index.js
deleted file mode 100644
index 981f67f46..000000000
--- a/src/pages/NotFound/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './NotFound.page';
diff --git a/src/pages/Secret/Secret.page.jsx b/src/pages/Secret/Secret.page.jsx
deleted file mode 100644
index bb9df9b2d..000000000
--- a/src/pages/Secret/Secret.page.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-function SecretPage() {
-  return (
-    <section>
-      <pre>
-        welcome, voyager...
-        <Link to="/"> ← go back</Link>
-      </pre>
-      <iframe
-        width="800"
-        height="450"
-        allowFullScreen
-        frameBorder="0"
-        title="rick roll"
-        src="https://www.youtube.com/embed/dQw4w9WgXcQ?controls=0&autoplay=1"
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-      />
-    </section>
-  );
-}
-
-export default SecretPage;
diff --git a/src/pages/Secret/index.js b/src/pages/Secret/index.js
deleted file mode 100644
index 894d9a95f..000000000
--- a/src/pages/Secret/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Secret.page';
diff --git a/src/providers/Auth/Auth.provider.jsx b/src/providers/Auth/Auth.provider.jsx
deleted file mode 100644
index b47385253..000000000
--- a/src/providers/Auth/Auth.provider.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { useState, useEffect, useContext, useCallback } from 'react';
-
-import { AUTH_STORAGE_KEY } from '../../utils/constants';
-import { storage } from '../../utils/storage';
-
-const AuthContext = React.createContext(null);
-
-function useAuth() {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error(`Can't use "useAuth" without an AuthProvider!`);
-  }
-  return context;
-}
-
-function AuthProvider({ children }) {
-  const [authenticated, setAuthenticated] = useState(false);
-
-  useEffect(() => {
-    const lastAuthState = storage.get(AUTH_STORAGE_KEY);
-    const isAuthenticated = Boolean(lastAuthState);
-
-    setAuthenticated(isAuthenticated);
-  }, []);
-
-  const login = useCallback(() => {
-    setAuthenticated(true);
-    storage.set(AUTH_STORAGE_KEY, true);
-  }, []);
-
-  const logout = useCallback(() => {
-    setAuthenticated(false);
-    storage.set(AUTH_STORAGE_KEY, false);
-  }, []);
-
-  return (
-    <AuthContext.Provider value={{ login, logout, authenticated }}>
-      {children}
-    </AuthContext.Provider>
-  );
-}
-
-export { useAuth };
-export default AuthProvider;
diff --git a/src/providers/Auth/index.js b/src/providers/Auth/index.js
deleted file mode 100644
index 5dfdfd12d..000000000
--- a/src/providers/Auth/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default, useAuth } from './Auth.provider';
diff --git a/src/utils/constants.js b/src/utils/constants.js
deleted file mode 100644
index 361273c9c..000000000
--- a/src/utils/constants.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const AUTH_STORAGE_KEY = 'wa_cert_authenticated';
-
-export { AUTH_STORAGE_KEY };
diff --git a/src/utils/fns.js b/src/utils/fns.js
deleted file mode 100644
index 68e42f387..000000000
--- a/src/utils/fns.js
+++ /dev/null
@@ -1,5 +0,0 @@
-function random(limit) {
-  return Math.floor(Math.random() * limit);
-}
-
-export { random };
diff --git a/src/utils/hooks/useFortune.js b/src/utils/hooks/useFortune.js
deleted file mode 100644
index b6f572a07..000000000
--- a/src/utils/hooks/useFortune.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useState, useEffect } from 'react';
-
-import { random } from '../fns';
-
-const API_URL = 'http://fortunecookieapi.herokuapp.com/v1/fortunes?limit=10';
-
-function useFortune() {
-  const [fortune, setFortune] = useState(null);
-
-  useEffect(() => {
-    async function findMyFortune() {
-      try {
-        const response = await fetch(API_URL);
-        const fortuneCookies = await response.json();
-
-        const randomIndex = random(fortuneCookies.length);
-        const currentFortune = fortuneCookies[randomIndex];
-
-        setFortune(currentFortune.message);
-      } catch (error) {
-        console.error('Bad fortune: ', error);
-      }
-    }
-
-    findMyFortune();
-  }, []);
-
-  return { fortune };
-}
-
-export { useFortune };
diff --git a/src/utils/storage.js b/src/utils/storage.js
deleted file mode 100644
index c7981151b..000000000
--- a/src/utils/storage.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const storage = {
-  get(key) {
-    try {
-      const rawValue = window.localStorage.getItem(key);
-      return JSON.parse(rawValue);
-    } catch (error) {
-      console.error(`Error parsing storage item "${key}".`);
-      return null;
-    }
-  },
-
-  set(key, value) {
-    window.localStorage.setItem(key, JSON.stringify(value));
-  },
-};
-
-export { storage };

From 2d25e0f7b3070eb719f4fb49fb8d744e2fa01734 Mon Sep 17 00:00:00 2001
From: Jorge Polanco <jorge.polanco@dowjones.com>
Date: Fri, 19 Feb 2021 22:40:40 -0600
Subject: [PATCH 2/9] - sync changes

---
 src/components/App/App.component.jsx | 54 ++--------------------------
 src/index.js                         |  1 -
 src/pages/Home/Home.page.jsx         | 36 +++----------------
 3 files changed, 6 insertions(+), 85 deletions(-)

diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx
index e372d6849..5c27d875b 100644
--- a/src/components/App/App.component.jsx
+++ b/src/components/App/App.component.jsx
@@ -1,58 +1,8 @@
-import React, { useLayoutEffect } from 'react';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
-
-import AuthProvider from '../../providers/Auth';
+import React from 'react';
 import HomePage from '../../pages/Home';
-import LoginPage from '../../pages/Login';
-import NotFound from '../../pages/NotFound';
-import SecretPage from '../../pages/Secret';
-import Private from '../Private';
-import Fortune from '../Fortune';
-import Layout from '../Layout';
-import { random } from '../../utils/fns';
 
 function App() {
-  useLayoutEffect(() => {
-    const { body } = document;
-
-    function rotateBackground() {
-      const xPercent = random(100);
-      const yPercent = random(100);
-      body.style.setProperty('--bg-position', `${xPercent}% ${yPercent}%`);
-    }
-
-    const intervalId = setInterval(rotateBackground, 3000);
-    body.addEventListener('click', rotateBackground);
-
-    return () => {
-      clearInterval(intervalId);
-      body.removeEventListener('click', rotateBackground);
-    };
-  }, []);
-
-  return (
-    <BrowserRouter>
-      <AuthProvider>
-        <Layout>
-          <Switch>
-            <Route exact path="/">
-              <HomePage />
-            </Route>
-            <Route exact path="/login">
-              <LoginPage />
-            </Route>
-            <Private exact path="/secret">
-              <SecretPage />
-            </Private>
-            <Route path="*">
-              <NotFound />
-            </Route>
-          </Switch>
-          <Fortune />
-        </Layout>
-      </AuthProvider>
-    </BrowserRouter>
-  );
+    return <HomePage />;
 }
 
 export default App;
diff --git a/src/index.js b/src/index.js
index b93eaa337..1d527be7d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import App from './components/App';
-import './global.css';
 
 ReactDOM.render(
   <React.StrictMode>
diff --git a/src/pages/Home/Home.page.jsx b/src/pages/Home/Home.page.jsx
index 08d1dd5c0..1dde55725 100644
--- a/src/pages/Home/Home.page.jsx
+++ b/src/pages/Home/Home.page.jsx
@@ -1,38 +1,10 @@
-import React, { useRef } from 'react';
-import { Link, useHistory } from 'react-router-dom';
-
-import { useAuth } from '../../providers/Auth';
-import './Home.styles.css';
+import React from 'react';
 
 function HomePage() {
-  const history = useHistory();
-  const sectionRef = useRef(null);
-  const { authenticated, logout } = useAuth();
-
-  function deAuthenticate(event) {
-    event.preventDefault();
-    logout();
-    history.push('/');
-  }
-
   return (
-    <section className="homepage" ref={sectionRef}>
-      <h1>Hello stranger!</h1>
-      {authenticated ? (
-        <>
-          <h2>Good to have you back</h2>
-          <span>
-            <Link to="/" onClick={deAuthenticate}>
-              ← logout
-            </Link>
-            <span className="separator" />
-            <Link to="/secret">show me something cool →</Link>
-          </span>
-        </>
-      ) : (
-        <Link to="/login">let me in →</Link>
-      )}
-    </section>
+    <div>
+      <h1>empty boiler plate!</h1>
+    </div>
   );
 }
 

From 1587d0daf4730f3ed1edcded42d8b8d37a932658 Mon Sep 17 00:00:00 2001
From: Jorge Polanco <jorge.polanco@dowjones.com>
Date: Fri, 19 Feb 2021 23:02:45 -0600
Subject: [PATCH 3/9] - add generic components - Button - emoji :D - add
 GlobalStyle to change from a button action - add mock data

---
 package.json                         |   3 +-
 src/components/App/App.component.jsx |  35 +-
 src/components/Button/Button.jsx     |  11 +
 src/components/Button/index.js       |   1 +
 src/components/Emoji/Emoji.jsx       |  14 +
 src/components/Emoji/index.js        |   1 +
 src/data/mockItems.json              | 856 +++++++++++++++++++++++++++
 src/pages/Card/Card.page.jsx         |  30 +
 src/pages/Card/index.js              |   1 +
 src/pages/Header/Header.page.jsx     |  33 ++
 src/pages/Header/index.js            |   1 +
 src/pages/Home/Home.page.jsx         |  25 +-
 12 files changed, 1003 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Button/Button.jsx
 create mode 100644 src/components/Button/index.js
 create mode 100644 src/components/Emoji/Emoji.jsx
 create mode 100644 src/components/Emoji/index.js
 create mode 100644 src/data/mockItems.json
 create mode 100644 src/pages/Card/Card.page.jsx
 create mode 100644 src/pages/Card/index.js
 create mode 100644 src/pages/Header/Header.page.jsx
 create mode 100644 src/pages/Header/index.js

diff --git a/package.json b/package.json
index 5bc0e0d0d..2d91b3558 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
     "react-dom": "^16.13.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "styled-components": "^5.2.1"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx
index 5c27d875b..d9869d29c 100644
--- a/src/components/App/App.component.jsx
+++ b/src/components/App/App.component.jsx
@@ -1,8 +1,39 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { ThemeProvider, createGlobalStyle } from 'styled-components';
 import HomePage from '../../pages/Home';
+import Button from '../Button';
+
+const lightTheme = {
+    bg: '#fff',
+    text: '#121212',
+};
+
+const darkTheme = {
+    bg: '#121212',
+    text: '#fff',
+};
+
+const GlobalStyles = createGlobalStyle`body{
+  color: ${(props) => props.theme.text};
+  background-color: ${(props) => props.theme.bg};
+  transition: 0.5s;
+}`;
 
 function App() {
-    return <HomePage />;
+    const [mode, setMode] = useState('light');
+
+    return (
+        <ThemeProvider theme={mode === 'light' ? lightTheme : darkTheme}>
+            <GlobalStyles />
+            <Button
+                size="10px"
+                onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
+            >
+                Change Theme
+            </Button>
+            <HomePage />
+        </ThemeProvider>
+    );
 }
 
 export default App;
diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx
new file mode 100644
index 000000000..97604214f
--- /dev/null
+++ b/src/components/Button/Button.jsx
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const Button = styled.button`
+    background: transparent;
+    border: none;
+    font-size: ${(props) => props.size};
+    cursor: pointer;
+    color: #919191;
+`;
+
+export default Button;
diff --git a/src/components/Button/index.js b/src/components/Button/index.js
new file mode 100644
index 000000000..efe8c800c
--- /dev/null
+++ b/src/components/Button/index.js
@@ -0,0 +1 @@
+export { default } from './Button';
diff --git a/src/components/Emoji/Emoji.jsx b/src/components/Emoji/Emoji.jsx
new file mode 100644
index 000000000..6737b0288
--- /dev/null
+++ b/src/components/Emoji/Emoji.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Emoji = (props) => (
+    <span
+        className="emoji"
+        role="img"
+        aria-label={props.label ? props.label : ''}
+        aria-hidden={props.label ? 'false' : 'true'}
+    >
+        {props.symbol}
+    </span>
+);
+
+export default Emoji;
diff --git a/src/components/Emoji/index.js b/src/components/Emoji/index.js
new file mode 100644
index 000000000..0c0bd1032
--- /dev/null
+++ b/src/components/Emoji/index.js
@@ -0,0 +1 @@
+export { default } from './Emoji';
diff --git a/src/data/mockItems.json b/src/data/mockItems.json
new file mode 100644
index 000000000..37ee8b4bc
--- /dev/null
+++ b/src/data/mockItems.json
@@ -0,0 +1,856 @@
+{
+  "kind": "youtube#searchListResponse",
+  "etag": "LRviZfd_p3HDDD2uBk5Qv7zaEQU",
+  "nextPageToken": "CBkQAA",
+  "regionCode": "MX",
+  "pageInfo": {
+    "totalResults": 2323,
+    "resultsPerPage": 25
+  },
+  "items": [
+    {
+      "kind": "youtube#searchResult",
+      "etag": "_PVKwNJf_qw9nukFeRFOtQ837o0",
+      "id": {
+        "kind": "youtube#channel",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg"
+      },
+      "snippet": {
+        "publishedAt": "2014-09-27T01:39:18Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "Wizeline",
+        "description": "Wizeline transforms how teams build technology. Its customers accelerate the delivery of innovative products with proven solutions, which combine Wizeline's ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://yt3.ggpht.com/ytc/AAUvwnighSReQlmHl_S_vSfvnWBAG5Cw4A0YxtE0tm5OpQ=s88-c-k-c0xffffffff-no-rj-mo"
+          },
+          "medium": {
+            "url": "https://yt3.ggpht.com/ytc/AAUvwnighSReQlmHl_S_vSfvnWBAG5Cw4A0YxtE0tm5OpQ=s240-c-k-c0xffffffff-no-rj-mo"
+          },
+          "high": {
+            "url": "https://yt3.ggpht.com/ytc/AAUvwnighSReQlmHl_S_vSfvnWBAG5Cw4A0YxtE0tm5OpQ=s800-c-k-c0xffffffff-no-rj-mo"
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "upcoming",
+        "publishTime": "2014-09-27T01:39:18Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "erqeM78PZDWIBe8qOGHGM2WdSE8",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "nmXMgqjQzls"
+      },
+      "snippet": {
+        "publishedAt": "2019-09-30T23:54:32Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "Video Tour | Welcome to Wizeline Guadalajara",
+        "description": "Follow Hector Padilla, Wizeline Director of Engineering, for a lively tour of our office. In 2018, Wizeline opened its stunning new office in Guadalajara, Jalisco, ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/nmXMgqjQzls/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/nmXMgqjQzls/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/nmXMgqjQzls/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2019-09-30T23:54:32Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "7VY0u60YdqamyHOCAufd7r6qTsQ",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "HYyRZiwBWc8"
+      },
+      "snippet": {
+        "publishedAt": "2019-04-18T18:48:04Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "Wizeline Guadalajara | Bringing Silicon Valley to Mexico",
+        "description": "Wizeline continues to offer a Silicon Valley culture in burgeoning innovation hubs like Mexico and Vietnam. In 2018, our Guadalajara team moved into a ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/HYyRZiwBWc8/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/HYyRZiwBWc8/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/HYyRZiwBWc8/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2019-04-18T18:48:04Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "by0t_nrT2TB-IQkQpgSWUVUwpKI",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "Po3VwR_NNGk"
+      },
+      "snippet": {
+        "publishedAt": "2019-03-05T03:52:55Z",
+        "channelId": "UCXmAOGwFYxIq5qrScJeeV4g",
+        "title": "Wizeline hace sentir a empleados como en casa",
+        "description": "En el 2014, Bismarck fundó Wizeline, compañía tecnológica que trabaja con los corporativos ofreciendo una plataforma para que desarrollen software de forma ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/Po3VwR_NNGk/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/Po3VwR_NNGk/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/Po3VwR_NNGk/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "El Economista TV",
+        "liveBroadcastContent": "none",
+        "publishTime": "2019-03-05T03:52:55Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "9-Ag8hUNYBLTjuli6eECa5GXV1Y",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "7PtYNO6g7eI"
+      },
+      "snippet": {
+        "publishedAt": "2019-04-12T20:00:45Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "We Are Wizeline",
+        "description": "Engineering a better tomorrow. Wizeline is a global software development company that helps its clients solve their biggest challenges with design and ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/7PtYNO6g7eI/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/7PtYNO6g7eI/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/7PtYNO6g7eI/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2019-04-12T20:00:45Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "pVQGVs72zHvpgl0ewNKX2DTOH6w",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "YuW0CE_8i1I"
+      },
+      "snippet": {
+        "publishedAt": "2018-12-13T21:51:39Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "Wizeline Thrives in Mexico City",
+        "description": "Our vibrant Mexico City office is home to agile software engineers, talented UX designers, and brilliant data scientists. Learn about the rich history of Mexico City.",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/YuW0CE_8i1I/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/YuW0CE_8i1I/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/YuW0CE_8i1I/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2018-12-13T21:51:39Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "HlSqzTYW4HGFDNAOPCs6nIRXdq8",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "CHzlSGRvWPs"
+      },
+      "snippet": {
+        "publishedAt": "2017-03-08T22:41:43Z",
+        "channelId": "UCUsm-fannqOY02PNN67C0KA",
+        "title": "Wizeline",
+        "description": "El plan de Wizeline, una empresa de inteligencia artificial, para ayudar a crecer la comunidad de ciencia de datos en CDMX y todo el país, a través de cursos ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/CHzlSGRvWPs/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/CHzlSGRvWPs/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/CHzlSGRvWPs/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Noticieros Televisa",
+        "liveBroadcastContent": "none",
+        "publishTime": "2017-03-08T22:41:43Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "S1Ewc2IMjGC1VE5mH3AryZ43IPQ",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "cjO2fJy8asM"
+      },
+      "snippet": {
+        "publishedAt": "2018-09-25T17:45:19Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "A Day in the Life of an Engineering Manager at Wizeline",
+        "description": "Fernando Espinoza shares his experience working as an engineering manager at Wizeline and mentoring other engineers. Learn about Fernando's passions ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/cjO2fJy8asM/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/cjO2fJy8asM/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/cjO2fJy8asM/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2018-09-25T17:45:19Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "jZZv6Ufu43kg1KzFlBOWDVKfPkY",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "zClI9OjgKXM"
+      },
+      "snippet": {
+        "publishedAt": "2020-04-24T20:22:17Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "Wizeline Technical Writing Academy | Featuring Eduardo Ocejo",
+        "description": "",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/zClI9OjgKXM/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/zClI9OjgKXM/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/zClI9OjgKXM/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2020-04-24T20:22:17Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "z5o2tIUROuWNZU5-1pzMPjoqQC8",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "8bz9R61oY5o"
+      },
+      "snippet": {
+        "publishedAt": "2019-09-26T15:28:46Z",
+        "channelId": "UCUP6qv-_EIL0hwTsJaKYnvw",
+        "title": "Silicon Valley en México",
+        "description": "Empresas de Silicon Valley buscan establecerse en México por el gran talento que hay en nuestro país. Es una investigación de Roberto Domínguez.",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/8bz9R61oY5o/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/8bz9R61oY5o/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/8bz9R61oY5o/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Azteca Noticias",
+        "liveBroadcastContent": "none",
+        "publishTime": "2019-09-26T15:28:46Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "Q4bqsw7kAYe6PV1sh494TQ-UJ8c",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "7dJFraOqcoQ"
+      },
+      "snippet": {
+        "publishedAt": "2019-07-02T17:40:20Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "Why Wizeline? featuring Juan Pablo Villa in Mexico City",
+        "description": "Juan Pablo, known as Gianpa at Wizeline, is a software engineer in our Mexico City office. Gianpa focuses on Android apps, is an integral part of our culture, ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/7dJFraOqcoQ/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/7dJFraOqcoQ/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/7dJFraOqcoQ/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2019-07-02T17:40:20Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "cXSMV8jX2lv1ue3UUnbW3xCmIU4",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "w-Qwc_XJrWc"
+      },
+      "snippet": {
+        "publishedAt": "2020-12-31T16:26:44Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "Wizeline&#39;s 2020 Year in Review",
+        "description": "There's no doubt that 2020 has been an unprecedented year. However, amidst all the chaos, we achieved remarkable growth in various areas of our business.",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/w-Qwc_XJrWc/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/w-Qwc_XJrWc/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/w-Qwc_XJrWc/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2020-12-31T16:26:44Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "j9q9-dcRhTRDr0MCkJUMKdYt7u8",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "rjir_cHTl5w"
+      },
+      "snippet": {
+        "publishedAt": "2019-04-29T20:37:26Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "Why Wizeline? featuring Hugo Lopez in Mexico City",
+        "description": "",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/rjir_cHTl5w/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/rjir_cHTl5w/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/rjir_cHTl5w/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2019-04-29T20:37:26Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "MYfT5K8aZNvalrm2RR_HtylFffc",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "DcFK1x3NHGY"
+      },
+      "snippet": {
+        "publishedAt": "2016-09-01T18:02:11Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "Why Wizeline? (We&#39;re Hiring in Mexico!)",
+        "description": "A quick look at why people join Wizeline, what motivates us as a team and what it's like to work in our Guadalajara office. Learn more and apply here: ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/DcFK1x3NHGY/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/DcFK1x3NHGY/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/DcFK1x3NHGY/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2016-09-01T18:02:11Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "8dssV5QkZWEMmoo4DIq0k27aoIg",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "3BzYWAqZgFw"
+      },
+      "snippet": {
+        "publishedAt": "2019-07-02T17:45:28Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "Why Wizeline? featuring Oswaldo Herrera in Mexico City",
+        "description": "Oswaldo is a software engineering in Wizeline's Mexico City office. He joined Wizeline because of the camaraderie and deep sense of commitment of our teams.",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/3BzYWAqZgFw/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/3BzYWAqZgFw/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/3BzYWAqZgFw/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2019-07-02T17:45:28Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "FMbfPlflDyPx4UgcA42igb97xlk",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "3KVFmT-Tp2w"
+      },
+      "snippet": {
+        "publishedAt": "2019-02-11T17:55:19Z",
+        "channelId": "UCd6MoB9NC6uYN2grvUNT-Zg",
+        "title": "Caso de Éxito AWS: Wizeline [Spanish]",
+        "description": "Central de socios de APN - https://amzn.to/2S7tIXM Fundada en 2014, Wizeline es una compañía joven e innovadora que nació en la nube para ofrecer soporte ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/3KVFmT-Tp2w/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/3KVFmT-Tp2w/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/3KVFmT-Tp2w/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Amazon Web Services",
+        "liveBroadcastContent": "none",
+        "publishTime": "2019-02-11T17:55:19Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "0ww3Jk-j4d4TMsFNL213EhE0gGg",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "aKuPmY2m1Ro"
+      },
+      "snippet": {
+        "publishedAt": "2019-12-27T20:47:29Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "Wizeline&#39;s 2019 Year in Review",
+        "description": "",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/aKuPmY2m1Ro/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/aKuPmY2m1Ro/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/aKuPmY2m1Ro/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2019-12-27T20:47:29Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "8q-ajUMnXZm4gQzfSIiyrG2tA7A",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "24sTHUyWhRM"
+      },
+      "snippet": {
+        "publishedAt": "2016-10-05T00:03:32Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "[1 of 2] Wizeline CEO shares career lessons from Google",
+        "description": "Founder & CEO Bismarck Lepe on growth opportunities at Wizeline and his career-path experience as an early Google employee. Join our team!",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/24sTHUyWhRM/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/24sTHUyWhRM/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/24sTHUyWhRM/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2016-10-05T00:03:32Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "4QA9Eisz9-HncD9EENUm0LV7hXI",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "IxGc1gSqB3A"
+      },
+      "snippet": {
+        "publishedAt": "2021-02-04T17:45:11Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "Wizeline Data Engineering featuring Tania Reyes",
+        "description": "Tania discovered her interest in Big Data while working at Wizeline and took Wizeline Academy courses to skill up and join the data team. Now, she works on ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/IxGc1gSqB3A/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/IxGc1gSqB3A/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/IxGc1gSqB3A/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2021-02-04T17:45:11Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "5_OftJlDpcfykudIpO7nn92Pq6s",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "NP1gAnbeNno"
+      },
+      "snippet": {
+        "publishedAt": "2019-11-12T20:45:18Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "Wizeline Querétaro | Mexico&#39;s New Knowledge Economy (We&#39;re hiring!)",
+        "description": "A small but mighty (and growing) team, the Queretaro crew has taken ownership of growing the office and brand, speaking at university events, hosting tech ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/NP1gAnbeNno/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/NP1gAnbeNno/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/NP1gAnbeNno/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2019-11-12T20:45:18Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "0XmhUGwmJNRilJR1S6VgOmdO9ho",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "F6Krwu6lUc8"
+      },
+      "snippet": {
+        "publishedAt": "2020-10-23T04:15:31Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "Miriam Godinez | Women in Leadership at Wizeline",
+        "description": "Science and technology always caught Miriam's attention. One of her ultimate goals as a Senior Engineer Manager and Lead from the Mobile Team at Wizeline ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/F6Krwu6lUc8/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/F6Krwu6lUc8/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/F6Krwu6lUc8/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2020-10-23T04:15:31Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "mM9qAwvNhFKGUv6mCIamuWVo0NE",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "RFq7gfvhtCk"
+      },
+      "snippet": {
+        "publishedAt": "2020-05-23T00:11:23Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "Welcome Back to Wizeline Vietnam | Extended Version",
+        "description": "Thanks to swift government action, the COVID-19 situation in Vietnam has reached a point where businesses are able to return to work and reopen offices.",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/RFq7gfvhtCk/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/RFq7gfvhtCk/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/RFq7gfvhtCk/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2020-05-23T00:11:23Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "sVz5aNJZHehOf7qJCTLOLh1V40M",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "E1Vq_A3WKK8"
+      },
+      "snippet": {
+        "publishedAt": "2017-12-09T18:46:07Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "How does Wizeline work?",
+        "description": "Wizeline builds teams with a mix of technical and non-technical talent to deliver better products, faster. Learn more about our consulting services: ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/E1Vq_A3WKK8/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/E1Vq_A3WKK8/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/E1Vq_A3WKK8/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2017-12-09T18:46:07Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "kiG9Z-CXE-mbZVBeom4qLurWb4w",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "ZmkslANDz0Q"
+      },
+      "snippet": {
+        "publishedAt": "2019-12-18T19:22:44Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "12 Wishes from Wizeline | Happy Holidays 2019",
+        "description": "",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/ZmkslANDz0Q/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/ZmkslANDz0Q/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/ZmkslANDz0Q/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2019-12-18T19:22:44Z"
+      }
+    },
+    {
+      "kind": "youtube#searchResult",
+      "etag": "bzZZYb96wT_IQHNp5sXm3VDUbXA",
+      "id": {
+        "kind": "youtube#video",
+        "videoId": "Nss3EmTDD3s"
+      },
+      "snippet": {
+        "publishedAt": "2017-12-08T18:13:27Z",
+        "channelId": "UCPGzT4wecuWM0BH9mPiulXg",
+        "title": "Why Wizeline?",
+        "description": "Hear from our employees directly about what excites them about their roles here at Wizeline. Wizeline wants to hire the best and the brightest to accelerate their ...",
+        "thumbnails": {
+          "default": {
+            "url": "https://i.ytimg.com/vi/Nss3EmTDD3s/default.jpg",
+            "width": 120,
+            "height": 90
+          },
+          "medium": {
+            "url": "https://i.ytimg.com/vi/Nss3EmTDD3s/mqdefault.jpg",
+            "width": 320,
+            "height": 180
+          },
+          "high": {
+            "url": "https://i.ytimg.com/vi/Nss3EmTDD3s/hqdefault.jpg",
+            "width": 480,
+            "height": 360
+          }
+        },
+        "channelTitle": "Wizeline",
+        "liveBroadcastContent": "none",
+        "publishTime": "2017-12-08T18:13:27Z"
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/pages/Card/Card.page.jsx b/src/pages/Card/Card.page.jsx
new file mode 100644
index 000000000..0b6a8b4bd
--- /dev/null
+++ b/src/pages/Card/Card.page.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+    width: 22%;
+    border-style: solid;
+    margin: 1em;
+    border-radius: 1em;
+    display: flex;
+    justify-content: space-between;
+    float: left;
+    background-color: #d47b7b;
+    word-wrap: break-word;
+`;
+
+function Card({ title, description, image, width, height }) {
+    return (
+        <div>
+            <Container>
+                <center>
+                    <h2> {title} </h2>
+                    <img src={image} alt={title} width={width} height={height} />
+                    <p> {description}</p>
+                </center>
+            </Container>
+        </div>
+    );
+}
+
+export default Card;
diff --git a/src/pages/Card/index.js b/src/pages/Card/index.js
new file mode 100644
index 000000000..c8d7e8d38
--- /dev/null
+++ b/src/pages/Card/index.js
@@ -0,0 +1 @@
+export { default } from './Header.page';
diff --git a/src/pages/Header/Header.page.jsx b/src/pages/Header/Header.page.jsx
new file mode 100644
index 000000000..ee6e86036
--- /dev/null
+++ b/src/pages/Header/Header.page.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+import Emoji from '../../components/Emoji';
+import Button from '../../components/Button';
+
+const CurrentDiv = styled.div`
+    width: 100%;
+    height: 10%;
+    min-height: 6vh;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    border-radius: 1em;
+    border-style: solid 5px;
+    background-color: #2183d3;
+`;
+
+function HeaderSection() {
+    return (
+        <CurrentDiv>
+            <Button size="2em">
+                <Emoji symbol="☰" />
+            </Button>
+
+            <Button size="1em">
+                <input type="search" id="site-search" />
+                <Emoji symbol="🔍" />
+            </Button>
+        </CurrentDiv>
+    );
+}
+
+export default HeaderSection;
diff --git a/src/pages/Header/index.js b/src/pages/Header/index.js
new file mode 100644
index 000000000..c8d7e8d38
--- /dev/null
+++ b/src/pages/Header/index.js
@@ -0,0 +1 @@
+export { default } from './Header.page';
diff --git a/src/pages/Home/Home.page.jsx b/src/pages/Home/Home.page.jsx
index 1dde55725..220558e53 100644
--- a/src/pages/Home/Home.page.jsx
+++ b/src/pages/Home/Home.page.jsx
@@ -1,11 +1,26 @@
 import React from 'react';
+import HeaderSection from '../Header/Header.page';
+import Card from '../Card/Card.page';
+import mockedData from '../../data/mockItems.json';
 
 function HomePage() {
-  return (
-    <div>
-      <h1>empty boiler plate!</h1>
-    </div>
-  );
+
+    console.table(mockedData.items);
+
+    return (
+        <div>
+            <HeaderSection />
+            {mockedData.items.map((item) => (
+                <Card
+                    title={item.snippet.title}
+                    description={item.snippet.description}
+                    image={item.snippet.thumbnails.default.url}
+                    width={item.snippet.thumbnails.default?.width ?? 120}
+                    height={item.snippet.thumbnails.default?.height ?? 90}
+                />
+            ))}
+        </div>
+    );
 }
 
 export default HomePage;

From 443412c51fd91799d52156558551edb0c2f4bdd2 Mon Sep 17 00:00:00 2001
From: Jorge Polanco <jorge.polanco@dowjones.com>
Date: Sat, 20 Feb 2021 08:12:58 -0600
Subject: [PATCH 4/9] - add unit testing to the components - delete missing css
 file - fix index exporting name

---
 src/components/App/App.component.jsx      |  4 +-
 src/components/App/App.component.test.jsx | 15 ++++
 src/components/Emoji/Emoji.test.jsx       | 14 ++++
 src/pages/Card/Card.page.test.jsx         | 83 +++++++++++++++++++++++
 src/pages/Card/index.js                   |  2 +-
 src/pages/Header/Header.page.jsx          |  2 +-
 src/pages/Header/Header.page.test.jsx     | 20 ++++++
 src/pages/Home/Home.page.jsx              |  4 +-
 src/pages/Home/Home.page.test.jsx         | 53 +++++++++++++++
 src/pages/Home/Home.styles.css            |  8 ---
 10 files changed, 191 insertions(+), 14 deletions(-)
 create mode 100644 src/components/App/App.component.test.jsx
 create mode 100644 src/components/Emoji/Emoji.test.jsx
 create mode 100644 src/pages/Card/Card.page.test.jsx
 create mode 100644 src/pages/Header/Header.page.test.jsx
 create mode 100644 src/pages/Home/Home.page.test.jsx
 delete mode 100644 src/pages/Home/Home.styles.css

diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx
index d9869d29c..1739c0058 100644
--- a/src/components/App/App.component.jsx
+++ b/src/components/App/App.component.jsx
@@ -31,7 +31,9 @@ function App() {
             >
                 Change Theme
             </Button>
-            <HomePage />
+            <div id="home-section">
+                <HomePage />
+            </div>
         </ThemeProvider>
     );
 }
diff --git a/src/components/App/App.component.test.jsx b/src/components/App/App.component.test.jsx
new file mode 100644
index 000000000..c4fc3d59e
--- /dev/null
+++ b/src/components/App/App.component.test.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen, queryByAttribute } from '@testing-library/react';
+import App from '.';
+
+describe('App Component tests', () => {
+    it('App Contains change theme defined', () => {
+        render(<App />);
+        expect(screen.getByText('Change Theme')).toBeDefined();
+    });
+    it('App Contains home section defined', () => {
+        const getById = queryByAttribute.bind(null, 'id');
+        const dom = render(<App />);
+        expect(getById(dom.container, 'home-section')).toBeDefined();
+    });
+});
diff --git a/src/components/Emoji/Emoji.test.jsx b/src/components/Emoji/Emoji.test.jsx
new file mode 100644
index 000000000..02fee2554
--- /dev/null
+++ b/src/components/Emoji/Emoji.test.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Emoji from '.';
+
+describe('Emoji Component tests', () => {
+    it('Emoji span Contains the right emoji', () => {
+        render(<Emoji symbol="👍" />);
+        expect(screen.getByText('👍')).toBeDefined();
+    });
+    it('Emoji span shoul be span', () => {
+        render(<Emoji symbol="👍" />);
+        expect(screen.getByText('👍').tagName).toBe('SPAN');
+    });
+});
diff --git a/src/pages/Card/Card.page.test.jsx b/src/pages/Card/Card.page.test.jsx
new file mode 100644
index 000000000..bb83ec966
--- /dev/null
+++ b/src/pages/Card/Card.page.test.jsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Card from '.';
+
+describe('Card Component tests', () => {
+    it('Card Description defined', () => {
+        render(
+            <Card
+                image="testimage"
+                title="testTitle"
+                description="testDescription"
+                width="120"
+                height="90"
+            />
+        );
+        expect(screen.getByText('testDescription')).toBeDefined();
+    });
+
+    it('Card Title defined', () => {
+        render(
+            <Card
+                image="testimage"
+                title="testTitle"
+                description="testDescription"
+                width="120"
+                height="90"
+            />
+        );
+        expect(screen.getByText('testTitle')).toBeDefined();
+    });
+
+    it('Card Title type', () => {
+        render(
+            <Card
+                image="testimage"
+                title="testTitle"
+                description="testDescription"
+                width="120"
+                height="90"
+            />
+        );
+        expect(screen.getByText('testTitle').tagName).toBe('H2');
+    });
+
+    it('Card Description type', () => {
+        render(
+            <Card
+                image="testimage"
+                title="testTitle"
+                description="testDescription"
+                width="120"
+                height="90"
+            />
+        );
+        expect(screen.getByText('testDescription').tagName).toBe('P');
+    });
+
+    it('Card Description class', () => {
+        render(
+            <Card
+                image="testimage"
+                title="testTitle"
+                description="testDescription"
+                width="120"
+                height="90"
+            />
+        );
+        expect(screen.getByText('testDescription').classList).toHaveLength(0);
+    });
+
+    it('Card Title class', () => {
+        render(
+            <Card
+                image="testimage"
+                title="testTitle"
+                description="testDescription"
+                width="120"
+                height="90"
+            />
+        );
+        expect(screen.getByText('testTitle').classList).toHaveLength(0);
+    });
+});
diff --git a/src/pages/Card/index.js b/src/pages/Card/index.js
index c8d7e8d38..2c7c4b0d9 100644
--- a/src/pages/Card/index.js
+++ b/src/pages/Card/index.js
@@ -1 +1 @@
-export { default } from './Header.page';
+export { default } from './Card.page';
diff --git a/src/pages/Header/Header.page.jsx b/src/pages/Header/Header.page.jsx
index ee6e86036..dd0a3fb65 100644
--- a/src/pages/Header/Header.page.jsx
+++ b/src/pages/Header/Header.page.jsx
@@ -23,7 +23,7 @@ function HeaderSection() {
             </Button>
 
             <Button size="1em">
-                <input type="search" id="site-search" />
+                <input type="search" id="site-search" placeholder="Search the site..." />
                 <Emoji symbol="🔍" />
             </Button>
         </CurrentDiv>
diff --git a/src/pages/Header/Header.page.test.jsx b/src/pages/Header/Header.page.test.jsx
new file mode 100644
index 000000000..b318301ec
--- /dev/null
+++ b/src/pages/Header/Header.page.test.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import HeaderSection from '.';
+
+describe('HeaderSection Component tests', () => {
+    it('Header Section Contains search button defined', () => {
+        render(<HeaderSection />);
+        expect(screen.getByText('🔍')).toBeDefined();
+    });
+
+    it('Header Section Contains search button defined', () => {
+        render(<HeaderSection />);
+        expect(screen.getByText('☰')).toBeDefined();
+    });
+
+    it('Header Section Contains search input defined', () => {
+        render(<HeaderSection />);
+        expect(screen.getByPlaceholderText('Search the site...')).toBeDefined();
+    });
+});
diff --git a/src/pages/Home/Home.page.jsx b/src/pages/Home/Home.page.jsx
index 220558e53..94129754c 100644
--- a/src/pages/Home/Home.page.jsx
+++ b/src/pages/Home/Home.page.jsx
@@ -4,14 +4,12 @@ import Card from '../Card/Card.page';
 import mockedData from '../../data/mockItems.json';
 
 function HomePage() {
-
-    console.table(mockedData.items);
-
     return (
         <div>
             <HeaderSection />
             {mockedData.items.map((item) => (
                 <Card
+                    key={item.etag}
                     title={item.snippet.title}
                     description={item.snippet.description}
                     image={item.snippet.thumbnails.default.url}
diff --git a/src/pages/Home/Home.page.test.jsx b/src/pages/Home/Home.page.test.jsx
new file mode 100644
index 000000000..149a4ea9d
--- /dev/null
+++ b/src/pages/Home/Home.page.test.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import HomePage from '.';
+
+describe('Home Component tests', () => {
+    it('Header Section Contains search button defined', () => {
+        render(<HomePage />);
+        expect(screen.getByText('🔍')).toBeDefined();
+    });
+
+    it('Header Section Contains search button defined', () => {
+        render(<HomePage />);
+        expect(screen.getByText('☰')).toBeDefined();
+    });
+
+    it('Header Section Contains search input defined', () => {
+        render(<HomePage />);
+        expect(screen.getByPlaceholderText('Search the site...')).toBeDefined();
+    });
+
+    it('Card Section Contain title', () => {
+        render(<HomePage />);
+        expect(
+            screen.getByText('Video Tour | Welcome to Wizeline Guadalajara').tagName
+        ).toBe('H2');
+    });
+    it('Card Section Contain Description', () => {
+        render(<HomePage />);
+        expect(
+            screen.getByText(
+                'Follow Hector Padilla, Wizeline Director of Engineering, for a lively tour of our office. In 2018, Wizeline opened its stunning new office in Guadalajara, Jalisco, ...'
+            ).tagName
+        ).toBe('P');
+    });
+    it('Card Section Contain image', () => {
+        render(<HomePage />);
+        expect(
+            screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara').tagName
+        ).toBe('IMG');
+    });
+    it('Card Section image size width', () => {
+        render(<HomePage />);
+
+        const image = screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara');
+
+        expect(image.width).toEqual(120);
+    });
+    it('Card Section image size height', () => {
+        render(<HomePage />);
+        const image = screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara');
+        expect(image.height).toEqual(90);
+    });
+});
diff --git a/src/pages/Home/Home.styles.css b/src/pages/Home/Home.styles.css
deleted file mode 100644
index 5e0a702c3..000000000
--- a/src/pages/Home/Home.styles.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.homepage {
-  text-align: center;
-}
-
-.homepage h1 {
-  font-size: 3rem;
-  letter-spacing: -2px;
-}

From bfbcf9b94516d73b17778d164798223786db9107 Mon Sep 17 00:00:00 2001
From: Jorge Polanco <jorge.polanco@dowjones.com>
Date: Sat, 20 Feb 2021 08:13:42 -0600
Subject: [PATCH 5/9] Revert "- add unit testing to the components"

This reverts commit 443412c51fd91799d52156558551edb0c2f4bdd2.
---
 src/components/App/App.component.jsx      |  4 +-
 src/components/App/App.component.test.jsx | 15 ----
 src/components/Emoji/Emoji.test.jsx       | 14 ----
 src/pages/Card/Card.page.test.jsx         | 83 -----------------------
 src/pages/Card/index.js                   |  2 +-
 src/pages/Header/Header.page.jsx          |  2 +-
 src/pages/Header/Header.page.test.jsx     | 20 ------
 src/pages/Home/Home.page.jsx              |  4 +-
 src/pages/Home/Home.page.test.jsx         | 53 ---------------
 src/pages/Home/Home.styles.css            |  8 +++
 10 files changed, 14 insertions(+), 191 deletions(-)
 delete mode 100644 src/components/App/App.component.test.jsx
 delete mode 100644 src/components/Emoji/Emoji.test.jsx
 delete mode 100644 src/pages/Card/Card.page.test.jsx
 delete mode 100644 src/pages/Header/Header.page.test.jsx
 delete mode 100644 src/pages/Home/Home.page.test.jsx
 create mode 100644 src/pages/Home/Home.styles.css

diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx
index 1739c0058..d9869d29c 100644
--- a/src/components/App/App.component.jsx
+++ b/src/components/App/App.component.jsx
@@ -31,9 +31,7 @@ function App() {
             >
                 Change Theme
             </Button>
-            <div id="home-section">
-                <HomePage />
-            </div>
+            <HomePage />
         </ThemeProvider>
     );
 }
diff --git a/src/components/App/App.component.test.jsx b/src/components/App/App.component.test.jsx
deleted file mode 100644
index c4fc3d59e..000000000
--- a/src/components/App/App.component.test.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { render, screen, queryByAttribute } from '@testing-library/react';
-import App from '.';
-
-describe('App Component tests', () => {
-    it('App Contains change theme defined', () => {
-        render(<App />);
-        expect(screen.getByText('Change Theme')).toBeDefined();
-    });
-    it('App Contains home section defined', () => {
-        const getById = queryByAttribute.bind(null, 'id');
-        const dom = render(<App />);
-        expect(getById(dom.container, 'home-section')).toBeDefined();
-    });
-});
diff --git a/src/components/Emoji/Emoji.test.jsx b/src/components/Emoji/Emoji.test.jsx
deleted file mode 100644
index 02fee2554..000000000
--- a/src/components/Emoji/Emoji.test.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import Emoji from '.';
-
-describe('Emoji Component tests', () => {
-    it('Emoji span Contains the right emoji', () => {
-        render(<Emoji symbol="👍" />);
-        expect(screen.getByText('👍')).toBeDefined();
-    });
-    it('Emoji span shoul be span', () => {
-        render(<Emoji symbol="👍" />);
-        expect(screen.getByText('👍').tagName).toBe('SPAN');
-    });
-});
diff --git a/src/pages/Card/Card.page.test.jsx b/src/pages/Card/Card.page.test.jsx
deleted file mode 100644
index bb83ec966..000000000
--- a/src/pages/Card/Card.page.test.jsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import Card from '.';
-
-describe('Card Component tests', () => {
-    it('Card Description defined', () => {
-        render(
-            <Card
-                image="testimage"
-                title="testTitle"
-                description="testDescription"
-                width="120"
-                height="90"
-            />
-        );
-        expect(screen.getByText('testDescription')).toBeDefined();
-    });
-
-    it('Card Title defined', () => {
-        render(
-            <Card
-                image="testimage"
-                title="testTitle"
-                description="testDescription"
-                width="120"
-                height="90"
-            />
-        );
-        expect(screen.getByText('testTitle')).toBeDefined();
-    });
-
-    it('Card Title type', () => {
-        render(
-            <Card
-                image="testimage"
-                title="testTitle"
-                description="testDescription"
-                width="120"
-                height="90"
-            />
-        );
-        expect(screen.getByText('testTitle').tagName).toBe('H2');
-    });
-
-    it('Card Description type', () => {
-        render(
-            <Card
-                image="testimage"
-                title="testTitle"
-                description="testDescription"
-                width="120"
-                height="90"
-            />
-        );
-        expect(screen.getByText('testDescription').tagName).toBe('P');
-    });
-
-    it('Card Description class', () => {
-        render(
-            <Card
-                image="testimage"
-                title="testTitle"
-                description="testDescription"
-                width="120"
-                height="90"
-            />
-        );
-        expect(screen.getByText('testDescription').classList).toHaveLength(0);
-    });
-
-    it('Card Title class', () => {
-        render(
-            <Card
-                image="testimage"
-                title="testTitle"
-                description="testDescription"
-                width="120"
-                height="90"
-            />
-        );
-        expect(screen.getByText('testTitle').classList).toHaveLength(0);
-    });
-});
diff --git a/src/pages/Card/index.js b/src/pages/Card/index.js
index 2c7c4b0d9..c8d7e8d38 100644
--- a/src/pages/Card/index.js
+++ b/src/pages/Card/index.js
@@ -1 +1 @@
-export { default } from './Card.page';
+export { default } from './Header.page';
diff --git a/src/pages/Header/Header.page.jsx b/src/pages/Header/Header.page.jsx
index dd0a3fb65..ee6e86036 100644
--- a/src/pages/Header/Header.page.jsx
+++ b/src/pages/Header/Header.page.jsx
@@ -23,7 +23,7 @@ function HeaderSection() {
             </Button>
 
             <Button size="1em">
-                <input type="search" id="site-search" placeholder="Search the site..." />
+                <input type="search" id="site-search" />
                 <Emoji symbol="🔍" />
             </Button>
         </CurrentDiv>
diff --git a/src/pages/Header/Header.page.test.jsx b/src/pages/Header/Header.page.test.jsx
deleted file mode 100644
index b318301ec..000000000
--- a/src/pages/Header/Header.page.test.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import HeaderSection from '.';
-
-describe('HeaderSection Component tests', () => {
-    it('Header Section Contains search button defined', () => {
-        render(<HeaderSection />);
-        expect(screen.getByText('🔍')).toBeDefined();
-    });
-
-    it('Header Section Contains search button defined', () => {
-        render(<HeaderSection />);
-        expect(screen.getByText('☰')).toBeDefined();
-    });
-
-    it('Header Section Contains search input defined', () => {
-        render(<HeaderSection />);
-        expect(screen.getByPlaceholderText('Search the site...')).toBeDefined();
-    });
-});
diff --git a/src/pages/Home/Home.page.jsx b/src/pages/Home/Home.page.jsx
index 94129754c..220558e53 100644
--- a/src/pages/Home/Home.page.jsx
+++ b/src/pages/Home/Home.page.jsx
@@ -4,12 +4,14 @@ import Card from '../Card/Card.page';
 import mockedData from '../../data/mockItems.json';
 
 function HomePage() {
+
+    console.table(mockedData.items);
+
     return (
         <div>
             <HeaderSection />
             {mockedData.items.map((item) => (
                 <Card
-                    key={item.etag}
                     title={item.snippet.title}
                     description={item.snippet.description}
                     image={item.snippet.thumbnails.default.url}
diff --git a/src/pages/Home/Home.page.test.jsx b/src/pages/Home/Home.page.test.jsx
deleted file mode 100644
index 149a4ea9d..000000000
--- a/src/pages/Home/Home.page.test.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import HomePage from '.';
-
-describe('Home Component tests', () => {
-    it('Header Section Contains search button defined', () => {
-        render(<HomePage />);
-        expect(screen.getByText('🔍')).toBeDefined();
-    });
-
-    it('Header Section Contains search button defined', () => {
-        render(<HomePage />);
-        expect(screen.getByText('☰')).toBeDefined();
-    });
-
-    it('Header Section Contains search input defined', () => {
-        render(<HomePage />);
-        expect(screen.getByPlaceholderText('Search the site...')).toBeDefined();
-    });
-
-    it('Card Section Contain title', () => {
-        render(<HomePage />);
-        expect(
-            screen.getByText('Video Tour | Welcome to Wizeline Guadalajara').tagName
-        ).toBe('H2');
-    });
-    it('Card Section Contain Description', () => {
-        render(<HomePage />);
-        expect(
-            screen.getByText(
-                'Follow Hector Padilla, Wizeline Director of Engineering, for a lively tour of our office. In 2018, Wizeline opened its stunning new office in Guadalajara, Jalisco, ...'
-            ).tagName
-        ).toBe('P');
-    });
-    it('Card Section Contain image', () => {
-        render(<HomePage />);
-        expect(
-            screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara').tagName
-        ).toBe('IMG');
-    });
-    it('Card Section image size width', () => {
-        render(<HomePage />);
-
-        const image = screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara');
-
-        expect(image.width).toEqual(120);
-    });
-    it('Card Section image size height', () => {
-        render(<HomePage />);
-        const image = screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara');
-        expect(image.height).toEqual(90);
-    });
-});
diff --git a/src/pages/Home/Home.styles.css b/src/pages/Home/Home.styles.css
new file mode 100644
index 000000000..5e0a702c3
--- /dev/null
+++ b/src/pages/Home/Home.styles.css
@@ -0,0 +1,8 @@
+.homepage {
+  text-align: center;
+}
+
+.homepage h1 {
+  font-size: 3rem;
+  letter-spacing: -2px;
+}

From 107d429fe90853dc3f1e9d9db469dcf014dacecf Mon Sep 17 00:00:00 2001
From: Jorge Polanco <jorge.polanco@dowjones.com>
Date: Sat, 20 Feb 2021 08:18:50 -0600
Subject: [PATCH 6/9] fix export

---
 src/pages/Card/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Card/index.js b/src/pages/Card/index.js
index c8d7e8d38..2c7c4b0d9 100644
--- a/src/pages/Card/index.js
+++ b/src/pages/Card/index.js
@@ -1 +1 @@
-export { default } from './Header.page';
+export { default } from './Card.page';

From 7d289d047c4c2682c26f255426278420aa3b2bc3 Mon Sep 17 00:00:00 2001
From: Jorge Polanco <jorge.polanco@dowjones.com>
Date: Sat, 20 Feb 2021 08:28:52 -0600
Subject: [PATCH 7/9] - wrap HomeSection component inside a div - add
 placeholder to search button - delete console.table - add key for card list

---
 src/components/App/App.component.jsx | 4 +++-
 src/pages/Header/Header.page.jsx     | 2 +-
 src/pages/Home/Home.page.jsx         | 4 +---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/App/App.component.jsx b/src/components/App/App.component.jsx
index d9869d29c..1739c0058 100644
--- a/src/components/App/App.component.jsx
+++ b/src/components/App/App.component.jsx
@@ -31,7 +31,9 @@ function App() {
             >
                 Change Theme
             </Button>
-            <HomePage />
+            <div id="home-section">
+                <HomePage />
+            </div>
         </ThemeProvider>
     );
 }
diff --git a/src/pages/Header/Header.page.jsx b/src/pages/Header/Header.page.jsx
index ee6e86036..dd0a3fb65 100644
--- a/src/pages/Header/Header.page.jsx
+++ b/src/pages/Header/Header.page.jsx
@@ -23,7 +23,7 @@ function HeaderSection() {
             </Button>
 
             <Button size="1em">
-                <input type="search" id="site-search" />
+                <input type="search" id="site-search" placeholder="Search the site..." />
                 <Emoji symbol="🔍" />
             </Button>
         </CurrentDiv>
diff --git a/src/pages/Home/Home.page.jsx b/src/pages/Home/Home.page.jsx
index 220558e53..94129754c 100644
--- a/src/pages/Home/Home.page.jsx
+++ b/src/pages/Home/Home.page.jsx
@@ -4,14 +4,12 @@ import Card from '../Card/Card.page';
 import mockedData from '../../data/mockItems.json';
 
 function HomePage() {
-
-    console.table(mockedData.items);
-
     return (
         <div>
             <HeaderSection />
             {mockedData.items.map((item) => (
                 <Card
+                    key={item.etag}
                     title={item.snippet.title}
                     description={item.snippet.description}
                     image={item.snippet.thumbnails.default.url}

From ffaae0eb756ab61816d473d9b5fcf0fdde4c1832 Mon Sep 17 00:00:00 2001
From: Jorge Polanco <jorge.polanco@dowjones.com>
Date: Sat, 20 Feb 2021 08:29:32 -0600
Subject: [PATCH 8/9] - add testing files

---
 src/components/App/App.component.test.jsx | 15 ++++
 src/components/Emoji/Emoji.test.jsx       | 14 ++++
 src/pages/Card/Card.page.test.jsx         | 83 +++++++++++++++++++++++
 src/pages/Header/Header.page.test.jsx     | 20 ++++++
 src/pages/Home/Home.page.test.jsx         | 53 +++++++++++++++
 5 files changed, 185 insertions(+)
 create mode 100644 src/components/App/App.component.test.jsx
 create mode 100644 src/components/Emoji/Emoji.test.jsx
 create mode 100644 src/pages/Card/Card.page.test.jsx
 create mode 100644 src/pages/Header/Header.page.test.jsx
 create mode 100644 src/pages/Home/Home.page.test.jsx

diff --git a/src/components/App/App.component.test.jsx b/src/components/App/App.component.test.jsx
new file mode 100644
index 000000000..c4fc3d59e
--- /dev/null
+++ b/src/components/App/App.component.test.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen, queryByAttribute } from '@testing-library/react';
+import App from '.';
+
+describe('App Component tests', () => {
+    it('App Contains change theme defined', () => {
+        render(<App />);
+        expect(screen.getByText('Change Theme')).toBeDefined();
+    });
+    it('App Contains home section defined', () => {
+        const getById = queryByAttribute.bind(null, 'id');
+        const dom = render(<App />);
+        expect(getById(dom.container, 'home-section')).toBeDefined();
+    });
+});
diff --git a/src/components/Emoji/Emoji.test.jsx b/src/components/Emoji/Emoji.test.jsx
new file mode 100644
index 000000000..02fee2554
--- /dev/null
+++ b/src/components/Emoji/Emoji.test.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Emoji from '.';
+
+describe('Emoji Component tests', () => {
+    it('Emoji span Contains the right emoji', () => {
+        render(<Emoji symbol="👍" />);
+        expect(screen.getByText('👍')).toBeDefined();
+    });
+    it('Emoji span shoul be span', () => {
+        render(<Emoji symbol="👍" />);
+        expect(screen.getByText('👍').tagName).toBe('SPAN');
+    });
+});
diff --git a/src/pages/Card/Card.page.test.jsx b/src/pages/Card/Card.page.test.jsx
new file mode 100644
index 000000000..bb83ec966
--- /dev/null
+++ b/src/pages/Card/Card.page.test.jsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Card from '.';
+
+describe('Card Component tests', () => {
+    it('Card Description defined', () => {
+        render(
+            <Card
+                image="testimage"
+                title="testTitle"
+                description="testDescription"
+                width="120"
+                height="90"
+            />
+        );
+        expect(screen.getByText('testDescription')).toBeDefined();
+    });
+
+    it('Card Title defined', () => {
+        render(
+            <Card
+                image="testimage"
+                title="testTitle"
+                description="testDescription"
+                width="120"
+                height="90"
+            />
+        );
+        expect(screen.getByText('testTitle')).toBeDefined();
+    });
+
+    it('Card Title type', () => {
+        render(
+            <Card
+                image="testimage"
+                title="testTitle"
+                description="testDescription"
+                width="120"
+                height="90"
+            />
+        );
+        expect(screen.getByText('testTitle').tagName).toBe('H2');
+    });
+
+    it('Card Description type', () => {
+        render(
+            <Card
+                image="testimage"
+                title="testTitle"
+                description="testDescription"
+                width="120"
+                height="90"
+            />
+        );
+        expect(screen.getByText('testDescription').tagName).toBe('P');
+    });
+
+    it('Card Description class', () => {
+        render(
+            <Card
+                image="testimage"
+                title="testTitle"
+                description="testDescription"
+                width="120"
+                height="90"
+            />
+        );
+        expect(screen.getByText('testDescription').classList).toHaveLength(0);
+    });
+
+    it('Card Title class', () => {
+        render(
+            <Card
+                image="testimage"
+                title="testTitle"
+                description="testDescription"
+                width="120"
+                height="90"
+            />
+        );
+        expect(screen.getByText('testTitle').classList).toHaveLength(0);
+    });
+});
diff --git a/src/pages/Header/Header.page.test.jsx b/src/pages/Header/Header.page.test.jsx
new file mode 100644
index 000000000..b318301ec
--- /dev/null
+++ b/src/pages/Header/Header.page.test.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import HeaderSection from '.';
+
+describe('HeaderSection Component tests', () => {
+    it('Header Section Contains search button defined', () => {
+        render(<HeaderSection />);
+        expect(screen.getByText('🔍')).toBeDefined();
+    });
+
+    it('Header Section Contains search button defined', () => {
+        render(<HeaderSection />);
+        expect(screen.getByText('☰')).toBeDefined();
+    });
+
+    it('Header Section Contains search input defined', () => {
+        render(<HeaderSection />);
+        expect(screen.getByPlaceholderText('Search the site...')).toBeDefined();
+    });
+});
diff --git a/src/pages/Home/Home.page.test.jsx b/src/pages/Home/Home.page.test.jsx
new file mode 100644
index 000000000..149a4ea9d
--- /dev/null
+++ b/src/pages/Home/Home.page.test.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import HomePage from '.';
+
+describe('Home Component tests', () => {
+    it('Header Section Contains search button defined', () => {
+        render(<HomePage />);
+        expect(screen.getByText('🔍')).toBeDefined();
+    });
+
+    it('Header Section Contains search button defined', () => {
+        render(<HomePage />);
+        expect(screen.getByText('☰')).toBeDefined();
+    });
+
+    it('Header Section Contains search input defined', () => {
+        render(<HomePage />);
+        expect(screen.getByPlaceholderText('Search the site...')).toBeDefined();
+    });
+
+    it('Card Section Contain title', () => {
+        render(<HomePage />);
+        expect(
+            screen.getByText('Video Tour | Welcome to Wizeline Guadalajara').tagName
+        ).toBe('H2');
+    });
+    it('Card Section Contain Description', () => {
+        render(<HomePage />);
+        expect(
+            screen.getByText(
+                'Follow Hector Padilla, Wizeline Director of Engineering, for a lively tour of our office. In 2018, Wizeline opened its stunning new office in Guadalajara, Jalisco, ...'
+            ).tagName
+        ).toBe('P');
+    });
+    it('Card Section Contain image', () => {
+        render(<HomePage />);
+        expect(
+            screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara').tagName
+        ).toBe('IMG');
+    });
+    it('Card Section image size width', () => {
+        render(<HomePage />);
+
+        const image = screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara');
+
+        expect(image.width).toEqual(120);
+    });
+    it('Card Section image size height', () => {
+        render(<HomePage />);
+        const image = screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara');
+        expect(image.height).toEqual(90);
+    });
+});

From b6f7f89d67a0f8e7bd3f98c6c0758d850dbfbf7b Mon Sep 17 00:00:00 2001
From: Jorge Polanco <jorge.polanco@dowjones.com>
Date: Sat, 20 Feb 2021 09:20:45 -0600
Subject: [PATCH 9/9] update package json to add test:coveraje script

---
 package.json | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 2d91b3558..4addda755 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
+    "test:coverage": "npm run test -- --coverage --watchAll=false",
     "eject": "react-scripts eject",
     "lint": "eslint ./src --ext .js,.jsx",
     "lint:fix": "eslint ./src --ext .js,.jsx --fix"
@@ -33,7 +34,11 @@
     "husky": "^4.2.5",
     "lint-staged": "^10.2.13",
     "prettier": "^2.1.1",
-    "pretty-quick": "^3.0.0"
+    "pretty-quick": "^3.0.0",
+    "@testing-library/react-hooks": "^3.4.1",
+    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "jest-fetch-mock": "^3.0.3",
+    "react-test-renderer": "^16.13.1"
   },
   "browserslist": {
     "production": [
@@ -58,5 +63,11 @@
     "hooks": {
       "pre-commit": "lint-staged"
     }
+  },
+  "jest": {
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/src/index.js"
+    ]
   }
 }