Added backend+database support

src/App.css

@@ -1,58 +0,0 @@
-.App {
-  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 {
-  text-align: left;
-  padding-top: 20px;
-}
-
-.table td {
-  font-size: 1.3rem;
-  padding: 5px;
-}
-
-.table th {
-  font-size: 1.6rem;
-  padding: 5px;
-}

src/App.js

@@ -1,32 +0,0 @@
-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('https://api.github.com/users');
-      const resJSON = await res.json();
-      // data.sort((b, a) => new Date(b.Date) - new Date(a.Date)) // Sort by date
-      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;

src/componets/List.js

@@ -1,28 +0,0 @@
-const List = ({data}) => {
-    console.log(data)
-
-  return (
-    <table className="table">
-        <thead>
-            <tr>
-                <th>#</th>
-                <th>Name</th>
-                <th>Title</th>
-                <th>Link</th>
-            </tr>
-        </thead>
-        <tbody>
-        {data.map((e, i) => {
-            return <tr key={i}>
-                <td>{i + 1}</td>
-                <td>{e.login}</td>
-                <td>{e.node_id}</td>
-                <td>{e.html_url}</td>
-            </tr>
-        })}
-        </tbody>
-    </table>
-  )
-}
-
-export default List

src/index.css

@@ -1,8 +0,0 @@
-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;
-}

src/index.js

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