Please use one connection method.

); } else if (this.state.formError.incomplete) { formError = ( -

*These fields are required.

); } else if (this.state.formError.emptySubmit) { formError = ( -

Please choose a connection method.

); } const classList = this.props.isOpen - ? `${styles.formvis} ${styles.fadeInScale}` - : `${styles.formvis} ${styles.fadeOutScale}`; + ? `formvis fadeInScale` + : `formvis fadeOutScale`; return ( -

switchQL

{databaseTypes.map((n, i) => { return ( - + -

Connect To Your Database

-            <div className={styles.connect}>Connection String Unavailable?</div>
+            <div className="connect">Connection String Unavailable?</div>
             <textarea
               placeholder="Host Name*"
               name="host"
-              className={styles.question}
+              className="question"
               required
               autoComplete="off"
               type="text"
@@ -169,7 +169,7 @@ export default class Form extends Component {
             <textarea
               placeholder="Port Number*"
               name="port"
-              className={styles.question}
+              className="question"
               required
               autoComplete="off"
               type="text"
@@ -180,7 +180,7 @@ export default class Form extends Component {
             <textarea
               placeholder="User Name*"
               name="user"
-              className={styles.question}
+              className="question"
               required
               autoComplete="off"
               type="text"
@@ -191,7 +191,7 @@ export default class Form extends Component {
             <input
               placeholder="Password*"
               name="password"
-              className={styles.question}
+              className="question"
               required
               autoComplete="off"
               type="password"
@@ -202,7 +202,7 @@ export default class Form extends Component {
             <textarea
               placeholder="Database Name*"
               name="database"
-              className={styles.question}
+              className="question"
               required
               autoComplete="off"
               type="text"
@@ -212,7 +212,7 @@ export default class Form extends Component {
 
             <button
               type="button"
-              className={styles.button}
+              className="button"
               onClick={() => {
                 this.submit();
               }}
@@ -222,7 +222,7 @@ export default class Form extends Component {
 
             <button
               type="button"
-              className={styles.exit}
+              className="exit"
               onClick={() => this.props.onClose()}
             >
               ×
diff --git a/src/client/ZipFolder.jsx b/src/client/ZipFolder.jsx
index 41b8150..4c00c22 100644
--- a/src/client/ZipFolder.jsx
+++ b/src/client/ZipFolder.jsx
@@ -1,11 +1,12 @@
 import React, { Component } from "react";
-import styles from "./styles.csm";
+import "./styles/zip.css";
 
 class ZipFolder extends Component {
   constructor(props) {
     super(props);
 
     this.submit = this.submit.bind(this);
+    this.resetValue = this.resetValue.bind(this);
     this.input = React.createRef();
   }
 
@@ -20,11 +21,19 @@ class ZipFolder extends Component {
     e.stopPropagation();
   }
 
+  /* 
+    Necessary to fix bug where the same folder cannot be selected more 
+    than once in a row.
+  */
+  resetValue(e) {
+    e.target.value = null;
+  }
+
   render() {
     return (
-      <div onChange={this.submit}>
+      <div onChange={this.submit} onClick={this.resetValue}>
         <input
-          className={styles.inputVis}
+          className="inputVis"
           type="file"
           id="input"
           webkitdirectory={1}
@@ -35,9 +44,7 @@ class ZipFolder extends Component {
         <label
           htmlFor="input"
           className={
-            this.props.disabled
-              ? `${styles.bottomButtons} ${styles.btnDisabled}`
-              : styles.bottomButtons
+            this.props.disabled ? `bottomButtons btnDisabled` : "bottomButtons"
           }
         >
           Export Code
diff --git a/src/client/main.jsx b/src/client/main.jsx
index b076a50..95bb9ea 100644
--- a/src/client/main.jsx
+++ b/src/client/main.jsx
@@ -1,11 +1,11 @@
 import { ToastContainer, toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.min.css";
+import "react-toastify/dist/ReactToastify.css";
 import React, { Component } from "react";
 import ReactDOM from "react-dom";
 import Form from "./Form.jsx";
 import ZipFolder from "./ZipFolder.jsx";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
-import styles from "./styles.csm";
+import "./styles/main.css";
 import { ipcRenderer } from "electron";
 import logo from "./img/logo.png";
 import { Loader } from "react-loaders";
@@ -61,6 +61,7 @@ class App extends Component {
         exportDisabled: false,
         formDisabled: false
       });
+      toast.success("Successfully Exported Code");
     });
   }
 
@@ -94,59 +95,57 @@ class App extends Component {
   render() {
     return (
       <div>
-        <div id="body" className={styles.vis}>
+        <div id="body" className="vis">
           <ToastContainer />
 
           <div
             className={
-              this.state.isLoading
-                ? styles.loadWrapper
-                : styles.loadWrapperHidden
+              this.state.isLoading ? "loadWrapper" : "loadWrapperHidden"
             }
           >
             <Loader
               active={this.state.isLoading}
               type="ball-scale-ripple-multiple"
-              className={styles.loader}
+              className="loader"
               color={"#ffc1df"}
             />
           </div>
 
-          <div className={styles.headerFont}>
-            <img src={logo} className={styles.logoMain} />
+          <div className="headerFont">
+            <img src={logo} className="logoMain" />
             switch<b>QL</b>
           </div>
 
           <Tabs
             selectedIndex={this.state.tabIndex}
             onSelect={tabIndex => this.setState({ tabIndex })}
-            selectedTabClassName={styles.active}
+            selectedTabClassName="active"
           >
             <TabList>
               <div>
-                <Tab className={styles.flexTabs}>Type Definitions</Tab>
-                <Tab className={styles.flexTabs}>Client Mutations</Tab>
-                <Tab className={styles.flexTabs}>Client Queries</Tab>
+                <Tab className="flexTabs">Type Definitions</Tab>
+                <Tab className="flexTabs">Client Mutations</Tab>
+                <Tab className="flexTabs">Client Queries</Tab>
               </div>
             </TabList>
 
             <TabPanel>
               <textarea
-                className={styles.areaOne}
+                className="areaOne"
                 value={this.state.schema}
                 readOnly
               />
             </TabPanel>
             <TabPanel>
               <textarea
-                className={styles.areaOne}
+                className="areaOne"
                 value={this.state.mutations}
                 readOnly
               />
             </TabPanel>
             <TabPanel>
               <textarea
-                className={styles.areaOne}
+                className="areaOne"
                 value={this.state.queries}
                 readOnly
               />
@@ -160,7 +159,7 @@ class App extends Component {
 
           <button
             type="button"
-            className={styles.bottomButtons}
+            className="bottomButtons"
             onClick={() => this.showForm()}
             disabled={this.state.formDisabled}
           >
diff --git a/src/client/styles.csm b/src/client/styles.csm
deleted file mode 100644
index 17d2b37..0000000
--- a/src/client/styles.csm
+++ /dev/null
@@ -1,512 +0,0 @@
-html {
-  font-family: "Lora", sans-serif;
-  width: 100%;
-}
-
-.load {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100vw;
-  height: 100vh;
-  background-image: linear-gradient(to bottom right, rgb(19, 24, 31), #050b13);
-  filter: opacity(0.7);
-  z-index: 1;
-}
-
-h1 {
-  color: white;
-  font-size: 28px;
-  margin-bottom: 2.5%;
-}
-
-h5 {
-  color: white;
-}
-
-input,
-span,
-label,
-textarea {
-  display: block;
-  border: none;
-}
-
-textarea:focus,
-input:focus {
-  outline: 0;
-}
-
-input.question,
-textarea.question {
-  font-family: "Raleway", sans-serif;
-  resize: none;
-  height: 18px;
-  padding: 1.5px 7px;
-  font-size: 14px;
-  border-radius: 6px;
-  margin: auto auto 1.5% auto;
-  border: none;
-  width: 67%;
-  background-color: #313a46;
-
-  transition: padding-top 0.2s ease, margin-top 0.2s ease;
-  overflow-x: hidden;
-  color: rgb(255, 255, 255);
-  box-shadow: 2px 2px 2px rgba(12, 12, 12, 0.644) inset;
-  cursor: pointer;
-  transition: 0.2s;
-}
-
-.question:hover {
-  background-color: #3d4958;
-}
-.question:focus {
-  background-color: #3d4958;
-}
-
-.question::-webkit-scrollbar {
-  width: 1em;
-}
-
-.question::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
-}
-
-.question::-webkit-scrollbar-thumb {
-  background-image: linear-gradient(darkgrey, rgb(115, 115, 115));
-  outline: 1px solid slategrey;
-  border-radius: 8px;
-}
-
-.areaOne {
-  resize: none;
-  width: 85%;
-  margin: auto;
-  height: 75vh;
-  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.07);
-  border-color: -moz-use-text-color #ffffff #ffffff -moz-use-text-color;
-  border-image: none;
-  border-radius: 8px;
-  /* background-color: #363a42; */
-  background-color: #2b2f35;
-  font-family: "Inconsolata", monospace;
-  color: rgb(225, 239, 255);
-  font-size: 1em;
-  line-height: 1.4em;
-  box-shadow: -5px 5px 51px rgba(22, 22, 22, 0.541) inset;
-  background-image: url("./img/gql.png");
-  background-repeat: no-repeat;
-  background-position: -10% 130%;
-  background-attachment: fixed;
-  background-size: 85%;
-  padding: 15px 20px;
-  z-index: 1;
-}
-
-.areaOne::-webkit-scrollbar {
-  width: 1em;
-}
-
-.areaOne::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
-}
-
-.areaOne::-webkit-scrollbar-thumb {
-  background-image: linear-gradient(rgb(110, 110, 110), rgb(71, 71, 71));
-  outline: 1px solid slategrey;
-  border-radius: 8px;
-}
-
-.flexTabs {
-  position: relative;
-  float: left;
-  left: 1vw;
-  display: block;
-  list-style: none;
-  margin: -5px 5px 15px 5px;
-  border-radius: 6px;
-  padding: 5px 0px;
-  width: 28.5vw;
-  text-align: center;
-  color: white;
-  background-color: #2b2f35;
-  font-family: "Raleway", sans-serif;
-  font-size: 15px;
-  box-shadow: 5px 5px 5px rgba(22, 22, 22, 0.425);
-  opacity: 0.3;
-  outline: none;
-  transition: 0.3s;
-}
-
-.formvis {
-  border-radius: 10px;
-  background-image: linear-gradient(to bottom right, #353e4b, #0f1b25);
-  height: 520px;
-  width: 300px;
-  position: absolute;
-  left: 50%;
-  margin-left: -150px;
-  top: 50%;
-  margin-top: -260px;
-  text-align: center;
-  align-content: center;
-  box-shadow: 8px 8px 8px rgb(13, 13, 13);
-  z-index: 2;
-}
-
-.exit {
-  position: absolute;
-  top: -45px;
-  right: 15px;
-  font-size: 30px;
-  padding: 0px 0px;
-  outline: none;
-
-  border: none;
-  color: #525e6885;
-  text-align: center;
-  background-color: rgba(0, 0, 0, 0);
-  transition: 0.25s;
-}
-
-.exit:hover {
-  color: #cf4299;
-}
-
-.icon {
-  position: absolute;
-  top: -32px;
-  right: 37px;
-  height: 15px;
-  width: 15px;
-  filter: saturate(0);
-  opacity: 0.5;
-  transition: 0.25s;
-}
-
-.icon:hover {
-  filter: saturate(1);
-  opacity: 1;
-}
-
-.fadeIn {
-  -webkit-animation-duration: 0.25s;
-  animation-duration: 0.25s;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-  -webkit-animation-name: fadeIn;
-  animation-name: fadeIn;
-}
-
-.fadeOut {
-  -webkit-animation-duration: 0.35s;
-  animation-duration: 0.35s;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-  -webkit-animation-name: fadeOut;
-  animation-name: fadeOut;
-}
-
-.fadeInScale {
-  -webkit-animation-duration: 0.25s;
-  animation-duration: 0.25s;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-  -webkit-animation-name: fadeInScale;
-  animation-name: fadeInScale;
-}
-
-.fadeOutScale {
-  -webkit-animation-duration: 0.35s;
-  animation-duration: 0.35s;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-  -webkit-animation-name: fadeOutScale;
-  animation-name: fadeOutScale;
-}
-
-@-webkit-keyframes fadeIn {
-  from {
-    opacity: 0;
-    visibility: hidden;
-  }
-  to {
-    opacity: 1;
-    visibility: visible;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    visibility: hidden;
-  }
-  to {
-    opacity: 1;
-    visibility: visible;
-  }
-}
-
-@-webkit-keyframes fadeOut {
-  from {
-    opacity: 1;
-    visibility: visible;
-  }
-  to {
-    opacity: 0;
-    visibility: hidden;
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-    visibility: visible;
-  }
-  to {
-    opacity: 0;
-    visibility: hidden;
-  }
-}
-
-@-webkit-keyframes fadeInScale {
-  0% {
-    transform: scale(0.95);
-    opacity: 0;
-    visibility: hidden;
-  }
-  99% {
-    transform: scale(1.01);
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-    visibility: visible;
-  }
-}
-
-@keyframes fadeInScale {
-  0% {
-    transform: scale(0.95);
-    opacity: 0;
-    visibility: hidden;
-  }
-  99% {
-    transform: scale(1.01);
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-    visibility: visible;
-  }
-}
-
-@-webkit-keyframes fadeOutScale {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-    visibility: visible;
-  }
-  5% {
-    transform: scale(1.03);
-  }
-  100% {
-    transform: scale(0.9);
-    opacity: 0;
-    visibility: hidden;
-  }
-}
-
-@keyframes fadeOutScale {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-    visibility: visible;
-  }
-  5% {
-    transform: scale(1.03);
-  }
-  100% {
-    transform: scale(0.9);
-    opacity: 0;
-    visibility: hidden;
-  }
-}
-
-.formIn {
-  position: relative;
-  top: 50px;
-  height: 30px;
-  width: 300px;
-}
-
-.vis {
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  width: 100%;
-  height: 100%;
-  background-image: linear-gradient(to bottom right, #1d242e, #050b13);
-}
-
-.button {
-  background-image: linear-gradient(to top left, #2d3b75, #cf4299, #f19858);
-  padding: 10px 42px;
-  border-radius: 6px;
-  margin-top: 20px;
-  font-family: "Raleway", sans-serif;
-  font-size: 15px;
-  border: none;
-  color: rgb(255, 255, 255);
-  box-shadow: 2px 2px 2px rgba(12, 12, 12, 0.644);
-  filter: saturate(60%);
-  opacity: 0.7;
-  transition: 0.3s;
-  cursor: pointer;
-  outline: none;
-}
-
-.button:hover {
-  filter: saturate(110%);
-}
-
-.button:hover {
-  opacity: 1;
-}
-
-.headerFont {
-  margin: 1% 5% -1% 8%;
-  font-size: 60px;
-  font-family: "Poppins", sans-serif;
-  color: white;
-  letter-spacing: 1px;
-  text-shadow: 2px 2px 6px rgb(12, 12, 12);
-}
-
-.logo {
-  margin: -2% auto auto auto;
-  width: 100px;
-}
-
-.logoMain {
-  position: relative;
-  margin: 0 8px -13px -25px;
-  width: 65px;
-}
-
-.connect {
-  margin-top: 15px;
-  margin-bottom: 3px;
-  font-size: 12px;
-  color: rgb(155, 159, 180);
-  margin-left: 15%;
-  text-align: left;
-  font-family: "Raleway", sans-serif;
-}
-
-.warning {
-  margin-top: 15px;
-  margin-bottom: 3px;
-  font-size: 12.5px;
-  color: #fa52b9;
-  /* margin-left: 15%; */
-  text-align: center;
-  font-family: "Raleway", sans-serif;
-}
-
-.welcome {
-  margin-top: -5px;
-  font-size: 30px;
-  font-family: "Poppins", sans-serif;
-  color: white;
-  letter-spacing: 1px;
-  text-shadow: 2px 2px 2px rgba(12, 12, 12, 0.815);
-}
-
-.bottomButtons {
-  position: relative;
-  border-radius: 6px;
-  float: left;
-  margin: 2% 1% auto 1%;
-  padding: 5px 10px;
-  left: 5vw;
-  width: 42vw;
-  font-family: "Raleway", sans-serif;
-  font-size: 15px;
-  background-image: linear-gradient(to top left, #2d3b75, #cf4299, #f19858);
-  color: white;
-  outline: none;
-  border: none;
-  box-shadow: 5px 5px 5px rgb(22, 22, 22);
-  filter: saturate(0%);
-  opacity: 0.4;
-  transition: 0.3s;
-  cursor: pointer;
-  outline: none;
-  text-align: center;
-}
-
-.bottomButtons:hover {
-  filter: saturate(100%);
-  opacity: 1;
-}
-
-.bottomButtons:disabled, 
-.bottomButtons:disabled:hover,
-.btnDisabled  {
-  pointer-events: none;
-  opacity: 0.4;
-}
-
-.inputVis {
-  width: 0.1px;
-  height: 0.1px;
-  opacity: 0;
-  overflow: hidden;
-  position: absolute;
-  z-index: -1;
-}
-
-.active {
-  opacity: 1;
-  transform: scale(1.05);
-}
-
-.loader {
-  max-width: 50%;
-}
-
-.loadWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-  position: absolute;
-}
-
-.loadWrapperHidden {
-  display: none;
-}
-
-:global(.loader-hidden) {
-  display: none;
-}
-
-:global(.loader-active) {
-  display: block;
-}
-
-.radioBtn, .radioBtn input {
-  display: initial;
-  font-size: 0.80em;
-  font-family: "Raleway", sans-serif;
-  color: rgb(155, 159, 180);
-  vertical-align: sub;
-}
-
-.radioWrapper {
-  display: flex;
-  justify-content: space-evenly;
-}
\ No newline at end of file
diff --git a/src/client/styles/form.css b/src/client/styles/form.css
new file mode 100644
index 0000000..8acccc6
--- /dev/null
+++ b/src/client/styles/form.css
@@ -0,0 +1,248 @@
+.warning {
+  margin-top: 15px;
+  margin-bottom: 3px;
+  font-size: 12.5px;
+  color: #fa52b9;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+.formvis {
+  border-radius: 10px;
+  background-image: linear-gradient(to bottom right, #353e4b, #0f1b25);
+  height: 520px;
+  width: 300px;
+  position: absolute;
+  left: 50%;
+  margin-left: -150px;
+  top: 50%;
+  margin-top: -260px;
+  text-align: center;
+  align-content: center;
+  box-shadow: 8px 8px 8px rgb(13, 13, 13);
+  z-index: 2;
+}
+
+.fadeInScale {
+  -webkit-animation-duration: 0.25s;
+  animation-duration: 0.25s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-name: fadeInScale;
+  animation-name: fadeInScale;
+}
+
+@-webkit-keyframes fadeInScale {
+  0% {
+    transform: scale(0.95);
+    opacity: 0;
+    visibility: hidden;
+  }
+  99% {
+    transform: scale(1.01);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+@keyframes fadeInScale {
+  0% {
+    transform: scale(0.95);
+    opacity: 0;
+    visibility: hidden;
+  }
+  99% {
+    transform: scale(1.01);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.fadeOutScale {
+  -webkit-animation-duration: 0.35s;
+  animation-duration: 0.35s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-name: fadeOutScale;
+  animation-name: fadeOutScale;
+}
+
+@-webkit-keyframes fadeOutScale {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+    visibility: visible;
+  }
+  5% {
+    transform: scale(1.03);
+  }
+  100% {
+    transform: scale(0.9);
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+@keyframes fadeOutScale {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+    visibility: visible;
+  }
+  5% {
+    transform: scale(1.03);
+  }
+  100% {
+    transform: scale(0.9);
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+.formIn {
+  position: relative;
+  top: 50px;
+  height: 30px;
+  width: 300px;
+}
+
+.icon {
+  position: absolute;
+  top: -32px;
+  right: 37px;
+  height: 15px;
+  width: 15px;
+  filter: saturate(0);
+  opacity: 0.5;
+  transition: 0.25s;
+}
+
+.icon:hover {
+  filter: saturate(1);
+  opacity: 1;
+}
+
+.logo {
+  margin: -2% auto auto auto;
+  width: 100px;
+}
+
+.welcome {
+  margin-top: -5px;
+  font-size: 30px;
+  font-family: "Poppins", sans-serif;
+  color: white;
+  letter-spacing: 1px;
+  text-shadow: 2px 2px 2px rgba(12, 12, 12, 0.815);
+}
+
+.radioWrapper {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.radioBtn,
+.radioBtn input {
+  display: initial;
+  font-size: 0.8em;
+  font-family: "Raleway", sans-serif;
+  color: rgb(155, 159, 180);
+  vertical-align: sub;
+}
+
+.connect {
+  margin-top: 15px;
+  margin-bottom: 3px;
+  font-size: 12px;
+  color: rgb(155, 159, 180);
+  margin-left: 15%;
+  text-align: left;
+  font-family: "Raleway", sans-serif;
+}
+
+input.question,
+textarea.question {
+  font-family: "Raleway", sans-serif;
+  resize: none;
+  height: 18px;
+  padding: 1.5px 7px;
+  font-size: 14px;
+  border-radius: 6px;
+  margin: auto auto 1.5% auto;
+  border: none;
+  width: 67%;
+  background-color: #313a46;
+  transition: padding-top 0.2s ease, margin-top 0.2s ease;
+  overflow-x: hidden;
+  color: rgb(255, 255, 255);
+  box-shadow: 2px 2px 2px rgba(12, 12, 12, 0.644) inset;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.question:hover {
+  background-color: #3d4958;
+}
+.question:focus {
+  background-color: #3d4958;
+}
+
+.question::-webkit-scrollbar {
+  width: 1em;
+}
+
+.question::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
+}
+
+.question::-webkit-scrollbar-thumb {
+  background-image: linear-gradient(darkgrey, rgb(115, 115, 115));
+  outline: 1px solid slategrey;
+  border-radius: 8px;
+}
+
+.button {
+  background-image: linear-gradient(to top left, #2d3b75, #cf4299, #f19858);
+  padding: 10px 42px;
+  border-radius: 6px;
+  margin-top: 20px;
+  font-family: "Raleway", sans-serif;
+  font-size: 15px;
+  border: none;
+  color: rgb(255, 255, 255);
+  box-shadow: 2px 2px 2px rgba(12, 12, 12, 0.644);
+  filter: saturate(60%);
+  opacity: 0.7;
+  transition: 0.3s;
+  cursor: pointer;
+  outline: none;
+}
+
+.button:hover {
+  filter: saturate(110%);
+  opacity: 1;
+}
+
+.exit {
+  position: absolute;
+  top: -45px;
+  right: 15px;
+  font-size: 30px;
+  padding: 0px 0px;
+  outline: none;
+  border: none;
+  color: #525e6885;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0);
+  transition: 0.25s;
+}
+
+.exit:hover {
+  color: #cf4299;
+}
diff --git a/src/client/styles/main.css b/src/client/styles/main.css
new file mode 100644
index 0000000..f6e8505
--- /dev/null
+++ b/src/client/styles/main.css
@@ -0,0 +1,114 @@
+@import "./shared.css";
+
+.vis {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(to bottom right, #1d242e, #050b13);
+}
+
+.headerFont {
+  margin: 1% 5% -1% 8%;
+  font-size: 60px;
+  font-family: "Poppins", sans-serif;
+  color: white;
+  letter-spacing: 1px;
+  text-shadow: 2px 2px 6px rgb(12, 12, 12);
+}
+
+.logoMain {
+  position: relative;
+  margin: 0 8px -13px -25px;
+  width: 65px;
+}
+
+.flexTabs {
+  position: relative;
+  float: left;
+  left: 1vw;
+  display: block;
+  list-style: none;
+  margin: -5px 5px 15px 5px;
+  border-radius: 6px;
+  padding: 5px 0px;
+  width: 28.5vw;
+  text-align: center;
+  color: white;
+  background-color: #2b2f35;
+  font-family: "Raleway", sans-serif;
+  font-size: 15px;
+  box-shadow: 5px 5px 5px rgba(22, 22, 22, 0.425);
+  opacity: 0.3;
+  outline: none;
+  transition: 0.3s;
+}
+
+.areaOne {
+  resize: none;
+  width: 85%;
+  margin: auto;
+  height: 75vh;
+  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.07);
+  border-color: -moz-use-text-color #ffffff #ffffff -moz-use-text-color;
+  border-image: none;
+  border-radius: 8px;
+  background-color: #2b2f35;
+  font-family: "Inconsolata", monospace;
+  color: rgb(225, 239, 255);
+  font-size: 1em;
+  line-height: 1.4em;
+  box-shadow: -5px 5px 51px rgba(22, 22, 22, 0.541) inset;
+  background-image: url("../img/gql.png");
+  background-repeat: no-repeat;
+  background-position: -10% 130%;
+  background-attachment: fixed;
+  background-size: 85%;
+  padding: 15px 20px;
+  z-index: 1;
+}
+
+.areaOne::-webkit-scrollbar {
+  width: 1em;
+}
+
+.areaOne::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
+}
+
+.areaOne::-webkit-scrollbar-thumb {
+  background-image: linear-gradient(rgb(110, 110, 110), rgb(71, 71, 71));
+  outline: 1px solid slategrey;
+  border-radius: 8px;
+}
+
+.active {
+  opacity: 1;
+  transform: scale(1.05);
+}
+
+.loader {
+  max-width: 50%;
+}
+
+.loadWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+}
+
+.loadWrapperHidden {
+  display: none;
+}
+
+.loader-hidden {
+  display: none;
+}
+
+.loader-active {
+  display: block;
+}
diff --git a/src/client/styles/shared.css b/src/client/styles/shared.css
new file mode 100644
index 0000000..6b403a1
--- /dev/null
+++ b/src/client/styles/shared.css
@@ -0,0 +1,62 @@
+html {
+  font-family: "Lora", sans-serif;
+  width: 100%;
+}
+
+.bottomButtons {
+  position: relative;
+  border-radius: 6px;
+  float: left;
+  margin: 2% 1% auto 1%;
+  padding: 5px 10px;
+  left: 5vw;
+  width: 42vw;
+  font-family: "Raleway", sans-serif;
+  font-size: 15px;
+  background-image: linear-gradient(to top left, #2d3b75, #cf4299, #f19858);
+  color: white;
+  outline: none;
+  border: none;
+  box-shadow: 5px 5px 5px rgb(22, 22, 22);
+  filter: saturate(0%);
+  opacity: 0.4;
+  transition: 0.3s;
+  cursor: pointer;
+  outline: none;
+  text-align: center;
+}
+
+.bottomButtons:hover {
+  filter: saturate(100%);
+  opacity: 1;
+}
+
+.bottomButtons:disabled,
+.bottomButtons:disabled:hover,
+.btnDisabled {
+  pointer-events: none;
+  opacity: 0.4;
+}
+
+h1 {
+  color: white;
+  font-size: 28px;
+  margin-bottom: 2.5%;
+}
+
+h5 {
+  color: white;
+}
+
+input,
+span,
+label,
+textarea {
+  display: block;
+  border: none;
+}
+
+textarea:focus,
+input:focus {
+  outline: 0;
+}
diff --git a/src/client/styles/zip.css b/src/client/styles/zip.css
new file mode 100644
index 0000000..e64d299
--- /dev/null
+++ b/src/client/styles/zip.css
@@ -0,0 +1,10 @@
+@import "./shared.css";
+
+.inputVis {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
diff --git a/src/index.html b/src/index.html
index c93db79..26ce64b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,6 +9,4 @@
 <body>
   <div id="app"></div>
 </body>
-<script src="http://localhost:8080/webpack-dev-server.js"></script>
-<script src="http://localhost:8080/built/bundle.js"></script>
 </html>
\ No newline at end of file
diff --git a/src/main_process.js b/src/main_process.js
index 6ccea14..8b3d507 100644
--- a/src/main_process.js
+++ b/src/main_process.js
@@ -2,30 +2,37 @@ const electron = require("electron");
 const url = require("url");
 const path = require("path");
 const { app, BrowserWindow, Menu } = electron;
+const isDev = require("electron-is-dev");
 
-require('./server/server')
-
+require("./server/server");
 
 let mainWindow;
 
-app.on('ready', function () {
+const uri = isDev
+  ? url.format({
+      pathname: "localhost:3000",
+      protocol: "http:",
+      slashes: true
+    })
+  : url.format({
+      pathname: path.join(__dirname, "../build/index.html"),
+      protocol: "file:",
+      slashes: true
+    });
+
+app.on("ready", function() {
   const { width, height } = electron.screen.getPrimaryDisplay().workAreaSize;
   //create new window
   mainWindow = new BrowserWindow({
     width: width / 2,
     height: height
-    // titleBarStyle: 'customButtonsOnHover', frame: false
   });
+
   //Load HTML into window
-  mainWindow.loadURL(
-    url.format({
-      pathname: path.join(__dirname, "index.html"),
-      protocol: "file:",
-      slashes: true
-    })
-  );
+  mainWindow.loadURL(uri);
+
   //Quit App when closed
-  mainWindow.on('closed', function () {
+  mainWindow.on("closed", function() {
     app.quit();
   });
   //Build menu from template
@@ -34,49 +41,56 @@ app.on('ready', function () {
   Menu.setApplicationMenu(mainMenu);
 });
 
-const mainMenuTemplate = [{
-  label: 'File',
-  submenu: [{
-    label: 'First_thing',
-  },
+const mainMenuTemplate = [
   {
-    label: 'Second'
+    label: "File",
+    submenu: [
+      {
+        label: "First_thing"
+      },
+      {
+        label: "Second"
+      },
+      {
+        label: "Quit",
+        accelerator: process.platform == "darwin" ? "Command+Q" : "Ctrl+Q",
+        click() {
+          app.quit();
+        }
+      }
+    ]
   },
   {
-    label: 'Quit',
-    accelerator: process.platform == 'darwin' ? 'Command+Q' : 'Ctrl+Q',
-    click() {
-      app.quit();
-    }
+    label: "Options",
+    submenu: [
+      { label: "Undo", accelerator: "CmdOrCtrl+Z", selector: "undo:" },
+      { label: "Redo", accelerator: "Shift+CmdOrCtrl+Z", selector: "redo:" },
+      { type: "separator" },
+      { label: "Cut", accelerator: "CmdOrCtrl+X", selector: "cut:" },
+      { label: "Copy", accelerator: "CmdOrCtrl+C", selector: "copy:" },
+      { label: "Paste", accelerator: "CmdOrCtrl+V", selector: "paste:" },
+      {
+        label: "Select All",
+        accelerator: "CmdOrCtrl+A",
+        selector: "selectAll:"
+      }
+    ]
   }
-  ]
-},
-{
-  label: "Options",
-  submenu: [
-    { label: "Undo", accelerator: "CmdOrCtrl+Z", selector: "undo:" },
-    { label: "Redo", accelerator: "Shift+CmdOrCtrl+Z", selector: "redo:" },
-    { type: "separator" },
-    { label: "Cut", accelerator: "CmdOrCtrl+X", selector: "cut:" },
-    { label: "Copy", accelerator: "CmdOrCtrl+C", selector: "copy:" },
-    { label: "Paste", accelerator: "CmdOrCtrl+V", selector: "paste:" },
-    { label: "Select All", accelerator: "CmdOrCtrl+A", selector: "selectAll:" }
-  ]
-}];
+];
 
 //if mac, add empty object to menu
-if (process.platform == 'darwin') {
+if (process.platform == "darwin") {
   mainMenuTemplate.unshift({});
 }
 
 //Add developer tools item if not in prod
-if (process.env.NODE_ENV !== 'production') {
+if (process.env.NODE_ENV !== "production") {
   mainMenuTemplate.push({
     label: "Developer Tools",
     submenu: [
       {
-        label: 'Toggle DevTools',
-        accelerator: process.platform == 'darwin' ? 'Command+I' : 'Ctrl+I',
+        label: "Toggle DevTools",
+        accelerator: process.platform == "darwin" ? "Command+I" : "Ctrl+I",
         click(item, focusedWindow) {
           focusedWindow.toggleDevTools();
         }
diff --git a/src/server/DBMetadata/__snapshots__/pgMetadataProcessor.test.js.snap b/src/server/DBMetadata/__snapshots__/pgMetadataProcessor.test.js.snap
new file mode 100644
index 0000000..4020753
--- /dev/null
+++ b/src/server/DBMetadata/__snapshots__/pgMetadataProcessor.test.js.snap
@@ -0,0 +1,418 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Format Metadata Tests Should match the snapshot 1`] = `
+Object {
+  "tables": Object {
+    "0": ProcessedTable {
+      "fields": Array [
+        ProcessedField {
+          "fieldNum": 0,
+          "inRelationship": true,
+          "name": "id",
+          "primaryKey": true,
+          "relation": Object {
+            "2.5": Object {
+              "refField": 5,
+              "refTable": 2,
+              "refType": "one to many",
+            },
+          },
+          "required": true,
+          "tableNum": 0,
+          "type": "ID",
+          "unique": false,
+        },
+        ProcessedField {
+          "fieldNum": 1,
+          "inRelationship": false,
+          "name": "name",
+          "primaryKey": false,
+          "relation": Object {},
+          "required": false,
+          "tableNum": 0,
+          "type": "String",
+          "unique": false,
+        },
+      ],
+      "name": "author",
+    },
+    "1": ProcessedTable {
+      "fields": Array [
+        ProcessedField {
+          "fieldNum": 0,
+          "inRelationship": false,
+          "name": "id",
+          "primaryKey": true,
+          "relation": Object {},
+          "required": true,
+          "tableNum": 1,
+          "type": "ID",
+          "unique": false,
+        },
+        ProcessedField {
+          "fieldNum": 1,
+          "inRelationship": true,
+          "name": "book_id",
+          "primaryKey": false,
+          "relation": Object {
+            "2.1": Object {
+              "refField": 1,
+              "refTable": 2,
+              "refType": "many to one",
+            },
+          },
+          "required": false,
+          "tableNum": 1,
+          "type": "ID",
+          "unique": false,
+        },
+        ProcessedField {
+          "fieldNum": 2,
+          "inRelationship": true,
+          "name": "order_id",
+          "primaryKey": false,
+          "relation": Object {
+            "4.0": Object {
+              "refField": 0,
+              "refTable": 4,
+              "refType": "many to one",
+            },
+          },
+          "required": false,
+          "tableNum": 1,
+          "type": "ID",
+          "unique": false,
+        },
+      ],
+      "name": "book_order",
+    },
+    "2": ProcessedTable {
+      "fields": Array [
+        ProcessedField {
+          "fieldNum": 0,
+          "inRelationship": true,
+          "name": "genre_id",
+          "primaryKey": false,
+          "relation": Object {
+            "3.0": Object {
+              "refField": 0,
+              "refTable": 3,
+              "refType": "many to one",
+            },
+          },
+          "required": false,
+          "tableNum": 2,
+          "type": "ID",
+          "unique": false,
+        },
+        ProcessedField {
+          "fieldNum": 1,
+          "inRelationship": true,
+          "name": "id",
+          "primaryKey": true,
+          "relation": Object {
+            "1.1": Object {
+              "refField": 1,
+              "refTable": 1,
+              "refType": "one to many",
+            },
+          },
+          "required": true,
+          "tableNum": 2,
+          "type": "ID",
+          "unique": false,
+        },
+        ProcessedField {
+          "fieldNum": 2,
+          "inRelationship": false,
+          "name": "test",
+          "primaryKey": false,
+          "relation": Object {},
+          "required": false,
+          "tableNum": 2,
+          "type": "Float",
+          "unique": false,
+        },
+        ProcessedField {
+          "fieldNum": 3,
+          "inRelationship": false,
+          "name": "name",
+          "primaryKey": false,
+          "relation": Object {},
+          "required": false,
+          "tableNum": 2,
+          "type": "String",
+          "unique": false,
+        },
+        ProcessedField {
+          "fieldNum": 4,
+          "inRelationship": false,
+          "name": "publish_date",
+          "primaryKey": false,
+          "relation": Object {},
+          "required": false,
+          "tableNum": 2,
+          "type": "Date",
+          "unique": false,
+        },
+        ProcessedField {
+          "fieldNum": 5,
+          "inRelationship": true,
+          "name": "author_id",
+          "primaryKey": false,
+          "relation": Object {
+            "0.0": Object {
+              "refField": 0,
+              "refTable": 0,
+              "refType": "many to one",
+            },
+          },
+          "required": false,
+          "tableNum": 2,
+          "type": "ID",
+          "unique": false,
+        },
+      ],
+      "name": "books",
+    },
+    "3": ProcessedTable {
+      "fields": Array [
+        ProcessedField {
+          "fieldNum": 0,
+          "inRelationship": true,
+          "name": "id",
+          "primaryKey": true,
+          "relation": Object {
+            "2.0": Object {
+              "refField": 0,
+              "refTable": 2,
+              "refType": "one to many",
+            },
+          },
+          "required": true,
+          "tableNum": 3,
+          "type": "ID",
+          "unique": false,
+        },
+        ProcessedField {
+          "fieldNum": 1,
+          "inRelationship": false,
+          "name": "name",
+          "primaryKey": false,
+          "relation": Object {},
+          "required": false,
+          "tableNum": 3,
+          "type": "String",
+          "unique": false,
+        },
+      ],
+      "name": "genre",
+    },
+    "4": ProcessedTable {
+      "fields": Array [
+        ProcessedField {
+          "fieldNum": 0,
+          "inRelationship": true,
+          "name": "id",
+          "primaryKey": true,
+          "relation": Object {
+            "1.2": Object {
+              "refField": 2,
+              "refTable": 1,
+              "refType": "one to many",
+            },
+          },
+          "required": true,
+          "tableNum": 4,
+          "type": "ID",
+          "unique": false,
+        },
+        ProcessedField {
+          "fieldNum": 1,
+          "inRelationship": false,
+          "name": "created_at",
+          "primaryKey": false,
+          "relation": Object {},
+          "required": false,
+          "tableNum": 4,
+          "type": "Date",
+          "unique": false,
+        },
+        ProcessedField {
+          "fieldNum": 2,
+          "inRelationship": true,
+          "name": "user_id",
+          "primaryKey": false,
+          "relation": Object {
+            "7.0": Object {
+              "refField": 0,
+              "refTable": 7,
+              "refType": "many to one",
+            },
+          },
+          "required": false,
+          "tableNum": 4,
+          "type": "ID",
+          "unique": false,
+        },
+        ProcessedField {
+          "fieldNum": 3,
+          "inRelationship": true,
+          "name": "status_id",
+          "primaryKey": false,
+          "relation": Object {
+            "6.0": Object {
+              "refField": 0,
+              "refTable": 6,
+              "refType": "many to one",
+            },
+          },
+          "required": false,
+          "tableNum": 4,
+          "type": "ID",
+          "unique": false,
+        },
+        ProcessedField {
+          "fieldNum": 4,
+          "inRelationship": true,
+          "name": "shipping_id",
+          "primaryKey": false,
+          "relation": Object {
+            "5.0": Object {
+              "refField": 0,
+              "refTable": 5,
+              "refType": "many to one",
+            },
+          },
+          "required": false,
+          "tableNum": 4,
+          "type": "ID",
+          "unique": false,
+        },
+      ],
+      "name": "order",
+    },
+    "5": ProcessedTable {
+      "fields": Array [
+        ProcessedField {
+          "fieldNum": 0,
+          "inRelationship": true,
+          "name": "id",
+          "primaryKey": true,
+          "relation": Object {
+            "4.4": Object {
+              "refField": 4,
+              "refTable": 4,
+              "refType": "one to many",
+            },
+          },
+          "required": true,
+          "tableNum": 5,
+          "type": "ID",
+          "unique": false,
+        },
+        ProcessedField {
+          "fieldNum": 1,
+          "inRelationship": false,
+          "name": "method",
+          "primaryKey": false,
+          "relation": Object {},
+          "required": false,
+          "tableNum": 5,
+          "type": "String",
+          "unique": false,
+        },
+      ],
+      "name": "shipping_method",
+    },
+    "6": ProcessedTable {
+      "fields": Array [
+        ProcessedField {
+          "fieldNum": 0,
+          "inRelationship": true,
+          "name": "id",
+          "primaryKey": true,
+          "relation": Object {
+            "4.3": Object {
+              "refField": 3,
+              "refTable": 4,
+              "refType": "one to many",
+            },
+          },
+          "required": true,
+          "tableNum": 6,
+          "type": "ID",
+          "unique": false,
+        },
+        ProcessedField {
+          "fieldNum": 1,
+          "inRelationship": false,
+          "name": "code",
+          "primaryKey": false,
+          "relation": Object {},
+          "required": false,
+          "tableNum": 6,
+          "type": "String",
+          "unique": false,
+        },
+      ],
+      "name": "status",
+    },
+    "7": ProcessedTable {
+      "fields": Array [
+        ProcessedField {
+          "fieldNum": 0,
+          "inRelationship": true,
+          "name": "id",
+          "primaryKey": true,
+          "relation": Object {
+            "4.2": Object {
+              "refField": 2,
+              "refTable": 4,
+              "refType": "one to many",
+            },
+          },
+          "required": true,
+          "tableNum": 7,
+          "type": "ID",
+          "unique": false,
+        },
+        ProcessedField {
+          "fieldNum": 1,
+          "inRelationship": false,
+          "name": "phone_number",
+          "primaryKey": false,
+          "relation": Object {},
+          "required": false,
+          "tableNum": 7,
+          "type": "String",
+          "unique": false,
+        },
+        ProcessedField {
+          "fieldNum": 2,
+          "inRelationship": false,
+          "name": "address",
+          "primaryKey": false,
+          "relation": Object {},
+          "required": false,
+          "tableNum": 7,
+          "type": "String",
+          "unique": false,
+        },
+        ProcessedField {
+          "fieldNum": 3,
+          "inRelationship": false,
+          "name": "name",
+          "primaryKey": false,
+          "relation": Object {},
+          "required": true,
+          "tableNum": 7,
+          "type": "String",
+          "unique": false,
+        },
+      ],
+      "name": "user",
+    },
+  },
+}
+`;
diff --git a/src/server/DBMetadata/classes/processedTable.js b/src/server/DBMetadata/classes/processedTable.js
new file mode 100644
index 0000000..9adec43
--- /dev/null
+++ b/src/server/DBMetadata/classes/processedTable.js
@@ -0,0 +1,12 @@
+class ProcessedTable {
+  constructor(name, fields) {
+    this.name = name;
+    this.fields = fields;
+  }
+
+  addField(field) {
+    this.fields.push(field);
+  }
+}
+
+module.exports = ProcessedTable;
diff --git a/src/server/DBMetadata/pgMetadataProcessor.js b/src/server/DBMetadata/pgMetadataProcessor.js
index b3c5d54..2d2fa64 100644
--- a/src/server/DBMetadata/pgMetadataProcessor.js
+++ b/src/server/DBMetadata/pgMetadataProcessor.js
@@ -1,4 +1,5 @@
-const ProcessedField = require("./classes/processedField")
+const ProcessedField = require("./classes/processedField");
+const ProcessedTable = require("./classes/processedTable");
 
 function processMetadata(columnData) {
   if (!columnData || columnData.length === 0)
@@ -10,7 +11,7 @@ function processMetadata(columnData) {
   let tblIdx = 0;
   let fieldIdx = 0;
   let prevTable = columnData[0].table_name;
-  let props = {};
+  let props = [];
 
   let lookupFields = {};
 
@@ -24,19 +25,19 @@ function processMetadata(columnData) {
   columnData.forEach((tblCol, index) => {
     // Previous table evaluation complete, format and assign to it the accumulated field data.
     if (prevTable !== tblCol.table_name) {
-      data.tables[tblIdx] = { type: prevTable, fields: props };
+      data.tables[tblIdx] = new ProcessedTable(prevTable, props);
       lookupFields["INDEX"] = tblIdx;
       lookup[prevTable] = lookupFields;
 
       tblIdx++;
       fieldIdx = 0;
 
-      props = {};
+      props = [];
       lookupFields = {};
     }
 
     if (index === columnData.length - 1) {
-      data.tables[tblIdx] = { type: prevTable, fields: props };
+      data.tables[tblIdx] = new ProcessedTable(prevTable, props);
     }
 
     const processed = new ProcessedField(tblCol, tblIdx, fieldIdx);
@@ -49,7 +50,7 @@ function processMetadata(columnData) {
       processed.addForeignKeyRef(lookup, tblCol, toRef, data);
     }
 
-    props[fieldIdx] = processed;
+    props.push(processed);
     lookupFields[tblCol.column_name] = fieldIdx;
 
     prevTable = tblCol.table_name;
diff --git a/src/server/DBMetadata/pgMetadataProcessor.test.js b/src/server/DBMetadata/pgMetadataProcessor.test.js
index e8230ee..9f612f5 100644
--- a/src/server/DBMetadata/pgMetadataProcessor.test.js
+++ b/src/server/DBMetadata/pgMetadataProcessor.test.js
@@ -26,4 +26,9 @@ describe("Format Metadata Tests", () => {
       "Invalid data format. Column Data must be an array"
     );
   });
+
+  it("Should match the snapshot", () => {
+    const result = processMetadata(retrieved);
+    expect(result).toMatchSnapshot();
+  });
 });
diff --git a/src/server/DBMetadata/pgMetadataRetriever.js b/src/server/DBMetadata/pgMetadataRetriever.js
index 40952ac..c41008a 100644
--- a/src/server/DBMetadata/pgMetadataRetriever.js
+++ b/src/server/DBMetadata/pgMetadataRetriever.js
@@ -1,5 +1,6 @@
 const pgp = require("pg-promise")();
 const crypto = require('crypto');
+const utilty = require('../util');
 
 const poolCache = {};
 
@@ -10,28 +11,6 @@ c.is_nullable,
 c.data_type,
 c.character_maximum_length,
 tc.constraint_type,
-null AS foreign_table_name,
-null AS foreign_column_name
-FROM
-information_schema.tables AS t JOIN information_schema.columns AS c
-  ON t.table_name = c.table_name
-LEFT JOIN information_schema.key_column_usage AS kcu
-  ON t.table_name = kcu.table_name AND c.column_name = kcu.column_name
-LEFT JOIN information_schema.table_constraints AS tc
-  ON kcu.constraint_name = tc.constraint_name
-LEFT JOIN information_schema.constraint_column_usage AS ccu 
-  ON tc.constraint_name = ccu.constraint_name
-WHERE table_type = 'BASE TABLE'
-AND t.table_schema = 'public'
-AND (constraint_type is null OR constraint_type <> 'FOREIGN KEY')
-UNION ALL
-SELECT
-t.table_name,
-c.column_name,
-c.is_nullable,
-c.data_type,
-c.character_maximum_length,
-tc.constraint_type,
 ccu.table_name AS foreign_table_name,
 ccu.column_name AS foreign_column_name
 FROM
@@ -41,17 +20,19 @@ LEFT JOIN information_schema.key_column_usage as kcu
   ON t.table_name = kcu.table_name AND c.column_name = kcu.column_name
 LEFT JOIN information_schema.table_constraints as tc
   ON kcu.constraint_name = tc.constraint_name
-LEFT JOIN information_schema.constraint_column_usage AS ccu
+LEFT JOIN information_schema.constraint_column_usage AS ccu 
   ON tc.constraint_name = ccu.constraint_name
 WHERE table_type = 'BASE TABLE'
 AND t.table_schema = 'public'
-AND constraint_type = 'FOREIGN KEY'
-ORDER BY table_name`;
+AND (constraint_type = 'FOREIGN KEY' or (constraint_type is null OR constraint_type <> 'FOREIGN KEY'))
+ORDER BY t.table_name`;
+
+
 
 async function getSchemaInfoPG(connString) {
   const db = getDbPool(connString);
   try {
-    return metadataInfo = await db.any(metadataQuery);
+    return metadataInfo = await utilty.promiseTimeout(10000, db.any(metadataQuery));
   } catch (err) {
     removeFromCache(connString)
     throw err;
@@ -93,4 +74,4 @@ function buildConnectionString(info) {
 module.exports = {
   getSchemaInfoPG,
   buildConnectionString
-};
+};
\ No newline at end of file
diff --git a/src/server/DBMetadata/sampleFiles/processedMetadata.js b/src/server/DBMetadata/sampleFiles/processedMetadata.js
index 5f19c77..49f2ac3 100644
--- a/src/server/DBMetadata/sampleFiles/processedMetadata.js
+++ b/src/server/DBMetadata/sampleFiles/processedMetadata.js
@@ -1,9 +1,9 @@
 export default {
   tables: {
     "0": {
-      type: "author",
-      fields: {
-        "0": {
+      name: "author",
+      fields: [
+        {
           name: "id",
           type: "ID",
           primaryKey: true,
@@ -16,7 +16,7 @@ export default {
           tableNum: 0,
           fieldNum: 0
         },
-        "1": {
+        {
           name: "name",
           type: "String",
           primaryKey: false,
@@ -27,12 +27,12 @@ export default {
           tableNum: 0,
           fieldNum: 1
         }
-      }
+      ]
     },
     "1": {
-      type: "book_order",
-      fields: {
-        "0": {
+      name: "book_order",
+      fields: [
+        {
           name: "id",
           type: "ID",
           primaryKey: true,
@@ -43,7 +43,7 @@ export default {
           tableNum: 1,
           fieldNum: 0
         },
-        "1": {
+        {
           name: "book_id",
           type: "ID",
           primaryKey: false,
@@ -56,7 +56,7 @@ export default {
           tableNum: 1,
           fieldNum: 1
         },
-        "2": {
+        {
           name: "order_id",
           type: "ID",
           primaryKey: false,
@@ -69,12 +69,12 @@ export default {
           tableNum: 1,
           fieldNum: 2
         }
-      }
+      ]
     },
     "2": {
-      type: "books",
-      fields: {
-        "0": {
+      name: "books",
+      fields: [
+        {
           name: "genre_id",
           type: "ID",
           primaryKey: false,
@@ -87,7 +87,7 @@ export default {
           tableNum: 2,
           fieldNum: 0
         },
-        "1": {
+        {
           name: "id",
           type: "ID",
           primaryKey: true,
@@ -100,7 +100,7 @@ export default {
           tableNum: 2,
           fieldNum: 1
         },
-        "2": {
+        {
           name: "test",
           type: "Float",
           primaryKey: false,
@@ -111,7 +111,7 @@ export default {
           tableNum: 2,
           fieldNum: 2
         },
-        "3": {
+        {
           name: "name",
           type: "String",
           primaryKey: false,
@@ -122,7 +122,7 @@ export default {
           tableNum: 2,
           fieldNum: 3
         },
-        "4": {
+        {
           name: "publish_date",
           type: "Date",
           primaryKey: false,
@@ -133,7 +133,7 @@ export default {
           tableNum: 2,
           fieldNum: 4
         },
-        "5": {
+        {
           name: "author_id",
           type: "ID",
           primaryKey: false,
@@ -146,12 +146,12 @@ export default {
           tableNum: 2,
           fieldNum: 5
         }
-      }
+      ]
     },
     "3": {
-      type: "genre",
-      fields: {
-        "0": {
+      name: "genre",
+      fields: [
+        {
           name: "id",
           type: "ID",
           primaryKey: true,
@@ -164,7 +164,7 @@ export default {
           tableNum: 3,
           fieldNum: 0
         },
-        "1": {
+        {
           name: "name",
           type: "String",
           primaryKey: false,
@@ -175,12 +175,12 @@ export default {
           tableNum: 3,
           fieldNum: 1
         }
-      }
+      ]
     },
     "4": {
-      type: "order",
-      fields: {
-        "0": {
+      name: "order",
+      fields: [
+        {
           name: "id",
           type: "ID",
           primaryKey: true,
@@ -193,7 +193,7 @@ export default {
           tableNum: 4,
           fieldNum: 0
         },
-        "1": {
+        {
           name: "created_at",
           type: "Date",
           primaryKey: false,
@@ -204,7 +204,7 @@ export default {
           tableNum: 4,
           fieldNum: 1
         },
-        "2": {
+        {
           name: "user_id",
           type: "ID",
           primaryKey: false,
@@ -217,7 +217,7 @@ export default {
           tableNum: 4,
           fieldNum: 2
         },
-        "3": {
+        {
           name: "status_id",
           type: "ID",
           primaryKey: false,
@@ -230,7 +230,7 @@ export default {
           tableNum: 4,
           fieldNum: 3
         },
-        "4": {
+        {
           name: "shipping_id",
           type: "ID",
           primaryKey: false,
@@ -243,12 +243,12 @@ export default {
           tableNum: 4,
           fieldNum: 4
         }
-      }
+      ]
     },
     "5": {
-      type: "shipping_method",
-      fields: {
-        "0": {
+      name: "shipping_method",
+      fields: [
+        {
           name: "id",
           type: "ID",
           primaryKey: true,
@@ -261,7 +261,7 @@ export default {
           tableNum: 5,
           fieldNum: 0
         },
-        "1": {
+        {
           name: "method",
           type: "String",
           primaryKey: false,
@@ -272,12 +272,12 @@ export default {
           tableNum: 5,
           fieldNum: 1
         }
-      }
+      ]
     },
     "6": {
-      type: "status",
-      fields: {
-        "0": {
+      name: "status",
+      fields: [
+        {
           name: "id",
           type: "ID",
           primaryKey: true,
@@ -290,7 +290,7 @@ export default {
           tableNum: 6,
           fieldNum: 0
         },
-        "1": {
+        {
           name: "code",
           type: "String",
           primaryKey: false,
@@ -301,12 +301,12 @@ export default {
           tableNum: 6,
           fieldNum: 1
         }
-      }
+      ]
     },
     "7": {
-      type: "user",
-      fields: {
-        "0": {
+      name: "user",
+      fields: [
+        {
           name: "id",
           type: "ID",
           primaryKey: true,
@@ -319,7 +319,7 @@ export default {
           tableNum: 7,
           fieldNum: 0
         },
-        "1": {
+        {
           name: "phone_number",
           type: "String",
           primaryKey: false,
@@ -330,7 +330,7 @@ export default {
           tableNum: 7,
           fieldNum: 1
         },
-        "2": {
+        {
           name: "address",
           type: "String",
           primaryKey: false,
@@ -341,7 +341,7 @@ export default {
           tableNum: 7,
           fieldNum: 2
         },
-        "3": {
+        {
           name: "name",
           type: "String",
           primaryKey: false,
@@ -352,7 +352,7 @@ export default {
           tableNum: 7,
           fieldNum: 3
         }
-      }
+      ]
     }
   }
 };
diff --git a/SwitchQL.zip b/src/server/Generators/__snapshots__/graphQLGenerator.test.js.snap
similarity index 68%
rename from SwitchQL.zip
rename to src/server/Generators/__snapshots__/graphQLGenerator.test.js.snap
index e01badf..e6740b7 100644
Binary files a/SwitchQL.zip and b/src/server/Generators/__snapshots__/graphQLGenerator.test.js.snap differ
diff --git a/src/server/Generators/mutationGenerator.js b/src/server/Generators/classes/mutationBuilder.js
similarity index 50%
rename from src/server/Generators/mutationGenerator.js
rename to src/server/Generators/classes/mutationBuilder.js
index a6fd3ea..1d8bbf1 100644
--- a/src/server/Generators/mutationGenerator.js
+++ b/src/server/Generators/classes/mutationBuilder.js
@@ -1,49 +1,50 @@
-const util = require("../util");
+const util = require("../../util");
 const tab = `  `;
 
-function generateMutations(tables) {
-  if (Object.keys(tables).length === 0) return "";
-
-  let query = "import { gql } from 'apollo-boost';\n\n";
-  const exportNames = [];
+class MutationBuilder {
+  constructor() {
+    this.mutation = `import { gql } from 'apollo-boost';\n\n`;
+    this.exportNames = [];
+  }
 
-  for (const table of Object.values(tables)) {
-    query += buildMutationSignature(table, null, "add");
-    query += buildTypeParams(table, null, "add");
-    query += buildReturnValues(table);
-    exportNames.push(`add${util.toTitleCase(table.type)}Mutation`);
+  addMutation(table) {
+    this.mutation += buildMutationSignature(table, null, "add");
+    this.mutation += buildTypeParams(table, null, "add");
+    this.mutation += buildReturnValues(table);
+    this.exportNames.push(`add${util.toTitleCase(table.name)}Mutation`);
 
-    for (let field of Object.values(table.fields)) {
+    for (let field of table.fields) {
       if (field.primaryKey) {
-        query += buildMutationSignature(table, field, "update");
-        query += buildTypeParams(table, field, "update");
-        query += buildReturnValues(table);
-        exportNames.push(`update${util.toTitleCase(table.type)}Mutation`);
-
-        query += buildMutationSignature(table, field, "delete");
-        query += buildTypeParams(table, field, "delete");
-        query += buildReturnValues(table);
-        exportNames.push(`delete${util.toTitleCase(table.type)}Mutation`);
+        this.mutation += buildMutationSignature(table, field, "update");
+        this.mutation += buildTypeParams(table, field, "update");
+        this.mutation += buildReturnValues(table);
+        this.exportNames.push(`update${util.toTitleCase(table.name)}Mutation`);
+
+        this.mutation += buildMutationSignature(table, field, "delete");
+        this.mutation += buildTypeParams(table, field, "delete");
+        this.mutation += buildReturnValues(table);
+        this.exportNames.push(`delete${util.toTitleCase(table.name)}Mutation`);
       }
     }
+
+    return this;
   }
 
-  let endString = `export {\n`;
-  exportNames.forEach((name, i) => {
-    if (i !== exportNames.length - 1) {
-      endString += `${tab}${name},\n`;
-    } else {
-      endString += `${tab}${name}\n`;
-    }
-  });
+  build() {
+    const endString = this.exportNames.reduce((acc, curr, i) => {
+      return i === this.exportNames.length - 1
+        ? (acc += `${tab}${curr}\n`)
+        : (acc += `${tab}${curr},\n`);
+    }, "export {\n");
 
-  query += `${endString}};`;
-  return query;
+    this.mutation += `${endString}};`;
+    return this.mutation;
+  }
 }
 
 function buildMutationSignature(table, idField, mutationType) {
   let mut = `const ${mutationType}${util.toTitleCase(
-    table.type
+    table.name
   )}Mutation = gql\`\n${tab}mutation(`;
 
   if (mutationType === "delete") {
@@ -53,7 +54,7 @@ function buildMutationSignature(table, idField, mutationType) {
 
   const params = [];
 
-  for (const field of Object.values(table.fields)) {
+  for (const field of table.fields) {
     let param = "";
 
     if (mutationType === "update") {
@@ -75,7 +76,6 @@ function buildMutationSignature(table, idField, mutationType) {
   return mut;
 }
 
-// If the fieldType is Number it has to be converted to Int per the graphql spec
 function checkType(fieldType) {
   if (fieldType === "Number") return "Int";
   else return fieldType;
@@ -87,15 +87,15 @@ function checkRequired(required) {
 }
 
 function buildTypeParams(table, idField, mutationType) {
-  let mut = `${tab}${mutationType}${util.toTitleCase(table.type)}(`;
+  let mut = `${tab}${mutationType}${util.toTitleCase(table.name)}(`;
 
   if (mutationType === "delete") {
-    mut += `$${idField.name}: ${idField.type}) {\n`;
+    mut += `${idField.name}: $${idField.name}) {\n`;
     return mut;
   }
 
   const params = [];
-  for (const field of Object.values(table.fields)) {
+  for (const field of table.fields) {
     let param = "";
 
     if (mutationType === "add" && !field.primaryKey) {
@@ -116,7 +116,7 @@ function buildTypeParams(table, idField, mutationType) {
 function buildReturnValues(table) {
   let mut = "";
 
-  for (const field of Object.values(table.fields)) {
+  for (const field of table.fields) {
     mut += `${tab.repeat(3)}${field.name}\n`;
   }
 
@@ -124,4 +124,4 @@ function buildReturnValues(table) {
   return mut;
 }
 
-module.exports = generateMutations;
+module.exports = MutationBuilder;
diff --git a/src/server/Generators/classes/pgSqlProvider.js b/src/server/Generators/classes/pgSqlProvider.js
new file mode 100644
index 0000000..f743bf5
--- /dev/null
+++ b/src/server/Generators/classes/pgSqlProvider.js
@@ -0,0 +1,86 @@
+const tab = `  `;
+
+class PgSqlProvider {
+  constructor(connString) {
+    this.connString = connString;
+  }
+
+  connection() {
+    let conn = `const pgp = require('pg-promise')();\n`;
+    conn += `const connect = {};\n`;
+    conn += `// WARNING - Properly secure the connection string\n`;
+    conn += `connect.conn = pgp('${this.connString}');\n`;
+
+    return conn;
+  }
+
+  selectWithWhere(table, col, val, returnsMany) {
+    let query = `'SELECT * FROM "${table}" WHERE "${col}" = $1';\n`;
+
+    returnsMany
+      ? (query += `${tab.repeat(4)}return connect.conn.many(sql, ${val})\n`)
+      : (query += `${tab.repeat(4)}return connect.conn.one(sql, ${val})\n`);
+
+    query += addPromiseResolution();
+
+    return query;
+  }
+
+  select(table) {
+    let query = `'SELECT * FROM "${table}"';\n`;
+    query += `${tab.repeat(4)}return connect.conn.many(sql)\n`;
+
+    query += addPromiseResolution();
+
+    return query;
+  }
+
+  insert(table, cols, args) {
+    const normalized = args
+      .split(",")
+      .map(a => a.replace(/[' | { | } | \$]/g, ""));
+
+    const params = normalized.map((val, idx) => `$${idx + 1}`).join(", ");
+
+    let query = `'INSERT INTO "${table}" (${cols}) VALUES (${params}) RETURNING *';\n`;
+    query += `${tab.repeat(4)}return connect.conn.one(sql, [${normalized.join(
+      ", "
+    )}])\n`;
+
+    query += addPromiseResolution();
+
+    return query;
+  }
+
+  update(table, idColumnName) {
+    let query = `\`UPDATE "${table}" SET \${updateValues} WHERE "${idColumnName}" = $1 RETURNING *\`;\n`;
+    query += `${tab.repeat(
+      4
+    )}return connect.conn.one(sql, [id, ...Object.values(rest)])\n`;
+
+    query += addPromiseResolution();
+    return query;
+  }
+
+  delete(table, column) {
+    let query = `'DELETE FROM "${table}" WHERE "${column}" = $1';\n`;
+    query += `${tab.repeat(4)}return connect.conn.one(sql, args.${column})\n`;
+
+    query += addPromiseResolution();
+
+    return query;
+  }
+}
+
+const addPromiseResolution = () => {
+  let str = `${tab.repeat(5)}.then(data => {\n`;
+  str += `${tab.repeat(6)}return data;\n`;
+  str += `${tab.repeat(5)}})\n`;
+  str += `${tab.repeat(5)}.catch(err => {\n`;
+  str += `${tab.repeat(6)}return ('The error is', err);\n`;
+  str += `${tab.repeat(5)}})`;
+
+  return str;
+};
+
+module.exports = PgSqlProvider;
diff --git a/src/server/Generators/classes/queryBuilder.js b/src/server/Generators/classes/queryBuilder.js
new file mode 100644
index 0000000..6f42311
--- /dev/null
+++ b/src/server/Generators/classes/queryBuilder.js
@@ -0,0 +1,61 @@
+const util = require("../../util");
+const tab = `  `;
+
+class QueryBuilder {
+  constructor() {
+    this.query = `import { gql } from 'apollo-boost';\n\n`;
+    this.exportNames = [];
+  }
+
+  addQuery(table) {
+    this.query += buildAllQuery(table);
+    this.exportNames.push(`queryEvery${util.toTitleCase(table.name)}`);
+
+    for (const field of table.fields) {
+      if (field.primaryKey) {
+        this.query += buildQueryById(table, field);
+        this.exportNames.push(`query${util.toTitleCase(table.name)}ById `);
+      }
+    }
+
+    return this;
+  }
+
+  build() {
+    const endString = this.exportNames.reduce((acc, curr, i) => {
+      return i === this.exportNames.length - 1
+        ? (acc += `${tab}${curr}\n`)
+        : (acc += `${tab}${curr},\n`);
+    }, "export {\n");
+
+    this.query += `${endString}};`;
+    return this.query;
+  }
+}
+
+function buildAllQuery(table) {
+  let string = `const queryEvery${util.toTitleCase(table.name)} = gql\`\n`;
+  string += `${tab}{\n`;
+  string += `${tab.repeat(2)}every${util.toTitleCase(table.name)} {\n`;
+
+  for (const field of table.fields) {
+    string += `${tab.repeat(3)}${field.name}\n`;
+  }
+
+  return (string += `${tab.repeat(2)}}\n${tab}}\n\`\n\n`);
+}
+
+function buildQueryById(table, idField) {
+  let query = `const query${util.toTitleCase(table.name)}ById = gql\`\n`;
+  query += `${tab}query($${table.name}: ${idField.type}!) {\n`;
+  query += `${tab.repeat(2)}${table.name}(${idField.name}: $${table.name}) {\n`;
+
+  for (const field of table.fields) {
+    query += `${tab.repeat(3)}${field.name}\n`;
+  }
+
+  query += `${tab.repeat(2)}}\n${tab}}\n\`\n\n`;
+  return query;
+}
+
+module.exports = QueryBuilder;
diff --git a/src/server/Generators/classes/typeBuilder.js b/src/server/Generators/classes/typeBuilder.js
new file mode 100644
index 0000000..82f9f26
--- /dev/null
+++ b/src/server/Generators/classes/typeBuilder.js
@@ -0,0 +1,370 @@
+const util = require("../../util");
+const tab = `  `;
+
+class TypeBuilder {
+  constructor(dbProvider) {
+    this.provider = dbProvider;
+    this.graphqlCode = init(this.provider);
+    this.typeSchemaCode = "";
+    this.rootQueryCode = `const RootQuery = new GraphQLObjectType({\n${tab}name: 'RootQueryType',\n${tab}fields: {\n`;
+    this.mutationCode = `const Mutation = new GraphQLObjectType({\n${tab}name: 'Mutation',\n${tab}fields: {\n`;
+  }
+
+  build() {
+    this.rootQueryCode += `\n${tab}}\n});\n\n`;
+    this.mutationCode += `\n${tab}}\n});\n\n`;
+
+    this.graphqlCode +=
+      this.typeSchemaCode + this.rootQueryCode + this.mutationCode;
+
+    this.graphqlCode += `module.exports = new GraphQLSchema({\n${tab}query: RootQuery,\n${tab}mutation: Mutation\n});`;
+
+    return this.graphqlCode;
+  }
+
+  addGraphqlTypeSchema(table, processedMetadata) {
+    let subQuery = "";
+
+    let typeQuery = `const ${
+      table.name
+    }Type = new GraphQLObjectType({\n${tab}name: '${
+      table.name
+    }',\n${tab}fields: () => ({`;
+
+    let firstLoop = true;
+
+    for (const field of table.fields) {
+      if (!firstLoop) typeQuery += ",";
+
+      // check the field current name and give it a graphQL type
+      typeQuery += `\n${tab.repeat(2)}${
+        field.name
+      }: { type: ${tableDataTypeToGraphqlType(field.type)} }`;
+
+      // later try to maintain the foreign key field to be the primary value?? NO
+      if (field.inRelationship) {
+        subQuery += this.createSubQuery(field, processedMetadata) + ", ";
+      }
+
+      firstLoop = false;
+    }
+    if (subQuery !== "") typeQuery += ",";
+    typeQuery += subQuery.slice(0, -2);
+    typeQuery += `\n${tab}})\n});\n\n`;
+
+    this.typeSchemaCode += typeQuery;
+
+    return this;
+  }
+
+  createSubQuery(column, processedMetadata) {
+    let subQuery = "";
+
+    for (let relatedTableIndex in column.relation) {
+      let relatedTableLookup = relatedTableIndex.split(".");
+
+      const relatedTableName = processedMetadata[relatedTableLookup[0]].name;
+
+      const relatedFieldName =
+        processedMetadata[relatedTableLookup[0]].fields[relatedTableLookup[1]]
+          .name;
+
+      const relatedTableRelationType =
+        column.relation[relatedTableIndex].refType;
+
+      subQuery += `\n${tab.repeat(2)}${createSubQueryName(
+        relatedTableRelationType,
+        relatedTableName
+      )}: {\n${tab.repeat(3)}type: `;
+
+      if (relatedTableRelationType === "one to many") {
+        subQuery += `new GraphQLList(${relatedTableName}Type),`;
+      } else {
+        subQuery += `${relatedTableName}Type,`;
+      }
+      subQuery += `\n${tab.repeat(3)}resolve(parent, args) {\n${tab.repeat(4)}`;
+
+      subQuery += `const sql = ${this.provider.selectWithWhere(
+        relatedTableName,
+        relatedFieldName,
+        `parent.${column.name}`,
+        relatedTableRelationType === "one to many"
+      )}`;
+
+      subQuery += "\n";
+      subQuery += `${tab.repeat(3)}}\n`;
+      subQuery += `${tab.repeat(2)}}`;
+    }
+    return subQuery;
+  }
+
+  addGraphqlRootCode(table) {
+    let rootQuery = "";
+
+    rootQuery += this.createFindAllRootQuery(table);
+
+    // primarykey id is not always the first field in our data
+    for (const field of table.fields) {
+      if (field.primaryKey) {
+        rootQuery += this.createFindByIdQuery(table, field);
+      }
+    }
+
+    this.rootQueryCode += rootQuery;
+    return this;
+  }
+
+  createFindAllRootQuery(table) {
+    let rootQuery = `${tab.repeat(2)}every${util.toTitleCase(
+      table.name
+    )}: {\n${tab.repeat(3)}type: new GraphQLList(${
+      table.name
+    }Type),\n${tab.repeat(3)}resolve() {\n${tab.repeat(4)}`;
+
+    rootQuery += `const sql = ${this.provider.select(table.name)}`;
+
+    return (rootQuery += `\n${tab.repeat(3)}}\n${tab.repeat(2)}}`);
+  }
+
+  createFindByIdQuery(table, idColumn) {
+    let rootQuery = `,\n${tab.repeat(
+      2
+    )}${table.name.toLowerCase()}: {\n${tab.repeat(3)}type: ${
+      table.name
+    }Type,\n${tab.repeat(3)}args: {\n${tab.repeat(4)}${
+      idColumn.name
+    }: { type: ${tableDataTypeToGraphqlType(idColumn.type)} }\n${tab.repeat(
+      3
+    )}},\n${tab.repeat(3)}resolve(parent, args) {\n${tab.repeat(4)}`;
+
+    rootQuery += `const sql = ${this.provider.selectWithWhere(
+      table.name,
+      idColumn.name,
+      `args.${idColumn.name}`,
+      false
+    )}`;
+
+    return (rootQuery += `\n${tab.repeat(3)}}\n${tab.repeat(2)}}`);
+  }
+
+  addGraphqlMutationCode(table) {
+    let mutationQuery = ``;
+    mutationQuery += `${this.addMutation(table)}`;
+    if (table.fields[0]) {
+      mutationQuery += `,\n${this.updateMutation(table)},\n`;
+      mutationQuery += `${this.deleteMutation(table)}`;
+    }
+
+    this.mutationCode += mutationQuery;
+    return this;
+  }
+
+  addMutation(table) {
+    let mutationQuery = `${tab.repeat(2)}add${util.toTitleCase(
+      table.name
+    )}: {\n${tab.repeat(3)}type: ${table.name}Type,\n${tab.repeat(3)}args: {\n`;
+
+    let fieldNames = "";
+    let argNames = "";
+
+    let firstLoop = true;
+
+    for (const field of table.fields) {
+      if (!firstLoop) mutationQuery += ",\n";
+      firstLoop = false;
+
+      // dont need the ID for adding new row because generated in SQL
+      if (!field.primaryKey) {
+        mutationQuery += `${tab.repeat(4)}${field.name}: ${buildMutationArgType(
+          field
+        )}`;
+        fieldNames += field.name + ", ";
+        argNames += "'${args." + field.name + "}', ";
+      } else {
+        firstLoop = true;
+      }
+    }
+
+    fieldNames = fieldNames.slice(0, -2);
+    argNames = argNames.slice(0, -2);
+    mutationQuery += `\n${tab.repeat(3)}},\n${tab.repeat(
+      3
+    )}resolve(parent, args) {\n${tab.repeat(4)}`;
+
+    mutationQuery += `const sql = ${this.provider.insert(
+      table.name,
+      fieldNames,
+      argNames
+    )}`;
+
+    return (mutationQuery += `\n${tab.repeat(3)}}\n${tab.repeat(2)}}`);
+  }
+
+  updateMutation(table) {
+    let idColumnName;
+
+    for (const field of table.fields) {
+      if (field.primaryKey) {
+        idColumnName = field.name;
+      }
+    }
+
+    let mutationQuery = `${tab.repeat(2)}update${util.toTitleCase(
+      table.name
+    )}: {\n${tab.repeat(3)}type: ${table.name}Type,\n${tab.repeat(3)}args: {\n`;
+
+    let firstLoop = true;
+    for (const field of table.fields) {
+      if (!firstLoop) mutationQuery += ",\n";
+      firstLoop = false;
+
+      mutationQuery += `${tab.repeat(4)}${field.name}: ${buildMutationArgType(
+        field
+      )}`;
+    }
+
+    mutationQuery += `\n${tab.repeat(3)}},\n${tab.repeat(
+      3
+    )}resolve(parent, args) {\n`;
+
+    mutationQuery += `${tab.repeat(4)}const { id, ...rest } = args;\n`;
+    mutationQuery += `${tab.repeat(4)}let updateValues = '';\n`;
+    mutationQuery += `${tab.repeat(4)}let idx = 2;\n\n`;
+
+    mutationQuery += `${tab.repeat(4)}for (const prop in rest) {\n`;
+
+    mutationQuery += `${tab.repeat(
+      6
+    )}updateValues += \`\${prop} = \$\${idx} \`\n`;
+    mutationQuery += `${tab.repeat(6)}idx++;\n`;
+
+    mutationQuery += `${tab.repeat(4)}}\n`;
+
+    mutationQuery += `${tab.repeat(4)}const sql = ${this.provider.update(
+      table.name,
+      idColumnName
+    )}`;
+
+    return (mutationQuery += `\n${tab.repeat(3)}}\n${tab.repeat(2)}}`);
+  }
+
+  deleteMutation(table) {
+    let idColumn;
+
+    for (const field of table.fields) {
+      if (field.primaryKey) {
+        idColumn = field;
+      }
+    }
+
+    let mutationQuery = `${tab.repeat(2)}delete${util.toTitleCase(
+      table.name
+    )}: {\n${tab.repeat(3)}type: ${table.name}Type,\n${tab.repeat(
+      3
+    )}args: {\n${tab.repeat(4)}${
+      idColumn.name
+    }: { type: ${tableDataTypeToGraphqlType(idColumn.type)} }\n${tab.repeat(
+      3
+    )}},\n${tab.repeat(3)}resolve(parent, args) {\n`;
+
+    mutationQuery += `${tab.repeat(4)}const sql = ${this.provider.delete(
+      table.name,
+      idColumn.name
+    )}`;
+
+    return (mutationQuery += `\n${tab.repeat(3)}}\n${tab.repeat(2)}}`);
+  }
+
+  addNewLine(codeSegment) {
+    this[codeSegment] += ",\n";
+  }
+}
+
+function createSubQueryName(relationType, relatedTable) {
+  switch (relationType) {
+    case "one to one":
+      return `related${util.toTitleCase(relatedTable)}`;
+
+    case "one to many":
+      return `everyRelated${util.toTitleCase(relatedTable)}`;
+
+    case "many to one":
+      return `related${util.toTitleCase(relatedTable)}`;
+
+    default:
+      return `everyRelated${util.toTitleCase(relatedTable)}`;
+  }
+}
+
+function init(dbProvider) {
+  let str = `const graphql = require('graphql');\nconst graphql_iso_date = require('graphql-iso-date');\n`;
+  str += dbProvider.connection();
+
+  str += `\nconst { 
+  GraphQLObjectType,
+  GraphQLSchema,
+  GraphQLID,
+  GraphQLString, 
+  GraphQLInt, 
+  GraphQLBoolean,
+  GraphQLList,
+  GraphQLFloat,
+  GraphQLNonNull
+} = graphql;
+  \n`;
+
+  str += `const { 
+  GraphQLDate,
+  GraphQLTime,
+  GraphQLDateTime
+} = graphql_iso_date;
+  \n`;
+
+  return str;
+}
+
+function tableDataTypeToGraphqlType(type) {
+  switch (type) {
+    case "ID":
+      return "GraphQLID";
+    case "String":
+      return "GraphQLString";
+    case "Integer":
+      return "GraphQLInt";
+    case "Float":
+      return "GraphQLFloat";
+    case "Boolean":
+      return "GraphQLBoolean";
+    case "Date":
+      return "GraphQLDate";
+    case "Time":
+      return "GraphQLTime";
+    case "DateTime":
+      return "GraphQLDateTime";
+    default:
+      return "GraphQLString";
+  }
+}
+
+function buildMutationArgType(column) {
+  const mutationQuery = `{ type: ${checkifColumnRequired(
+    column.required,
+    "front"
+  )}${tableDataTypeToGraphqlType(column.type)}${checkifColumnRequired(
+    column.required,
+    "back"
+  )} }`;
+  return mutationQuery;
+}
+
+function checkifColumnRequired(required, position) {
+  if (required) {
+    if (position === "front") {
+      return "new GraphQLNonNull(";
+    }
+    return ")";
+  }
+  return "";
+}
+
+module.exports = TypeBuilder;
diff --git a/src/server/Generators/graphQLGenerator.js b/src/server/Generators/graphQLGenerator.js
new file mode 100644
index 0000000..3202c7f
--- /dev/null
+++ b/src/server/Generators/graphQLGenerator.js
@@ -0,0 +1,37 @@
+const TypeBuilder = require("./classes/typeBuilder");
+const MutationBuilder = require("./classes/mutationBuilder");
+const QueryBuilder = require("./classes/queryBuilder");
+
+function generateGraphQL(tables, dbProvider) {
+  if (Object.keys(tables).length == 0)
+    return { types: "", mutations: "", queries: "" };
+
+  const queryBuilder = new QueryBuilder();
+  const typeBuilder = new TypeBuilder(dbProvider);
+  const mutationBuilder = new MutationBuilder();
+
+  let firstLoop = true;
+
+  for (const table of Object.values(tables)) {
+    queryBuilder.addQuery(table);
+    mutationBuilder.addMutation(table);
+
+    typeBuilder.addGraphqlTypeSchema(table, tables);
+
+    if (!firstLoop) typeBuilder.addNewLine("rootQueryCode");
+    typeBuilder.addGraphqlRootCode(table);
+
+    if (!firstLoop) typeBuilder.addNewLine("mutationCode");
+    typeBuilder.addGraphqlMutationCode(table);
+
+    firstLoop = false;
+  }
+
+  return {
+    types: typeBuilder.build(),
+    mutations: mutationBuilder.build(),
+    queries: queryBuilder.build()
+  };
+}
+
+module.exports = generateGraphQL;
diff --git a/src/server/Generators/graphQLGenerator.test.js b/src/server/Generators/graphQLGenerator.test.js
new file mode 100644
index 0000000..3cbb101
--- /dev/null
+++ b/src/server/Generators/graphQLGenerator.test.js
@@ -0,0 +1,60 @@
+import generateGraphQL from "./graphQLGenerator";
+import mutationOutput from "./sampleFiles/mutationOutput";
+import queryOutput from "./sampleFiles/queryOutput";
+import input from "../DBMetadata/sampleFiles/processedMetadata";
+import PgSqlProvider from "./classes/pgSqlProvider";
+
+describe("Mutation Generation Tests", () => {
+  it("Should return an empty string on empty input", () => {
+    const { mutations: result } = generateGraphQL(
+      {},
+      new PgSqlProvider("postgres://test@test.com:5432/test")
+    );
+    expect(result).toBe("");
+  });
+
+  it("Should match the snapshot", () => {
+    const { mutations: result } = generateGraphQL(
+      input.tables,
+      new PgSqlProvider("postgres://test@test.com:5432/test")
+    );
+    expect(result).toMatchSnapshot();
+  });
+});
+
+describe("Query Generation Tests", () => {
+  it("Should correctly generate queries given input file", () => {
+    const { queries: result } = generateGraphQL(
+      input.tables,
+      new PgSqlProvider("postgres://test@test.com:5432/test")
+    );
+    expect(result).toBe(queryOutput);
+  });
+
+  it("Should return an empty string on empty input", () => {
+    const { queries: result } = generateGraphQL(
+      {},
+      new PgSqlProvider("postgres://test@test.com:5432/test")
+    );
+    expect(result).toBe("");
+  });
+
+  it("Should match the snapshot", () => {
+    const { queries: result } = generateGraphQL(
+      input.tables,
+      new PgSqlProvider("postgres://test@test.com:5432/test")
+    );
+    expect(result).toMatchSnapshot();
+  });
+});
+
+describe("Type generation tests", () => {
+  it("Should match the snapshot", () => {
+    const { types: output } = generateGraphQL(
+      input.tables,
+      new PgSqlProvider("postgres://test@test.com:5432/test")
+    );
+
+    expect(output).toMatchSnapshot();
+  });
+});
diff --git a/src/server/Generators/mutationGenerator.test.js b/src/server/Generators/mutationGenerator.test.js
deleted file mode 100644
index 4e648c3..0000000
--- a/src/server/Generators/mutationGenerator.test.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import generateMutations from "./mutationGenerator";
-import output from "./sampleFiles/mutationOutput";
-import input from "../DBMetadata/sampleFiles/processedMetadata";
-
-describe("Mutation Generator Tests", () => {
-  it("Should correctly generate mutations given input file", () => {
-    const result = generateMutations(input.tables);
-    expect(result).toBe(output);
-  });
-
-  it("Should return an empty string on empty input", () => {
-    const result = generateMutations({});
-    expect(result).toBe("");
-  });
-});
diff --git a/src/server/Generators/queryGenerator.js b/src/server/Generators/queryGenerator.js
deleted file mode 100644
index 591cd39..0000000
--- a/src/server/Generators/queryGenerator.js
+++ /dev/null
@@ -1,61 +0,0 @@
-const util = require("../util");
-const tab = `  `;
-
-function generateQueries(tables) {
-  if (Object.keys(tables).length == 0) return "";
-
-  let query = "import { gql } from 'apollo-boost';\n\n";
-  const exportNames = [];
-
-  for (const table of Object.values(tables)) {
-    query += buildAllQuery(table);
-    exportNames.push(`queryEvery${util.toTitleCase(table.type)}`);
-
-    for (let field of Object.values(table.fields)) {
-      if (field.primaryKey) {
-        query += buildQueryById(table, field);
-        exportNames.push(`query${util.toTitleCase(table.type)}ById `);
-      }
-    }
-  }
-
-  let endString = `export {\n`;
-
-  exportNames.forEach((name, i) => {
-    if (i !== exportNames.length - 1) {
-      endString += `${tab}${name},\n`;
-    } else {
-      endString += `${tab}${name}\n`;
-    }
-  });
-
-  query += `${endString}};`;
-  return query;
-}
-
-function buildAllQuery(table) {
-  let string = `const queryEvery${util.toTitleCase(table.type)} = gql\`\n`;
-  string += `${tab}{\n`;
-  string += `${tab.repeat(2)}every${util.toTitleCase(table.type)} {\n`;
-
-  for (const fieldId in table.fields) {
-    string += `${tab.repeat(3)}${table.fields[fieldId].name}\n`;
-  }
-
-  return (string += `${tab.repeat(2)}}\n${tab}}\n\`\n\n`);
-}
-
-function buildQueryById(table, idField) {
-  let query = `const query${util.toTitleCase(table.type)}ById = gql\`\n`;
-  query += `${tab}query($${table.type}: ${idField.type}!) {\n`;
-  query += `${tab.repeat(2)}${table.type}(${idField.name}: $${table.type}) {\n`;
-
-  for (const fieldId in table.fields) {
-    query += `${tab.repeat(3)}${table.fields[fieldId].name}\n`;
-  }
-
-  query += `${tab.repeat(2)}}\n${tab}}\n\`\n\n`;
-  return query;
-}
-
-module.exports = generateQueries;
diff --git a/src/server/Generators/queryGenerator.test.js b/src/server/Generators/queryGenerator.test.js
deleted file mode 100644
index 7830955..0000000
--- a/src/server/Generators/queryGenerator.test.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import generateQueries from "./queryGenerator";
-import output from "./sampleFiles/queryOutput";
-import input from "../DBMetadata/sampleFiles/processedMetadata";
-
-describe("Query Generator Tests", () => {
-  it("Should correctly generate queries given input file", () => {
-    const result = generateQueries(input.tables);
-    expect(result).toBe(output);
-  });
-
-  it("Should return an empty string on empty input", () => {
-    const result = generateQueries({});
-    expect(result).toBe("");
-  });
-});
diff --git a/src/server/Generators/sampleFiles/mutationOutput.js b/src/server/Generators/sampleFiles/mutationOutput.js
index e404af3..823c157 100644
--- a/src/server/Generators/sampleFiles/mutationOutput.js
+++ b/src/server/Generators/sampleFiles/mutationOutput.js
@@ -20,7 +20,7 @@ const updateAuthorMutation = gql\`
 
 const deleteAuthorMutation = gql\`
   mutation($id: ID!) {
-    deleteAuthor($id: ID) {
+    deleteAuthor(id: $id) {
       id
       name
     }
@@ -30,18 +30,18 @@ const deleteAuthorMutation = gql\`
 const addBook_orderMutation = gql\`
   mutation($book_id: ID, $order_id: ID) {
     addBook_order(book_id: $book_id, order_id: $order_id) {
-      id
       book_id
+      id
       order_id
     }
   }
 \`
 
 const updateBook_orderMutation = gql\`
-  mutation($id: ID!, $book_id: ID, $order_id: ID) {
-    updateBook_order(id: $id, book_id: $book_id, order_id: $order_id) {
-      id
+  mutation($book_id: ID, $id: ID!, $order_id: ID) {
+    updateBook_order(book_id: $book_id, id: $id, order_id: $order_id) {
       book_id
+      id
       order_id
     }
   }
@@ -49,49 +49,49 @@ const updateBook_orderMutation = gql\`
 
 const deleteBook_orderMutation = gql\`
   mutation($id: ID!) {
-    deleteBook_order($id: ID) {
-      id
+    deleteBook_order(id: $id) {
       book_id
+      id
       order_id
     }
   }
 \`
 
 const addBooksMutation = gql\`
-  mutation($genre_id: ID, $test: Float, $name: String, $publish_date: Date, $author_id: ID) {
-    addBooks(genre_id: $genre_id, test: $test, name: $name, publish_date: $publish_date, author_id: $author_id) {
+  mutation($author_id: ID, $genre_id: ID, $name: String, $publish_date: Date, $test: Float) {
+    addBooks(author_id: $author_id, genre_id: $genre_id, name: $name, publish_date: $publish_date, test: $test) {
+      author_id
       genre_id
       id
-      test
       name
       publish_date
-      author_id
+      test
     }
   }
 \`
 
 const updateBooksMutation = gql\`
-  mutation($genre_id: ID, $id: ID!, $test: Float, $name: String, $publish_date: Date, $author_id: ID) {
-    updateBooks(genre_id: $genre_id, id: $id, test: $test, name: $name, publish_date: $publish_date, author_id: $author_id) {
+  mutation($author_id: ID, $genre_id: ID, $id: ID!, $name: String, $publish_date: Date, $test: Float) {
+    updateBooks(author_id: $author_id, genre_id: $genre_id, id: $id, name: $name, publish_date: $publish_date, test: $test) {
+      author_id
       genre_id
       id
-      test
       name
       publish_date
-      author_id
+      test
     }
   }
 \`
 
 const deleteBooksMutation = gql\`
   mutation($id: ID!) {
-    deleteBooks($id: ID) {
+    deleteBooks(id: $id) {
+      author_id
       genre_id
       id
-      test
       name
       publish_date
-      author_id
+      test
     }
   }
 \`
@@ -116,7 +116,7 @@ const updateGenreMutation = gql\`
 
 const deleteGenreMutation = gql\`
   mutation($id: ID!) {
-    deleteGenre($id: ID) {
+    deleteGenre(id: $id) {
       id
       name
     }
@@ -124,37 +124,37 @@ const deleteGenreMutation = gql\`
 \`
 
 const addOrderMutation = gql\`
-  mutation($created_at: Date, $user_id: ID, $status_id: ID, $shipping_id: ID) {
-    addOrder(created_at: $created_at, user_id: $user_id, status_id: $status_id, shipping_id: $shipping_id) {
-      id
+  mutation($created_at: Date, $shipping_id: ID, $status_id: ID, $user_id: ID) {
+    addOrder(created_at: $created_at, shipping_id: $shipping_id, status_id: $status_id, user_id: $user_id) {
       created_at
-      user_id
-      status_id
+      id
       shipping_id
+      status_id
+      user_id
     }
   }
 \`
 
 const updateOrderMutation = gql\`
-  mutation($id: ID!, $created_at: Date, $user_id: ID, $status_id: ID, $shipping_id: ID) {
-    updateOrder(id: $id, created_at: $created_at, user_id: $user_id, status_id: $status_id, shipping_id: $shipping_id) {
-      id
+  mutation($created_at: Date, $id: ID!, $shipping_id: ID, $status_id: ID, $user_id: ID) {
+    updateOrder(created_at: $created_at, id: $id, shipping_id: $shipping_id, status_id: $status_id, user_id: $user_id) {
       created_at
-      user_id
-      status_id
+      id
       shipping_id
+      status_id
+      user_id
     }
   }
 \`
 
 const deleteOrderMutation = gql\`
   mutation($id: ID!) {
-    deleteOrder($id: ID) {
-      id
+    deleteOrder(id: $id) {
       created_at
-      user_id
-      status_id
+      id
       shipping_id
+      status_id
+      user_id
     }
   }
 \`
@@ -179,7 +179,7 @@ const updateShipping_methodMutation = gql\`
 
 const deleteShipping_methodMutation = gql\`
   mutation($id: ID!) {
-    deleteShipping_method($id: ID) {
+    deleteShipping_method(id: $id) {
       id
       method
     }
@@ -189,59 +189,59 @@ const deleteShipping_methodMutation = gql\`
 const addStatusMutation = gql\`
   mutation($code: String) {
     addStatus(code: $code) {
-      id
       code
+      id
     }
   }
 \`
 
 const updateStatusMutation = gql\`
-  mutation($id: ID!, $code: String) {
-    updateStatus(id: $id, code: $code) {
-      id
+  mutation($code: String, $id: ID!) {
+    updateStatus(code: $code, id: $id) {
       code
+      id
     }
   }
 \`
 
 const deleteStatusMutation = gql\`
   mutation($id: ID!) {
-    deleteStatus($id: ID) {
-      id
+    deleteStatus(id: $id) {
       code
+      id
     }
   }
 \`
 
 const addUserMutation = gql\`
-  mutation($phone_number: String, $address: String, $name: String!) {
-    addUser(phone_number: $phone_number, address: $address, name: $name) {
-      id
-      phone_number
+  mutation($address: String, $name: String!, $phone_number: String) {
+    addUser(address: $address, name: $name, phone_number: $phone_number) {
       address
+      id
       name
+      phone_number
     }
   }
 \`
 
 const updateUserMutation = gql\`
-  mutation($id: ID!, $phone_number: String, $address: String, $name: String!) {
-    updateUser(id: $id, phone_number: $phone_number, address: $address, name: $name) {
-      id
-      phone_number
+  mutation($address: String, $id: ID!, $name: String!, $phone_number: String) {
+    updateUser(address: $address, id: $id, name: $name, phone_number: $phone_number) {
       address
+      id
       name
+      phone_number
     }
   }
 \`
 
 const deleteUserMutation = gql\`
   mutation($id: ID!) {
-    deleteUser($id: ID) {
-      id
-      phone_number
+    deleteUser(id: $id) {
       address
+      id
       name
+      phone_number
     }
   }
 \`
diff --git a/src/server/Generators/typeGenerator.js b/src/server/Generators/typeGenerator.js
deleted file mode 100644
index c6028c8..0000000
--- a/src/server/Generators/typeGenerator.js
+++ /dev/null
@@ -1,412 +0,0 @@
-const util = require("../util");
-
-const tab = `  `;
-
-function generateGraphqlServer(processedMetadata, dbProvider, connString) {
-  let graphqlCode = `const graphql = require('graphql');\nconst graphql_iso_date = require('graphql-iso-date');\n`;
-
-  if (dbProvider === "PostgreSQL") {
-    graphqlCode += `const pgp = require('pg-promise')();\n`;
-    graphqlCode += `const connect = {};\n`;
-    graphqlCode += `// WARNING - Properly secure the connection string\n`;
-    graphqlCode += `connect.conn = pgp('${connString}');\n`;
-  }
-
-  graphqlCode += `\nconst { 
-  GraphQLObjectType,
-  GraphQLSchema,
-  GraphQLID,
-  GraphQLString, 
-  GraphQLInt, 
-  GraphQLBoolean,
-  GraphQLList,
-  GraphQLFloat,
-  GraphQLNonNull
-} = graphql;
-  \n`;
-
-  graphqlCode += `const { 
-  GraphQLDate,
-  GraphQLTime,
-  GraphQLDateTime
-} = graphql_iso_date;
-  \n`;
-
-  let typeSchemaCode = "",
-    rootQueryCode = `const RootQuery = new GraphQLObjectType({\n${tab}name: 'RootQueryType',\n${tab}fields: {\n`,
-    mutationCode = `const Mutation = new GraphQLObjectType({\n${tab}name: 'Mutation',\n${tab}fields: {\n`;
-
-  let firstLoop = true;
-  for (const table in processedMetadata) {
-    typeSchemaCode += buildGraphqlTypeSchema(
-      processedMetadata[table],
-      processedMetadata,
-      dbProvider
-    );
-
-    if (!firstLoop) rootQueryCode += ",\n";
-    rootQueryCode += buildGraphqlRootCode(processedMetadata[table], dbProvider);
-
-    if (!firstLoop) mutationCode += ",\n";
-    mutationCode += buildGraphqlMutationCode(
-      processedMetadata[table],
-      dbProvider
-    );
-
-    firstLoop = false;
-  }
-
-  rootQueryCode += `\n${tab}}\n});\n\n`;
-  mutationCode += `\n${tab}}\n});\n\n`;
-
-  graphqlCode += typeSchemaCode + rootQueryCode + mutationCode;
-  graphqlCode += `module.exports = new GraphQLSchema({\n${tab}query: RootQuery,\n${tab}mutation: Mutation\n});`;
-  return graphqlCode;
-}
-
-function buildGraphqlTypeSchema(table, processedMetadata, dbProvider) {
-  let subQuery = "";
-  // creating new graphQL object type
-  let tableName = table.type;
-  let typeQuery = `const ${tableName}Type = new GraphQLObjectType({\n${tab}name: '${tableName}',\n${tab}fields: () => ({`;
-
-  let firstLoop = true;
-  let columns = table.fields;
-  // loop through all the columns in the current table
-  for (let column in columns) {
-    if (!firstLoop) typeQuery += ",";
-    // check the field current name and give it a graphQL type
-    typeQuery += `\n${tab}${tab}${
-      columns[column].name
-    }: { type: ${tableDataTypeToGraphqlType(columns[column].type)} }`;
-
-    // later try to maintain the foreign key field to be the primary value?? NO
-    if (columns[column].inRelationship) {
-      subQuery +=
-        createSubQuery(columns[column], processedMetadata, dbProvider) + ", ";
-    }
-
-    firstLoop = false;
-  }
-  if (subQuery !== "") typeQuery += ",";
-  typeQuery += subQuery.slice(0, -2);
-  return (typeQuery += `\n${tab}})\n});\n\n`);
-}
-
-function tableDataTypeToGraphqlType(type) {
-  switch (type) {
-    case "ID":
-      return "GraphQLID";
-    case "String":
-      return "GraphQLString";
-    case "Integer":
-      return "GraphQLInt";
-    case "Float":
-      return "GraphQLFloat";
-    case "Boolean":
-      return "GraphQLBoolean";
-    case "Date":
-      return "GraphQLDate";
-    case "Time":
-      return "GraphQLTime";
-    case "DateTime":
-      return "GraphQLDateTime";
-    default:
-      return "GraphQLString";
-  }
-}
-
-function createSubQuery(column, processedMetadata, dbProvider) {
-  let subQuery = "";
-  for (let relatedTableIndex in column.relation) {
-    let relatedTableLookup = relatedTableIndex.split(".");
-    const relatedTableName = processedMetadata[relatedTableLookup[0]].type;
-    const relatedFieldName =
-      processedMetadata[relatedTableLookup[0]].fields[relatedTableLookup[1]]
-        .name;
-    const relatedTableRelationType = column.relation[relatedTableIndex].refType;
-
-    subQuery += `\n${tab}${tab}${createSubQueryName(
-      relatedTableRelationType,
-      relatedTableName
-    )}: {\n${tab}${tab}${tab}type: `;
-
-    if (
-      relatedTableRelationType === "one to many" ||
-      relatedTableRelationType === "many to many"
-    ) {
-      subQuery += `new GraphQLList(${relatedTableName}Type),`;
-    } else {
-      subQuery += `${relatedTableName}Type,`;
-    }
-    subQuery += `\n${tab}${tab}${tab}resolve(parent, args) {\n${tab}${tab}${tab}${tab}`;
-
-    if (dbProvider === "PostgreSQL") {
-      subQuery += `const sql = \`SELECT * FROM "${relatedTableName}" WHERE `;
-
-      subQuery += `"${relatedFieldName}" = \${parent.${column.name}}\``;
-      if (
-        relatedTableRelationType === "one to many" ||
-        relatedTableRelationType === "many to many"
-      ) {
-        subQuery += `;\n${tab}${tab}${tab}${tab}return connect.conn.many(sql)\n`;
-      } else {
-        subQuery += `;\n${tab}${tab}${tab}${tab}return connect.conn.one(sql)\n`;
-      }
-      subQuery += `${tab}${tab}${tab}${tab}${tab}.then(data => {\n`;
-      subQuery += `${tab}${tab}${tab}${tab}${tab}${tab}return data;\n`;
-      subQuery += `${tab}${tab}${tab}${tab}${tab}})\n`;
-      subQuery += `${tab}${tab}${tab}${tab}${tab}.catch(err => {\n`;
-      subQuery += `${tab}${tab}${tab}${tab}${tab}${tab}return ('The error is', err);\n`;
-      subQuery += `${tab}${tab}${tab}${tab}${tab}})\n`;
-      subQuery += `${tab}${tab}${tab}}\n`;
-      subQuery += `${tab}${tab}}`;
-    }
-  }
-  return subQuery;
-}
-
-function createSubQueryName(relationType, relatedTable) {
-  switch (relationType) {
-    case "one to one":
-      return `related${util.toTitleCase(relatedTable)}`;
-    case "one to many":
-      return `everyRelated${util.toTitleCase(relatedTable)}`;
-    case "many to one":
-      return `related${util.toTitleCase(relatedTable)}`;
-    case "many to many":
-      return `everyRelated${util.toTitleCase(relatedTable)}`;
-    default:
-      return `everyRelated${util.toTitleCase(relatedTable)}`;
-  }
-}
-
-function buildGraphqlRootCode(table, dbProvider) {
-  let rootQuery = "";
-
-  rootQuery += createFindAllRootQuery(table, dbProvider);
-
-  // primarykey id is not always the first field in our data
-  let columns = table.fields;
-  for (const column in columns) {
-    if (columns[column].primaryKey) {
-      rootQuery += createFindByIdQuery(table, columns[column], dbProvider);
-    }
-  }
-
-  return rootQuery;
-}
-
-function createFindAllRootQuery(table, dbProvider) {
-  let tableName = table.type;
-  let rootQuery = `${tab}${tab}every${util.toTitleCase(
-    tableName
-  )}: {\n${tab}${tab}${tab}type: new GraphQLList(${tableName}Type),\n${tab}${tab}${tab}resolve() {\n${tab}${tab}${tab}${tab}`;
-
-  if (dbProvider === "PostgreSQL") {
-    rootQuery += `const sql = \`SELECT * FROM "${tableName}"\``;
-    rootQuery += `;\n${tab}${tab}${tab}${tab}return connect.conn.many(sql)\n`;
-    rootQuery += `${tab}${tab}${tab}${tab}${tab}.then(data => {\n`;
-    rootQuery += `${tab}${tab}${tab}${tab}${tab}${tab}return data;\n`;
-    rootQuery += `${tab}${tab}${tab}${tab}${tab}})\n`;
-    rootQuery += `${tab}${tab}${tab}${tab}${tab}.catch(err => {\n`;
-    rootQuery += `${tab}${tab}${tab}${tab}${tab}${tab}return ('The error is', err)\n`;
-    rootQuery += `${tab}${tab}${tab}${tab}${tab}})`;
-  }
-
-  return (rootQuery += `\n${tab}${tab}${tab}}\n${tab}${tab}}`);
-}
-
-function createFindByIdQuery(table, idColumn, dbProvider) {
-  let tableName = table.type;
-  let rootQuery = `,\n${tab}${tab}${tableName.toLowerCase()}: {\n${tab}${tab}${tab}type: ${tableName}Type,\n${tab}${tab}${tab}args: {\n${tab}${tab}${tab}${tab}${
-    idColumn.name
-  }: { type: ${tableDataTypeToGraphqlType(
-    idColumn.type
-  )} }\n${tab}${tab}${tab}},\n${tab}${tab}${tab}resolve(parent, args) {\n${tab}${tab}${tab}${tab}`;
-
-  if (dbProvider === "PostgreSQL") {
-    rootQuery += `const sql = \`SELECT * FROM "${tableName}" WHERE "${
-      idColumn.name
-    }" = \${args.${idColumn.name}}\`;\n`;
-    rootQuery += `${tab}${tab}${tab}${tab}return connect.conn.one(sql)\n`;
-    rootQuery += `${tab}${tab}${tab}${tab}${tab}.then(data => {\n`;
-    rootQuery += `${tab}${tab}${tab}${tab}${tab}${tab}return data;\n`;
-    rootQuery += `${tab}${tab}${tab}${tab}${tab}})\n`;
-    rootQuery += `${tab}${tab}${tab}${tab}${tab}.catch(err => {\n`;
-    rootQuery += `${tab}${tab}${tab}${tab}${tab}${tab}return ('The error is', err)\n`;
-    rootQuery += `${tab}${tab}${tab}${tab}${tab}})`;
-  }
-
-  return (rootQuery += `\n${tab}${tab}${tab}}\n${tab}${tab}}`);
-}
-
-function buildGraphqlMutationCode(table, dbProvider) {
-  let mutationQuery = ``;
-  mutationQuery += `${addMutation(table, dbProvider)}`;
-  if (table.fields[0]) {
-    mutationQuery += `,\n${updateMutation(table, dbProvider)},\n`;
-    mutationQuery += `${deleteMutation(table, dbProvider)}`;
-  }
-  return mutationQuery;
-}
-
-function addMutation(table, dbProvider) {
-  let tableName = table.type;
-  let mutationQuery = `${tab}${tab}add${util.toTitleCase(
-    tableName
-  )}: {\n${tab}${tab}${tab}type: ${tableName}Type,\n${tab}${tab}${tab}args: {\n`;
-
-  let fieldNames = "";
-  let argNames = "";
-
-  let firstLoop = true;
-  let columns = table.fields;
-  for (const column in columns) {
-    if (!firstLoop) mutationQuery += ",\n";
-    firstLoop = false;
-
-    // dont need the ID for adding new row because generated in SQL
-    if (!columns[column].primaryKey) {
-      mutationQuery += `${tab}${tab}${tab}${tab}${
-        columns[column].name
-      }: ${buildMutationArgType(columns[column])}`;
-      fieldNames += columns[column].name + ", ";
-      argNames += "'${args." + columns[column].name + "}', ";
-    } else {
-      firstLoop = true;
-    }
-  }
-
-  fieldNames = fieldNames.slice(0, -2);
-  argNames = argNames.slice(0, -2);
-  mutationQuery += `\n${tab}${tab}${tab}},\n${tab}${tab}${tab}resolve(parent, args) {\n${tab}${tab}${tab}${tab}`;
-
-  if (dbProvider === "PostgreSQL") {
-    mutationQuery += `const sql = \`INSERT INTO "${tableName}" (${fieldNames}) VALUES (${argNames})\`;\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}return connect.conn.one(sql)\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}.then(data => {\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}${tab}return data;\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}})\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}.catch(err => {\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}${tab}return ('The error is', err);\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}})`;
-  }
-
-  return (mutationQuery += `\n${tab}${tab}${tab}}\n${tab}${tab}}`);
-
-  function buildMutationArgType(column) {
-    const mutationQuery = `{ type: ${checkifColumnRequired(
-      column.required,
-      "front"
-    )}${tableDataTypeToGraphqlType(column.type)}${checkifColumnRequired(
-      column.required,
-      "back"
-    )} }`;
-    return mutationQuery;
-  }
-}
-
-function updateMutation(table, dbProvider) {
-  let tableName = table.type;
-  let idColumnName;
-  let columns = table.fields;
-  for (let column in columns) {
-    if (columns[column].primaryKey) {
-      idColumnName = columns[column].name;
-    }
-  }
-
-  let mutationQuery = `${tab}${tab}update${util.toTitleCase(
-    tableName
-  )}: {\n${tab}${tab}${tab}type: ${tableName}Type,\n${tab}${tab}${tab}args: {\n`;
-
-  let firstLoop = true;
-  for (const column in columns) {
-    if (!firstLoop) mutationQuery += ",\n";
-    firstLoop = false;
-
-    mutationQuery += `${tab}${tab}${tab}${tab}${
-      columns[column].name
-    }: ${buildMutationArgType(columns[column])}`;
-  }
-
-  mutationQuery += `\n${tab}${tab}${tab}},\n${tab}${tab}${tab}resolve(parent, args) {\n`;
-
-  if (dbProvider === "PostgreSQL") {
-    mutationQuery += `${tab}${tab}${tab}${tab}let updateValues = '';\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}for (const prop in args) {\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}if (prop !== "${idColumnName}") {\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}${tab}updateValues += \`\${prop} = '\${args[prop]}' \`\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}}\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}}\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}const sql = \`UPDATE "${tableName}" SET \${updateValues} WHERE "${idColumnName}" = \${args.`;
-    mutationQuery += `${idColumnName}}\`;\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}return connect.conn.one(sql)\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}.then(data => {\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}${tab}return data;\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}})\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}.catch(err => {\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}${tab}return ('The error is', err);\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}})`;
-  }
-
-  return (mutationQuery += `\n${tab}${tab}${tab}}\n${tab}${tab}}`);
-
-  function buildMutationArgType(column) {
-    const mutationQuery = `{ type: ${checkifColumnRequired(
-      column.required,
-      "front"
-    )}${tableDataTypeToGraphqlType(column.type)}${checkifColumnRequired(
-      column.required,
-      "back"
-    )} }`;
-    return mutationQuery;
-  }
-}
-
-function deleteMutation(table, dbProvider) {
-  let tableName = table.type;
-  let idColumn;
-  let columns = table.fields;
-  for (let column in columns) {
-    if (table.fields[column].primaryKey) {
-      idColumn = table.fields[column];
-    }
-  }
-  let mutationQuery = `${tab}${tab}delete${util.toTitleCase(
-    tableName
-  )}: {\n${tab}${tab}${tab}type: ${tableName}Type,\n${tab}${tab}${tab}args: {\n${tab}${tab}${tab}${tab}${
-    idColumn.name
-  }: { type: ${tableDataTypeToGraphqlType(
-    idColumn.type
-  )} }\n${tab}${tab}${tab}},\n${tab}${tab}${tab}resolve(parent, args) {\n`;
-
-  if (dbProvider === "PostgreSQL") {
-    mutationQuery += `${tab}${tab}${tab}${tab}const sql = \`DELETE FROM "${tableName}" WHERE "${
-      idColumn.name
-    }" = \${args.`;
-    mutationQuery += `${idColumn.name}}\`;\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}return connect.conn.one(sql)\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}.then(data => {\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}${tab}return data;\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}})\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}.catch(err => {\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}${tab}return ('The error is', err);\n`;
-    mutationQuery += `${tab}${tab}${tab}${tab}${tab}})`;
-  }
-
-  return (mutationQuery += `\n${tab}${tab}${tab}}\n${tab}${tab}}`);
-}
-
-function checkifColumnRequired(required, position) {
-  if (required) {
-    if (position === "front") {
-      return "new GraphQLNonNull(";
-    }
-    return ")";
-  }
-  return "";
-}
-
-module.exports = generateGraphqlServer;
diff --git a/src/server/server.js b/src/server/server.js
index 65dc0d9..c9a9c85 100644
--- a/src/server/server.js
+++ b/src/server/server.js
@@ -2,13 +2,12 @@ const electron = require("electron");
 const { ipcMain } = electron;
 const dbController = require("./DBMetadata/pgMetadataRetriever");
 const processMetaData = require("./DBMetadata/pgMetadataProcessor");
-const generateGraphqlServer = require("./Generators/typeGenerator");
-const generateMutations = require("./Generators/mutationGenerator");
-const generateQueries = require("./Generators/queryGenerator");
+const generateGraphQL = require("./Generators/graphQLGenerator");
 const fs = require("fs");
 const JSZip = require("jszip");
 const path = require("path");
 const events = require("./events");
+const PgSqlProvider = require("./Generators/classes/pgSqlProvider");
 
 let schemaMetaData;
 let mutationsMetaData;
@@ -21,17 +20,17 @@ ipcMain.on(events.URL, async (event, info) => {
       info.value = dbController.buildConnectionString(info);
     }
 
-    let dbMetaData = await dbController.getSchemaInfoPG(info.value);
-    const formattedMetaData = await processMetaData(dbMetaData);
+    const dbMetaData = await dbController.getSchemaInfoPG(info.value);
+    const formattedMetaData = processMetaData(dbMetaData);
 
-    schemaMetaData = await generateGraphqlServer(
+    ({
+      types: schemaMetaData,
+      mutations: mutationsMetaData,
+      queries: queriesMetaData
+    } = generateGraphQL(
       formattedMetaData.tables,
-      info.type,
-      info.value
-    );
-
-    mutationsMetaData = await generateMutations(formattedMetaData.tables);
-    queriesMetaData = await generateQueries(formattedMetaData.tables);
+      new PgSqlProvider(info.value)
+    ));
 
     const gqlData = {
       schema: schemaMetaData,
diff --git a/src/server/util.js b/src/server/util.js
index 609816b..db6aec1 100644
--- a/src/server/util.js
+++ b/src/server/util.js
@@ -4,6 +4,23 @@ function toTitleCase(str) {
   return transformed;
 }
 
+function promiseTimeout(msDelay, promise) {
+
+  //promise that rejects in <ms> milliseconds
+  let timeout = new Promise((resolve, reject) => {
+    let id = setTimeout(() => {
+      clearTimeout(id)
+      reject(`Timed out in ${msDelay} ms`)
+    }, msDelay)
+  })
+
+  return Promise.race([
+    promise,
+    timeout
+  ])
+}
+
 module.exports = {
-  toTitleCase
+  toTitleCase,
+  promiseTimeout
 };
diff --git a/webpack.config.js b/webpack.config.js
index 2dc307f..09d9c3d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,25 +1,46 @@
 const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { spawn } = require("child_process");
 
-module.exports = {
-  watch: true,
+const SRC_DIR = path.resolve(__dirname, "src");
+
+const OUTPUT_DIR = path.resolve(__dirname, "build");
 
+module.exports = {
   target: "electron-renderer",
 
-  entry: {
-    app: ["webpack/hot/dev-server", "./src/client/main.jsx"]
-  },
+  entry: path.join(SRC_DIR, "/client/main.jsx"),
 
   output: {
-    path: path.join(__dirname, "./public/built"),
-    filename: "bundle.js",
-    publicPath: "http://localhost:8080/built"
+    path: OUTPUT_DIR,
+    filename: "bundle.js"
   },
 
   devServer: {
-    contentBase: "./public",
-    publicPath: "http://localhost:8080/built"
+    contentBase: OUTPUT_DIR,
+    stats: {
+      colors: true,
+      chunks: false,
+      children: false
+    },
+    before() {
+      spawn("electron", [path.join(SRC_DIR, "main_process.js")], {
+        shell: true,
+        env: process.env,
+        stdio: "inherit"
+      })
+        .on("close", code => process.exit(0))
+        .on("error", spawnError => console.error(spawnError));
+    }
   },
 
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: "./src/index.html",
+      inject: "body"
+    })
+  ],
+
   module: {
     rules: [
       {
@@ -30,7 +51,7 @@ module.exports = {
         }
       },
       {
-        test: /\.csm$/,
+        test: /\.(css|scss)$/,
         use: [
           {
             loader: "style-loader"
@@ -38,21 +59,12 @@ module.exports = {
           {
             loader: "css-loader",
             options: {
-              modules: true,
-              importLoaders: 2,
+              modules: false,
+              importLoaders: 1,
               sourceMap: true,
               minimize: true
             }
-          }
-        ]
-      },
-      {
-        test: /\.(css|scss)$/,
-        use: [
-          {
-            loader: "style-loader"
           },
-          { loader: "css-loader" },
           { loader: "sass-loader" }
         ]
       },