Refactor bread to use vue.js

9 files changed, 351 insertions, 103 deletions

diff --git a/.gitignore b/.gitignore
index ad46b30..67b12f5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -59,3 +59,5 @@ typings/
 
 # next.js build output
 .next
+
+config.json
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..8d50786
--- /dev/null
+++ b/README.md
@@ -0,0 +1,3 @@
+Configuration:
+- Requires markskitchen user to have access to markskitchen mysql databse
+- Set password on env var 'MARKSKITCHENPWD'
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 19eaf07..114e4d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,16 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@types/geojson": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-1.0.6.tgz",
+      "integrity": "sha512-Xqg/lIZMrUd0VRmSRbCAewtwGZiAk3mEUDvV4op1tGl+LvyPcb/MIOSxTl9z+9+J+R4/vpjiCAT4xeKzH9ji1w=="
+    },
+    "@types/node": {
+      "version": "10.12.18",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.18.tgz",
+      "integrity": "sha512-fh+pAqt4xRzPfqA6eh3Z2y6fyZavRIumvjhaCL753+TVkGKGhpPeyrJG2JftD0T9q4GF00KjefsQ+PQNDdWQaQ=="
+    },
     "accepts": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
@@ -65,6 +75,11 @@
         "tweetnacl": "^0.14.3"
       }
     },
+    "bluebird": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.3.tgz",
+      "integrity": "sha512-/qKPUQlaW1OyR51WeCPBvRnAlnZFUJkCSG5HzGnuIqhgyJtF+T94lFnn33eiazjRm2LAHVy2guNnaq48X9SJuw=="
+    },
     "body-parser": {
       "version": "1.18.3",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz",
@@ -97,6 +112,15 @@
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
     },
+    "cls-bluebird": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cls-bluebird/-/cls-bluebird-2.1.0.tgz",
+      "integrity": "sha1-N+8eCAqP+1XC9BZPU28ZGeeWiu4=",
+      "requires": {
+        "is-bluebird": "^1.0.2",
+        "shimmer": "^1.1.0"
+      }
+    },
     "combined-stream": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.7.tgz",
@@ -151,6 +175,11 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "denque": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/denque/-/denque-1.3.0.tgz",
+      "integrity": "sha512-4SRaSj+PqmrS1soW5/Avd7eJIM2JJIqLLmwhRqIGleZM/8KwZq80njbSS2Iqas+6oARkSkLDHEk4mm78q3JlIg=="
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -161,6 +190,11 @@
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
     },
+    "dottie": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/dottie/-/dottie-2.0.1.tgz",
+      "integrity": "sha512-ch5OQgvGDK2u8pSZeSYAQaV/lczImd7pMJ7BcEPXmnFVjy4yJIzP6CsODJUTH8mg1tyH1Z2abOiuJO3DjZ/GBw=="
+    },
     "ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -286,6 +320,19 @@
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
       "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
     },
+    "generate-function": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
+      "integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
+      "requires": {
+        "is-property": "^1.0.2"
+      }
+    },
+    "generic-pool": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/generic-pool/-/generic-pool-3.5.0.tgz",
+      "integrity": "sha512-dEkxmX+egB2o4NR80c/q+xzLLzLX+k68/K8xv81XprD+Sk7ZtP14VugeCz+fUwv5FzpWq40pPtAkzPRqT8ka9w=="
+    },
     "getpass": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
@@ -337,6 +384,11 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
+    "inflection": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/inflection/-/inflection-1.12.0.tgz",
+      "integrity": "sha1-ogCTVlbW9fa8TcdQLhrstwMihBY="
+    },
     "inherits": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
@@ -347,6 +399,16 @@
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.8.0.tgz",
       "integrity": "sha1-6qM9bd16zo9/b+DJygRA5wZzix4="
     },
+    "is-bluebird": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-bluebird/-/is-bluebird-1.0.2.tgz",
+      "integrity": "sha1-CWQ5Bg9KpBGr7hkUOoTWpVNG1uI="
+    },
+    "is-property": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
+      "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ="
+    },
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -388,6 +450,25 @@
         "verror": "1.10.0"
       }
     },
+    "lodash": {
+      "version": "4.17.11",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
+    },
+    "long": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
+    },
+    "lru-cache": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.3.tgz",
+      "integrity": "sha512-fFEhvcgzuIoJVUF8fYr5KR0YqxD238zgObTps31YdADwPPAp82a4M8TrckkWyx7ekNlf9aBcVn81cFwwXngrJA==",
+      "requires": {
+        "pseudomap": "^1.0.2",
+        "yallist": "^2.1.2"
+      }
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -421,11 +502,64 @@
         "mime-db": "~1.37.0"
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
+    "moment-timezone": {
+      "version": "0.5.23",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.23.tgz",
+      "integrity": "sha512-WHFH85DkCfiNMDX5D3X7hpNH3/PUhjTGcD0U1SgfBGZxJ3qUmJh5FdvaFjcClxOvB3rzdfj4oRffbI38jEnC1w==",
+      "requires": {
+        "moment": ">= 2.9.0"
+      }
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "mysql2": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-1.6.4.tgz",
+      "integrity": "sha512-ZYbYgK06HKfxU45tYYLfwW5gKt8BslfE7FGyULNrf2K2fh+DuEX+e0QKsd2ObpZkMILefaVn8hsakVsTFqravQ==",
+      "requires": {
+        "denque": "1.3.0",
+        "generate-function": "^2.3.1",
+        "iconv-lite": "^0.4.24",
+        "long": "^4.0.0",
+        "lru-cache": "4.1.3",
+        "named-placeholders": "1.1.1",
+        "seq-queue": "0.0.5",
+        "sqlstring": "2.3.1"
+      },
+      "dependencies": {
+        "iconv-lite": {
+          "version": "0.4.24",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3"
+          }
+        }
+      }
+    },
+    "named-placeholders": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/named-placeholders/-/named-placeholders-1.1.1.tgz",
+      "integrity": "sha1-O3oNJiA910s6nfTJz7gnsvuQfmQ=",
+      "requires": {
+        "lru-cache": "2.5.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.5.0.tgz",
+          "integrity": "sha1-2COIrpyWC+y+oMc7uet5tsbOmus="
+        }
+      }
+    },
     "negotiator": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
@@ -468,6 +602,11 @@
         "ipaddr.js": "1.8.0"
       }
     },
+    "pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
+    },
     "psl": {
       "version": "1.1.31",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.1.31.tgz",
@@ -526,6 +665,15 @@
         "uuid": "^3.3.2"
       }
     },
+    "retry-as-promised": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/retry-as-promised/-/retry-as-promised-2.3.2.tgz",
+      "integrity": "sha1-zZdO5P2bX+A8vzGHHuSCIcB3N7c=",
+      "requires": {
+        "bluebird": "^3.4.6",
+        "debug": "^2.6.9"
+      }
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -536,6 +684,11 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "semver": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
+      "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg=="
+    },
     "send": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
@@ -556,6 +709,50 @@
         "statuses": "~1.4.0"
       }
     },
+    "seq-queue": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/seq-queue/-/seq-queue-0.0.5.tgz",
+      "integrity": "sha1-1WgS4cAXpuTnw+Ojeh2m143TyT4="
+    },
+    "sequelize": {
+      "version": "4.42.0",
+      "resolved": "https://registry.npmjs.org/sequelize/-/sequelize-4.42.0.tgz",
+      "integrity": "sha512-qxAYnX4rcv7PbNtEidb56REpxNJCdbN0qyk1jb3+e6sE7OrmS0nYMU+MFVbNTJtZfSpOEEL1TX0TkMw+wzZBxg==",
+      "requires": {
+        "bluebird": "^3.5.0",
+        "cls-bluebird": "^2.1.0",
+        "debug": "^3.1.0",
+        "depd": "^1.1.0",
+        "dottie": "^2.0.0",
+        "generic-pool": "^3.4.0",
+        "inflection": "1.12.0",
+        "lodash": "^4.17.1",
+        "moment": "^2.20.0",
+        "moment-timezone": "^0.5.14",
+        "retry-as-promised": "^2.3.2",
+        "semver": "^5.5.0",
+        "terraformer-wkt-parser": "^1.1.2",
+        "toposort-class": "^1.0.1",
+        "uuid": "^3.2.1",
+        "validator": "^10.4.0",
+        "wkx": "^0.4.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+        }
+      }
+    },
     "serve-static": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
@@ -572,6 +769,16 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
       "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
     },
+    "shimmer": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shimmer/-/shimmer-1.2.1.tgz",
+      "integrity": "sha512-sQTKC1Re/rM6XyFM6fIAGHRPVGvyXfgzIDvzoq608vM+jeyVD0Tu1E6Np0Kc2zAIFWIj963V2800iF/9LPieQw=="
+    },
+    "sqlstring": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.1.tgz",
+      "integrity": "sha1-R1OT/56RR5rqYtyvDKPRSYOn+0A="
+    },
     "sshpk": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.15.2.tgz",
@@ -593,6 +800,28 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
       "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
     },
+    "terraformer": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/terraformer/-/terraformer-1.0.9.tgz",
+      "integrity": "sha512-YlmQ1fsMWTkKGDGibCRWgmLzrpDRUr63Q025LJ/taYQ6j1Yb8q9McKF7NBi6ACAyUXO6F/bl9w6v4MY307y5Ag==",
+      "requires": {
+        "@types/geojson": "^1.0.0"
+      }
+    },
+    "terraformer-wkt-parser": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/terraformer-wkt-parser/-/terraformer-wkt-parser-1.2.0.tgz",
+      "integrity": "sha512-QU3iA54St5lF8Za1jg1oj4NYc8sn5tCZ08aNSWDeGzrsaV48eZk1iAVWasxhNspYBoCqdHuoot1pUTUrE1AJ4w==",
+      "requires": {
+        "@types/geojson": "^1.0.0",
+        "terraformer": "~1.0.5"
+      }
+    },
+    "toposort-class": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toposort-class/-/toposort-class-1.0.1.tgz",
+      "integrity": "sha1-f/0feMi+KMO6Rc1OGj9e4ZO9mYg="
+    },
     "tough-cookie": {
       "version": "2.4.3",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
@@ -654,6 +883,11 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
       "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
     },
+    "validator": {
+      "version": "10.11.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-10.11.0.tgz",
+      "integrity": "sha512-X/p3UZerAIsbBfN/IwahhYaBbY68EN/UQBWHtsbXGT5bfrH/p4NQzUCG1kF/rtKaNpnJ7jAu6NGTdSNtyNIXMw=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -668,6 +902,24 @@
         "core-util-is": "1.0.2",
         "extsprintf": "^1.2.0"
       }
+    },
+    "vue": {
+      "version": "2.5.22",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.22.tgz",
+      "integrity": "sha512-pxY3ZHlXNJMFQbkjEgGVMaMMkSV1ONpz+4qB55kZuJzyJOhn6MSy/YZdzhdnumegNzVTL/Dn3Pp4UrVBYt1j/g=="
+    },
+    "wkx": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/wkx/-/wkx-0.4.6.tgz",
+      "integrity": "sha512-LHxXlzRCYQXA9ZHgs8r7Gafh0gVOE8o3QmudM1PIkOdkXXjW7Thcl+gb2P2dRuKgW8cqkitCRZkkjtmWzpHi7A==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "yallist": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
     }
   }
 }
diff --git a/package.json b/package.json
index 4989791..072b66b 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,9 @@
   "dependencies": {
     "bootstrap": "^4.1.3",
     "express": "^4.16.4",
-    "request": "^2.88.0"
+    "mysql2": "^1.6.4",
+    "request": "^2.88.0",
+    "sequelize": "^4.42.0",
+    "vue": "^2.5.22"
   }
 }
diff --git a/src/css/styles.css b/src/css/styles.css
index 4ac97ca..4b77273 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -24,7 +24,7 @@ img {
 }
 
 .card {
-    margin: 3em;
+    margin: 1em;
     padding: 2%;
     border: 1px solid #aaaaaa;
     /* width: 400px; */
@@ -35,9 +35,7 @@ img {
 .card img {
     width: 100%;
     padding: 2%;
-    /* display: inline; */
-    /* margin-left: auto;
-    margin-right: 3em;    */
+    
 }
 
 .feed {
@@ -86,6 +84,5 @@ img {
 
 .date {
     font-style: italic;
-    margin-left: 2em;
-    margin-top: 1em;
+    margin: 0em;
 }
\ No newline at end of file
diff --git a/src/html/bread.html b/src/html/bread.html
index 15194c5..37abee8 100644
--- a/src/html/bread.html
+++ b/src/html/bread.html
@@ -5,109 +5,36 @@
     <title>Mark's Kitchen - Bread</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
-    <link rel="stylesheet" type="text/css" href="css/styles.css">
+    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
+    <link rel="stylesheet" type="text/css" href="/css/styles.css">
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+    <script>
+        window.onload = function () {
+            fetch(new Request('/posts.json')).then(response => response.json())
+                .then(response => {
+                    var feed = new Vue({
+                        el: '.feed',
+                        data: { posts: response.data }
+                    })
+                });
+        }
+
+    </script>
 </head>
 
 <body>
-    <!-- <div class="container"> -->
     <div>
-        <br>
         <h1>Bread</h1>
         Some highlights (and lowlights) of breadmaking
         <div class="feed">
-            <div class="card">
-                <p class="card-text">A good looking loaf. Made a batch of 3 the next day, which took a toll on my
-                    banneton, leaving a lot of residue.</p>
-                <div class="card-img">
-                    <img src="photo/pretty.jpg">
-                </div>
-                <br>
-                <p class="date">Dec 4, 2018</p>
-            </div>
-            <div class="card">
-                <p class="card-text">Made some pizza crust, it was delicious. The dough was awfully thick, probably
-                    shouldn't have used it all.</p>
-                <div class="card-img">
-                    <img src="photo/pizza1.jpg">
-                    <img src="photo/pizza2.jpg">
-                </div>
-                <br>
-                <p class="date">Nov 21, 2018</p>
-            </div>
-            <div class="card">
-                <p class="card-text">Another nice no-knead recipie</p>
-                <div class="card-img">
-                    <img src="photo/good1.jpg">
-                    <img src="photo/good2.jpg">
-                </div>
-                <br>
-                <p class="date">Nov 16, 2018</p>
-            </div>
-            <div class="card">
-                <p class="card-text">Tried to make something more sandwich-y. 4 hour warm proof with wheat, rye,
-                    and corn flours. A bit dense, but not bad.</p>
-                <div class="card-img">
-                    <img src="photo/wheat.jpg">
-                </div>
-                <br>
-                <p class="date">Sep 30, 2018</p>
-            </div>
-            <div class="card">
-                <p class="card-text">A twist on normal beer bread, using hard cider.</p>
-                <div class="card-img">
-                    <img src="photo/cider.jpg">
-                </div>
-                <br>
-                <p class="date">Sep 30, 2018</p>
-            </div>
-            <div class="card">
-                <p class="card-text">I wanted to try the NY Times no knead recipie. Bread turned out delicious.
-                    Will try to tranfer to a loaf shape next time for slices.</p>
-                <div class="card-img">
-                    <img src="photo/nyt1.jpg">
-                    <img src="photo/nyt2.jpg">
-                </div>
-                <br>
-                <p class="date">Sep 27, 2018</p>
-            </div>
-            <div class="card">
-                <p class="card-text">First time using a banneton, beautiful shape. Tried a different knead style
-                    too. Rye-AP mix</p>
-                <div class="card-img">
-                    <img src="photo/ban1.jpg">
-                    <img src="photo/ban2.jpg">
-                </div>
-                <br>
-                <p class="date">Sep 19, 2018</p>
-            </div>
-            <div class="card">
-                <p class="card-text">Severely messed up the recipie this time. Tried to double to get two loafs,
-                    both turned out flat.</p>
-                <div class="card-img">
-                    <img src="photo/flat1.jpg">
-                    <img src="photo/flat2.jpg">
-                </div>
-                <br>
-                <p class="date">Aug 30, 2018</p>
-            </div>
-            <div class="card">
-                <p class="card-text">Used more white flour this time</p>
-                <div class="card-img">
-                    <img src="photo/white-1.jpg">
-                    <img src="photo/white-2.jpg">
-                </div>
-                <br>
-                <p class="date">Aug 16, 2018</p>
-            </div>
-            <div class="card">
-                <p class="card-text">First sourdough, mainly wheat</p>
+            <div class="card" v-for="post in posts">
+                <p class="card-text">{{ post.description }}</p>
                 <div class="card-img">
-                    <img src="photo/first-1.jpg">
-                    <img src="photo/first-2.jpg">
+                    <span v-for="image in post.images">
+                        <a v-bind:href="image"><img v-bind:src="image"></a>
+                    </span>
                 </div>
-                <br>
-                <p class="date">Aug 9, 2018</p>
+                <p class="date">{{ post.createdAt.substring(0,10) }}</p>
             </div>
         </div>
     </div>
diff --git a/src/index.js b/src/index.js
index 767acb5..1dd00a0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,54 @@
 const server = require('./server');
-server.setUpRoutes();
+const Sequelize = require('sequelize');
+const fs = require('fs');
+const path = require('path');
+
+const dbCreds = JSON.parse(fs.readFileSync(path.join(__dirname, 'config.json'))).database;
+
+const database = new Sequelize(dbCreds.database, dbCreds.user, dbCreds.password, {
+  logging(str) {
+    console.debug(`DB:${str}`);
+  },
+  dialectOptions: {
+    charset: 'utf8mb4',
+    multipleStatements: true,
+  },
+//   host: dbCreds.host,
+  dialect: 'mysql',
+  pool: {
+    max: 5,
+    min: 0,
+    idle: 10000,
+  },
+});
+
+database.authenticate().then(() => {
+  console.debug(`database connection successful: ${dbCreds.database}`);
+}, (e) => console.log(e));
+
+async function sync(alter, force, callback) {
+  await database.sync({ alter, force, logging: console.log });
+}
+
+function setUpModels(){
+    const models = {
+        "posts": database.define('posts', {
+            description: {
+            type: Sequelize.STRING,
+            allowNull: false,
+            },
+            }),
+        "pictures": database.define('pictures', {
+            source: { type: Sequelize.TEXT, allowNull: false},
+          })
+    }
+    models.pictures.belongsTo(models.posts);
+    return models;
+}
+
+const models = setUpModels();
+sync();
+
+server.setUpRoutes(models);
 server.listen();
 
diff --git a/src/photo/back.jpg b/src/photo/back.jpg
new file mode 100644
index 0000000..9e8511e
--- /dev/null
+++ b/src/photo/back.jpg
diff --git a/src/server.js b/src/server.js
index a487af5..c94a91c 100644
--- a/src/server.js
+++ b/src/server.js
@@ -9,7 +9,7 @@ function listen(){
     server.listen(port, () => console.info(`Listening on port ${port}!`));
 }
 
-function setUpRoutes(){
+function setUpRoutes(models){
     server.get('/', (req, res) => res.sendFile(__dirname + "/html/index.html"))
     server.get('/bread', (req, res) => res.sendFile(__dirname + "/html/bread.html"));
     server.get('/essay', (req, res) => res.sendFile(__dirname + "/html/essay.html"));
@@ -18,6 +18,20 @@ function setUpRoutes(){
         request(`http://localhost:8000?${req.url.split("?")[1]}`, function(error, response, body) {
         });
     })
+    server.get('/posts.json', async (req, res, next) =>  {
+        try {
+            var posts = await models.posts.findAll();
+            posts = posts.map(x => x.get({ plain: true }));            
+            for (const post of posts) {
+              const images = await models.pictures.findAll({ attributes: ["source"], where: { postId: post.id } }).map(x => x.source);
+              post.images = images;
+            }
+            res.status(200).send({ success: true, data: posts });
+            next();
+        } catch (e) {
+            res.status(400).send({ success: false, error: e.message });
+        }
+    })
 
 
     server.get('/favicon.ico', (req, res) => res.sendFile(__dirname + "/icon/favicon.ico"))