adding latest tutorials

2020-02-26 01:10:16 +00:00
parent 8b1d7f6f45
commit 4f666020c1
26 changed files with 20725 additions and 29 deletions
--- a/fastapiusers/docker-run
+++ b/fastapiusers/docker-run
@@ -1 +1,10 @@
 docker run -d --name mongo-fastapiusers -e MONGO_INITDB_ROOT_USERNAME=root -e MONGO_INITDB_ROOT_PASSWORD=root -e MONGO_INITDB_DATABASE=fastapi -v /Users/dtomlinson/git-repos/web-dev/fastapiusers/mongo/data/db:/data/db mongo:4.2.3
+
+docker run -d --name mongo-fastapiusers -p 27017:27017 -e MONGO_INITDB_DATABASE=fastapi -v /Users/dtomlinson/git-repos/web-dev/fastapiusers/mongo/data/db:/data/db mongo:4.2.3
+
+
+to do
+
+create a basic template that logs in from a view
+should display the username
+use a submit button, see what the cookie is and log out
--- a/fastapiusers/fastapiusers/front.py
+++ b/fastapiusers/fastapiusers/front.py
@@ -0,0 +1,25 @@
+from starlette.applications import Starlette
+from starlette.templating import Jinja2Templates
+from starlette.routing import Route
+from pprint import pprint
+
+
+templates = Jinja2Templates(directory='templates')
+
+
+async def home(request):
+    pprint(request)
+    pprint(dir(request))
+    pprint(request.user)
+    return templates.TemplateResponse(
+        'index.html',
+        {
+            'request': request,
+        },
+    )
+
+
+routes = [Route('/', endpoint=home)]
+
+
+app = Starlette(debug=True, routes=routes)
--- a/fastapiusers/fastapiusers/main.py
+++ b/fastapiusers/fastapiusers/main.py
@@ -1,12 +1,22 @@
-from fastapi_users import models
-from fastapi import FastAPI
-from fastapi_users.db import MongoDBUserDatabase
 import motor.motor_asyncio
-from fastapi_users.authentication import CookieAuthentication
-from fastapi_users import FastAPIUsers
+from fastapi import FastAPI
+from fastapi_users import FastAPIUsers, models
+# from fastapi_users.authentication import CookieAuthentication
+from fastapi_users.authentication import JWTAuthentication
+from fastapi_users.db import MongoDBUserDatabase
+from starlette.requests import Request
+from starlette.templating import Jinja2Templates
+from starlette.routing import Route


-class User(models.BaseModel):
+templates = Jinja2Templates(directory='templates')
+
+
+DATABASE_URL = 'mongodb://localhost:27017'
+SECRET = 'SECRET'
+
+
+class User(models.BaseUser):
    pass


@@ -22,35 +32,31 @@ class UserDB(User, models.BaseUserDB):
    pass


-# DATABASE_URL = 'mongodb://root:root@localhost:27017'
-DATABASE_URL = 'mongodb://127.0.0.1:27017/fastapi'
 client = motor.motor_asyncio.AsyncIOMotorClient(DATABASE_URL)
 db = client['database_name']
 collection = db['users']
-
-print(db, end='\n')
-print(collection, end='\n')
-
-SECRET = 'SECRET'
-
-auth_backends = []
-
-cookie_authentication = CookieAuthentication(
-    secret=SECRET, lifetime_seconds=3600
-)
-
-auth_backends.append(cookie_authentication)
-
 user_db = MongoDBUserDatabase(UserDB, collection)

-fastapi_users = FastAPIUsers(
-    user_db, auth_backends, User, UserCreate, UserUpdate, UserDB, SECRET
-)
+auth_backends = [
+    JWTAuthentication(secret=SECRET, lifetime_seconds=3600),
+    # CookieAuthentication(secret=SECRET, lifetime_seconds=3600),
+]

 app = FastAPI()
-
+fastapi_users = FastAPIUsers(
+    user_db, auth_backends, User, UserCreate, UserUpdate, UserDB, SECRET,
+)
 app.include_router(fastapi_users.router, prefix='/users', tags=['users'])


-# def on_after_register(user: User, request):
-#     print(f'user {user} has been registered.')
+@fastapi_users.on_after_register()
+def on_after_register(user: User, request: Request):
+    print(f'User {user.id} has registered with cookie.')
+
+
+@fastapi_users.on_after_forgot_password()
+def on_after_forgot_password(user: User, token: str, request: Request):
+    print(f'User {user.id} has forgot their password. Reset token: {token}')
+
+
+# app.include_router(Route('/', endpoint=home))
--- a/fastapiusers/fastapiusers/templates/index.html
+++ b/fastapiusers/fastapiusers/templates/index.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <!-- Required meta tags -->
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <title>Page Title</title>
+        <!-- Bootstrap CSS -->
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+    </head>
+    <body>
+        <h1 style="color: white;">Hello, world!</h1>
+        <p style="color: white;">Test to log in and logout. Setting a cookie and reading it.</p>
+        <br>
+        <form class="login" method="POST" action="http://127.0.0.1:8000/users/login/cookie">
+            {# <input type="hidden" name=""> #}
+        </form>
+        <div class="container">
+            <div class="d-flex justify-content-center">
+                <div class="card">
+                    <div class="card-body">
+                        <form class="login" method="POST" action="http://127.0.0.1:8000/users/login/cookie">
+                            <div class="input-group form-group">
+                                <div class="input-group-prepend">
+                                    <span class="input-group-text"><i class="fas fa-user"></i></span>
+                                </div>
+                                <input type="text" class="form-control" placeholder="username" name="username">
+                            </div>
+                            <div class="input-group form-group">
+                                <div class="input-group-prepend">
+                                    <span class="input-group-text"><i class="fas fa-key"></i></span>
+                                </div>
+                                <input type="password" class="form-control" placeholder="password" name="password">
+                            </div>
+                            <div class="row align-items-center remember">
+                                <input type="checkbox">Remember Me
+                            </div>
+                            <div class="form-group">
+                                <input type="submit" value="Login" class="btn float-right login_btn">
+                            </div>
+                        </form>
+                    </div>
+                    <div class="card-footer">
+                        <div class="d-flex justify-content-center links">
+                            Don't have an account?<a href="#">Sign Up</a>
+                        </div>
+                        <div class="d-flex justify-content-center">
+                            <a href="#">Forgot your password?</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <style type="text/css">
+        /* Made with love by Mutiullah Samim*/
+        @import url('https://fonts.googleapis.com/css?family=Numans');
+        html,body{
+        background-image: url('http://getwallpapers.com/wallpaper/full/a/5/d/544750.jpg');
+        background-size: cover;
+        background-repeat: no-repeat;
+        height: 100%;
+        font-family: 'Numans', sans-serif;
+        }
+        .container{
+        height: 100%;
+        align-content: center;
+        }
+        .card{
+        height: 370px;
+        margin-top: auto;
+        margin-bottom: auto;
+        width: 400px;
+        background-color: rgba(0,0,0,0.5) !important;
+        }
+        .social_icon span{
+        font-size: 60px;
+        margin-left: 10px;
+        color: #FFC312;
+        }
+        .social_icon span:hover{
+        color: white;
+        cursor: pointer;
+        }
+        .card-header h3{
+        color: white;
+        }
+        .social_icon{
+        position: absolute;
+        right: 20px;
+        top: -45px;
+        }
+        .input-group-prepend span{
+        width: 50px;
+        background-color: #FFC312;
+        color: black;
+        border:0 !important;
+        }
+        input:focus{
+        outline: 0 0 0 0  !important;
+        box-shadow: 0 0 0 0 !important;
+        }
+        .remember{
+        color: white;
+        }
+        .remember input
+        {
+        width: 20px;
+        height: 20px;
+        margin-left: 15px;
+        margin-right: 5px;
+        }
+        .login_btn{
+        color: black;
+        background-color: #FFC312;
+        width: 100px;
+        }
+        .login_btn:hover{
+        color: black;
+        background-color: white;
+        }
+        .links{
+        color: white;
+        }
+        .links a{
+        margin-left: 4px;
+        }
+        </style>
+        <!-- Optional JavaScript -->
+        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script></body>
+    </html>
--- a/fastapiusers/poetry.lock
+++ b/fastapiusers/poetry.lock
@@ -277,6 +277,28 @@ parso = ">=0.5.2"
 [package.extras]
 testing = ["colorama (0.4.1)", "docopt", "pytest (>=3.9.0,<5.0.0)"]

+[[package]]
+category = "main"
+description = "A very fast and expressive template engine."
+name = "jinja2"
+optional = false
+python-versions = ">=2.7, !=3.0.*, !=3.1.*, !=3.2.*, !=3.3.*, !=3.4.*"
+version = "2.11.1"
+
+[package.dependencies]
+MarkupSafe = ">=0.23"
+
+[package.extras]
+i18n = ["Babel (>=0.8)"]
+
+[[package]]
+category = "main"
+description = "Safely add untrusted strings to HTML/XML markup."
+name = "markupsafe"
+optional = false
+python-versions = ">=2.7,!=3.0.*,!=3.1.*,!=3.2.*,!=3.3.*"
+version = "1.1.1"
+
 [[package]]
 category = "dev"
 description = "McCabe checker, plugin for flake8"
@@ -657,7 +679,7 @@ python-versions = "*"
 version = "0.29.0"

 [metadata]
-content-hash = "ded88b741c6dd1c18b70bc34eb5e68d48b232628e299a0cec5192ca64533f91a"
+content-hash = "b4d8de4317280ec7a8a5dfbdcd43df196171954c6da25b8063b4209cdcd3c477"
 python-versions = "^3.8"

 [metadata.files]
@@ -807,6 +829,45 @@ jedi = [
    {file = "jedi-0.15.2-py2.py3-none-any.whl", hash = "sha256:1349c1e8c107095a55386628bb3b2a79422f3a2cab8381e34ce19909e0cf5064"},
    {file = "jedi-0.15.2.tar.gz", hash = "sha256:e909527104a903606dd63bea6e8e888833f0ef087057829b89a18364a856f807"},
 ]
+jinja2 = [
+    {file = "Jinja2-2.11.1-py2.py3-none-any.whl", hash = "sha256:b0eaf100007721b5c16c1fc1eecb87409464edc10469ddc9a22a27a99123be49"},
+    {file = "Jinja2-2.11.1.tar.gz", hash = "sha256:93187ffbc7808079673ef52771baa950426fd664d3aad1d0fa3e95644360e250"},
+]
+markupsafe = [
+    {file = "MarkupSafe-1.1.1-cp27-cp27m-macosx_10_6_intel.whl", hash = "sha256:09027a7803a62ca78792ad89403b1b7a73a01c8cb65909cd876f7fcebd79b161"},
+    {file = "MarkupSafe-1.1.1-cp27-cp27m-manylinux1_i686.whl", hash = "sha256:e249096428b3ae81b08327a63a485ad0878de3fb939049038579ac0ef61e17e7"},
+    {file = "MarkupSafe-1.1.1-cp27-cp27m-manylinux1_x86_64.whl", hash = "sha256:500d4957e52ddc3351cabf489e79c91c17f6e0899158447047588650b5e69183"},
+    {file = "MarkupSafe-1.1.1-cp27-cp27m-win32.whl", hash = "sha256:b2051432115498d3562c084a49bba65d97cf251f5a331c64a12ee7e04dacc51b"},
+    {file = "MarkupSafe-1.1.1-cp27-cp27m-win_amd64.whl", hash = "sha256:98c7086708b163d425c67c7a91bad6e466bb99d797aa64f965e9d25c12111a5e"},
+    {file = "MarkupSafe-1.1.1-cp27-cp27mu-manylinux1_i686.whl", hash = "sha256:cd5df75523866410809ca100dc9681e301e3c27567cf498077e8551b6d20e42f"},
+    {file = "MarkupSafe-1.1.1-cp27-cp27mu-manylinux1_x86_64.whl", hash = "sha256:43a55c2930bbc139570ac2452adf3d70cdbb3cfe5912c71cdce1c2c6bbd9c5d1"},
+    {file = "MarkupSafe-1.1.1-cp34-cp34m-macosx_10_6_intel.whl", hash = "sha256:1027c282dad077d0bae18be6794e6b6b8c91d58ed8a8d89a89d59693b9131db5"},
+    {file = "MarkupSafe-1.1.1-cp34-cp34m-manylinux1_i686.whl", hash = "sha256:62fe6c95e3ec8a7fad637b7f3d372c15ec1caa01ab47926cfdf7a75b40e0eac1"},
+    {file = "MarkupSafe-1.1.1-cp34-cp34m-manylinux1_x86_64.whl", hash = "sha256:88e5fcfb52ee7b911e8bb6d6aa2fd21fbecc674eadd44118a9cc3863f938e735"},
+    {file = "MarkupSafe-1.1.1-cp34-cp34m-win32.whl", hash = "sha256:ade5e387d2ad0d7ebf59146cc00c8044acbd863725f887353a10df825fc8ae21"},
+    {file = "MarkupSafe-1.1.1-cp34-cp34m-win_amd64.whl", hash = "sha256:09c4b7f37d6c648cb13f9230d847adf22f8171b1ccc4d5682398e77f40309235"},
+    {file = "MarkupSafe-1.1.1-cp35-cp35m-macosx_10_6_intel.whl", hash = "sha256:79855e1c5b8da654cf486b830bd42c06e8780cea587384cf6545b7d9ac013a0b"},
+    {file = "MarkupSafe-1.1.1-cp35-cp35m-manylinux1_i686.whl", hash = "sha256:c8716a48d94b06bb3b2524c2b77e055fb313aeb4ea620c8dd03a105574ba704f"},
+    {file = "MarkupSafe-1.1.1-cp35-cp35m-manylinux1_x86_64.whl", hash = "sha256:7c1699dfe0cf8ff607dbdcc1e9b9af1755371f92a68f706051cc8c37d447c905"},
+    {file = "MarkupSafe-1.1.1-cp35-cp35m-win32.whl", hash = "sha256:6dd73240d2af64df90aa7c4e7481e23825ea70af4b4922f8ede5b9e35f78a3b1"},
+    {file = "MarkupSafe-1.1.1-cp35-cp35m-win_amd64.whl", hash = "sha256:9add70b36c5666a2ed02b43b335fe19002ee5235efd4b8a89bfcf9005bebac0d"},
+    {file = "MarkupSafe-1.1.1-cp36-cp36m-macosx_10_6_intel.whl", hash = "sha256:24982cc2533820871eba85ba648cd53d8623687ff11cbb805be4ff7b4c971aff"},
+    {file = "MarkupSafe-1.1.1-cp36-cp36m-manylinux1_i686.whl", hash = "sha256:00bc623926325b26bb9605ae9eae8a215691f33cae5df11ca5424f06f2d1f473"},
+    {file = "MarkupSafe-1.1.1-cp36-cp36m-manylinux1_x86_64.whl", hash = "sha256:717ba8fe3ae9cc0006d7c451f0bb265ee07739daf76355d06366154ee68d221e"},
+    {file = "MarkupSafe-1.1.1-cp36-cp36m-win32.whl", hash = "sha256:535f6fc4d397c1563d08b88e485c3496cf5784e927af890fb3c3aac7f933ec66"},
+    {file = "MarkupSafe-1.1.1-cp36-cp36m-win_amd64.whl", hash = "sha256:b1282f8c00509d99fef04d8ba936b156d419be841854fe901d8ae224c59f0be5"},
+    {file = "MarkupSafe-1.1.1-cp37-cp37m-macosx_10_6_intel.whl", hash = "sha256:8defac2f2ccd6805ebf65f5eeb132adcf2ab57aa11fdf4c0dd5169a004710e7d"},
+    {file = "MarkupSafe-1.1.1-cp37-cp37m-manylinux1_i686.whl", hash = "sha256:46c99d2de99945ec5cb54f23c8cd5689f6d7177305ebff350a58ce5f8de1669e"},
+    {file = "MarkupSafe-1.1.1-cp37-cp37m-manylinux1_x86_64.whl", hash = "sha256:ba59edeaa2fc6114428f1637ffff42da1e311e29382d81b339c1817d37ec93c6"},
+    {file = "MarkupSafe-1.1.1-cp37-cp37m-win32.whl", hash = "sha256:b00c1de48212e4cc9603895652c5c410df699856a2853135b3967591e4beebc2"},
+    {file = "MarkupSafe-1.1.1-cp37-cp37m-win_amd64.whl", hash = "sha256:9bf40443012702a1d2070043cb6291650a0841ece432556f784f004937f0f32c"},
+    {file = "MarkupSafe-1.1.1-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:6788b695d50a51edb699cb55e35487e430fa21f1ed838122d722e0ff0ac5ba15"},
+    {file = "MarkupSafe-1.1.1-cp38-cp38-manylinux1_i686.whl", hash = "sha256:cdb132fc825c38e1aeec2c8aa9338310d29d337bebbd7baa06889d09a60a1fa2"},
+    {file = "MarkupSafe-1.1.1-cp38-cp38-manylinux1_x86_64.whl", hash = "sha256:13d3144e1e340870b25e7b10b98d779608c02016d5184cfb9927a9f10c689f42"},
+    {file = "MarkupSafe-1.1.1-cp38-cp38-win32.whl", hash = "sha256:596510de112c685489095da617b5bcbbac7dd6384aeebeda4df6025d0256a81b"},
+    {file = "MarkupSafe-1.1.1-cp38-cp38-win_amd64.whl", hash = "sha256:e8313f01ba26fbbe36c7be1966a7b7424942f670f38e666995b88d012765b9be"},
+    {file = "MarkupSafe-1.1.1.tar.gz", hash = "sha256:29872e92839765e546828bb7754a68c418d927cd064fd4708fab9fe9c8bb116b"},
+]
 mccabe = [
    {file = "mccabe-0.6.1-py2.py3-none-any.whl", hash = "sha256:ab8a6258860da4b6677da4bd2fe5dc2c659cff31b3ee4f7f5d64e79735b80d42"},
    {file = "mccabe-0.6.1.tar.gz", hash = "sha256:dd8d182285a0fe56bace7f45b5e7d1a6ebcbf524e8f3bd87eb0f125271b8831f"},
--- a/fastapiusers/pyproject.toml
+++ b/fastapiusers/pyproject.toml
@@ -9,6 +9,7 @@ python = "^3.8"
 uvicorn = "^0.11.3"
 fastapi-users = {extras = ["mongodb"], version = "^0.6.6"}
 httpx_oauth = "^0.2.1"
+jinja2 = "^2.11.1"

 [tool.poetry.dev-dependencies]
 pytest = "^3.0"
--- a/tutorials/events-app/.browserslistrc
+++ b/tutorials/events-app/.browserslistrc
@@ -0,0 +1,2 @@
+> 1%
+last 2 versions
--- a/tutorials/events-app/.eslintrc.js
+++ b/tutorials/events-app/.eslintrc.js
@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    'eslint:recommended'
+  ],
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}
--- a/tutorials/events-app/.gitignore
+++ b/tutorials/events-app/.gitignore
@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/tutorials/events-app/README.md
+++ b/tutorials/events-app/README.md
@@ -0,0 +1,24 @@
+# events-app
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/tutorials/events-app/babel.config.js
+++ b/tutorials/events-app/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/tutorials/events-app/package-lock.json
+++ b/tutorials/events-app/package-lock.json
--- a/tutorials/events-app/package.json
+++ b/tutorials/events-app/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "events-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "bulma": "^0.8.0",
+    "core-js": "^3.6.4",
+    "vue": "^2.6.11",
+    "vue-router": "^3.1.5"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.2.0",
+    "@vue/cli-plugin-eslint": "~4.2.0",
+    "@vue/cli-plugin-router": "~4.2.0",
+    "@vue/cli-service": "~4.2.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.1.2",
+    "sass": "^1.25.0",
+    "sass-loader": "^8.0.2",
+    "vue-template-compiler": "^2.6.11"
+  }
+}
--- a/tutorials/events-app/public/favicon.ico
+++ b/tutorials/events-app/public/favicon.ico
--- a/tutorials/events-app/public/index.html
+++ b/tutorials/events-app/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/tutorials/events-app/src/App.vue
+++ b/tutorials/events-app/src/App.vue
@@ -0,0 +1,31 @@
+<template>
+  <div id="app">
+    <div id="nav">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/about">About</router-link>
+    </div>
+    <router-view />
+  </div>
+</template>
+<style lang="scss">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+#nav {
+  padding: 30px;
+
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
+}
+</style>
--- a/tutorials/events-app/src/components/EventCard.vue
+++ b/tutorials/events-app/src/components/EventCard.vue
--- a/tutorials/events-app/src/components/EventsList.vue
+++ b/tutorials/events-app/src/components/EventsList.vue
--- a/tutorials/events-app/src/components/HelloWorld.vue
+++ b/tutorials/events-app/src/components/HelloWorld.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
+          target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
+          target="_blank" rel="noopener">router</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
+          target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+h3 {
+  margin: 40px 0 0;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+a {
+  color: #42b983;
+}
+</style>
--- a/tutorials/events-app/src/components/partials/Nav.vue
+++ b/tutorials/events-app/src/components/partials/Nav.vue
@@ -0,0 +1,19 @@
+<template>
+    <nav class="navbar-brand">
+        <a class="navbar-item" href="/">
+            <strong class="is-size4">
+                Animal Rescue League
+            </strong>
+        </a>
+        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+        </a>
+        <div id="navbar" class="navbar-menu">
+            <div class="navbar-start">
+                
+            </div>
+        </div>
+    </nav>
+</template>
--- a/tutorials/events-app/src/main.js
+++ b/tutorials/events-app/src/main.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import './../node_modules/bulma/css/bulma.css'
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  render: h => h(App)
+}).$mount('#app')
--- a/tutorials/events-app/src/router/index.js
+++ b/tutorials/events-app/src/router/index.js
@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+
+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')
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router
--- a/tutorials/events-app/src/views/About.vue
+++ b/tutorials/events-app/src/views/About.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="about">
+    <div class="hero is-primary">
+        <div class="hero-body">
+            <div class="container">
+                <h1 class="title is-size-1">
+                    About Animal Rescue League
+                </h1>
+            </div>
+        </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.org-description {
+  margin-top: 50px;
+}
+</style>
--- a/tutorials/events-app/src/views/EventSingle.vue
+++ b/tutorials/events-app/src/views/EventSingle.vue
--- a/tutorials/events-app/src/views/Home.vue
+++ b/tutorials/events-app/src/views/Home.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="home">
+    <section class="hero">
+      <div class="hero-body">
+        <div class="container">
+          <h1 class="title">
+            Welcome to the Animal Rescue League
+          </h1>
+          <h2 class="subtitle">
+            Make sure you check out the upcoming events below:
+          </h2>
+          <div class="button-block">
+            <button class="button is-xl is-dark">Sign up to browse events</button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'home',
+  components: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.hero {
+  text-align: center;
+  background-image: url('https://cdn.auth0.com/blog/vue-meetup/event-banner.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 400px;
+}
+
+.hero-body .title {
+  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);
+  padding: 40px 0 20px 0;
+  font-size: 60px;
+}
+
+.subtitle {
+  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
+  font-size: 30px;
+}
+
+.button-block {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  position: absolute;
+  bottom: -150px;
+
+  .button {
+    margin-right: 50px;
+    padding-left: 50px;
+    padding-right: 50px;
+  }
+
+  .welcome {
+    width: 400px;
+    padding: 10px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.is-xl {
+  font-size: 1.7rem;
+}
+</style>
--- a/tutorials/events-app/yarn.lock
+++ b/tutorials/events-app/yarn.lock