Merge branch 'main' into adi-git-demo-mc

.gitignore

@@ -1 +1,2 @@
-venv
+venv
+links.db

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "ms-python.python",
+    "humao.rest-client"
+  ]
+}

.vscode/settings.json

@@ -5,5 +5,34 @@
     "editor.quickSuggestions": {
       "strings": true
     }
-  }
+  },
+  "typescript.tsdk": "frontend/node_modules/typescript/lib",
+  "eslint.format.enable": true,
+  "eslint.codeActionsOnSave.mode": "all",
+  "[javascript]": {
+    "editor.formatOnSave": false,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    }
+  },
+  "[javascriptreact]": {
+    "editor.formatOnSave": false,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    }
+  },
+  "[typescript]": {
+    "editor.formatOnSave": false,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    }
+  },
+  "[typescriptreact]": {
+    "editor.formatOnSave": false,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    }
+  },
+  "python.linting.pylintEnabled": true,
+  "python.linting.enabled": true,
 }

README.md

@@ -0,0 +1,23 @@
+## Architecture
+
+![client-server interaction graph](./assets/client-server-interaction.svg)
+
+## Dependencies
+
+1. Node.js
+1. npm
+1. Python 3.6+
+
+## Setup
+
+For setting up the frontend, `setup.sh` will run `npm install` in the `frontend` folder.
+
+For setting up the backend, `setup.sh` will initialize a new virtual environment and setup a dummy sqlite file for testing purposes.
+
+## Dev
+
+Run `setup.sh` and then run `dev.sh`
+
+## Production
+
+TODO

assets/client-server-interaction.drawio

@@ -0,0 +1 @@
+<mxfile host="app.diagrams.net" modified="2021-03-15T06:55:32.703Z" agent="5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.72 Safari/537.36" etag="CQUO9gWHRxDxe8Ce6UdG" version="14.4.8" type="device"><diagram id="nWxgDZutG5X04Ajf33Mw" name="Page-1">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</diagram></mxfile>

backend/main.py

@@ -1,9 +1,30 @@
 from flask import Flask
 app = Flask(__name__)
 
+import json
+import sqlite3
+import os
+DB_PATH = os.path.join(os.path.dirname(__file__), 'links.db')
+
 @app.route('/')
 def hello_world():
-    return 'Hello, World!'
+    return 'Hello from backend!'
+    
+def regen_JSON():
+    """Gets links from DB and outputs them in JSON"""
+    con = sqlite3.connect(DB_PATH)
+    con.row_factory = sqlite3.Row
+    cur = con.cursor()
+    cur.execute('SELECT url, name FROM links ORDER BY position')
+
+    links_list = []
+    for row in cur.fetchall():
+      d = dict(zip(row.keys(), row))
+      links_list.append(d)
+    links_json = json.dumps(links_list, indent=4)
+
+    con.close()
+    return links_json
 
 if __name__ == "__main__":
     app.run(debug=True)

backend/setup_db.py

@@ -0,0 +1,35 @@
+import sqlite3
+import os
+
+DB_PATH = os.path.join(os.path.dirname(__file__), 'links.db')
+
+con = sqlite3.connect(DB_PATH)
+
+# array of links to store
+links = [
+  ('http://csclub.uwaterloo.ca/','CS Club Website',3,0),
+  ('https://www.instagram.com/uwcsclub/','Instagram',4,1),
+  ('https://www.facebook.com/uw.computerscienceclub','Facebook',5,2),
+  ('http://twitch.tv/uwcsclub','Twitch',6,3),
+  ('http://bit.ly/uwcsclub-yt','YouTube',7,4),
+]
+
+# SQLite setup
+cur = con.cursor()
+
+# test if table already exists
+cur.execute("SELECT name FROM sqlite_master WHERE type='table' AND name='links'")
+if cur.fetchone():
+  raise Exception('Links table already exists.')
+else:
+  cur.execute('''CREATE TABLE links (
+    url text NOT NULL, 
+    name text NOT NULL, 
+    clicks int NOT NULL, 
+    position int NOT NULL UNIQUE,
+    UNIQUE(url, name)
+    )''')
+  cur.executemany('INSERT INTO links VALUES (?,?,?,?)', links)
+  con.commit()
+
+con.close()

common.sh

@@ -0,0 +1,30 @@
+#!/usr/bin/env bash
+
+PURPLE='\033[0;35m'
+CYAN='\033[0;36m'
+NC='\033[0m'
+
+function prefix_stdout_stderr() {
+  exec > >(trap "" INT TERM; sed "s/^/`printf "$1"`/")
+  exec 2> >(trap "" INT TERM; sed "s/^/`printf "$1"`/" >&2)
+}
+
+function run_frontend_backend() {
+  $1 &
+  pid_frontend=$!
+
+  $2 &
+  pid_backend=$!
+
+  trap_ctrlc() {
+    echo ""
+    kill $pid_frontend
+    echo "frontend exit code: $?"
+    kill $pid_backend
+    echo "backend exit code: $?"
+  }
+
+  trap trap_ctrlc INT
+
+  wait
+}

dev.sh

@@ -1,15 +1,10 @@
 #!/usr/bin/env bash
 
-PURPLE='\033[0;35m'
-CYAN='\033[0;36m'
-NC='\033[0m'
+set -e
 
-function prefix_stdout_stderr() {
-  exec > >(trap "" INT TERM; sed "s/^/`printf "$1"`/")
-  exec 2> >(trap "" INT TERM; sed "s/^/`printf "$1"`/" >&2)
-}
+source ./common.sh
 
-function start_frontend() {
+function dev_frontend() {
   prefix_stdout_stderr "${PURPLE}frontend: ${NC}"
 
   cd ./frontend
@@ -17,31 +12,13 @@ function start_frontend() {
   npm run dev
 }
 
-function start_backend() {
+function dev_backend() {
   prefix_stdout_stderr "${CYAN}backend:  ${NC}"
 
   cd ./backend
   source venv/bin/activate
 
-  echo $(which python)
-
   python main.py
 }
 
-start_frontend &
-pid_frontend=$!
-
-start_backend &
-pid_backend=$!
-
-trap_ctrlc() {
-  echo ""
-  kill $pid_frontend
-  echo "frontend exit code: $?"
-  kill $pid_backend
-  echo "backend exit code: $?"
-}
-
-trap trap_ctrlc INT
-
-wait
+run_frontend_backend "dev_frontend" "dev_backend"

frontend/components/Link/index.tsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-const Link: React.FC = () => {
-  return <div />;
-};
-
-export default Link;

frontend/components/Links/index.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+const styles = {
+  fontFamily: "Karla",
+};
+
+interface Link {
+  name: string;
+  url: string;
+}
+interface LinkProps {
+  links: Link[];
+}
+
+const Links: React.FC<LinkProps> = ({ links }) => {
+  return (
+    <div
+      className="text-s flex flex-col items-center w-full absolute top-6"
+      style={styles}
+    >
+      <img className="mb-3" src="csc_logo.png" alt="CSC Logo" width="100px" />
+      <h1 className="font-bold">@uwcsclub</h1>
+      <ul className="flex flex-col my-6 w-full">
+        {links.map(({ name, url }) => (
+          <li key={name + url} className="w-full contents">
+            <a
+              className="btn bg-gray-450 p-3 text-white font-bold text-center self-center my-1.5
+        hover:bg-white hover:text-black border-2 border-gray-800 transition duration-200 ease-in-out
+        w-11/12 sm:w-4/12"
+              href={url}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {name}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Links;

frontend/components/index.ts

@@ -1,3 +1,3 @@
-export { default as Link } from "./Link";
+export { default as Links } from "./Links";
 export { default as EditLink } from "./EditLink";
 export { default as Preview } from "./Preview";

frontend/next.config.js

@@ -0,0 +1,29 @@
+// @ts-check
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+// eslint-disable-next-line no-undef
+const { PHASE_DEVELOPMENT_SERVER } = require("next/constants");
+
+const devConfig = {
+  async rewrites() {
+    return [
+      {
+        source: "/api",
+        destination: "http://localhost:5000",
+      },
+      {
+        source: "/api/:slug",
+        destination: "http://localhost:5000/:slug",
+      },
+    ];
+  },
+};
+
+const prodConfig = {
+  basePath: "/links",
+};
+
+// eslint-disable-next-line no-undef
+module.exports = (phase) =>
+  phase === PHASE_DEVELOPMENT_SERVER ? devConfig : prodConfig;

frontend/package-lock.json

@@ -677,6 +677,182 @@
         "unist-util-find-all-after": "^3.0.2"
       }
     },
+    "@tailwindcss/postcss7-compat": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss7-compat/-/postcss7-compat-2.0.3.tgz",
+      "integrity": "sha512-R43aiSzwlybDMhDld8vkSIKPSLXxbbmotZ+I2GIrX+IzFNy9JAByC7Ncf9A81Dg0JLBWHY5m769lBbBnJCF8cw==",
+      "dev": true,
+      "requires": {
+        "@fullhuman/postcss-purgecss": "^3.1.3",
+        "autoprefixer": "^9",
+        "bytes": "^3.0.0",
+        "chalk": "^4.1.0",
+        "color": "^3.1.3",
+        "detective": "^5.2.0",
+        "didyoumean": "^1.2.1",
+        "fs-extra": "^9.1.0",
+        "html-tags": "^3.1.0",
+        "lodash": "^4.17.20",
+        "modern-normalize": "^1.0.0",
+        "node-emoji": "^1.8.1",
+        "object-hash": "^2.1.1",
+        "postcss": "^7",
+        "postcss-functions": "^3",
+        "postcss-js": "^2",
+        "postcss-nested": "^4",
+        "postcss-selector-parser": "^6.0.4",
+        "postcss-value-parser": "^4.1.0",
+        "pretty-hrtime": "^1.0.3",
+        "reduce-css-calc": "^2.1.8",
+        "resolve": "^1.19.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "autoprefixer": {
+          "version": "9.8.6",
+          "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
+          "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==",
+          "dev": true,
+          "requires": {
+            "browserslist": "^4.12.0",
+            "caniuse-lite": "^1.0.30001109",
+            "colorette": "^1.2.1",
+            "normalize-range": "^0.1.2",
+            "num2fraction": "^1.2.2",
+            "postcss": "^7.0.32",
+            "postcss-value-parser": "^4.1.0"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          },
+          "dependencies": {
+            "ansi-styles": {
+              "version": "3.2.1",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+              "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+              "dev": true,
+              "requires": {
+                "color-convert": "^1.9.0"
+              }
+            },
+            "chalk": {
+              "version": "2.4.2",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+              "dev": true,
+              "requires": {
+                "ansi-styles": "^3.2.1",
+                "escape-string-regexp": "^1.0.5",
+                "supports-color": "^5.3.0"
+              },
+              "dependencies": {
+                "supports-color": {
+                  "version": "5.5.0",
+                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+                  "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+                  "dev": true,
+                  "requires": {
+                    "has-flag": "^3.0.0"
+                  }
+                }
+              }
+            },
+            "color-convert": {
+              "version": "1.9.3",
+              "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+              "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+              "dev": true,
+              "requires": {
+                "color-name": "1.1.3"
+              }
+            },
+            "color-name": {
+              "version": "1.1.3",
+              "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+              "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+              "dev": true
+            },
+            "has-flag": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+              "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+              "dev": true
+            },
+            "supports-color": {
+              "version": "6.1.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+              "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "@types/json-schema": {
       "version": "7.0.7",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
@@ -1579,7 +1755,6 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
       "requires": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -3197,8 +3372,7 @@
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
-      "dev": true
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
     },
     "isobject": {
       "version": "2.1.0",
@@ -4266,8 +4440,7 @@
     "path-key": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
     },
     "path-parse": {
       "version": "1.0.6",
@@ -4326,12 +4499,12 @@
       }
     },
     "postcss": {
-      "version": "8.2.6",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.6.tgz",
-      "integrity": "sha512-xpB8qYxgPuly166AGlpRjUdEYtmOWx2iCwGmrv4vqZL9YPVviDVPZPRXxnXr6xPZOdxQ9lp3ZBFCRgWJ7LE3Sg==",
+      "version": "8.2.7",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.7.tgz",
+      "integrity": "sha512-DsVLH3xJzut+VT+rYr0mtvOtpTjSyqDwPf5EZWXcb0uAKfitGpTY9Ec+afi2+TgdN8rWS9Cs88UDYehKo/RvOw==",
       "dev": true,
       "requires": {
-        "colorette": "^1.2.1",
+        "colorette": "^1.2.2",
         "nanoid": "^3.1.20",
         "source-map": "^0.6.1"
       },
@@ -4391,13 +4564,41 @@
       }
     },
     "postcss-js": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
-      "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
+      "integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
       "dev": true,
       "requires": {
         "camelcase-css": "^2.0.1",
-        "postcss": "^8.1.6"
+        "postcss": "^7.0.18"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
       }
     },
     "postcss-less": {
@@ -4444,12 +4645,41 @@
       "dev": true
     },
     "postcss-nested": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.4.tgz",
-      "integrity": "sha512-/dimXVqdUAVS2ZiIX0uvyk9UCI825y6LW4TnjG51JTKF89CcorHPAjTUGPF70k2wlQYts5OzfnhYMgfGfHCClQ==",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
+      "integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
       "dev": true,
       "requires": {
-        "postcss-selector-parser": "^6.0.4"
+        "postcss": "^7.0.32",
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
       }
     },
     "postcss-resolve-nested-selector": {
@@ -4728,6 +4958,25 @@
         "glob": "^7.0.0",
         "postcss": "^8.2.1",
         "postcss-selector-parser": "^6.0.2"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "8.2.7",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.7.tgz",
+          "integrity": "sha512-DsVLH3xJzut+VT+rYr0mtvOtpTjSyqDwPf5EZWXcb0uAKfitGpTY9Ec+afi2+TgdN8rWS9Cs88UDYehKo/RvOw==",
+          "dev": true,
+          "requires": {
+            "colorette": "^1.2.2",
+            "nanoid": "^3.1.20",
+            "source-map": "^0.6.1"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
       }
     },
     "querystring": {
@@ -5143,7 +5392,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "requires": {
         "shebang-regex": "^3.0.0"
       }
@@ -5151,8 +5399,7 @@
     "shebang-regex": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
     },
     "shell-quote": {
       "version": "1.7.2",
@@ -5904,6 +6151,25 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
+        "postcss-js": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
+          "integrity": "sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==",
+          "dev": true,
+          "requires": {
+            "camelcase-css": "^2.0.1",
+            "postcss": "^8.1.6"
+          }
+        },
+        "postcss-nested": {
+          "version": "5.0.4",
+          "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.4.tgz",
+          "integrity": "sha512-/dimXVqdUAVS2ZiIX0uvyk9UCI825y6LW4TnjG51JTKF89CcorHPAjTUGPF70k2wlQYts5OzfnhYMgfGfHCClQ==",
+          "dev": true,
+          "requires": {
+            "postcss-selector-parser": "^6.0.4"
+          }
+        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6254,6 +6520,14 @@
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
       "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="
     },
+    "webpack-merge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.2.tgz",
+      "integrity": "sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==",
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
     "whatwg-url": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
@@ -6268,7 +6542,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "requires": {
         "isexe": "^2.0.0"
       }

frontend/package.json

@@ -32,7 +32,7 @@
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^5.1.3",
-    "postcss": "^8.2.6",
+    "postcss": "^8.2.7",
     "prettier": "^2.2.1",
     "stylelint": "^13.11.0",
     "stylelint-config-standard": "^20.0.0",

frontend/pages/_app.tsx

@@ -1,9 +1,19 @@
 import type { AppProps } from "next/app";
 import React from "react";
 import "styles/globals.css";
+import Head from "next/head";
 
 const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => (
-  <Component {...pageProps} />
+  <>
+    <Head>
+      <title>@uwcsclub | LinkList</title>
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Karla:wght@300;400;600;700&display=swap"
+      ></link>
+    </Head>
+    <Component {...pageProps} />
+  </>
 );
 
 export default MyApp;

frontend/pages/hello-world.json

@@ -0,0 +1,3 @@
+{
+  "greeting": "Hello from JSON"
+}

frontend/pages/hello-world.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { GetStaticProps } from "next";
+import GreetingJSON from "./hello-world.json";
+import { fetchExample } from "utils/api";
+
+interface Props {
+  greeting: string;
+}
+
+export const getStaticProps: GetStaticProps<Props> = async () => {
+  return {
+    props: { greeting: GreetingJSON.greeting }, // will be passed to the page component as props
+    // Next.js will attempt to re-generate the page:
+    // - When a request comes in
+    // - At most once every second
+    revalidate: 1,
+  };
+};
+
+function HelloWorld({ greeting }: Props): JSX.Element {
+  const [greetings, setGreetings] = React.useState([greeting]);
+
+  const getMoreGreetings = async () => {
+    const greetingFromBackend = await fetchExample();
+    setGreetings([
+      ...greetings,
+      `"${greetingFromBackend}" --- ${new Date().toISOString()}`,
+    ]);
+  };
+
+  return (
+    <div style={{ padding: "50px" }}>
+      <button
+        style={{ border: "2px solid black", padding: "5px" }}
+        onClick={getMoreGreetings}
+      >
+        Get greeting from the server
+      </button>
+      <ol style={{ listStyleType: "decimal" }}>
+        {greetings.map((greeting) => (
+          <li key={greeting}>{greeting}</li>
+        ))}
+      </ol>
+    </div>
+  );
+}
+
+export default HelloWorld;

frontend/pages/index.tsx

@@ -1,84 +1,23 @@
 import React from "react";
-import Head from "next/head";
 import { GetStaticProps } from "next";
 import styles from "styles/Home.module.css";
+import { Links } from "components";
+
+// TODO: change
+const API = "https://api.thedogapi.com/v1/breeds?limit=10&page=0";
 
 export const getStaticProps: GetStaticProps = async () => {
-  // TODO: Fetch links here
+  // fetch data here
+  const data = await fetch(API).then((res) => res.json());
 
   return {
-    props: { links: [] }, // will be passed to the page component as props
-    // Next.js will attempt to re-generate the page:
-    // - When a request comes in
-    // - At most once every second
+    props: { links: data }, // will be passed to the page component as props
     revalidate: 1,
   };
 };
 
 const Home: React.FC = ({ links }: any) => {
-  console.log({ links });
-
-  // TODO: Remove starter code
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{" "}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h3>Documentation &rarr;</h3>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h3>Learn &rarr;</h3>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/master/examples"
-            className={styles.card}
-          >
-            <h3>Examples &rarr;</h3>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h3>Deploy &rarr;</h3>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{" "}
-          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
-        </a>
-      </footer>
-    </div>
-  );
+  return <Links links={links} />;
 };
 
 export default Home;

frontend/tailwind.config.js

@@ -12,7 +12,25 @@ module.exports = {
   },
   darkMode: false, // or 'media' or 'class'
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        gray: {
+          450: "#3d3b3c",
+        },
+      },
+      fontSize: {
+        s: ".82rem",
+      },
+    },
+    minWidth: {
+      "9/10": "90%",
+    },
+    maxWidth: {
+      "6/10": "60%",
+    },
+    container: {
+      center: true,
+    },
   },
   variants: {
     extend: {},

frontend/utils/api.ts

@@ -0,0 +1,4 @@
+export async function fetchExample(): Promise<string> {
+  const response = await fetch("/api");
+  return await response.text();
+}

setup.sh

@@ -0,0 +1,42 @@
+#!/usr/bin/env bash
+
+set -e
+
+source ./common.sh
+
+function setup_frontend() {
+  prefix_stdout_stderr "${PURPLE}frontend: ${NC}"
+
+  cd ./frontend
+
+  echo "Installing dependencies..."
+  npm i
+
+  echo "Done!"
+}
+
+function setup_backend() {
+  prefix_stdout_stderr "${CYAN}backend:  ${NC}"
+
+  cd ./backend
+
+  echo "Deleting old virtual environment..."
+  rm -rf ./venv
+
+  echo "Deleting sqlite database..."
+  rm ./links.db || echo "Nothing to delete ¯\_(ツ)_/¯"
+
+  echo "Creating new virtual environment..."
+  python3 -m venv venv
+  source venv/bin/activate
+
+  echo "Installing dependencies..."
+  pip install -r requirements.txt
+
+  echo "Creating a dummy sqlite database at 'backend/links.db'..."
+  python setup_db.py
+
+  echo "Done!"
+}
+
+run_frontend_backend "setup_frontend" "setup_backend"