diff --git a/tutorials/events-app/auth_config.json b/tutorials/events-app/auth_config.json
new file mode 100644
index 0000000..7b6e7f5
--- /dev/null
+++ b/tutorials/events-app/auth_config.json
@@ -0,0 +1,4 @@
+{
+ "domain": "dev-xu-97g3w.eu.auth0.com",
+ "clientId": "W0Iim8av0OOJXQMfuPiOAjA3fx3ESQoi"
+}
diff --git a/tutorials/events-app/flow.md b/tutorials/events-app/flow.md
new file mode 100644
index 0000000..018818a
--- /dev/null
+++ b/tutorials/events-app/flow.md
@@ -0,0 +1,98 @@
+# Flow + Structure of Vue project
+
+- If components are to be imported elsewhere they should `export default` and set their name to be the name of the html element you want.
+- If components import an element they should `export default` and set a `components` with an array of the components being used in the html.
+
+```
+ import Nav from './components/partials/Nav.vue';
+ export default {
+ name: 'App',
+ components: {
+ Nav
+ }
+ }
+```
+
+## Main Page
+
+### `App.vue`
+
+This is the main entrypoint into the website.
+
+- `template` should inject a `
`
+- insert the `` component
+
+## Navigation
+
+- Create a `VueRouter` in `./router/index.js`
+- Create a `routes` array which takes a dict of each route
+- Route should set three things:
+ - A `path` - this sets the URL path.
+ - A `name` - this is the name to appear in the navbar.
+ - A `component` - this should import the vue component
+
+Example:
+
+```
+ {
+ path: '/event/:id',
+ name: 'eventSingle',
+ component: () => import ('../views/EventSingle.vue')
+ }
+```
+
+### `./router/index.js`
+
+- Import all components
+
+Vue.use(VueRouter)
+
+const routes = [
+ {
+ path: '/',
+ name: 'Home',
+ component: Home
+ },
+ {
+ 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')
+ },
+ {
+ path: '/event/:id',
+ name: 'eventSingle',
+ component: () => import ('../views/EventSingle.vue')
+ }
+]
+
+const router = new VueRouter({
+ mode: 'history',
+ base: process.env.BASE_URL,
+ routes
+})
+
+export default router
+
+
+To do - how to use the cards:
+
+EventCard
+
+- Takes a prop of the data you need
+- Creates a card for a single item
+- Links to a EventSingle using a route parameter
+
+EventSingle
+
+- Hits an API
+- Uses a route parameter to determine which event to show
+- Displays a whole page for a single event
+
+EventsList
+
+- Hits an API for its data
+- Uses a `v-for` to render a EventCard
+- Uses a router-link to link to a EventSingle
diff --git a/tutorials/events-app/notes.md b/tutorials/events-app/notes.md
new file mode 100644
index 0000000..171ceae
--- /dev/null
+++ b/tutorials/events-app/notes.md
@@ -0,0 +1,82 @@
+setting a router param
+
+{
+ path: '/event/:id',
+ name: 'eventSingle',
+ component: () => import ('../views/EventSingle.vue')
+}
+
+reading a router param
+
+created() {
+ const ID = Number(this.$route.params.id);
+ const event = this.events.find(event => event.id === ID);
+ this.event = event;
+}
+
+create something from this router param (Using it)
+
+see above
+
+find in a dict and the syntax of => ===
+
+Use find as a method on an array.
+
+find(something => something.id === ID)
+
+use arrow notation here in order to use the param you define to be used.
+the bit before the arrow notation is a param you want to find (name is arbitrary it will resolve to an object)
+the bit after the arrow allows you to use the name you want to be iterated/used. this must resolve to a boolean (i.e === as a coniditional)
+think of the arrow notation as a "where" clause (find something where something===True/False)
+
+setting a param based off this
+
+in a hook you can set the value of your find and bind it to something
+this.event = event;
+
+make sure to create it in data too
+
+
+
+using class bindings (setting a class of an element dynamically)
+link to https://vuejs.org/v2/guide/class-and-style.html
+
+
+v-binds (v-bind: and just :)
+
+using v-for, what it does (renders the thing being v-for'd for each thing in it)
+how to set an html attribute from this (using v-bind:attribute e.g v-bind:src)
+
+