diff --git a/.eslintrc.js b/.eslintrc.js
index 3f3df4f..a2cb18e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,7 +3,9 @@ module.exports = {
   env: {
     node: true
   },
-  extends: ["plugin:vue/essential", "@vue/prettier"],
+  extends: ["plugin:vue/essential",
+            "plugin:prettier/recommended", //We added this to support prettier in VS Code
+            "@vue/prettier"],
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
diff --git a/.prettierrc.js b/.prettierrc.js
new file mode 100644
index 0000000..9fde8c4
--- /dev/null
+++ b/.prettierrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+    singleQuote: true, // Converts double quote to single
+    semi: false, // Makes sure semicolons aren't added and the ones that are there will be removed
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 10b24d9..0495d17 100644
--- a/README.md
+++ b/README.md
@@ -1,29 +1,61 @@
 # real-world-vue
 
+## Best Practices:
+
+- Views are components but should be used as a page for the router to mount. Really you could rename View directory Pages if you cared.
+- Reusable componets should be located in the components directory.
+- Use Named Routes like `<router-link :to="{ name: 'home' }">Home</router-link>|` so you are changing url paths only in one place (`routes.js`).
+- Use redirects in `routes.js` if your app was in production to prevent issues with external linking to you site. You can use an `alias` property instead, but this could mean in SEO there could be 2 pages with the same content.
+
 ## Project setup
+
 ```
 npm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 npm run serve
 ```
 
 ### Compiles and minifies for production
+
 ```
 npm run build
 ```
 
+The `chunk-vendors.#####.js` file is contains all the dependencies of our app.
+The `app.###.js` is the app file that contains all of the code to mount and render our app.
+
+The `<link href=/js/about.######.js rel=prefetch>` was included in the head of our built index file. the use of the `rel=prefetch` in this tag declaratively lets us specify resources that our pages will need very soon after loading. Therefor the browser should preload early in the lifecycle before the broswer's rendering machinery kicks in. This makes sure that the resource is available earlier and less likely to block the page's first render. See [MDN preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content)
+
+This prefetch occurred because in the router we have a lazy loading declaration.
+
+```
+{
+  path: "/about",
+  name: "about",
+  // route level code-splitting
+  // this generates a separate chunk (about.[hash].js) for this route
+  // which is lazy-loaded when the route is visited.
+  component: () =>
+    import(/* webpackChunkName: "about" */ "./views/About.vue")
+}
+```
+
 ### Run your tests
+
 ```
 npm run test
 ```
 
 ### Lints and fixes files
+
 ```
 npm run lint
 ```
 
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/src/App.vue b/src/App.vue
index 440354e..3866dd2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <div id="nav">
-      <router-link to="/">Home</router-link> |
+      <router-link :to="{ name: 'home' }">Home</router-link>|
       <router-link to="/about">About</router-link>
     </div>
     <router-view />
@@ -10,7 +10,7 @@
 
 <style lang="scss">
 #app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
diff --git a/src/components/EventCard.vue b/src/components/EventCard.vue
new file mode 100644
index 0000000..c115635
--- /dev/null
+++ b/src/components/EventCard.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h1 v-if="quote" @click="logDirp">Event Card</h1>
+    <p>{{ quote }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      quote: 'I am an event property'
+    }
+  },
+  methods: {
+    logDirp() {
+      console.log('Dirp')
+    }
+  }
+}
+</script>
+
+<style></style>
diff --git a/src/main.js b/src/main.js
index 3a47006..bd58e31 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,12 +1,12 @@
-import Vue from "vue";
-import App from "./App.vue";
-import router from "./router";
-import store from "./store";
+import Vue from 'vue'
+import App from './App.vue' //Root component all components stem from
+import router from './router'
+import store from './store'
 
-Vue.config.productionTip = false;
+Vue.config.productionTip = false
 
 new Vue({
-  router,
+  router, // in ES6 this is the same as writing router: router
   store,
   render: h => h(App)
-}).$mount("#app");
+}).$mount('#app')
diff --git a/src/router.js b/src/router.js
index 7b4bb79..6161bd3 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,26 +1,35 @@
-import Vue from "vue";
-import Router from "vue-router";
-import Home from "./views/Home.vue";
+import Vue from 'vue'
+import Router from 'vue-router'
+import Home from './views/Home.vue'
 
-Vue.use(Router);
+Vue.use(Router)
 
 export default new Router({
-  mode: "history",
+  mode: 'history',
   base: process.env.BASE_URL,
   routes: [
     {
-      path: "/",
-      name: "home",
+      path: '/',
+      // This is a named route. We can reference this instead of a static path in our router-links.
+      name: 'home',
       component: Home
     },
     {
-      path: "/about",
-      name: "about",
+      path: '/about-us',
+      name: 'about',
       // route level code-splitting
       // this generates a separate chunk (about.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () =>
-        import(/* webpackChunkName: "about" */ "./views/About.vue")
+        import(/* webpackChunkName: "about" */ './views/About.vue'),
+      // an alias is also a viable option instead of a redirect like below
+      alias: '/about-alias'
+    },
+    {
+      path: '/about',
+      // here we are specifying the named route for the redirect.
+      // If you weren't using Named Routes you could also do `redirects: '/about-us'`
+      redirect: { name: 'about' }
     }
   ]
-});
+})
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 05494f6..ba230b5 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,18 +1,5 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
+    <h1>The homepage</h1>
   </div>
 </template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
-
-export default {
-  name: "home",
-  components: {
-    HelloWorld
-  }
-};
-</script>