✨Create the app

src/App.css

@@ -1,38 +1,8 @@
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
+  width: 100vw;
   min-height: 100vh;
+
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+  justify-content: space-between;
+}

src/App.tsx

@@ -1,26 +1,20 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
 
-function App() {
+import Header from './components/Header';
+import Footer from './components/Footer';
+import Content from './components/Content';
+import {ChakraProvider, Flex, Spacer} from '@chakra-ui/react';
+
+export default function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+      <ChakraProvider>
+        <Flex width="100vw" minHeight="100vh"
+              flexDirection="column" justifyContent="space-between">
+          <Header/>
+          <Content/>
+          <Footer/>
+        </Flex>
+      </ChakraProvider>
   );
 }
-
-export default App;

src/components/Content.tsx

@@ -0,0 +1,42 @@
+import React, {useState} from 'react';
+import {Box, Center, Flex, Input, Text} from '@chakra-ui/react';
+import {ArrowDownIcon} from '@chakra-ui/icons';
+
+export default function Content() {
+  // States
+  const [input, setInput] = useState('');
+  const [output, setOutput] = useState('');
+
+  // Actions
+  const handleInput = (event: any) => {
+    const inputAfterChange: string = event.target.value as string;
+
+    if (inputAfterChange.length < 8 && isBinary(inputAfterChange)) {
+      setInput(inputAfterChange);
+      handleOutput(inputAfterChange);
+    }
+  };
+  const handleOutput = (binaryValue: string) => {
+    const outputAfterChange = (binaryValue.length)
+        ? `${parseInt(binaryValue, 2)}` : '';
+
+    setOutput(outputAfterChange);
+  };
+  const isBinary = (value: string) => {
+    const BINARY_CHAR = ['0', '1'];
+
+    for (let char of value) {
+      if (!BINARY_CHAR.includes(char)) return false;
+    }
+    return true;
+  };
+
+  // Render
+  return (
+      <Flex align={'center'} flexDirection={'column'} marginX={10}>
+        <Input variant="filled" placeholder={"Binary"} value={input} onChange={handleInput}/>
+        <ArrowDownIcon marginY={5} boxSize={8} rounded={'rounded'}/>
+        <Text fontSize={'2xl'} align={'center'}>{output}</Text>
+      </Flex>
+  );
+}

src/components/Footer.tsx

@@ -0,0 +1,12 @@
+import {Box, Divider, Link, Text} from '@chakra-ui/react';
+
+export default function Footer() {
+  return (
+      <Box m={4}>
+        <Divider/>
+        <Text align={'center'} marginTop={4}>
+          MIT Licence © 2022 - <Link>See code on GitHub</Link>
+        </Text>
+      </Box>
+  );
+}

src/components/Header.tsx

@@ -0,0 +1,9 @@
+import {Box, Button} from '@chakra-ui/react';
+
+export default function Header() {
+  return (
+      <Box margin={2}>
+        <Button>Bin2Dec</Button>
+      </Box>
+  );
+}