Added backend+database support

webmarker/src/App.css

@@ -0,0 +1,64 @@
+.App {
+  min-height: 96vh;
+  padding: 2vh;
+  background-color: #1f2c38;
+  color: white;
+}
+
+.head {
+  display: flex;
+}
+
+.search {
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  padding: 10px;
+  font-size: 1.5rem;
+}
+
+.search-btn {
+  padding: 5px;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  color: #1f2c38b6;
+}
+
+.settings-btn {
+  padding: 5px;
+  border-radius: 10px;
+  color: #1f2c38b6;
+}
+
+.add-btn {
+  padding: 5px;
+  border-radius: 10px;
+  color: #1f2c38b6;
+  margin-left: auto;
+  margin-right: 10px;
+}
+
+textarea:focus, input:focus{
+  outline: none;
+}
+
+.material-icons-outlined.md-36 { font-size: 36px; }
+
+.table {
+  width: 100%;
+  text-align: left;
+  padding-top: 20px;
+}
+
+.table td {
+  font-size: 1.3rem;
+  padding: 5px;
+}
+
+.table th {
+  font-size: 1.6rem;
+  padding: 5px;
+}
+
+.table tbody tr:nth-of-type(2n-1) {
+  background-color:#273949;
+}

webmarker/src/App.js

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react';
+import './App.css';
+import List from './componets/List';
+
+function App() {
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    async function fetchData() {
+      const res = await fetch('/get');
+      const resJSON = await res.json();
+      console.log(resJSON)
+      setData(resJSON);
+    }
+
+    fetchData();
+  }, []);
+  
+  return (
+    <div className="App">
+      <div className="head">
+        <input className="search" type="search" placeholder="Search bookmarks"/>
+        <button className="search-btn"><span className="material-icons-outlined md-36">search</span></button>
+        <button className="add-btn"><span className="material-icons-outlined md-36">add</span></button>
+        <button className="settings-btn"><span className="material-icons-outlined md-36">settings</span></button>
+      </div>
+      <List data={data} />
+    </div>
+  );
+}
+
+export default App;
+
+// fetch("/post", {
+     
+//   // Adding method type
+//   method: "POST",
+   
+//   // Adding body or contents to send
+//   body: JSON.stringify({
+//       name: "foo",
+//       title: "bar",
+//       link: liveinternet.ru,
+//       tag: Red
+//   }),
+   
+//   // Adding headers to the request
+//   headers: {
+//       "Content-type": "application/json; charset=UTF-8"
+//   }
+// });

webmarker/src/componets/List.js

@@ -0,0 +1,30 @@
+const List = ({data}) => {
+    console.log(data)
+
+  return (
+    <table className="table">
+        <thead>
+            <tr>
+                <th>#</th>
+                <th>Name</th>
+                <th>Title</th>
+                <th>Link</th>
+                <th>Tag</th>
+            </tr>
+        </thead>
+        <tbody>
+        {data.map((e, i) => {
+            return <tr key={i}>
+                <td>{i + 1}</td>
+                <td>{e.name}</td>
+                <td>{e.title}</td>
+                <td>{e.link}</td>
+                <td>{e.tag}</td>
+            </tr>
+        })}
+        </tbody>
+    </table>
+  )
+}
+
+export default List

webmarker/src/index.css

@@ -0,0 +1,8 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

webmarker/src/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(
+    <App />,
+  document.getElementById('root')
+);