├── .github
    └── workflows
    │   └── manual.yml
├── .gitignore
├── BasicFlaskAuth
    ├── README.md
    ├── app.py
    └── requirements.txt
├── CODEOWNERS
├── FlaskRecap
    ├── FlaskRecap.py
    ├── README.md
    ├── requirements.txt
    └── udacity-fsnd-flaskrecap.postman_collection.json
├── LocalStore
    └── index.html
├── README.md
├── _config.yml
├── environment.yml
└── projects
    ├── .gitignore
    ├── 01_fyyur
        └── starter_code
        │   ├── README.md
        │   ├── app.py
        │   ├── config.py
        │   ├── error.log
        │   ├── fabfile.py
        │   ├── forms.py
        │   ├── requirements.txt
        │   ├── static
        │       ├── css
        │       │   ├── bootstrap-theme.css
        │       │   ├── bootstrap-theme.min.css
        │       │   ├── bootstrap.css
        │       │   ├── bootstrap.min.css
        │       │   ├── bootstrap.min.js
        │       │   ├── layout.forms.css
        │       │   ├── layout.main.css
        │       │   ├── main.css
        │       │   ├── main.quickfix.css
        │       │   └── main.responsive.css
        │       ├── fonts
        │       │   ├── FontAwesome.otf
        │       │   ├── fontawesome-webfont.eot
        │       │   ├── fontawesome-webfont.svg
        │       │   ├── fontawesome-webfont.ttf
        │       │   └── fontawesome-webfont.woff
        │       ├── img
        │       │   ├── .gitkeep
        │       │   └── front-splash.jpg
        │       └── js
        │       │   ├── libs
        │       │       ├── bootstrap-3.1.1.min.js
        │       │       ├── jquery-1.11.1.min.js
        │       │       ├── jquery-1.11.1.min.map
        │       │       ├── modernizr-2.8.2.min.js
        │       │       ├── moment.min.js
        │       │       └── respond-1.4.2.min.js
        │       │   ├── plugins.js
        │       │   └── script.js
        │   └── templates
        │       ├── errors
        │           ├── 404.html
        │           └── 500.html
        │       ├── forms
        │           ├── edit_artist.html
        │           ├── edit_venue.html
        │           ├── new_artist.html
        │           ├── new_show.html
        │           └── new_venue.html
        │       ├── layouts
        │           ├── form.html
        │           └── main.html
        │       └── pages
        │           ├── artists.html
        │           ├── home.css
        │           ├── home.html
        │           ├── search_artists.html
        │           ├── search_venues.html
        │           ├── show.html
        │           ├── show_artist.html
        │           ├── show_venue.html
        │           ├── shows.html
        │           └── venues.html
    ├── 02_trivia_api
        └── starter
        │   ├── .gitignore
        │   ├── README.md
        │   ├── backend
        │       ├── README.md
        │       ├── flaskr
        │       │   └── __init__.py
        │       ├── models.py
        │       ├── pip
        │       ├── requirements.txt
        │       ├── test_flaskr.py
        │       └── trivia.psql
        │   └── frontend
        │       ├── README.md
        │       ├── package-lock.json
        │       ├── package.json
        │       ├── public
        │           ├── art.svg
        │           ├── delete.png
        │           ├── entertainment.svg
        │           ├── favicon.ico
        │           ├── geography.svg
        │           ├── history.svg
        │           ├── index.html
        │           ├── manifest.json
        │           ├── science.svg
        │           └── sports.svg
        │       └── src
        │           ├── App.js
        │           ├── App.test.js
        │           ├── components
        │               ├── FormView.js
        │               ├── Header.js
        │               ├── Question.js
        │               ├── QuestionView.js
        │               ├── QuizView.js
        │               └── Search.js
        │           ├── index.js
        │           ├── logo.svg
        │           ├── serviceWorker.js
        │           └── stylesheets
        │               ├── App.css
        │               ├── FormView.css
        │               ├── Header.css
        │               ├── Question.css
        │               ├── QuizView.css
        │               └── index.css
    ├── 03_coffee_shop_full_stack
        └── starter_code
        │   ├── .gitignore
        │   ├── README.md
        │   ├── backend
        │       ├── README.md
        │       ├── requirements.txt
        │       ├── src
        │       │   ├── __init__.py
        │       │   ├── api.py
        │       │   ├── auth
        │       │   │   ├── __init__.py
        │       │   │   └── auth.py
        │       │   └── database
        │       │   │   ├── __init__.py
        │       │   │   ├── database.db
        │       │   │   └── models.py
        │       └── udacity-fsnd-udaspicelatte.postman_collection.json
        │   └── frontend
        │       ├── .gitignore
        │       ├── README.md
        │       ├── angular.json
        │       ├── e2e
        │           ├── protractor.conf.js
        │           ├── src
        │           │   ├── app.e2e-spec.ts
        │           │   └── app.po.ts
        │           └── tsconfig.e2e.json
        │       ├── ionic.config.json
        │       ├── package-lock.json
        │       ├── package.json
        │       ├── src
        │           ├── app
        │           │   ├── app-routing.module.ts
        │           │   ├── app.component.html
        │           │   ├── app.component.spec.ts
        │           │   ├── app.component.ts
        │           │   ├── app.module.ts
        │           │   ├── pages
        │           │   │   ├── drink-menu
        │           │   │   │   ├── drink-form
        │           │   │   │   │   ├── drink-form.component.html
        │           │   │   │   │   ├── drink-form.component.scss
        │           │   │   │   │   ├── drink-form.component.spec.ts
        │           │   │   │   │   └── drink-form.component.ts
        │           │   │   │   ├── drink-graphic
        │           │   │   │   │   ├── drink-graphic.component.html
        │           │   │   │   │   ├── drink-graphic.component.scss
        │           │   │   │   │   ├── drink-graphic.component.spec.ts
        │           │   │   │   │   └── drink-graphic.component.ts
        │           │   │   │   ├── drink-menu.module.ts
        │           │   │   │   ├── drink-menu.page.html
        │           │   │   │   ├── drink-menu.page.scss
        │           │   │   │   ├── drink-menu.page.spec.ts
        │           │   │   │   └── drink-menu.page.ts
        │           │   │   ├── tabs
        │           │   │   │   ├── tabs.module.ts
        │           │   │   │   ├── tabs.page.html
        │           │   │   │   ├── tabs.page.scss
        │           │   │   │   ├── tabs.page.spec.ts
        │           │   │   │   ├── tabs.page.ts
        │           │   │   │   └── tabs.router.module.ts
        │           │   │   └── user-page
        │           │   │   │   ├── user-page.module.ts
        │           │   │   │   ├── user-page.page.html
        │           │   │   │   ├── user-page.page.scss
        │           │   │   │   ├── user-page.page.spec.ts
        │           │   │   │   └── user-page.page.ts
        │           │   └── services
        │           │   │   ├── auth.service.ts
        │           │   │   └── drinks.service.ts
        │           ├── assets
        │           │   ├── icon
        │           │   │   └── favicon.png
        │           │   └── shapes.svg
        │           ├── environments
        │           │   ├── environment.prod.ts
        │           │   └── environment.ts
        │           ├── global.scss
        │           ├── index.html
        │           ├── karma.conf.js
        │           ├── main.ts
        │           ├── polyfills.ts
        │           ├── test.ts
        │           ├── theme
        │           │   └── variables.scss
        │           ├── tsconfig.app.json
        │           ├── tsconfig.spec.json
        │           ├── tslint.json
        │           └── zone-flags.ts
        │       ├── tsconfig.json
        │       └── tslint.json
    └── capstone
        ├── heroku_sample
            └── starter
            │   ├── Procfile
            │   ├── app.py
            │   ├── manage.py
            │   ├── models.py
            │   ├── requirements.txt
            │   ├── runtime.txt
            │   └── setup.sh
        └── starter
            ├── app.py
            ├── models.py
            ├── setup.sh
            └── test_app.py


/.github/workflows/manual.yml:
--------------------------------------------------------------------------------
 1 | # Workflow to ensure whenever a Github PR is submitted, 
 2 | # a JIRA ticket gets created automatically. 
 3 | name: Manual Workflow
 4 | 
 5 | # Controls when the action will run. 
 6 | on:
 7 |   # Triggers the workflow on pull request events but only for the master branch
 8 |   pull_request_target:
 9 |     types: [assigned, opened, reopened]
10 | 
11 |   # Allows you to run this workflow manually from the Actions tab
12 |   workflow_dispatch:
13 | 
14 | jobs:
15 |   test-transition-issue:
16 |     name: Convert Github Issue to Jira Issue
17 |     runs-on: ubuntu-latest
18 |     steps:
19 |     - name: Checkout
20 |       uses: actions/checkout@master
21 | 
22 |     - name: Login
23 |       uses: atlassian/gajira-login@master
24 |       env:
25 |         JIRA_BASE_URL: ${{ secrets.JIRA_BASE_URL }}
26 |         JIRA_USER_EMAIL: ${{ secrets.JIRA_USER_EMAIL }}
27 |         JIRA_API_TOKEN: ${{ secrets.JIRA_API_TOKEN }}
28 |         
29 |     - name: Create NEW JIRA ticket
30 |       id: create
31 |       uses: atlassian/gajira-create@master
32 |       with:
33 |         project: CONUPDATE
34 |         issuetype: Task
35 |         summary: |
36 |           Github PR - nd0044	v2	Full Stack Web Developer (refresh) | Repo: FSND  | PR# ${{github.event.number}}
37 |         description: |
38 |            Repo link: https://github.com/${{ github.repository }}   
39 |            PR no. ${{ github.event.pull_request.number }} 
40 |            PR title: ${{ github.event.pull_request.title }}  
41 |            PR description: ${{ github.event.pull_request.description }}  
42 |            In addition, please resolve other issues, if any. 
43 |         fields: '{"components": [{"name":"nd0044 - Full Stack Nanodegree"}], "customfield_16449":"https://classroom.udacity.com/nanodegrees/nd0044/dashboard/overview", "customfield_16450":"Resolve the PR", "labels": ["github"], "priority":{"id": "4"}}'
44 | 
45 |     - name: Log created issue
46 |       run: echo "Issue ${{ steps.create.outputs.issue }} was created"
47 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .vscode
 2 | __pycache__
 3 | venv
 4 | 
 5 | # OS generated files #
 6 | ######################
 7 | .DS_Store
 8 | .DS_Store?
 9 | ._*
10 | .Spotlight-V100
11 | .Trashes
12 | ehthumbs.db
13 | Thumbs.db
14 | 
15 | .github/**
16 | 


--------------------------------------------------------------------------------
/BasicFlaskAuth/README.md:
--------------------------------------------------------------------------------
 1 | # Basic Flask Auth - Follow Along
 2 | 
 3 | ## Getting Started
 4 | 
 5 | ### Installing Dependencies
 6 | 
 7 | #### Python 3.7
 8 | 
 9 | Follow instructions to install the latest version of python for your platform in the [python docs](https://docs.python.org/3/using/unix.html#getting-and-installing-the-latest-version-of-python)
10 | 
11 | #### Virtual Enviornment
12 | 
13 | We recommend working within a virtual environment whenever using Python for projects. This keeps your dependencies for each project separate and organaized. Instructions for setting up a virual enviornment for your platform can be found in the [python docs](https://packaging.python.org/guides/installing-using-pip-and-virtual-environments/)
14 | 
15 | #### PIP Dependencies
16 | 
17 | Once you have your virtual environment setup and running, install dependencies by running:
18 | 
19 | ```bash
20 | pip install -r requirements.txt
21 | ```
22 | 
23 | This will install all of the required packages we selected within the `requirements.txt` file.
24 | 
25 | ##### Key Dependencies
26 | 
27 | - [Flask](http://flask.pocoo.org/)  is a lightweight backend microservices framework. Flask is required to handle requests and responses.
28 | 
29 | - [jose](https://python-jose.readthedocs.io/en/latest/) JavaScript Object Signing and Encryption for JWTs. Useful for encoding, decoding, and verifying JWTS.
30 | 
31 | ## Running the server
32 | 
33 | From within this directory first ensure you are working using your created virtual environment.
34 | 
35 | Each time you open a new terminal session, run:
36 | 
37 | ```bash
38 | export FLASK_APP=app.py;
39 | ```
40 | 
41 | To run the server, execute:
42 | 
43 | ```bash
44 | flask run --reload
45 | ```
46 | 
47 | The `--reload` flag will detect file changes and restart the server automatically.
48 | 
49 | ## Tasks
50 | 
51 | ### Setup Auth0
52 | 
53 | 1. Create a new Auth0 Account
54 | 2. Select a unique tenant domain
55 | 3. Create a new, single page web application
56 | 4. Create a new API


--------------------------------------------------------------------------------
/BasicFlaskAuth/app.py:
--------------------------------------------------------------------------------
  1 | from flask import Flask, request, abort
  2 | import json
  3 | from functools import wraps
  4 | from jose import jwt
  5 | from urllib.request import urlopen
  6 | 
  7 | 
  8 | app = Flask(__name__)
  9 | 
 10 | AUTH0_DOMAIN = @TODO_REPLACE_WITH_YOUR_DOMAIN
 11 | ALGORITHMS = ['RS256']
 12 | API_AUDIENCE = @TODO_REPLACE_WITH_YOUR_API_AUDIENCE
 13 | 
 14 | 
 15 | class AuthError(Exception):
 16 |     def __init__(self, error, status_code):
 17 |         self.error = error
 18 |         self.status_code = status_code
 19 | 
 20 | 
 21 | def get_token_auth_header():
 22 |     """Obtains the Access Token from the Authorization Header
 23 |     """
 24 |     auth = request.headers.get('Authorization', None)
 25 |     if not auth:
 26 |         raise AuthError({
 27 |             'code': 'authorization_header_missing',
 28 |             'description': 'Authorization header is expected.'
 29 |         }, 401)
 30 | 
 31 |     parts = auth.split()
 32 |     if parts[0].lower() != 'bearer':
 33 |         raise AuthError({
 34 |             'code': 'invalid_header',
 35 |             'description': 'Authorization header must start with "Bearer".'
 36 |         }, 401)
 37 | 
 38 |     elif len(parts) == 1:
 39 |         raise AuthError({
 40 |             'code': 'invalid_header',
 41 |             'description': 'Token not found.'
 42 |         }, 401)
 43 | 
 44 |     elif len(parts) > 2:
 45 |         raise AuthError({
 46 |             'code': 'invalid_header',
 47 |             'description': 'Authorization header must be bearer token.'
 48 |         }, 401)
 49 | 
 50 |     token = parts[1]
 51 |     return token
 52 | 
 53 | 
 54 | def verify_decode_jwt(token):
 55 |     jsonurl = urlopen(f'https://{AUTH0_DOMAIN}/.well-known/jwks.json')
 56 |     jwks = json.loads(jsonurl.read())
 57 |     unverified_header = jwt.get_unverified_header(token)
 58 |     rsa_key = {}
 59 |     if 'kid' not in unverified_header:
 60 |         raise AuthError({
 61 |             'code': 'invalid_header',
 62 |             'description': 'Authorization malformed.'
 63 |         }, 401)
 64 | 
 65 |     for key in jwks['keys']:
 66 |         if key['kid'] == unverified_header['kid']:
 67 |             rsa_key = {
 68 |                 'kty': key['kty'],
 69 |                 'kid': key['kid'],
 70 |                 'use': key['use'],
 71 |                 'n': key['n'],
 72 |                 'e': key['e']
 73 |             }
 74 |     if rsa_key:
 75 |         try:
 76 |             payload = jwt.decode(
 77 |                 token,
 78 |                 rsa_key,
 79 |                 algorithms=ALGORITHMS,
 80 |                 audience=API_AUDIENCE,
 81 |                 issuer='https://' + AUTH0_DOMAIN + '/'
 82 |             )
 83 | 
 84 |             return payload
 85 | 
 86 |         except jwt.ExpiredSignatureError:
 87 |             raise AuthError({
 88 |                 'code': 'token_expired',
 89 |                 'description': 'Token expired.'
 90 |             }, 401)
 91 | 
 92 |         except jwt.JWTClaimsError:
 93 |             raise AuthError({
 94 |                 'code': 'invalid_claims',
 95 |                 'description': 'Incorrect claims. Please, check the audience and issuer.'
 96 |             }, 401)
 97 |         except Exception:
 98 |             raise AuthError({
 99 |                 'code': 'invalid_header',
100 |                 'description': 'Unable to parse authentication token.'
101 |             }, 400)
102 |     raise AuthError({
103 |                 'code': 'invalid_header',
104 |                 'description': 'Unable to find the appropriate key.'
105 |             }, 400)
106 | 
107 | 
108 | def requires_auth(f):
109 |     @wraps(f)
110 |     def wrapper(*args, **kwargs):
111 |         token = get_token_auth_header()
112 |         try:
113 |             payload = verify_decode_jwt(token)
114 |         except:
115 |             abort(401)
116 |         return f(payload, *args, **kwargs)
117 | 
118 |     return wrapper
119 | 
120 | @app.route('/headers')
121 | @requires_auth
122 | def headers(payload):
123 |     print(payload)
124 |     return 'Access Granted'


--------------------------------------------------------------------------------
/BasicFlaskAuth/requirements.txt:
--------------------------------------------------------------------------------
 1 | astroid==2.2.5
 2 | Click==7.0
 3 | ecdsa==0.13.2
 4 | Flask==1.0.2
 5 | future==0.17.1
 6 | isort==4.3.18
 7 | itsdangerous==1.1.0
 8 | Jinja2==2.10.1
 9 | lazy-object-proxy==1.4.0
10 | MarkupSafe==1.1.1
11 | mccabe==0.6.1
12 | pycryptodome==3.3.1
13 | pylint==2.3.1
14 | python-jose-cryptodome==1.3.2
15 | six==1.12.0
16 | typed-ast==1.4.2
17 | Werkzeug==0.15.6
18 | wrapt==1.11.1
19 | Flask-Cors==3.0.8


--------------------------------------------------------------------------------
/CODEOWNERS:
--------------------------------------------------------------------------------
1 | *           @udacity/active-public-content


--------------------------------------------------------------------------------
/FlaskRecap/FlaskRecap.py:
--------------------------------------------------------------------------------
 1 | from flask import Flask, request, jsonify, abort
 2 | 
 3 | app = Flask(__name__)
 4 | 
 5 | greetings = {
 6 |             'en': 'hello', 
 7 |             'es': 'Hola', 
 8 |             'ar': 'مرحبا',
 9 |             'ru': 'Привет',
10 |             'fi': 'Hei',
11 |             'he': 'שלום',
12 |             'ja': 'こんにちは'
13 |             }
14 | 
15 | @app.route('/greeting', methods=['GET'])
16 | def greeting_all():
17 |     return jsonify({'greetings': greetings})
18 | 
19 | @app.route('/greeting/<lang>', methods=['GET'])
20 | def greeting_one(lang):
21 |     print(lang)
22 |     if(lang not in greetings):
23 |         abort(404)
24 |     return jsonify({'greeting': greetings[lang
25 |     ]})
26 | 
27 | @app.route('/greeting', methods=['POST'])
28 | def greeting_add():
29 |     info = request.get_json()
30 |     if('lang' not in info or 'greeting' not in info):
31 |         abort(422)
32 |     greetings[info['lang']] = info['greeting']
33 |     return jsonify({'greetings':greetings})
34 | 


--------------------------------------------------------------------------------
/FlaskRecap/README.md:
--------------------------------------------------------------------------------
 1 | # Flask Recap
 2 | 
 3 | A simple flask server to demonstrate basic flask.
 4 | 
 5 | ## Getting Started
 6 | 
 7 | ### Create a Virtual Environment
 8 | 
 9 | Follow instructions [here](https://packaging.python.org/guides/installing-using-pip-and-virtual-environments/) to create and activate virtual environment for this project.
10 | 
11 | ### Install Dependencies
12 | 
13 | Run `pip install -r requirements.txt` to install any dependencies.
14 | 
15 | ### Install Postman
16 | 
17 | Follow instructions on the [Postman docs](https://www.getpostman.com/) to install and run postman. Once postman is running, import the collection `./udacity-fsnd-flaskrecap.postman_collection.json`.
18 | 
19 | ### Run the Server
20 | 
21 | On first run, execute `export FLASK_APP=FlaskRecap.py`. Then run `flask run --reload` to run the developer server.
22 | 


--------------------------------------------------------------------------------
/FlaskRecap/requirements.txt:
--------------------------------------------------------------------------------
1 | Click==7.0
2 | Flask==1.0.3
3 | itsdangerous==1.1.0
4 | Jinja2==2.10.1
5 | MarkupSafe==1.1.1
6 | Werkzeug==0.15.5
7 | 


--------------------------------------------------------------------------------
/FlaskRecap/udacity-fsnd-flaskrecap.postman_collection.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"info": {
 3 | 		"_postman_id": "414a9fd3-5b93-4c72-bb2b-62329fd6a44b",
 4 | 		"name": "udacity-fsnd-flaskrecap",
 5 | 		"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
 6 | 	},
 7 | 	"item": [
 8 | 		{
 9 | 			"name": "/greeting",
10 | 			"request": {
11 | 				"method": "GET",
12 | 				"header": [],
13 | 				"url": {
14 | 					"raw": "http://127.0.0.1:5000/greeting",
15 | 					"protocol": "http",
16 | 					"host": [
17 | 						"127",
18 | 						"0",
19 | 						"0",
20 | 						"1"
21 | 					],
22 | 					"port": "5000",
23 | 					"path": [
24 | 						"greeting"
25 | 					]
26 | 				}
27 | 			},
28 | 			"response": []
29 | 		},
30 | 		{
31 | 			"name": "/greeting/es",
32 | 			"request": {
33 | 				"method": "GET",
34 | 				"header": [],
35 | 				"url": {
36 | 					"raw": "http://127.0.0.1:5000/greeting/es",
37 | 					"protocol": "http",
38 | 					"host": [
39 | 						"127",
40 | 						"0",
41 | 						"0",
42 | 						"1"
43 | 					],
44 | 					"port": "5000",
45 | 					"path": [
46 | 						"greeting"
47 | 					]
48 | 				}
49 | 			},
50 | 			"response": []
51 | 		},
52 | 		{
53 | 			"name": "/greeting",
54 | 			"request": {
55 | 				"method": "POST",
56 | 				"header": [
57 | 					{
58 | 						"key": "Content-Type",
59 | 						"name": "Content-Type",
60 | 						"value": "application/json",
61 | 						"type": "text"
62 | 					}
63 | 				],
64 | 				"body": {
65 | 					"mode": "raw",
66 | 					"raw": "{\n\t\"lang\": \"fr\",\n\t\"greeting\": \"bonjour\"\n}"
67 | 				},
68 | 				"url": {
69 | 					"raw": "http://127.0.0.1:5000/greeting",
70 | 					"protocol": "http",
71 | 					"host": [
72 | 						"127",
73 | 						"0",
74 | 						"0",
75 | 						"1"
76 | 					],
77 | 					"port": "5000",
78 | 					"path": [
79 | 						"greeting"
80 | 					]
81 | 				}
82 | 			},
83 | 			"response": []
84 | 		}
85 | 	]
86 | }
87 | 


--------------------------------------------------------------------------------
/LocalStore/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <title>LocalStorage Exercise</title>
 4 |         <script type="text/javascript">
 5 |             console.log("Great! You've opened the developer console 🎉🙌🎉.\nNow interact with localStorage here or use the Application/Storage tab to find the value of `concept_quiz_keyword`")
 6 |             var _0x8a03=["\x63\x6F\x6E\x63\x65\x70\x74\x5F\x71\x75\x69\x7A\x5F\x6B\x65\x79\x77\x6F\x72\x64","\x61\x6D\x61\x7A\x69\x6E\x67","\x73\x65\x74\x49\x74\x65\x6D","\x6C\x6F\x63\x61\x6C\x53\x74\x6F\x72\x61\x67\x65"];window[_0x8a03[3]][_0x8a03[2]](_0x8a03[0],_0x8a03[1])
 7 |         </script>
 8 |         <style type="text/css">
 9 |         body {
10 |             display: flex;
11 |             align-items: center;
12 |             justify-content: center;
13 |             font-family: Open Sans,Helvetica,sans-serif;
14 |             background: #03B3E4;
15 |             color: white;
16 |         }
17 |         </style>
18 |     </head>
19 |     <body>
20 |         <div>
21 |             Use dev tools on this page to get the value of the "concept_quiz_keyword" key from localStorage. <br/>
22 |         </div>
23 |     </body>
24 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Full Stack Web Developer Nanodegree (nd0044 v2)
 2 | This is the public repository for Udacity's Full-Stack Nanodegree program. Here, you can find starter-code the following projects:
 3 | 
 4 | * *01_fyyur/starter_code* - This is the project from C1. SQL and Data Modeling for the Web
 5 | * *02_trivia_api/starter* - This is the project from C2. API Development and Documentation
 6 | * *03_coffee_shop_full_stack/starter_code* - This is the project from C3. Identity and Access Management
 7 | * *capstone* - This is the final project of this Nanodegree.
 8 | 
 9 | Feel free to suggest edits in the current repo by raising a PR.
10 | 
11 | 
12 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-minimal


--------------------------------------------------------------------------------
/environment.yml:
--------------------------------------------------------------------------------
1 | name: FSND
2 | channels:
3 |   - conda-forge
4 |   - defaults
5 | dependencies:
6 |   - python=3.9


--------------------------------------------------------------------------------
/projects/.gitignore:
--------------------------------------------------------------------------------
 1 | .vscode
 2 | __pycache__
 3 | venv
 4 | 
 5 | # OS generated files #
 6 | ######################
 7 | .DS_Store
 8 | .DS_Store?
 9 | ._*
10 | .Spotlight-V100
11 | .Trashes
12 | ehthumbs.db
13 | Thumbs.db


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/config.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | SECRET_KEY = os.urandom(32)
 3 | # Grabs the folder where the script runs.
 4 | basedir = os.path.abspath(os.path.dirname(__file__))
 5 | 
 6 | # Enable debug mode.
 7 | DEBUG = True
 8 | 
 9 | # Connect to the database
10 | 
11 | 
12 | # TODO IMPLEMENT DATABASE URL
13 | SQLALCHEMY_DATABASE_URI = '<Put your local database url>'
14 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/error.log:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/fabfile.py:
--------------------------------------------------------------------------------
 1 | from fabric.api import local, settings, abort
 2 | from fabric.contrib.console import confirm
 3 | 
 4 | # prepare for deployment
 5 | 
 6 | 
 7 | def test():
 8 |     with settings(warn_only=True):
 9 |         result = local(
10 |             "python test_tasks.py -v && python test_users.py -v", capture=True
11 |         )
12 |     if result.failed and not confirm("Tests failed. Continue?"):
13 |         abort("Aborted at user request.")
14 | 
15 | 
16 | def commit():
17 |     message = raw_input("Enter a git commit message: ")
18 |     local("git add . && git commit -am '{}'".format(message))
19 | 
20 | 
21 | def push():
22 |     local("git push origin master")
23 | 
24 | 
25 | def prepare():
26 |     test()
27 |     commit()
28 |     push()
29 | 
30 | # deploy to heroku
31 | 
32 | 
33 | def pull():
34 |     local("git pull origin master")
35 | 
36 | 
37 | def heroku():
38 |     local("git push heroku master")
39 | 
40 | 
41 | def heroku_test():
42 |     local(
43 |         "heroku run python test_tasks.py -v && heroku run python test_users.py -v"
44 |     )
45 | 
46 | 
47 | def deploy():
48 |     pull()
49 |     test()
50 |     commit()
51 |     heroku()
52 |     heroku_test()
53 | 
54 | # rollback
55 | 
56 | 
57 | def rollback():
58 |     local("heroku rollback")
59 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/requirements.txt:
--------------------------------------------------------------------------------
1 | babel==2.9.0
2 | python-dateutil==2.6.0
3 | flask-moment==0.11.0
4 | flask-wtf==0.14.3
5 | flask_sqlalchemy==2.4.4
6 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/static/css/layout.forms.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   padding-top: 40px;
 3 |   padding-bottom: 40px;
 4 |   background-color: #eee;
 5 | }
 6 | .form-only-page .form {
 7 |   max-width: 330px;
 8 |   padding: 15px;
 9 |   margin: 0 auto;
10 | }
11 | .form-only-page .form .form-heading,
12 | .form-only-page .form .checkbox {
13 |   margin-bottom: 10px;
14 | }
15 | .form-only-page .form .checkbox {
16 |   font-weight: normal;
17 | }
18 | .form-only-page .form .form-control {
19 |   position: relative;
20 |   font-size: 16px;
21 |   height: auto;
22 |   padding: 10px;
23 |   -webkit-box-sizing: border-box;
24 |      -moz-box-sizing: border-box;
25 |           box-sizing: border-box;
26 | }
27 | .form-only-page .form .form-control:focus {
28 |   z-index: 2;
29 | }
30 | .form-only-page .form input[type="text"],
31 | .form-only-page .form input[type="password"] {
32 |   margin-bottom: -1px;
33 |   border-radius: 0;
34 | }
35 | .form-only-page .form input.first-input {
36 |   border-top-left-radius: 4px;
37 |   border-top-right-radius: 4px;
38 | }
39 | .form-only-page .form input.last-input {
40 |   margin-bottom: 10px;
41 |   border-bottom-left-radius: 4px;
42 |   border-bottom-right-radius: 4px;
43 | }
44 | .form-only-page .back-home {
45 |   margin-top: 10px;
46 | }
47 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/static/css/layout.main.css:
--------------------------------------------------------------------------------
 1 | /* Sticky footer styles
 2 | -------------------------------------------------- */
 3 | 
 4 | html,
 5 | body {
 6 |   height: 100%;
 7 |   /* The html and body elements cannot have any padding or margin. */
 8 | }
 9 | 
10 | /* Wrapper for page content to push down footer */
11 | #wrap {
12 |   min-height: 100%;
13 |   height: auto !important;
14 |   height: 100%;
15 |   /* Negative indent footer by its height */
16 |   margin: 0 auto -60px;
17 |   /* Pad bottom by footer height */
18 |   padding: 0 0 60px;
19 | }
20 | 
21 | /* Set the fixed height of the footer here */
22 | #footer {
23 |   height: 60px;
24 | }
25 | 
26 | 
27 | /* Custom page CSS
28 | -------------------------------------------------- */
29 | /* Not required for template or sticky footer method. */
30 | 
31 | #wrap > .container {
32 |   padding: 80px 15px 0;
33 | }
34 | .container .credit {
35 |   margin: 20px 0;
36 | }
37 | 
38 | #footer > .container {
39 |   padding-left: 15px;
40 |   padding-right: 15px;
41 | }
42 | 
43 | code {
44 |   font-size: 80%;
45 | }
46 | 
47 | h1 {
48 |   margin-bottom: 16px;
49 | }
50 | 
51 | h3 {
52 |   margin: 12px 0;
53 | }
54 | 
55 | h3 > span.orange {
56 |   color: #FF9C44;
57 | }


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/static/css/main.css:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 |  * @file
  4 |  * Main stylesheet file.
  5 |  */
  6 | 
  7 | 
  8 | /*****************************************************************************
  9 |  * Main elements
 10 |  ****************************************************************************/
 11 | html {
 12 |   overflow-y: scroll;
 13 | }
 14 | section {
 15 |   margin: 50px 0;
 16 | }
 17 | section > h2 {
 18 |   margin-bottom: 20px;
 19 | }
 20 | a {
 21 |   cursor: pointer;
 22 |   color: #ff8c3a;
 23 | }
 24 | .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
 25 |   background: initial;
 26 |   color: initial;
 27 | }
 28 | p.lead {
 29 |   margin-top: 30px;
 30 | }
 31 | ::selection {
 32 |   background: #555;
 33 |   color: #FFF;
 34 | }
 35 | ::-moz-selection {
 36 |   background: #555;
 37 |   color: #FFF;
 38 | }
 39 | ::-webkit-selection {
 40 |   background: #555;
 41 |   color: #FFF;
 42 | }
 43 | /* Main elements end */
 44 | 
 45 | 
 46 | /*****************************************************************************
 47 |  * Various other styles
 48 |  ****************************************************************************/
 49 | 
 50 | /* Various other styles end */
 51 | 
 52 | #front-splash {
 53 | 	width: 100%;
 54 | }
 55 | .navbar.navbar-fixed-top {
 56 |   background: none;
 57 |   box-shadow: none;
 58 |   border-bottom: none;
 59 |   padding-top: 10px;
 60 |   background-color: white;
 61 | }
 62 | .navbar-nav .search {
 63 |   margin-top: 6px;
 64 |   width: 300px;
 65 |   margin-right: 15px;
 66 | }
 67 | .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.active>a {
 68 |     background: none;
 69 |     box-shadow: none;
 70 |     color: black;
 71 |     font-weight: bold;
 72 | }
 73 | .navbar-nav .search input {
 74 |   border-radius: 50px;
 75 |   background: #f2f2f2;
 76 |   border: none;
 77 |   box-shadow: none;
 78 |   padding-left: 18px;
 79 |   padding-right: 18px;
 80 |   font-size: 1.4rem;
 81 | }
 82 | 
 83 | .btn-default {
 84 |     border: none;
 85 |     background-color: #dde2e7;
 86 |     background-image: linear-gradient(#dde2e7,#dde2e7);
 87 |     color: #444;
 88 | }
 89 | 
 90 | #content h3 {
 91 |   margin-top: 15px;
 92 |   margin-bottom: 15px;
 93 | }
 94 | 
 95 | #content h3 button {
 96 |     margin-right: 10px;
 97 | }
 98 | 
 99 | ul.items {
100 |   list-style: none;
101 |   padding: 0;
102 |   margin: 0;
103 | }
104 | ul.items > li > a {
105 |   margin-bottom: 15px;
106 |   display: flex;
107 |   color: initial;
108 |   text-decoration: initial;
109 | }
110 | ul.items > li > a > i {
111 |   padding: 7px 10px 0;
112 | }
113 | ul.items > li:hover {
114 |   color: orange;
115 |   cursor: pointer;
116 | }
117 | ul.items > li:hover h5 {
118 |   color: orange;
119 | }
120 | .item {
121 |   padding: 5px 5px 5px;
122 |   flex: 1;
123 | }
124 | .item h5 {
125 |   margin-top: 0;
126 |   margin-bottom: 5px;
127 | }
128 | img {
129 |   max-width: 100%;
130 |   max-height: 500px;
131 | }
132 | p {
133 |   margin: 5px 0;
134 | }
135 | p > i {
136 |   width: 30px;
137 |   text-align: center;
138 | }
139 | .not-seeking {
140 |   opacity: 0.6;
141 | }
142 | .seeking {
143 |   display: inline-block;
144 |   padding: 20px 30px;
145 |   margin-top: 30px;
146 |   border-radius: 15px;
147 |   font-weight: bold;
148 |   background: #ffffc6;
149 | }
150 | 
151 | .seeking > button {
152 |   margin-left: 15px;
153 | }
154 | .description {
155 |   max-width: 450px;
156 | }
157 | .genres {
158 |   margin-bottom: 15px;
159 | }
160 | span.genre {
161 |   display: inline-block;
162 |   font-family: monospace;
163 |   padding: 4px 8px;
164 |   background: #f0f0f0;
165 |   margin: 0 5px 5px 0;
166 |   border-radius: 3px;
167 |   color: #676767;
168 |   font-size: 0.9em;
169 |   text-transform: uppercase;
170 |   border: solid 1px #eee;
171 | }
172 | .monospace {
173 |   font-family: monospace;
174 |   text-transform: uppercase;
175 | }
176 | h1.monospace {
177 |   font-size: 2.5rem;
178 | }
179 | 
180 | h2.monospace {
181 |   font-size: 2.25rem;
182 |   opacity: 0.7;
183 | }
184 | .shows .tile-show {
185 |   height: 350px;
186 | }
187 | .tile {
188 |   text-align: center;
189 |   padding: 15px 25px;
190 |   border: solid 1px #ebebeb;
191 |   height: 325px;
192 |   margin-bottom: 15px;
193 | }
194 | .tile img {
195 |   max-height: 200px;
196 | }
197 | .form-wrapper {
198 |   max-width: 400px;
199 | }
200 | .form-inline {
201 |   font-size: 0;
202 | }
203 | .form-inline .form-group {
204 |   width: 50%;
205 | }
206 | .form-inline .form-control {
207 |   width: 100%;
208 | }
209 | .subtitle {
210 |   opacity: 0.5;
211 | }


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/static/css/main.quickfix.css:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * @file
 4 |  * Quickfix stylesheet file.
 5 |  *
 6 |  * Contains immediate fixes that should be revised later and added in the
 7 |  * main.css.
 8 |  */
 9 | 
10 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/static/css/main.responsive.css:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * @file
 4 |  * Main responsive stylesheet file.
 5 |  */
 6 | 
 7 | 
 8 | /*****************************************************************************
 9 |  * Extra small devices (phones, up to 767px)
10 |  ****************************************************************************/
11 | @media (max-width: 767px) {}
12 | /* Extra small devices (phones, up to 767px) end */
13 | 
14 | 
15 | /*****************************************************************************
16 |  * Small devices (tablets, 768px and up)
17 |  ****************************************************************************/
18 | @media (min-width: 768px) {}
19 | /* Small devices (tablets, 768px and up) end */
20 | 
21 | 
22 | /*****************************************************************************
23 |  * Medium devices (desktops, 992px and up)
24 |  ****************************************************************************/
25 | @media (max-width: 992px) {}
26 | /* Medium devices (desktops, 992px and up) end */
27 | 
28 | 
29 | /*****************************************************************************
30 |  * Large devices (large desktops, 1200px and up)
31 |  ****************************************************************************/
32 | @media (max-width: 1200px) {}
33 | /* Large devices (large desktops, 1200px and up) end */
34 | 
35 | 
36 | /*****************************************************************************
37 |  * Various other styles
38 |  ****************************************************************************/
39 | 
40 | /* Various other styles end */
41 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/static/fonts/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/FSND/eb54c2ef45d7fdfeb022dd7ca793e49967ce9aaa/projects/01_fyyur/starter_code/static/fonts/FontAwesome.otf


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/static/fonts/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/FSND/eb54c2ef45d7fdfeb022dd7ca793e49967ce9aaa/projects/01_fyyur/starter_code/static/fonts/fontawesome-webfont.eot


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/static/fonts/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/FSND/eb54c2ef45d7fdfeb022dd7ca793e49967ce9aaa/projects/01_fyyur/starter_code/static/fonts/fontawesome-webfont.ttf


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/static/fonts/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/FSND/eb54c2ef45d7fdfeb022dd7ca793e49967ce9aaa/projects/01_fyyur/starter_code/static/fonts/fontawesome-webfont.woff


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/static/img/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/FSND/eb54c2ef45d7fdfeb022dd7ca793e49967ce9aaa/projects/01_fyyur/starter_code/static/img/.gitkeep


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/static/img/front-splash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/FSND/eb54c2ef45d7fdfeb022dd7ca793e49967ce9aaa/projects/01_fyyur/starter_code/static/img/front-splash.jpg


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/static/js/libs/respond-1.4.2.min.js:
--------------------------------------------------------------------------------
1 | /*! Respond.js v1.4.2: min/max-width media query polyfill * Copyright 2013 Scott Jehl
2 |  * Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT
3 |  *  */
4 | 
5 | !function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='&shy;<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b<s.length;b++){var c=s[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!o[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(v(c.styleSheet.rawCssText,e,f),o[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!r||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}w()};x(),c.update=x,c.getEmValue=t,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/static/js/plugins.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // usage: log('inside coolFunc', this, arguments);
 3 | // paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
 4 | window.log = function(){
 5 |   log.history = log.history || [];   // store logs to an array for reference
 6 |   log.history.push(arguments);
 7 |   if(this.console) {
 8 |     arguments.callee = arguments.callee.caller;
 9 |     var newarr = [].slice.call(arguments);
10 |     (typeof console.log === 'object' ? log.apply.call(console.log, console, newarr) : console.log.apply(console, newarr));
11 |   }
12 | };
13 | 
14 | // make it safe to use console.log always
15 | (function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,timeStamp,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();){b[a]=b[a]||c}})((function(){try
16 | {console.log();return window.console;}catch(err){return window.console={};}})());
17 | 
18 | 
19 | // place any jQuery/helper plugins in here, instead of separate, slower script files.
20 | 
21 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/static/js/script.js:
--------------------------------------------------------------------------------
1 | window.parseISOString = function parseISOString(s) {
2 |   var b = s.split(/\D+/);
3 |   return new Date(Date.UTC(b[0], --b[1], b[2], b[3], b[4], b[5], b[6]));
4 | };
5 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/errors/404.html:
--------------------------------------------------------------------------------
1 | {% extends 'layouts/main.html' %}
2 | {% block content %}
3 |   <h1>Sorry ...</h1>
4 |   <p>There's nothing here!</p>
5 |   <p><a href="{{url_for('index')}}">Back</a></p>
6 | {% endblock %}
7 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/errors/500.html:
--------------------------------------------------------------------------------
1 | {% extends 'layouts/main.html' %}
2 | {% block content %}
3 | <h1>Oops ...</h1>
4 | <p>Something went wrong.</p>
5 | <p><a href="{{url_for('index')}}">Back</a></p>
6 | {% endblock %}
7 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/forms/edit_artist.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layouts/main.html' %}
 2 | {% block title %}Edit Artist{% endblock %}
 3 | {% block content %}
 4 |   <div class="form-wrapper">
 5 |     <form class="form" method="post" action="/artists/{{artist.id}}/edit">
 6 |       <h3 class="form-heading">Edit artist <em>{{ artist.name }}</em></h3>
 7 |       <div class="form-group">
 8 |         <label for="name">Name</label>
 9 |         {{ form.name(class_ = 'form-control', autofocus = true) }}
10 |       </div>
11 |       <div class="form-group">
12 |           <label>City & State</label>
13 |           <div class="form-inline">
14 |             <div class="form-group">
15 |               {{ form.city(class_ = 'form-control', placeholder='City', autofocus = true) }}
16 |             </div>
17 |             <div class="form-group">
18 |               {{ form.state(class_ = 'form-control', placeholder='State', autofocus = true) }}
19 |             </div>
20 |           </div>
21 |       </div>
22 |       <div class="form-group">
23 |           <label for="phone">Phone</label>
24 |           {{ form.phone(class_ = 'form-control', placeholder='xxx-xxx-xxxx', autofocus = true) }}
25 |         </div>
26 |       <div class="form-group">
27 |         <label for="genres">Genres</label>
28 |         <small>Ctrl+Click to select multiple</small>
29 |         {{ form.genres(class_ = 'form-control', placeholder='Genres, separated by commas', autofocus = true) }}
30 |       </div>
31 |       <div class="form-group">
32 |           <label for="facebook_link">Facebook Link</label>
33 |           {{ form.facebook_link(class_ = 'form-control', placeholder='http://', autofocus = true) }}
34 |         </div>
35 |       
36 |       <div class="form-group">
37 |           <label for="image_link">Image Link</label>
38 |           {{ form.image_link(class_ = 'form-control', placeholder='http://', autofocus = true) }}
39 |       </div>
40 | 
41 |       <div class="form-group">
42 |             <label for="website_link">Website Link</label>
43 |             {{ form.website_link(class_ = 'form-control', placeholder='http://', autofocus = true) }}
44 |       </div>
45 | 
46 |       <div class="form-group">
47 |           <label for="seeking_venue">Looking for Venues</label>
48 |           {{ form.seeking_venue(placeholder='Venue', autofocus = true) }}
49 |       </div>
50 | 
51 |       <div class="form-group">
52 |           <label for="seeking_description">Seeking Description</label>
53 |           {{ form.seeking_description(class_ = 'form-control', autofocus = true) }}
54 |       </div>
55 |       
56 |       <input type="submit" value="Edit Artist" class="btn btn-primary btn-lg btn-block">
57 |     </form>
58 |   </div>
59 | {% endblock %}
60 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/forms/edit_venue.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layouts/main.html' %}
 2 | {% block title %}Edit Venue{% endblock %}
 3 | {% block content %}
 4 |   <div class="form-wrapper">
 5 |     <form class="form" method="post" action="/venues/{{venue.id}}/edit">
 6 |       <h3 class="form-heading">Edit venue <em>{{ venue.name }}</em> <a href="{{ url_for('index') }}" title="Back to homepage"><i class="fa fa-home pull-right"></i></a></h3>
 7 |       <div class="form-group">
 8 |         <label for="name">Name</label>
 9 |         {{ form.name(class_ = 'form-control', autofocus = true) }}
10 |       </div>
11 |       <div class="form-group">
12 |           <label>City & State</label>
13 |           <div class="form-inline">
14 |             <div class="form-group">
15 |               {{ form.city(class_ = 'form-control', placeholder='City', autofocus = true) }}
16 |             </div>
17 |             <div class="form-group">
18 |               {{ form.state(class_ = 'form-control', placeholder='State', autofocus = true) }}
19 |             </div>
20 |           </div>
21 |       </div>
22 |       <div class="form-group">
23 |         <label for="address">Address</label>
24 |         {{ form.address(class_ = 'form-control', autofocus = true) }}
25 |       </div>
26 |       <div class="form-group">
27 |           <label for="phone">Phone</label>
28 |           {{ form.phone(class_ = 'form-control', placeholder='xxx-xxx-xxxx', autofocus = true) }}
29 |         </div>
30 |       <div class="form-group">
31 |         <label for="genres">Genres</label>
32 |         <small>Ctrl+Click to select multiple</small>
33 |         {{ form.genres(class_ = 'form-control', placeholder='Genres, separated by commas', autofocus = true) }}
34 |       </div>
35 |       <div class="form-group">
36 |           <label for="facebook_link">Facebook Link</label>
37 |           {{ form.facebook_link(class_ = 'form-control', placeholder='http://', autofocus = true) }}
38 |        </div>
39 |       
40 |        <div class="form-group">
41 |           <label for="image_link">Image Link</label>
42 |           {{ form.image_link(class_ = 'form-control', placeholder='http://', autofocus = true) }}
43 |        </div>
44 | 
45 |        <div class="form-group">
46 |               <label for="website_link">Website Link</label>
47 |               {{ form.website_link(class_ = 'form-control', placeholder='http://', autofocus = true) }}
48 |         </div>
49 | 
50 |         <div class="form-group">
51 |              <label for="seeking_talent">Looking for Talent</label>
52 |              {{ form.seeking_talent(placeholder='Venue', autofocus = true) }}
53 |         </div>
54 | 
55 |         <div class="form-group">
56 |             <label for="seeking_description">Seeking Description</label>
57 |             {{ form.seeking_description(class_ = 'form-control', autofocus = true) }}
58 |           </div>
59 |       
60 |       <input type="submit" value="Edit Venue" class="btn btn-primary btn-lg btn-block">
61 |     </form>
62 |   </div>
63 | {% endblock %}
64 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/forms/new_artist.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layouts/main.html' %}
 2 | {% block title %}New Artist{% endblock %}
 3 | {% block content %}
 4 |   <div class="form-wrapper">
 5 |     <form method="post" class="form">
 6 |       <h3 class="form-heading">List a new artist</h3>
 7 |       <div class="form-group">
 8 |         <label for="name">Name</label>
 9 |         {{ form.name(class_ = 'form-control', autofocus = true) }}
10 |       </div>
11 |       <div class="form-group">
12 |           <label>City & State</label>
13 |           <div class="form-inline">
14 |             <div class="form-group">
15 |               {{ form.city(class_ = 'form-control', placeholder='City', autofocus = true) }}
16 |             </div>
17 |             <div class="form-group">
18 |               {{ form.state(class_ = 'form-control', placeholder='State', autofocus = true) }}
19 |             </div>
20 |           </div>
21 |       </div>
22 |       <div class="form-group">
23 |           <label for="phone">Phone</label>
24 |           {{ form.phone(class_ = 'form-control', placeholder='xxx-xxx-xxxx', autofocus = true) }}
25 |         </div>
26 |       <div class="form-group">
27 |         <label for="genres">Genres</label>
28 |         <small>Ctrl+Click to select multiple</small>
29 |         {{ form.genres(class_ = 'form-control', placeholder='Genres, separated by commas', autofocus = true) }}
30 |       </div>
31 |       <div class="form-group">
32 |           <label for="facebook_link">Facebook Link</label>
33 |           {{ form.facebook_link(class_ = 'form-control', placeholder='http://', autofocus = true) }}
34 |         </div>
35 |       
36 |         <div class="form-group">
37 |           <label for="image_link">Image Link</label>
38 |           {{ form.image_link(class_ = 'form-control', placeholder='http://', autofocus = true) }}
39 |         </div>
40 | 
41 |         <div class="form-group">
42 |             <label for="website_link">Website Link</label>
43 |             {{ form.website_link(class_ = 'form-control', placeholder='http://', autofocus = true) }}
44 |           </div>
45 | 
46 |           <div class="form-group">
47 |               <label for="seeking_venue">Looking for Venues</label>
48 |               {{ form.seeking_venue(placeholder='Venue', autofocus = true) }}
49 |           </div>
50 | 
51 |           <div class="form-group">
52 |               <label for="seeking_description">Seeking Description</label>
53 |               {{ form.seeking_description(class_ = 'form-control', autofocus = true) }}
54 |             </div>
55 |       <input type="submit" value="Create Artist" class="btn btn-primary btn-lg btn-block">
56 |     </form>
57 |   </div>
58 | {% endblock %}
59 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/forms/new_show.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layouts/main.html' %}
 2 | {% block title %}New Show Listing{% endblock %}
 3 | {% block content %}
 4 |   <div class="form-wrapper">
 5 |     <form method="post" class="form">
 6 |       <h3 class="form-heading">List a new show</h3>
 7 |       <div class="form-group">
 8 |         <label for="artist_id">Artist ID</label>
 9 |         <small>ID can be found on the Artist's Page</small>
10 |         {{ form.artist_id(class_ = 'form-control', autofocus = true) }}
11 |       </div>
12 |       <div class="form-group">
13 |         <label for="venue_id">Venue ID</label>
14 |         <small>ID can be found on the Venue's Page</small>
15 |         {{ form.venue_id(class_ = 'form-control', autofocus = true) }}
16 |       </div>
17 |       <div class="form-group">
18 |           <label for="start_time">Start Time</label>
19 |           {{ form.start_time(class_ = 'form-control', placeholder='YYYY-MM-DD HH:MM', autofocus = true) }}
20 |         </div>
21 |       <input type="submit" value="Create Venue" class="btn btn-primary btn-lg btn-block">
22 |     </form>
23 |   </div>
24 | {% endblock %}


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/forms/new_venue.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layouts/main.html' %}
 2 | {% block title %}New Venue{% endblock %}
 3 | {% block content %}
 4 |   <div class="form-wrapper">
 5 |     <form method="post" class="form" action="/venues/create">
 6 |       <h3 class="form-heading">List a new venue <a href="{{ url_for('index') }}" title="Back to homepage"><i class="fa fa-home pull-right"></i></a></h3>
 7 |       <div class="form-group">
 8 |         <label for="name">Name</label>
 9 |         {{ form.name(class_ = 'form-control', autofocus = true) }}
10 |       </div>
11 |       <div class="form-group">
12 |           <label>City & State</label>
13 |           <div class="form-inline">
14 |             <div class="form-group">
15 |               {{ form.city(class_ = 'form-control', placeholder='City', autofocus = true) }}
16 |             </div>
17 |             <div class="form-group">
18 |               {{ form.state(class_ = 'form-control', placeholder='State', autofocus = true) }}
19 |             </div>
20 |           </div>
21 |       </div>
22 |       <div class="form-group">
23 |         <label for="address">Address</label>
24 |         {{ form.address(class_ = 'form-control', autofocus = true) }}
25 |       </div>
26 |       <div class="form-group">
27 |           <label for="phone">Phone</label>
28 |           {{ form.phone(class_ = 'form-control', placeholder='xxx-xxx-xxxx', autofocus = true) }}
29 |         </div>
30 |       <div class="form-group">
31 |         <label for="genres">Genres</label>
32 |         <small>Ctrl+Click to select multiple</small>
33 |         {{ form.genres(class_ = 'form-control', placeholder='Genres, separated by commas', autofocus = true) }}
34 |       </div>
35 |       
36 |       <div class="form-group">
37 |           <label for="facebook_link">Facebook Link</label>
38 |           {{ form.facebook_link(class_ = 'form-control', placeholder='http://', autofocus = true) }}
39 |        </div>
40 |       
41 |        <div class="form-group">
42 |           <label for="image_link">Image Link</label>
43 |           {{ form.image_link(class_ = 'form-control', placeholder='http://', autofocus = true) }}
44 |        </div>
45 | 
46 |        <div class="form-group">
47 |             <label for="website_link">Website Link</label>
48 |             {{ form.website_link(class_ = 'form-control', placeholder='http://', autofocus = true) }}
49 |        </div>
50 | 
51 |        <div class="form-group">
52 |              <label for="seeking_talent">Looking for Talent</label>
53 |              {{ form.seeking_talent(placeholder='Venue', autofocus = true) }}
54 |        </div>
55 | 
56 |        <div class="form-group">
57 |             <label for="seeking_description">Seeking Description</label>
58 |             {{ form.seeking_description(class_ = 'form-control', placeholder='Description', autofocus = true) }}
59 |        </div>
60 |       <input type="submit" value="Create Venue" class="btn btn-primary btn-lg btn-block">
61 |     </form>
62 |   </div>
63 | {% endblock %}
64 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/layouts/form.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 | <meta charset="utf-8">
 4 | <title>{% block title %}{% endblock %}</title>
 5 | 
 6 | <!-- meta -->
 7 | <meta name="description" content="">
 8 | <meta name="author" content="">
 9 | <meta name="viewport" content="width=device-width,initial-scale=1">
10 | <!-- /meta -->
11 | 
12 | <!-- styles -->
13 | <link type="text/css" rel="stylesheet" href="/static/css/font-awesome-4.1.0.min.css" />
14 | <link type="text/css" rel="stylesheet" href="/static/css/bootstrap-3.1.1.min.css">
15 | <link type="text/css" rel="stylesheet" href="/static/css/bootstrap-theme-3.1.1.min.css" />
16 | <link type="text/css" rel="stylesheet" href="/static/css/layout.main.css" />
17 | <link type="text/css" rel="stylesheet" href="/static/css/main.css" />
18 | <link type="text/css" rel="stylesheet" href="/static/css/main.responsive.css" />
19 | <link type="text/css" rel="stylesheet" href="/static/css/main.quickfix.css" />
20 | <!-- /styles -->
21 | 
22 | <!-- favicons -->
23 | <link rel="shortcut icon" href="/static/ico/favicon.png">
24 | <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/ico/apple-touch-icon-144-precomposed.png">
25 | <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/ico/apple-touch-icon-114-precomposed.png">
26 | <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/ico/apple-touch-icon-72-precomposed.png">
27 | <link rel="apple-touch-icon-precomposed" href="/static/ico/apple-touch-icon-57-precomposed.png">
28 | <link rel="shortcut icon" href="/static/ico/favicon.png">
29 | <!-- /favicons -->
30 | 
31 | <!-- scripts -->
32 | <script src="/static/js/libs/modernizr-2.8.2.min.js"></script>
33 | <!--[if lt IE 9]><script src="/static/js/libs/respond-1.4.2.min.js"></script><![endif]-->
34 | <!-- /scripts -->
35 | 
36 | </head>
37 | <body class="form-only-page">
38 | 
39 |   <div class="container">
40 | 
41 |     {% with messages = get_flashed_messages() %}
42 |       {% if messages %}
43 |         {% for message in messages %}
44 |           <div class="alert alert-warning fade in">
45 |             <a class="close" data-dismiss="alert">&times;</a>
46 |             {{ message }}
47 |           </div>
48 |         {% endfor %}
49 |       {% endif %}
50 |     {% endwith %}
51 | 
52 |     {% block content %}{% endblock %}
53 | 
54 |   </div>
55 | 
56 |   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
57 |   <script>window.jQuery || document.write('<script type="text/javascript" src="/static/js/libs/jquery-1.11.1.min.js"><\/script>')</script>
58 |   <script type="text/javascript" src="/static/js/libs/bootstrap-3.1.1.min.js" defer></script>
59 |   <script type="text/javascript" src="/static/js/plugins.js" defer></script>
60 |   <script type="text/javascript" src="/static/js/script.js" defer></script>
61 | 
62 | </body>
63 | </html>
64 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/layouts/main.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <head>
  3 | <meta charset="utf-8">
  4 | <title>{% block title %}{% endblock %}</title>
  5 | 
  6 | <!-- meta -->
  7 | <meta name="description" content="">
  8 | <meta name="author" content="">
  9 | <meta name="viewport" content="width=device-width,initial-scale=1">
 10 | <!-- /meta -->
 11 | 
 12 | <!-- styles -->
 13 | <link type="text/css" rel="stylesheet" href="/static/css/bootstrap.min.css">
 14 | <link type="text/css" rel="stylesheet" href="/static/css/layout.main.css" />
 15 | <link type="text/css" rel="stylesheet" href="/static/css/main.css" />
 16 | <link type="text/css" rel="stylesheet" href="/static/css/main.responsive.css" />
 17 | <link type="text/css" rel="stylesheet" href="/static/css/main.quickfix.css" />
 18 | <!-- /styles -->
 19 | 
 20 | <!-- favicons -->
 21 | <link rel="shortcut icon" href="/static/ico/favicon.png">
 22 | <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/ico/apple-touch-icon-144-precomposed.png">
 23 | <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/ico/apple-touch-icon-114-precomposed.png">
 24 | <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/ico/apple-touch-icon-72-precomposed.png">
 25 | <link rel="apple-touch-icon-precomposed" href="/static/ico/apple-touch-icon-57-precomposed.png">
 26 | <link rel="shortcut icon" href="/static/ico/favicon.png">
 27 | <!-- /favicons -->
 28 | 
 29 | <!-- scripts -->
 30 | <script src="https://kit.fontawesome.com/af77674fe5.js"></script>
 31 | <script src="/static/js/libs/modernizr-2.8.2.min.js"></script>
 32 | <script src="/static/js/libs/moment.min.js"></script>
 33 | <script type="text/javascript" src="/static/js/script.js" defer></script>
 34 | <!--[if lt IE 9]><script src="/static/js/libs/respond-1.4.2.min.js"></script><![endif]-->
 35 | <!-- /scripts -->
 36 | </head>
 37 | <body>
 38 | 
 39 |   <!-- Wrap all page content here -->
 40 |   <div id="wrap">
 41 | 
 42 |     <!-- Fixed navbar -->
 43 |     <div class="navbar navbar-default navbar-fixed-top">
 44 |       <div class="container">
 45 |         <div class="navbar-header">
 46 |           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 47 |             <span class="icon-bar"></span>
 48 |             <span class="icon-bar"></span>
 49 |             <span class="icon-bar"></span>
 50 |           </button>
 51 |           <a class="navbar-brand" href="/">🔥</a>
 52 |         </div>
 53 |         <div class="collapse navbar-collapse">
 54 |           <ul class="nav navbar-nav">
 55 |             <li>
 56 |               {% if (request.endpoint == 'venues') or
 57 |                 (request.endpoint == 'search_venues') or
 58 |                 (request.endpoint == 'show_venue') %}
 59 |               <form class="search" method="post" action="/venues/search">
 60 |                 <input class="form-control"
 61 |                   type="search"
 62 |                   name="search_term"
 63 |                   placeholder="Find a venue"
 64 |                   aria-label="Search">
 65 |               </form>
 66 |               {% endif %}
 67 |               {% if (request.endpoint == 'artists') or
 68 |                 (request.endpoint == 'search_artists') or
 69 |                 (request.endpoint == 'show_artist') %}
 70 |               <form class="search" method="post" action="/artists/search">
 71 |                 <input class="form-control"
 72 |                   type="search"
 73 |                   name="search_term"
 74 |                   placeholder="Find an artist"
 75 |                   aria-label="Search">
 76 |               </form>
 77 |               {% endif %}
 78 |             </li>
 79 |           </ul>
 80 |           <ul class="nav navbar-nav">
 81 |             <li {% if request.endpoint == 'venues' %} class="active" {% endif %}><a href="{{ url_for('venues') }}">Venues</a></li>
 82 |             <li {% if request.endpoint == 'artists' %} class="active" {% endif %}><a href="{{ url_for('artists') }}">Artists</a></li>
 83 |             <li {% if request.endpoint == 'shows' %} class="active" {% endif %}><a href="{{ url_for('shows') }}">Shows</a></li>
 84 |           </ul>
 85 |         </div><!--/.nav-collapse -->
 86 |       </div>
 87 |     </div>
 88 | 
 89 |     <!-- Begin page content -->
 90 |     <main id="content" role="main" class="container">
 91 | 
 92 |       {% with messages = get_flashed_messages() %}
 93 |         {% if messages %}
 94 |           {% for message in messages %}
 95 |             <div class="alert alert-block alert-info fade in">
 96 |               <a class="close" data-dismiss="alert">&times;</a>
 97 |               {{ message }}
 98 |             </div>
 99 |           {% endfor %}
100 |         {% endif %}
101 |       {% endwith %}
102 | 
103 |       {% block content %}{% endblock %}
104 |       
105 |     </main>
106 | 
107 |   </div>
108 | 
109 |   <div id="footer">
110 |     <div class="container">
111 |       <p>Fyyur &copy; All Rights Reserved.</p>
112 |       {% block footer %}{% endblock %}
113 |     </div>
114 |   </div>
115 | 
116 |   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
117 |   <script>window.jQuery || document.write('<script type="text/javascript" src="/static/js/libs/jquery-1.11.1.min.js"><\/script>')</script>
118 |   <script type="text/javascript" src="/static/js/libs/bootstrap-3.1.1.min.js" defer></script>
119 |   <script type="text/javascript" src="/static/js/plugins.js" defer></script>
120 | 
121 | </body>
122 | </html>
123 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/pages/artists.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layouts/main.html' %}
 2 | {% block title %}Fyyur | Artists{% endblock %}
 3 | {% block content %}
 4 | <ul class="items">
 5 | 	{% for artist in artists %}
 6 | 	<li>
 7 | 		<a href="/artists/{{ artist.id }}">
 8 | 			<i class="fas fa-users"></i>
 9 | 			<div class="item">
10 | 				<h5>{{ artist.name }}</h5>
11 | 			</div>
12 | 		</a>
13 | 	</li>
14 | 	{% endfor %}
15 | </ul>
16 | {% endblock %}


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/pages/home.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | 	margin-bottom: 1em;
3 | }


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/pages/home.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layouts/main.html' %}
 2 | {% block title %}Fyyur{% endblock %}
 3 | {% block content %}
 4 | <div class="row">
 5 | 	<div class="col-sm-6">
 6 | 		<h1>Fyyur 🔥</h1>
 7 | 		<p class="lead">Where musical artists meet musical venues.</p>
 8 | 		<h3>
 9 | 			<a href="/venues"><button class="btn btn-primary btn-lg">Find a venue</button></a>
10 | 			<a href="/venues/create"><button class="btn btn-default btn-lg">Post a venue</button></a>
11 | 		</h3>
12 | 		<h3>
13 | 			<a href="/artists"><button class="btn btn-primary btn-lg">Find an artist</button></a>
14 | 			<a href="/artists/create"><button class="btn btn-default btn-lg">Post an artist</button></a>
15 | 		</h3>
16 | 		<p class="lead">Publicize about your show for free.</p>
17 | 		<h3>
18 | 			<a href="/shows/create"><button class="btn btn-default btn-lg">Post a show</button></a>
19 | 		</h3>
20 | 	</div>
21 | 	<div class="col-sm-6 hidden-sm hidden-xs">
22 | 		<img id="front-splash" src="{{ url_for('static',filename='img/front-splash.jpg') }}" alt="Front Photo of Musical Band" />
23 | 	</div>
24 | </div>
25 | {% endblock %}


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/pages/search_artists.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layouts/main.html' %}
 2 | {% block title %}Fyyur | Artists Search{% endblock %}
 3 | {% block content %}
 4 | <h3>Number of search results for "{{ search_term }}": {{ results.count }}</h3>
 5 | <ul class="items">
 6 | 	{% for artist in results.data %}
 7 | 	<li>
 8 | 		<a href="/artists/{{ artist.id }}">
 9 | 			<i class="fas fa-users"></i>
10 | 			<div class="item">
11 | 				<h5>{{ artist.name }}</h5>
12 | 			</div>
13 | 		</a>
14 | 	</li>
15 | 	{% endfor %}
16 | </ul>
17 | {% endblock %}


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/pages/search_venues.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layouts/main.html' %}
 2 | {% block title %}Fyyur | Venues Search{% endblock %}
 3 | {% block content %}
 4 | <h3>Number of search results for "{{ search_term }}": {{ results.count }}</h3>
 5 | <ul class="items">
 6 | 	{% for venue in results.data %}
 7 | 	<li>
 8 | 		<a href="/venues/{{ venue.id }}">
 9 | 			<i class="fas fa-music"></i>
10 | 			<div class="item">
11 | 				<h5>{{ venue.name }}</h5>
12 | 			</div>
13 | 		</a>
14 | 	</li>
15 | 	{% endfor %}
16 | </ul>
17 | {% endblock %}


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/pages/show.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layouts/main.html' %}
 2 | {% block title %}Show Search{% endblock %}
 3 | {% block content %}
 4 | 
 5 |     <div class="page-header">
 6 |         <h1>Fyyur Search!</h1>
 7 |     </div>
 8 |     <p class="lead"> Show Search </p>
 9 | 
10 |     <ul class="nav nav-pills">
11 |         <li class="active"><a>Shows</a></li>
12 |     </ul>
13 | 
14 | {#    Todo implement show search frontend #}
15 | 
16 | {% endblock %}


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/pages/show_artist.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layouts/main.html' %}
 2 | {% block title %}{{ artist.name }} | Artist{% endblock %}
 3 | {% block content %}
 4 | <div class="row">
 5 | 	<div class="col-sm-6">
 6 | 		<h1 class="monospace">
 7 | 			{{ artist.name }}
 8 | 		</h1>
 9 | 		<p class="subtitle">
10 | 			ID: {{ artist.id }}
11 | 		</p>
12 | 		<div class="genres">
13 | 			{% for genre in artist.genres %}
14 | 			<span class="genre">{{ genre }}</span>
15 | 			{% endfor %}
16 | 		</div>
17 | 		<p>
18 | 			<i class="fas fa-globe-americas"></i> {{ artist.city }}, {{ artist.state }}
19 | 		</p>
20 | 		<p>
21 | 			<i class="fas fa-phone-alt"></i> {% if artist.phone %}{{ artist.phone }}{% else %}No Phone{% endif %}
22 |         </p>
23 |         <p>
24 | 			<i class="fas fa-link"></i> {% if artist.website %}<a href="{{ artist.website }}" target="_blank">{{ artist.website }}</a>{% else %}No Website{% endif %}
25 | 		</p>
26 | 		<p>
27 | 			<i class="fab fa-facebook-f"></i> {% if artist.facebook_link %}<a href="{{ artist.facebook_link }}" target="_blank">{{ artist.facebook_link }}</a>{% else %}No Facebook Link{% endif %}
28 |         </p>
29 | 		{% if artist.seeking_venue %}
30 | 		<div class="seeking">
31 | 			<p class="lead">Currently seeking performance venues</p>
32 | 			<div class="description">
33 | 				<i class="fas fa-quote-left"></i> {{ artist.seeking_description }} <i class="fas fa-quote-right"></i>
34 | 			</div>
35 | 		</div>
36 | 		{% else %}	
37 | 		<p class="not-seeking">
38 | 			<i class="fas fa-moon"></i> Not currently seeking performance venues
39 | 		</p>
40 | 		{% endif %}
41 | 	</div>
42 | 	<div class="col-sm-6">
43 | 		<img src="{{ artist.image_link }}" alt="Venue Image" />
44 | 	</div>
45 | </div>
46 | <section>
47 | 	<h2 class="monospace">{{ artist.upcoming_shows_count }} Upcoming {% if artist.upcoming_shows_count == 1 %}Show{% else %}Shows{% endif %}</h2>
48 | 	<div class="row">
49 | 		{%for show in artist.upcoming_shows %}
50 | 		<div class="col-sm-4">
51 | 			<div class="tile tile-show">
52 | 				<img src="{{ show.venue_image_link }}" alt="Show Venue Image" />
53 | 				<h5><a href="/venues/{{ show.venue_id }}">{{ show.venue_name }}</a></h5>
54 | 				<h6>{{ show.start_time|datetime('full') }}</h6>
55 | 			</div>
56 | 		</div>
57 | 		{% endfor %}
58 | 	</div>
59 | </section>
60 | <section>
61 | 	<h2 class="monospace">{{ artist.past_shows_count }} Past {% if artist.past_shows_count == 1 %}Show{% else %}Shows{% endif %}</h2>
62 | 	<div class="row">
63 | 		{%for show in artist.past_shows %}
64 | 		<div class="col-sm-4">
65 | 			<div class="tile tile-show">
66 | 				<img src="{{ show.venue_image_link }}" alt="Show Venue Image" />
67 | 				<h5><a href="/venues/{{ show.venue_id }}">{{ show.venue_name }}</a></h5>
68 | 				<h6>{{ show.start_time|datetime('full') }}</h6>
69 | 			</div>
70 | 		</div>
71 | 		{% endfor %}
72 | 	</div>
73 | </section>
74 | 
75 | <a href="/artists/{{ artist.id }}/edit"><button class="btn btn-primary btn-lg">Edit</button></a>
76 | 
77 | {% endblock %}
78 | 
79 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/pages/show_venue.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layouts/main.html' %}
 2 | {% block title %}Venue Search{% endblock %}
 3 | {% block content %}
 4 | <div class="row">
 5 | 	<div class="col-sm-6">
 6 | 		<h1 class="monospace">
 7 | 			{{ venue.name }}
 8 | 		</h1>
 9 | 		<p class="subtitle">
10 | 			ID: {{ venue.id }}
11 | 		</p>
12 | 		<div class="genres">
13 | 			{% for genre in venue.genres %}
14 | 			<span class="genre">{{ genre }}</span>
15 | 			{% endfor %}
16 | 		</div>
17 | 		<p>
18 | 			<i class="fas fa-globe-americas"></i> {{ venue.city }}, {{ venue.state }}
19 | 		</p>
20 | 		<p>
21 | 			<i class="fas fa-map-marker"></i> {% if venue.address %}{{ venue.address }}{% else %}No Address{% endif %}
22 | 		</p>
23 | 		<p>
24 | 			<i class="fas fa-phone-alt"></i> {% if venue.phone %}{{ venue.phone }}{% else %}No Phone{% endif %}
25 | 		</p>
26 | 		<p>
27 | 			<i class="fas fa-link"></i> {% if venue.website %}<a href="{{ venue.website }}" target="_blank">{{ venue.website }}</a>{% else %}No Website{% endif %}
28 | 		</p>
29 | 		<p>
30 | 			<i class="fab fa-facebook-f"></i> {% if venue.facebook_link %}<a href="{{ venue.facebook_link }}" target="_blank">{{ venue.facebook_link }}</a>{% else %}No Facebook Link{% endif %}
31 | 		</p>
32 | 		{% if venue.seeking_talent %}
33 | 		<div class="seeking">
34 | 			<p class="lead">Currently seeking talent</p>
35 | 			<div class="description">
36 | 				<i class="fas fa-quote-left"></i> {{ venue.seeking_description }} <i class="fas fa-quote-right"></i>
37 | 			</div>
38 | 		</div>
39 | 		{% else %}	
40 | 		<p class="not-seeking">
41 | 			<i class="fas fa-moon"></i> Not currently seeking talent
42 | 		</p>
43 | 		{% endif %}
44 | 	</div>
45 | 	<div class="col-sm-6">
46 | 		<img src="{{ venue.image_link }}" alt="Venue Image" />
47 | 	</div>
48 | </div>
49 | <section>
50 | 	<h2 class="monospace">{{ venue.upcoming_shows_count }} Upcoming {% if venue.upcoming_shows_count == 1 %}Show{% else %}Shows{% endif %}</h2>
51 | 	<div class="row">
52 | 		{%for show in venue.upcoming_shows %}
53 | 		<div class="col-sm-4">
54 | 			<div class="tile tile-show">
55 | 				<img src="{{ show.artist_image_link }}" alt="Show Artist Image" />
56 | 				<h5><a href="/artists/{{ show.artist_id }}">{{ show.artist_name }}</a></h5>
57 | 				<h6>{{ show.start_time|datetime('full') }}</h6>
58 | 			</div>
59 | 		</div>
60 | 		{% endfor %}
61 | 	</div>
62 | </section>
63 | <section>
64 | 	<h2 class="monospace">{{ venue.past_shows_count }} Past {% if venue.past_shows_count == 1 %}Show{% else %}Shows{% endif %}</h2>
65 | 	<div class="row">
66 | 		{%for show in venue.past_shows %}
67 | 		<div class="col-sm-4">
68 | 			<div class="tile tile-show">
69 | 				<img src="{{ show.artist_image_link }}" alt="Show Artist Image" />
70 | 				<h5><a href="/artists/{{ show.artist_id }}">{{ show.artist_name }}</a></h5>
71 | 				<h6>{{ show.start_time|datetime('full') }}</h6>
72 | 			</div>
73 | 		</div>
74 | 		{% endfor %}
75 | 	</div>
76 | </section>
77 | 
78 | <a href="/venues/{{ venue.id }}/edit"><button class="btn btn-primary btn-lg">Edit</button></a>
79 | 
80 | {% endblock %}
81 | 
82 | 


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/pages/shows.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layouts/main.html' %}
 2 | {% block title %}Fyyur | Shows{% endblock %}
 3 | {% block content %}
 4 | <div class="row shows">
 5 |     {%for show in shows %}
 6 |     <div class="col-sm-4">
 7 |         <div class="tile tile-show">
 8 |             <img src="{{ show.artist_image_link }}" alt="Artist Image" />
 9 |             <h4>{{ show.start_time|datetime('full') }}</h4>
10 |             <h5><a href="/artists/{{ show.artist_id }}">{{ show.artist_name }}</a></h5>
11 |             <p>playing at</p>
12 |             <h5><a href="/venues/{{ show.venue_id }}">{{ show.venue_name }}</a></h5>
13 |         </div>
14 |     </div>
15 |     {% endfor %}
16 | </div>
17 | {% endblock %}


--------------------------------------------------------------------------------
/projects/01_fyyur/starter_code/templates/pages/venues.html:
--------------------------------------------------------------------------------
 1 | {% extends 'layouts/main.html' %}
 2 | {% block title %}Fyyur | Venues{% endblock %}
 3 | {% block content %}
 4 | {% for area in areas %}
 5 | <h3>{{ area.city }}, {{ area.state }}</h3>
 6 | 	<ul class="items">
 7 | 		{% for venue in area.venues %}
 8 | 		<li>
 9 | 			<a href="/venues/{{ venue.id }}">
10 | 				<i class="fas fa-music"></i>
11 | 				<div class="item">
12 | 					<h5>{{ venue.name }}</h5>
13 | 				</div>
14 | 			</a>
15 | 		</li>
16 | 		{% endfor %}
17 | 	</ul>
18 | {% endfor %}
19 | {% endblock %}


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/.gitignore:
--------------------------------------------------------------------------------
 1 | .vscode
 2 | __pycache__
 3 | venv
 4 | 
 5 | # OS generated files #
 6 | ######################
 7 | .DS_Store
 8 | .DS_Store?
 9 | ._*
10 | .Spotlight-V100
11 | .Trashes
12 | ehthumbs.db
13 | Thumbs.db
14 | 
15 | **/node_modules
16 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/README.md:
--------------------------------------------------------------------------------
 1 | # Full Stack API Final Project
 2 | 
 3 | 
 4 | ## Full Stack Trivia
 5 | 
 6 | Udacity is invested in creating bonding experiences for its employees and students. A bunch of team members got the idea to hold trivia on a regular basis and created a webpage to manage the trivia app and play the game, but their API experience is limited and still needs to be built out.
 7 | 
 8 | That's where you come in! Help them finish the trivia app so they can start holding trivia and seeing who's the most knowledgeable of the bunch. The application must:
 9 | 
10 | 1. Display questions - both all questions and by category. Questions should show the question, category and difficulty rating by default and can show/hide the answer.
11 | 2. Delete questions.
12 | 3. Add questions and require that they include question and answer text.
13 | 4. Search for questions based on a text query string.
14 | 5. Play the quiz game, randomizing either all questions or within a specific category.
15 | 
16 | Completing this trivia app will give you the ability to structure plan, implement, and test an API - skills essential for enabling your future applications to communicate with others.
17 | 
18 | ## Starting and Submitting the Project
19 | 
20 | [Fork](https://help.github.com/en/articles/fork-a-repo) the [project repository](https://github.com/udacity/FSND/blob/master/projects/02_trivia_api/starter) and [Clone](https://help.github.com/en/articles/cloning-a-repository) your forked repository to your machine. Work on the project locally and make sure to push all your changes to the remote repository before submitting the link to your repository in the Classroom.
21 | >Once you're ready, you can submit your project on the last page.
22 | 
23 | ## About the Stack
24 | 
25 | We started the full stack application for you. It is designed with some key functional areas:
26 | 
27 | ### Backend
28 | The [./backend](https://github.com/udacity/FSND/blob/master/projects/02_trivia_api/starter/backend/README.md) directory contains a partially completed Flask and SQLAlchemy server. You will work primarily in `__init__.py` to define your endpoints and can reference models.py for DB and SQLAlchemy setup. These are the files you'd want to edit in the backend:
29 | 
30 | 1. *./backend/flaskr/`__init__.py`*
31 | 2. *./backend/test_flaskr.py*
32 | 
33 | 
34 | ### Frontend
35 | 
36 | The [./frontend](https://github.com/udacity/FSND/blob/master/projects/02_trivia_api/starter/frontend/README.md) directory contains a complete React frontend to consume the data from the Flask server. If you have prior experience building a frontend application, you should feel free to edit the endpoints as you see fit for the backend you design. If you do not have prior experience building a frontend application, you should read through the frontend code before starting and make notes regarding:
37 | 
38 | 1. What are the end points and HTTP methods the frontend is expecting to consume?
39 | 2. How are the requests from the frontend formatted? Are they expecting certain parameters or payloads? 
40 | 
41 | Pay special attention to what data the frontend is expecting from each API response to help guide how you format your API. The places where you may change the frontend behavior, and where you should be looking for the above information, are marked with `TODO`. These are the files you'd want to edit in the frontend:
42 | 
43 | 1. *./frontend/src/components/QuestionView.js*
44 | 2. *./frontend/src/components/FormView.js*
45 | 3. *./frontend/src/components/QuizView.js*
46 | 
47 | 
48 | By making notes ahead of time, you will practice the core skill of being able to read and understand code and will have a simple plan to follow to build out the endpoints of your backend API. 
49 | 
50 | 
51 | 
52 | >View the [README within ./frontend for more details.](./frontend/README.md)
53 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/backend/README.md:
--------------------------------------------------------------------------------
  1 | # Backend - Full Stack Trivia API 
  2 | 
  3 | ### Installing Dependencies for the Backend
  4 | 
  5 | 1. **Python 3.7** - Follow instructions to install the latest version of python for your platform in the [python docs](https://docs.python.org/3/using/unix.html#getting-and-installing-the-latest-version-of-python)
  6 | 
  7 | 
  8 | 2. **Virtual Enviornment** - We recommend working within a virtual environment whenever using Python for projects. This keeps your dependencies for each project separate and organaized. Instructions for setting up a virual enviornment for your platform can be found in the [python docs](https://packaging.python.org/guides/installing-using-pip-and-virtual-environments/)
  9 | 
 10 | 
 11 | 3. **PIP Dependencies** - Once you have your virtual environment setup and running, install dependencies by naviging to the `/backend` directory and running:
 12 | ```bash
 13 | pip install -r requirements.txt
 14 | ```
 15 | This will install all of the required packages we selected within the `requirements.txt` file.
 16 | 
 17 | 
 18 | 4. **Key Dependencies**
 19 |  - [Flask](http://flask.pocoo.org/)  is a lightweight backend microservices framework. Flask is required to handle requests and responses.
 20 | 
 21 |  - [SQLAlchemy](https://www.sqlalchemy.org/) is the Python SQL toolkit and ORM we'll use handle the lightweight sqlite database. You'll primarily work in app.py and can reference models.py. 
 22 | 
 23 |  - [Flask-CORS](https://flask-cors.readthedocs.io/en/latest/#) is the extension we'll use to handle cross origin requests from our frontend server. 
 24 | 
 25 | ### Database Setup
 26 | With Postgres running, restore a database using the trivia.psql file provided. From the backend folder in terminal run:
 27 | ```bash
 28 | psql trivia < trivia.psql
 29 | ```
 30 | 
 31 | ### Running the server
 32 | 
 33 | From within the `./src` directory first ensure you are working using your created virtual environment.
 34 | 
 35 | To run the server, execute:
 36 | 
 37 | ```bash
 38 | flask run --reload
 39 | ```
 40 | 
 41 | The `--reload` flag will detect file changes and restart the server automatically.
 42 | 
 43 | ## ToDo Tasks
 44 | These are the files you'd want to edit in the backend:
 45 | 
 46 | 1. *./backend/flaskr/`__init__.py`*
 47 | 2. *./backend/test_flaskr.py*
 48 | 
 49 | 
 50 | One note before you delve into your tasks: for each endpoint, you are expected to define the endpoint and response data. The frontend will be a plentiful resource because it is set up to expect certain endpoints and response data formats already. You should feel free to specify endpoints in your own way; if you do so, make sure to update the frontend or you will get some unexpected behavior. 
 51 | 
 52 | 1. Use Flask-CORS to enable cross-domain requests and set response headers. 
 53 | 
 54 | 
 55 | 2. Create an endpoint to handle GET requests for questions, including pagination (every 10 questions). This endpoint should return a list of questions, number of total questions, current category, categories. 
 56 | 
 57 | 
 58 | 3. Create an endpoint to handle GET requests for all available categories. 
 59 | 
 60 | 
 61 | 4. Create an endpoint to DELETE question using a question ID. 
 62 | 
 63 | 
 64 | 5. Create an endpoint to POST a new question, which will require the question and answer text, category, and difficulty score. 
 65 | 
 66 | 
 67 | 6. Create a POST endpoint to get questions based on category. 
 68 | 
 69 | 
 70 | 7. Create a POST endpoint to get questions based on a search term. It should return any questions for whom the search term is a substring of the question. 
 71 | 
 72 | 
 73 | 8. Create a POST endpoint to get questions to play the quiz. This endpoint should take category and previous question parameters and return a random questions within the given category, if provided, and that is not one of the previous questions. 
 74 | 
 75 | 
 76 | 9. Create error handlers for all expected errors including 400, 404, 422 and 500. 
 77 | 
 78 | 
 79 | 
 80 | ## Review Comment to the Students
 81 | ```
 82 | This README is missing documentation of your endpoints. Below is an example for your endpoint to get all categories. Please use it as a reference for creating your documentation and resubmit your code. 
 83 | 
 84 | Endpoints
 85 | GET '/api/v1.0/categories'
 86 | GET ...
 87 | POST ...
 88 | DELETE ...
 89 | 
 90 | GET '/api/v1.0/categories'
 91 | - Fetches a dictionary of categories in which the keys are the ids and the value is the corresponding string of the category
 92 | - Request Arguments: None
 93 | - Returns: An object with a single key, categories, that contains a object of id: category_string key:value pairs. 
 94 | {'1' : "Science",
 95 | '2' : "Art",
 96 | '3' : "Geography",
 97 | '4' : "History",
 98 | '5' : "Entertainment",
 99 | '6' : "Sports"}
100 | 
101 | ```
102 | 
103 | 
104 | ## Testing
105 | To run the tests, run
106 | ```
107 | dropdb trivia_test
108 | createdb trivia_test
109 | psql trivia_test < trivia.psql
110 | python test_flaskr.py
111 | ```
112 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/backend/flaskr/__init__.py:
--------------------------------------------------------------------------------
  1 | import os
  2 | from flask import Flask, request, abort, jsonify
  3 | from flask_sqlalchemy import SQLAlchemy
  4 | from flask_cors import CORS
  5 | import random
  6 | 
  7 | from models import setup_db, Question, Category
  8 | 
  9 | QUESTIONS_PER_PAGE = 10
 10 | 
 11 | def create_app(test_config=None):
 12 |   # create and configure the app
 13 |   app = Flask(__name__)
 14 |   setup_db(app)
 15 |   
 16 |   '''
 17 |   @TODO: Set up CORS. Allow '*' for origins. Delete the sample route after completing the TODOs
 18 |   '''
 19 | 
 20 |   '''
 21 |   @TODO: Use the after_request decorator to set Access-Control-Allow
 22 |   '''
 23 | 
 24 |   '''
 25 |   @TODO: 
 26 |   Create an endpoint to handle GET requests 
 27 |   for all available categories.
 28 |   '''
 29 | 
 30 | 
 31 |   '''
 32 |   @TODO: 
 33 |   Create an endpoint to handle GET requests for questions, 
 34 |   including pagination (every 10 questions). 
 35 |   This endpoint should return a list of questions, 
 36 |   number of total questions, current category, categories. 
 37 | 
 38 |   TEST: At this point, when you start the application
 39 |   you should see questions and categories generated,
 40 |   ten questions per page and pagination at the bottom of the screen for three pages.
 41 |   Clicking on the page numbers should update the questions. 
 42 |   '''
 43 | 
 44 |   '''
 45 |   @TODO: 
 46 |   Create an endpoint to DELETE question using a question ID. 
 47 | 
 48 |   TEST: When you click the trash icon next to a question, the question will be removed.
 49 |   This removal will persist in the database and when you refresh the page. 
 50 |   '''
 51 | 
 52 |   '''
 53 |   @TODO: 
 54 |   Create an endpoint to POST a new question, 
 55 |   which will require the question and answer text, 
 56 |   category, and difficulty score.
 57 | 
 58 |   TEST: When you submit a question on the "Add" tab, 
 59 |   the form will clear and the question will appear at the end of the last page
 60 |   of the questions list in the "List" tab.  
 61 |   '''
 62 | 
 63 |   '''
 64 |   @TODO: 
 65 |   Create a POST endpoint to get questions based on a search term. 
 66 |   It should return any questions for whom the search term 
 67 |   is a substring of the question. 
 68 | 
 69 |   TEST: Search by any phrase. The questions list will update to include 
 70 |   only question that include that string within their question. 
 71 |   Try using the word "title" to start. 
 72 |   '''
 73 | 
 74 |   '''
 75 |   @TODO: 
 76 |   Create a GET endpoint to get questions based on category. 
 77 | 
 78 |   TEST: In the "List" tab / main screen, clicking on one of the 
 79 |   categories in the left column will cause only questions of that 
 80 |   category to be shown. 
 81 |   '''
 82 | 
 83 | 
 84 |   '''
 85 |   @TODO: 
 86 |   Create a POST endpoint to get questions to play the quiz. 
 87 |   This endpoint should take category and previous question parameters 
 88 |   and return a random questions within the given category, 
 89 |   if provided, and that is not one of the previous questions. 
 90 | 
 91 |   TEST: In the "Play" tab, after a user selects "All" or a category,
 92 |   one question at a time is displayed, the user is allowed to answer
 93 |   and shown whether they were correct or not. 
 94 |   '''
 95 | 
 96 |   '''
 97 |   @TODO: 
 98 |   Create error handlers for all expected errors 
 99 |   including 404 and 422. 
100 |   '''
101 |   
102 |   return app
103 | 
104 |     


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/backend/models.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | from sqlalchemy import Column, String, Integer, create_engine
 3 | from flask_sqlalchemy import SQLAlchemy
 4 | import json
 5 | 
 6 | database_name = "trivia"
 7 | database_path = "postgres://{}/{}".format('localhost:5432', database_name)
 8 | 
 9 | db = SQLAlchemy()
10 | 
11 | '''
12 | setup_db(app)
13 |     binds a flask application and a SQLAlchemy service
14 | '''
15 | def setup_db(app, database_path=database_path):
16 |     app.config["SQLALCHEMY_DATABASE_URI"] = database_path
17 |     app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
18 |     db.app = app
19 |     db.init_app(app)
20 |     db.create_all()
21 | 
22 | '''
23 | Question
24 | 
25 | '''
26 | class Question(db.Model):  
27 |   __tablename__ = 'questions'
28 | 
29 |   id = Column(Integer, primary_key=True)
30 |   question = Column(String)
31 |   answer = Column(String)
32 |   category = Column(String)
33 |   difficulty = Column(Integer)
34 | 
35 |   def __init__(self, question, answer, category, difficulty):
36 |     self.question = question
37 |     self.answer = answer
38 |     self.category = category
39 |     self.difficulty = difficulty
40 | 
41 |   def insert(self):
42 |     db.session.add(self)
43 |     db.session.commit()
44 |   
45 |   def update(self):
46 |     db.session.commit()
47 | 
48 |   def delete(self):
49 |     db.session.delete(self)
50 |     db.session.commit()
51 | 
52 |   def format(self):
53 |     return {
54 |       'id': self.id,
55 |       'question': self.question,
56 |       'answer': self.answer,
57 |       'category': self.category,
58 |       'difficulty': self.difficulty
59 |     }
60 | 
61 | '''
62 | Category
63 | 
64 | '''
65 | class Category(db.Model):  
66 |   __tablename__ = 'categories'
67 | 
68 |   id = Column(Integer, primary_key=True)
69 |   type = Column(String)
70 | 
71 |   def __init__(self, type):
72 |     self.type = type
73 | 
74 |   def format(self):
75 |     return {
76 |       'id': self.id,
77 |       'type': self.type
78 |     }


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/backend/pip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/FSND/eb54c2ef45d7fdfeb022dd7ca793e49967ce9aaa/projects/02_trivia_api/starter/backend/pip


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/backend/requirements.txt:
--------------------------------------------------------------------------------
 1 | aniso8601==6.0.0
 2 | Click==7.0
 3 | Flask==1.0.3
 4 | Flask-Cors==3.0.7
 5 | Flask-RESTful==0.3.7
 6 | Flask-SQLAlchemy==2.4.0
 7 | itsdangerous==1.1.0
 8 | Jinja2==2.10.1
 9 | MarkupSafe==1.1.1
10 | psycopg2-binary==2.8.2
11 | pytz==2019.1
12 | six==1.12.0
13 | SQLAlchemy==1.3.4
14 | Werkzeug==0.15.5
15 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/backend/test_flaskr.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | import unittest
 3 | import json
 4 | from flask_sqlalchemy import SQLAlchemy
 5 | 
 6 | from flaskr import create_app
 7 | from models import setup_db, Question, Category
 8 | 
 9 | 
10 | class TriviaTestCase(unittest.TestCase):
11 |     """This class represents the trivia test case"""
12 | 
13 |     def setUp(self):
14 |         """Define test variables and initialize app."""
15 |         self.app = create_app()
16 |         self.client = self.app.test_client
17 |         self.database_name = "trivia_test"
18 |         self.database_path = "postgres://{}/{}".format('localhost:5432', self.database_name)
19 |         setup_db(self.app, self.database_path)
20 | 
21 |         # binds the app to the current context
22 |         with self.app.app_context():
23 |             self.db = SQLAlchemy()
24 |             self.db.init_app(self.app)
25 |             # create all tables
26 |             self.db.create_all()
27 |     
28 |     def tearDown(self):
29 |         """Executed after reach test"""
30 |         pass
31 | 
32 |     """
33 |     TODO
34 |     Write at least one test for each test for successful operation and for expected errors.
35 |     """
36 | 
37 | 
38 | # Make the tests conveniently executable
39 | if __name__ == "__main__":
40 |     unittest.main()


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "trivia-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "proxy": "http://127.0.0.1:5000/",
 6 |   "dependencies": {
 7 |     "corsproxy": "^1.5.0",
 8 |     "jquery": "^3.4.1",
 9 |     "react": "^16.8.6",
10 |     "react-dom": "^16.8.6",
11 |     "react-router-dom": "^5.0.0",
12 |     "react-scripts": "3.0.1"
13 |   },
14 |   "scripts": {
15 |     "start": "node node_modules/react-scripts/scripts/start.js",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": "react-app"
22 |   },
23 |   "browserslist": {
24 |     "production": [
25 |       ">0.2%",
26 |       "not dead",
27 |       "not op_mini all"
28 |     ],
29 |     "development": [
30 |       "last 1 chrome version",
31 |       "last 1 firefox version",
32 |       "last 1 safari version"
33 |     ]
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/public/art.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="1280.000000pt" height="1280.000000pt" viewBox="0 0 1280.000000 1280.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | <g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
 8 | fill="#000000" stroke="none">
 9 | <path d="M6125 11184 c-953 -60 -1851 -388 -2595 -948 -269 -203 -593 -507
10 | -791 -746 -641 -770 -1007 -1643 -1111 -2650 -17 -164 -17 -716 0 -880 118
11 | -1151 590 -2150 1391 -2950 384 -383 783 -668 1272 -910 638 -315 1326 -480
12 | 2009 -484 200 -1 245 2 299 17 279 79 491 291 567 568 25 89 25 308 0 399 -23
13 | 87 -86 214 -136 275 -190 233 -242 360 -243 590 -1 149 17 223 85 363 102 209
14 | 287 359 523 424 77 21 102 22 755 28 724 7 746 9 986 65 659 155 1233 555
15 | 1609 1120 388 583 519 1238 405 2020 -182 1242 -967 2345 -2159 3029 -615 354
16 | -1312 574 -2061 651 -147 16 -668 28 -805 19z m-850 -1068 c385 -106 639 -477
17 | 595 -869 -23 -199 -107 -367 -254 -504 -393 -368 -1035 -251 -1272 232 -58
18 | 118 -75 187 -81 321 -6 133 12 242 60 354 104 241 318 418 572 474 90 20 295
19 | 15 380 -8z m2623 8 c316 -64 563 -314 628 -634 20 -99 15 -272 -10 -365 -43
20 | -158 -160 -334 -289 -430 -369 -279 -888 -202 -1152 170 -224 316 -194 742 73
21 | 1027 78 84 217 172 327 208 126 42 291 51 423 24z m-4314 -2124 c322 -47 581
22 | -282 667 -605 29 -111 29 -279 0 -390 -144 -547 -769 -786 -1236 -474 -147 98
23 | -255 242 -317 420 -31 90 -33 100 -33 249 0 149 2 159 33 250 46 134 101 221
24 | 201 321 185 185 428 266 685 229z m5960 -19 c131 -34 247 -102 352 -206 106
25 | -104 158 -188 206 -325 31 -91 33 -101 33 -250 0 -149 -2 -159 -33 -249 -62
26 | -178 -170 -322 -317 -420 -467 -312 -1092 -73 -1236 474 -29 111 -29 279 0
27 | 390 84 319 341 554 659 605 84 13 246 4 336 -19z"/>
28 | </g>
29 | </svg>
30 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/public/delete.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/FSND/eb54c2ef45d7fdfeb022dd7ca793e49967ce9aaa/projects/02_trivia_api/starter/frontend/public/delete.png


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/public/entertainment.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="1280.000000pt" height="1280.000000pt" viewBox="0 0 1280.000000 1280.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | <g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
 8 | fill="#000000" stroke="none">
 9 | <path d="M9270 10029 c-206 -19 -463 -77 -645 -144 -234 -87 -504 -242 -715
10 | -411 -110 -89 -297 -277 -380 -383 -249 -317 -408 -689 -455 -1066 -4 -27 -9
11 | -58 -12 -67 -4 -17 -42 -18 -626 -18 l-622 0 -58 95 c-207 340 -490 594 -862
12 | 776 -308 150 -616 219 -977 219 -513 0 -964 -148 -1341 -441 -117 -91 -283
13 | -251 -368 -355 -276 -338 -419 -742 -419 -1187 0 -528 196 -986 586 -1369 325
14 | -319 679 -500 1139 -582 l120 -21 2 -920 3 -920 21 -17 c19 -16 46 -18 239
15 | -18 189 0 219 -2 224 -16 3 -9 6 -155 6 -324 0 -296 1 -310 19 -320 13 -7 642
16 | -10 1960 -10 l1940 0 15 22 c14 19 16 68 16 335 l0 313 378 0 c219 0 383 4
17 | 392 10 12 7 16 47 20 212 l5 203 25 0 c25 0 25 -1 30 -107 4 -95 8 -109 29
18 | -132 l24 -26 408 0 c393 0 409 1 419 19 7 13 10 321 10 928 0 806 -2 911 -16
19 | 931 l-15 22 -408 0 c-375 0 -411 -1 -430 -17 -19 -17 -21 -30 -23 -158 l-3
20 | -140 -25 0 -25 0 0 250 0 250 30 -1 c17 0 86 -10 155 -23 434 -77 967 -34
21 | 1375 110 361 127 705 352 980 641 348 365 536 757 606 1258 16 112 16 440 0
22 | 560 -53 417 -212 791 -474 1115 -89 110 -262 281 -382 378 -395 319 -833 495
23 | -1354 547 -118 11 -415 11 -541 -1z m762 -643 c204 -39 414 -142 653 -321 141
24 | -106 229 -187 309 -287 72 -90 131 -192 120 -210 -9 -14 -454 -231 -594 -289
25 | -91 -37 -114 -43 -175 -43 -168 2 -409 153 -482 303 l-28 56 0 386 c0 312 3
26 | 389 14 402 17 21 82 22 183 3z m-889 -3 c26 -4 42 -13 48 -27 14 -34 82 -727
27 | 76 -778 -9 -72 -48 -136 -134 -219 -144 -140 -305 -190 -464 -143 -41 12 -762
28 | 271 -861 309 -25 10 -23 27 11 93 137 271 544 598 887 712 151 51 326 72 437
29 | 53z m-4717 -954 c165 -23 312 -85 500 -210 111 -75 284 -234 284 -263 0 -14
30 | -48 -16 -501 -16 l-502 0 5 234 c3 174 7 238 17 250 16 19 84 21 197 5z m-751
31 | -11 c2 -7 9 -114 15 -237 l10 -225 -25 -26 c-23 -24 -25 -33 -25 -121 0 -88
32 | -2 -98 -30 -142 -92 -145 -243 -219 -400 -197 -71 10 -640 228 -648 248 -9 24
33 | 71 169 142 258 36 45 96 108 133 141 230 202 410 284 662 303 159 11 161 11
34 | 166 -2z m7718 -476 c35 -39 59 -168 60 -322 1 -246 -51 -481 -164 -744 -71
35 | -165 -212 -366 -257 -366 -21 0 -447 392 -503 463 -82 102 -149 284 -149 400
36 | 0 83 114 229 272 347 121 91 177 113 459 179 140 33 257 60 260 60 3 1 13 -7
37 | 22 -17z m-1698 -49 c79 -41 125 -119 125 -210 -1 -108 -46 -170 -148 -199 -99
38 | -29 -239 7 -288 73 -53 71 -63 189 -25 272 23 48 28 53 85 71 79 26 193 23
39 | 251 -7z m-6950 -779 c178 -22 304 -42 325 -53 23 -10 46 -34 68 -71 40 -68 49
40 | -100 63 -221 14 -117 2 -225 -34 -301 -33 -72 -350 -433 -380 -433 -14 0 -40
41 | 23 -77 66 -147 177 -262 451 -291 696 -12 99 -9 320 4 341 11 16 -7 17 322
42 | -24z m7007 -182 c75 -37 167 -117 232 -201 83 -109 427 -652 424 -669 -2 -10
43 | -38 -34 -87 -59 -149 -75 -342 -106 -656 -106 -213 0 -342 12 -495 45 -111 23
44 | -280 82 -292 100 -4 7 -8 72 -8 143 l0 130 149 240 c82 132 165 258 184 281
45 | 20 22 62 55 95 72 93 49 152 62 277 59 101 -2 116 -5 177 -35z m-6112 -1077
46 | l0 -305 -29 0 c-38 0 -154 39 -222 76 -38 20 -54 35 -54 49 0 27 276 484 293
47 | 485 9 0 12 -68 12 -305z"/>
48 | </g>
49 | </svg>
50 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/FSND/eb54c2ef45d7fdfeb022dd7ca793e49967ce9aaa/projects/02_trivia_api/starter/frontend/public/favicon.ico


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/public/geography.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="1211.000000pt" height="1280.000000pt" viewBox="0 0 1211.000000 1280.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | <g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
 8 | fill="#000000" stroke="none">
 9 | <path d="M5120 10663 c-14 -2 -70 -13 -125 -24 -75 -16 -166 -23 -370 -29
10 | -191 -6 -287 -13 -328 -24 -77 -21 -342 -120 -442 -165 -80 -35 -80 -35 -260
11 | -41 -166 -5 -184 -8 -235 -31 -82 -39 -291 -182 -334 -230 -67 -73 -106 -177
12 | -136 -358 -15 -90 -21 -97 -167 -176 -266 -144 -308 -192 -505 -576 l-106
13 | -206 51 -164 c65 -211 69 -279 20 -381 -18 -38 -43 -83 -57 -100 -13 -18 -43
14 | -66 -65 -106 l-42 -72 31 -70 c27 -62 30 -78 28 -157 -3 -112 6 -126 126 -200
15 | 161 -99 253 -179 291 -254 29 -55 125 -178 186 -235 99 -94 363 -315 405 -340
16 | 56 -33 83 -27 113 26 44 79 103 90 477 90 l283 0 103 54 c139 73 260 122 338
17 | 137 126 23 195 -20 275 -171 85 -161 126 -173 291 -90 54 27 108 50 120 50 50
18 | 0 204 -129 204 -172 0 -13 -14 -43 -31 -68 -59 -87 -78 -135 -89 -226 -6 -49
19 | -22 -130 -36 -180 -13 -51 -24 -99 -24 -107 0 -9 55 -71 123 -139 67 -68 138
20 | -149 157 -181 19 -32 61 -98 92 -147 93 -145 91 -140 104 -305 11 -149 12
21 | -151 63 -266 72 -162 71 -171 -27 -269 -42 -42 -90 -96 -105 -118 -71 -101
22 | -85 -327 -31 -488 22 -69 107 -246 142 -297 39 -57 116 -194 137 -243 38 -91
23 | 56 -183 65 -334 9 -143 12 -160 40 -215 17 -33 65 -105 106 -160 88 -117 133
24 | -194 170 -290 28 -74 54 -196 54 -249 0 -51 55 -150 102 -185 45 -33 125 -55
25 | 166 -45 15 4 44 15 64 26 62 31 174 49 363 58 203 11 271 25 365 77 105 57
26 | 178 123 442 401 l250 263 -7 122 -6 122 58 37 c32 20 86 50 120 67 79 39 130
27 | 84 138 120 7 34 -10 114 -60 271 l-36 114 66 97 c36 54 81 111 100 128 49 42
28 | 161 106 224 127 65 21 116 65 179 152 69 97 91 168 102 335 5 78 10 198 10
29 | 266 l0 123 -49 62 c-26 33 -56 76 -65 94 -20 38 -49 180 -66 323 -17 134 0
30 | 190 76 266 30 30 89 98 131 151 257 322 406 464 591 562 34 18 91 60 127 92
31 | 52 48 73 76 106 146 22 48 88 157 145 243 57 86 119 187 138 225 43 87 104
32 | 271 112 341 9 68 -3 83 -66 83 -57 0 -301 -73 -437 -131 -115 -49 -203 -70
33 | -297 -70 -118 -1 -139 18 -150 136 -3 42 -17 84 -46 142 -36 73 -59 101 -184
34 | 226 l-142 142 -78 154 c-42 85 -102 192 -131 238 -68 103 -125 209 -160 293
35 | -61 147 -311 660 -353 725 -25 39 -78 132 -118 207 -131 248 -142 257 -278
36 | 233 -165 -29 -233 -62 -342 -166 -80 -77 -105 -91 -120 -68 -8 14 108 133 164
37 | 166 45 27 76 72 66 97 -8 21 -40 25 -254 29 -185 4 -185 4 -313 46 -216 70
38 | -265 60 -426 -87 -89 -81 -129 -102 -194 -102 -91 0 -163 22 -327 100 -91 43
39 | -205 90 -255 105 -157 47 -415 197 -415 241 0 7 27 27 60 44 76 39 84 52 65
40 | 124 -39 148 -129 228 -235 209z m2938 -4389 c53 -37 6 -182 -93 -280 -63 -63
41 | -94 -68 -129 -21 -18 25 -21 42 -21 130 1 113 9 138 58 167 41 25 152 28 185
42 | 4z"/>
43 | </g>
44 | </svg>
45 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/public/history.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
 3 | 
 4 | <svg
 5 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
 6 |    xmlns:cc="http://creativecommons.org/ns#"
 7 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 8 |    xmlns:svg="http://www.w3.org/2000/svg"
 9 |    xmlns="http://www.w3.org/2000/svg"
10 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
11 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
12 |    width="1000"
13 |    height="1000"
14 |    viewBox="0 0 1000 1000"
15 |    id="svg2"
16 |    version="1.1"
17 |    inkscape:version="0.91 r13725"
18 |    sodipodi:docname="Alarms &amp; Clock icon.svg">
19 |   <defs
20 |      id="defs4" />
21 |   <sodipodi:namedview
22 |      id="base"
23 |      pagecolor="#ffffff"
24 |      bordercolor="#666666"
25 |      borderopacity="1.0"
26 |      inkscape:pageopacity="0.0"
27 |      inkscape:pageshadow="2"
28 |      inkscape:zoom="0.45254834"
29 |      inkscape:cx="766.68054"
30 |      inkscape:cy="455.34321"
31 |      inkscape:document-units="px"
32 |      inkscape:current-layer="layer2"
33 |      showgrid="false"
34 |      units="px"
35 |      showborder="true"
36 |      inkscape:window-width="1440"
37 |      inkscape:window-height="764"
38 |      inkscape:window-x="0"
39 |      inkscape:window-y="1"
40 |      inkscape:window-maximized="1" />
41 |   <metadata
42 |      id="metadata7">
43 |     <rdf:RDF>
44 |       <cc:Work
45 |          rdf:about="">
46 |         <dc:format>image/svg+xml</dc:format>
47 |         <dc:type
48 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
49 |         <dc:title></dc:title>
50 |       </cc:Work>
51 |     </rdf:RDF>
52 |   </metadata>
53 |   <g
54 |      inkscape:groupmode="layer"
55 |      id="layer2"
56 |      inkscape:label="Image">
57 |     <path
58 |        style="opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.49300182;stroke-opacity:1"
59 |        d="M 229.80982,10.297095 A 198.6273,196.41757 0 0 0 31.182869,206.71507 198.6273,196.41757 0 0 0 95.024666,350.65452 427.27457,441.63766 0 0 1 377.86256,76.134985 198.6273,196.41757 0 0 0 229.80982,10.297095 Z"
60 |        id="path4225"
61 |        inkscape:connector-curvature="0" />
62 |     <path
63 |        style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
64 |        d="m 3188.5779,754.84358 c -202.4714,-254.09012 143.6468,-462.03131 301.6253,-268.47961 67.5602,-19.27112 138.6853,-17.15253 212.132,-1.10485 170.3033,-196.47168 499.3443,30.67145 300.5204,271.79417"
65 |        id="path4192"
66 |        inkscape:connector-curvature="0"
67 |        sodipodi:nodetypes="cccc" />
68 |     <circle
69 |        style="opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.18611968;stroke-opacity:1"
70 |        id="path4198"
71 |        cx="498.49899"
72 |        cy="501.92041"
73 |        r="55.149654" />
74 |     <path
75 |        style="opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:2.62047124;stroke-opacity:1"
76 |        d="M 759.375,7.9726562 C 702.44397,8.0366835 646.34589,31.175028 608.75368,73.424443 595.22659,69.657849 582.92926,61.248445 492.69118,60.102177 379.081,60.102243 276.75241,107.17272 196.41797,188.99023 116.08353,270.80775 70.952943,381.7751 70.953125,497.48242 c 3.26e-4,115.70698 45.132405,226.67509 125.466795,308.49219 80.33439,81.81709 189.29054,127.78118 302.90039,127.78125 113.60985,-6e-5 222.566,-45.96415 302.90039,-127.78125 80.33438,-81.8171 125.46647,-192.78521 125.4668,-308.49219 -0.1698,-52.96368 -9.80746,-105.45325 -28.44141,-154.90039 37.33818,-36.72268 58.35299,-86.61881 58.40625,-138.67578 C 957.65191,95.69529 868.88037,7.973082 759.375,7.9726562 Z M 499.35547,129.26758 c 205.16765,3.4e-4 371.48862,166.9614 371.48828,372.91797 -7.4e-4,205.9558 -166.32139,372.91567 -371.48828,372.91601 -205.16765,7.5e-4 -371.4895,-166.95944 -371.49024,-372.91601 -3.4e-4,-205.95734 166.32183,-372.91872 371.49024,-372.91797 z"
77 |        id="path4202"
78 |        inkscape:connector-curvature="0"
79 |        sodipodi:nodetypes="cccsssssccccsssss" />
80 |     <path
81 |        style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
82 |        d="m 530.33009,456.41166 106.06602,-88.94078 66.29126,-56.89999 c 17.23985,-8.99663 35.89509,3.36417 22.09708,23.75436 L 550.76989,480.71846 Z"
83 |        id="path4213"
84 |        inkscape:connector-curvature="0"
85 |        sodipodi:nodetypes="cccccc" />
86 |     <path
87 |        style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
88 |        d="m 390.01359,467.4602 c 6.34258,-18.85933 18.27235,-33.52825 30.38349,-48.06116 L 303.83495,345.3738 c -32.28761,-20.50493 -64.42155,28.72792 -35.90777,46.40388 z"
89 |        id="path4215"
90 |        inkscape:connector-curvature="0"
91 |        sodipodi:nodetypes="ccssc" />
92 |   </g>
93 | </svg>
94 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <!--
 9 |       manifest.json provides metadata used when your web app is installed on a
10 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
11 |     -->
12 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>React App</title>
23 |   </head>
24 |   <body>
25 |     <noscript>You need to enable JavaScript to run this app.</noscript>
26 |     <div id="root"></div>
27 |     <!--
28 |       This HTML file is a template.
29 |       If you open it directly in the browser, you will see an empty page.
30 | 
31 |       You can add webfonts, meta tags, or analytics to this file.
32 |       The build step will place the bundled scripts into the <body> tag.
33 | 
34 |       To begin the development, run `npm start` or `yarn start`.
35 |       To create a production bundle, use `npm run build` or `yarn build`.
36 |     -->
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/public/science.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="1280.000000pt" height="1161.000000pt" viewBox="0 0 1280.000000 1161.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | <metadata>
 8 | Created by potrace 1.15, written by Peter Selinger 2001-2017
 9 | </metadata>
10 | <g transform="translate(0.000000,1161.000000) scale(0.100000,-0.100000)"
11 | fill="#000000" stroke="none">
12 | <path d="M3997 11599 c-617 -60 -1154 -396 -1493 -936 -226 -359 -368 -803
13 | -436 -1357 -20 -159 -22 -230 -23 -587 l0 -406 -104 -54 c-841 -435 -1433
14 | -974 -1726 -1571 -352 -718 -268 -1476 239 -2156 96 -129 136 -175 274 -316
15 | 310 -315 686 -587 1167 -840 l150 -80 0 -400 c0 -430 8 -542 61 -846 163 -947
16 | 623 -1608 1322 -1897 489 -203 1077 -202 1713 2 360 116 791 326 1152 561 54
17 | 35 102 64 107 64 5 0 53 -29 107 -64 446 -291 945 -517 1384 -627 1100 -275
18 | 2021 104 2503 1031 177 341 284 724 343 1225 14 119 18 233 18 551 l0 401 95
19 | 49 c744 385 1307 861 1625 1374 449 725 430 1534 -53 2250 -112 167 -196 268
20 | -360 434 -309 314 -715 603 -1203 855 l-104 54 0 401 c-1 421 -8 538 -56 821
21 | -138 822 -482 1412 -1032 1770 -243 158 -563 265 -882 295 -661 62 -1448 -178
22 | -2240 -681 -77 -49 -146 -87 -154 -84 -8 3 -73 43 -145 89 -784 500 -1580 739
23 | -2249 675z m418 -339 c502 -47 1079 -262 1622 -607 l62 -39 -182 -146 c-442
24 | -354 -823 -726 -1240 -1210 -121 -142 -175 -198 -191 -198 -29 0 -371 -64
25 | -536 -101 -523 -116 -1025 -269 -1452 -445 -60 -24 -112 -44 -115 -44 -12 0 6
26 | 647 22 785 82 707 308 1232 678 1580 342 322 814 473 1332 425z m4337 0 c971
27 | -94 1568 -883 1658 -2190 11 -160 14 -583 4 -593 -4 -3 -23 1 -43 9 -303 131
28 | -815 300 -1206 398 -301 75 -787 176 -851 176 -16 0 -62 47 -165 168 -435 509
29 | -861 924 -1317 1281 l-132 104 62 40 c692 439 1425 662 1990 607z m-2224 -947
30 | c289 -220 549 -449 828 -727 183 -184 417 -436 410 -443 -2 -3 -98 5 -212 16
31 | -428 41 -546 46 -1154 46 -608 0 -726 -5 -1154 -46 -114 -11 -210 -19 -212
32 | -16 -7 7 231 263 425 457 188 188 369 354 550 505 84 70 383 304 389 305 2 0
33 | 61 -43 130 -97z m692 -1467 c413 -31 860 -85 886 -106 24 -21 319 -417 438
34 | -589 460 -667 871 -1417 1183 -2165 l74 -179 -57 -141 c-285 -704 -722 -1510
35 | -1180 -2176 -134 -195 -431 -597 -458 -619 -27 -23 -508 -78 -971 -113 -230
36 | -17 -1240 -17 -1470 0 -464 35 -944 90 -971 113 -27 22 -331 432 -456 614
37 | -473 691 -904 1490 -1208 2241 l-32 80 77 185 c289 690 643 1352 1060 1979
38 | 247 371 539 764 578 779 27 10 394 55 612 75 138 13 345 27 585 40 175 9 1119
39 | -4 1310 -18z m-3099 -294 c-452 -619 -930 -1448 -1246 -2162 -21 -47 -41 -89
40 | -46 -94 -21 -23 -220 679 -298 1054 -60 291 -128 747 -113 762 10 10 252 111
41 | 395 164 250 94 566 192 847 265 171 44 490 117 518 118 19 1 12 -13 -57 -107z
42 | m4691 67 c422 -94 814 -209 1180 -345 137 -51 380 -152 390 -162 8 -8 -22
43 | -254 -58 -467 -44 -263 -130 -641 -205 -905 -63 -219 -141 -452 -149 -444 -4
44 | 5 -37 74 -73 154 -308 687 -731 1420 -1191 2063 -58 81 -99 147 -91 147 7 0
45 | 96 -18 197 -41z m-6708 -801 c74 -552 241 -1216 458 -1818 l70 -195 -22 -60
46 | c-13 -33 -62 -175 -109 -315 -185 -541 -316 -1077 -388 -1577 -15 -106 -31
47 | -193 -36 -193 -5 0 -59 28 -120 62 -809 446 -1334 985 -1527 1565 -118 356
48 | -118 679 0 1033 151 455 501 882 1040 1267 152 109 576 363 605 363 7 0 19
49 | -56 29 -132z m8788 43 c794 -453 1288 -966 1478 -1538 118 -357 118 -679 0
50 | -1034 -193 -581 -718 -1121 -1527 -1567 -61 -34 -116 -62 -120 -62 -5 0 -17
51 | 60 -27 133 -74 551 -241 1215 -458 1817 l-70 194 27 76 c246 672 424 1360 501
52 | 1938 10 76 22 132 29 132 5 0 81 -40 167 -89z m-7987 -2705 c303 -679 780
53 | -1501 1224 -2106 38 -52 66 -96 61 -98 -10 -4 -287 57 -472 103 -238 60 -450
54 | 123 -693 206 -216 73 -588 218 -606 236 -16 16 50 464 112 763 78 378 277
55 | 1077 299 1054 4 -5 38 -76 75 -158z m7129 -8 c163 -514 273 -1001 335 -1488
56 | 11 -85 17 -158 12 -163 -37 -37 -740 -289 -1031 -371 -259 -72 -722 -181 -740
57 | -174 -5 2 23 46 61 98 470 641 936 1452 1274 2215 13 30 26 55 29 55 3 0 30
58 | -78 60 -172z m-7471 -2077 c542 -217 1189 -395 1847 -509 l105 -18 84 -100
59 | c452 -537 966 -1038 1419 -1383 76 -57 82 -64 65 -75 -76 -52 -328 -194 -473
60 | -267 -1032 -518 -1912 -502 -2518 47 -368 334 -604 879 -687 1589 -16 140 -34
61 | 785 -22 785 4 0 85 -31 180 -69z m7857 -164 c0 -654 -97 -1154 -305 -1582
62 | -357 -733 -1025 -1077 -1862 -960 -457 64 -976 272 -1510 604 l-45 28 83 64
63 | c454 345 965 843 1420 1383 l84 100 105 18 c659 114 1319 296 1855 512 88 35
64 | 163 62 168 59 4 -2 7 -104 7 -226z m-5218 -452 c373 -41 591 -50 1198 -50 607
65 | 0 825 9 1198 50 187 21 179 22 147 -17 -87 -105 -402 -433 -547 -568 -256
66 | -242 -659 -580 -774 -650 -30 -18 -28 -20 -216 126 -322 251 -668 567 -950
67 | 871 -97 103 -188 203 -203 221 -32 39 -40 38 147 17z"/>
68 | <path d="M6230 7850 l0 -340 170 0 170 0 0 340 0 340 -170 0 -170 0 0 -340z"/>
69 | <path d="M4707 7492 l-117 -117 243 -243 242 -242 120 120 120 120 -240 240
70 | c-132 132 -242 240 -245 240 -3 0 -58 -53 -123 -118z"/>
71 | <path d="M7725 7370 l-240 -240 120 -120 120 -120 242 242 243 243 -117 117
72 | c-65 65 -120 118 -123 118 -3 0 -113 -108 -245 -240z"/>
73 | <path d="M6285 7249 c-345 -27 -658 -171 -905 -419 -269 -270 -410 -586 -426
74 | -960 -39 -867 684 -1571 1550 -1509 278 20 542 119 766 287 387 292 598 739
75 | 576 1222 -16 373 -158 692 -426 960 -237 238 -553 389 -865 415 -139 11 -172
76 | 12 -270 4z"/>
77 | <path d="M4014 5967 c-2 -7 -3 -85 -2 -172 l3 -160 338 -3 337 -2 0 175 0 175
78 | -335 0 c-265 0 -337 -3 -341 -13z"/>
79 | <path d="M8110 5805 l0 -175 338 2 337 3 0 170 0 170 -337 3 -338 2 0 -175z"/>
80 | <path d="M4832 4477 l-242 -242 120 -120 120 -120 243 243 242 242 -120 120
81 | -120 120 -243 -243z"/>
82 | <path d="M7605 4600 l-120 -120 243 -243 242 -242 120 120 120 120 -243 243
83 | -242 242 -120 -120z"/>
84 | <path d="M6230 3760 l0 -340 170 0 170 0 0 340 0 340 -170 0 -170 0 0 -340z"/>
85 | </g>
86 | </svg>
87 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/public/sports.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5 | 	 width="952.1px" height="952.1px" viewBox="0 0 952.1 952.1" style="enable-background:new 0 0 952.1 952.1;" xml:space="preserve"
 6 | 	>
 7 | <g>
 8 | 	<g>
 9 | 		<path d="M812.55,139.4c-43.7-43.7-94.6-78-151.3-102C602.55,12.6,540.25,0,475.95,0c-64.2,0.1-126.5,12.6-185.2,37.5
10 | 			c-56.7,24-107.6,58.3-151.3,102c-43.7,43.7-78,94.6-102,151.3c-24.8,58.7-37.4,121-37.4,185.3c0,64.201,12.6,126.6,37.4,185.301
11 | 			c24,56.699,58.3,107.6,102,151.299c43.7,43.701,94.6,78,151.3,102c58.7,24.801,121,37.4,185.3,37.4
12 | 			c64.2,0,126.601-12.6,185.3-37.4c56.7-24,107.601-58.299,151.301-102c43.699-43.699,78-94.6,102-151.299
13 | 			c24.8-58.701,37.399-121,37.399-185.301c0-64.2-12.6-126.6-37.399-185.3C890.55,234,856.25,183.2,812.55,139.4z M212.55,107.5
14 | 			c4.3-3.3,8.5-6.8,12.9-9.9c23.1-16.2,48.7-29.3,74.7-40.2C355.55,34.2,415.75,22,475.95,22c40.1,0,81.2,5.4,119.899,16
15 | 			c-15.3,6.2-34,18-65.399,44.8c-26.101-2.8-52.5-2.9-79-0.4c-34.601,3.3-69.4,11-103.4,23c-30.7,10.8-55,23.1-71.4,32.5
16 | 			c-25.1-9-57.5-19.6-73.5-24.8C205.65,113.9,210.85,108.8,212.55,107.5z M646.15,226.5l-81.4,222.2l-195.3,37.5L208.05,319.5
17 | 			c10.9-75.6,62.7-142.6,62.7-142.6c0.3-0.2,34.1-24.6,88.3-43.5c31.601-11.1,63.8-18.2,95.9-21.2c26.2-2.4,52.3-2,78.1,1.1
18 | 			L646.15,226.5z M39.35,460.2c-5,32.3-6.1,65.8-3.5,99.5c-3.9-7.799-7-14.398-9.3-19.699c-3-20.9-4.5-42.301-4.5-64.1
19 | 			c0-67,14.5-130.7,40.6-188c-2.9,30-1.5,61.1,0.6,84.7C52.05,400.7,44.05,430,39.35,460.2z M78.85,633.301
20 | 			c-4.6-16.9-10-41.5-12.7-71c-3-33.301-2.1-66.4,2.9-98.101c3.8-24.3,9.9-47.899,18.3-70.6c32.9-27.8,76.5-44.1,100.6-51.6
21 | 			L346.35,505.6L329.75,684.9L174.95,736.6C135.55,707.6,103.35,669.199,78.85,633.301z M549.25,892.9
22 | 			c-34.5,22.6-121.7,28-157.1,29.299c-39-7.299-76.9-19.799-112.601-37c-31.2-15-60.8-33.6-87.8-55.398c0.5-0.9-4.2-48.602-4-66
23 | 			l156.4-52.201l180.5,78.1l24.899,102.9C549.35,892.801,549.25,892.9,549.25,892.9z M849.15,734.6
24 | 			C822.25,773.4,790.05,809.5,751.35,836.9c-36.3,25.6-84.899,34.4-128.1,41.5c-3.3,0.5-44.6,7.299-44.9,5.9l-24.899-103L680.55,649
25 | 			l168.3-15.5c2.601,26.801,6,65.9,8,89.801C854.25,727.1,851.75,730.9,849.15,734.6z M851.75,600c-0.6,1-1.2,2.1-1.8,3.301
26 | 			L682.35,618.699L592.15,460.9l81.6-222.7l115.2,7.3c24.5,20.5,46.2,43.3,64.6,67.9c23,30.9,40.9,64.8,53.101,100.7
27 | 			C893.85,525.301,864.35,580.699,851.75,600z M911.85,349.8c-9.899-19.1-21.5-37.5-34.6-55c-20.7-27.7-45.3-53.2-73.2-75.9
28 | 			c-5.1-25.3-19.1-65.1-56.7-106.9c0.7,0.5,1.4,1.1,2.101,1.6c2.3,1.7,4.5,3.5,6.8,5.2c25.9,20.4,49.5,43.5,70.4,68.9
29 | 			c38.8,47.3,68.1,102.2,85.3,161.1C911.85,349.2,911.85,349.5,911.85,349.8z"/>
30 | 	</g>
31 | </g>
32 | <g>
33 | </g>
34 | <g>
35 | </g>
36 | <g>
37 | </g>
38 | <g>
39 | </g>
40 | <g>
41 | </g>
42 | <g>
43 | </g>
44 | <g>
45 | </g>
46 | <g>
47 | </g>
48 | <g>
49 | </g>
50 | <g>
51 | </g>
52 | <g>
53 | </g>
54 | <g>
55 | </g>
56 | <g>
57 | </g>
58 | <g>
59 | </g>
60 | <g>
61 | </g>
62 | </svg>
63 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import {
 3 |   BrowserRouter as Router,
 4 |   Route,
 5 |   Switch
 6 | } from 'react-router-dom'
 7 | 
 8 | // import logo from './logo.svg';
 9 | import './stylesheets/App.css';
10 | import FormView from './components/FormView';
11 | import QuestionView from './components/QuestionView';
12 | import Header from './components/Header';
13 | import QuizView from './components/QuizView';
14 | 
15 | 
16 | class App extends Component {
17 |   render() {
18 |     return (
19 |     <div className="App">
20 |       <Header path />
21 |       <Router>
22 |         <Switch>
23 |           <Route path="/" exact component={QuestionView} />
24 |           <Route path="/add" component={FormView} />
25 |           <Route path="/play" component={QuizView} />
26 |           <Route component={QuestionView} />
27 |         </Switch>
28 |       </Router>
29 |     </div>
30 |   );
31 | 
32 |   }
33 | }
34 | 
35 | export default App;
36 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div');
 7 |   ReactDOM.render(<App />, div);
 8 |   ReactDOM.unmountComponentAtNode(div);
 9 | });
10 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/src/components/FormView.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import $ from 'jquery';
  3 | 
  4 | import '../stylesheets/FormView.css';
  5 | 
  6 | class FormView extends Component {
  7 |   constructor(props){
  8 |     super(props);
  9 |     this.state = {
 10 |       question: "",
 11 |       answer: "",
 12 |       difficulty: 1,
 13 |       category: 1,
 14 |       categories: {}
 15 |     }
 16 |   }
 17 | 
 18 |   componentDidMount(){
 19 |     $.ajax({
 20 |       url: `/categories`, //TODO: update request URL
 21 |       type: "GET",
 22 |       success: (result) => {
 23 |         this.setState({ categories: result.categories })
 24 |       },
 25 |       error: (error) => {
 26 |         alert('Unable to load categories. Please try your request again')
 27 |       }
 28 |     })
 29 |   }
 30 | 
 31 | 
 32 |   submitQuestion = (event) => {
 33 |     event.preventDefault();
 34 |     $.ajax({
 35 |       url: '/questions', //TODO: update request URL
 36 |       type: "POST",
 37 |       dataType: 'json',
 38 |       contentType: 'application/json',
 39 |       data: JSON.stringify({
 40 |         question: this.state.question,
 41 |         answer: this.state.answer,
 42 |         difficulty: this.state.difficulty,
 43 |         category: this.state.category
 44 |       }),
 45 |       xhrFields: {
 46 |         withCredentials: true
 47 |       },
 48 |       crossDomain: true,
 49 |       success: (result) => {
 50 |         document.getElementById("add-question-form").reset();
 51 |       },
 52 |       error: (error) => {
 53 |         alert('Unable to add question. Please try your request again')
 54 |       }
 55 |     })
 56 |   }
 57 | 
 58 |   handleChange = (event) => {
 59 |     this.setState({[event.target.name]: event.target.value})
 60 |   }
 61 | 
 62 |   render() {
 63 |     return (
 64 |       <div id="add-form">
 65 |         <h2>Add a New Trivia Question</h2>
 66 |         <form className="form-view" id="add-question-form" onSubmit={this.submitQuestion}>
 67 |           <label>
 68 |             Question
 69 |             <input type="text" name="question" onChange={this.handleChange}/>
 70 |           </label>
 71 |           <label>
 72 |             Answer
 73 |             <input type="text" name="answer" onChange={this.handleChange}/>
 74 |           </label>
 75 |           <label>
 76 |             Difficulty
 77 |             <select name="difficulty" onChange={this.handleChange}>
 78 |               <option value="1">1</option>
 79 |               <option value="2">2</option>
 80 |               <option value="3">3</option>
 81 |               <option value="4">4</option>
 82 |               <option value="5">5</option>
 83 |             </select>
 84 |           </label>
 85 |           <label>
 86 |             Category
 87 |             <select name="category" onChange={this.handleChange}>
 88 |               {Object.keys(this.state.categories).map(id => {
 89 |                   return (
 90 |                     <option key={id} value={id}>{this.state.categories[id]}</option>
 91 |                   )
 92 |                 })}
 93 |             </select>
 94 |           </label>
 95 |           <input type="submit" className="button" value="Submit" />
 96 |         </form>
 97 |       </div>
 98 |     );
 99 |   }
100 | }
101 | 
102 | export default FormView;
103 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/src/components/Header.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import logo from '../logo.svg';
 3 | import '../stylesheets/Header.css';
 4 | 
 5 | class Header extends Component {
 6 | 
 7 |   navTo(uri){
 8 |     window.location.href = window.location.origin + uri;
 9 |   }
10 | 
11 |   render() {
12 |     return (
13 |       <div className="App-header">
14 |         <h1 onClick={() => {this.navTo('')}}>Udacitrivia</h1>
15 |         <h2 onClick={() => {this.navTo('')}}>List</h2>
16 |         <h2 onClick={() => {this.navTo('/add')}}>Add</h2>
17 |         <h2 onClick={() => {this.navTo('/play')}}>Play</h2>
18 |       </div>
19 |     );
20 |   }
21 | }
22 | 
23 | export default Header;
24 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/src/components/Question.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import '../stylesheets/Question.css';
 3 | 
 4 | class Question extends Component {
 5 |   constructor(props){
 6 |     super(props);
 7 |     this.state = {
 8 |       visibleAnswer: false
 9 |     }
10 |   }
11 | 
12 |   flipVisibility() {
13 |     this.setState({visibleAnswer: !this.state.visibleAnswer});
14 |   }
15 | 
16 |   render() {
17 |     const { question, answer, category, difficulty } = this.props;
18 |     return (
19 |       <div className="Question-holder">
20 |         <div className="Question">{question}</div>
21 |         <div className="Question-status">
22 |           <img className="category" src={`${category.toLowerCase()}.svg`}/>
23 |           <div className="difficulty">Difficulty: {difficulty}</div>
24 |           <img src="delete.png" className="delete" onClick={() => this.props.questionAction('DELETE')}/>
25 |           
26 |         </div>
27 |         <div className="show-answer button"
28 |             onClick={() => this.flipVisibility()}>
29 |             {this.state.visibleAnswer ? 'Hide' : 'Show'} Answer
30 |           </div>
31 |         <div className="answer-holder">
32 |           <span style={{"visibility": this.state.visibleAnswer ? 'visible' : 'hidden'}}>Answer: {answer}</span>
33 |         </div>
34 |       </div>
35 |     );
36 |   }
37 | }
38 | 
39 | export default Question;
40 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/src/components/QuestionView.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | 
  3 | import '../stylesheets/App.css';
  4 | import Question from './Question';
  5 | import Search from './Search';
  6 | import $ from 'jquery';
  7 | 
  8 | class QuestionView extends Component {
  9 |   constructor(props){
 10 |     super(props);
 11 |     this.state = {
 12 |       questions: [],
 13 |       page: 1,
 14 |       totalQuestions: 0,
 15 |       categories: {},
 16 |       currentCategory: null,
 17 |     }
 18 |   }
 19 | 
 20 |   componentDidMount() {
 21 |     this.getQuestions();
 22 |   }
 23 | 
 24 |   getQuestions = () => {
 25 |     $.ajax({
 26 |       url: `/questions?page=${this.state.page}`, //TODO: update request URL
 27 |       type: "GET",
 28 |       success: (result) => {
 29 |         this.setState({
 30 |           questions: result.questions,
 31 |           totalQuestions: result.total_questions,
 32 |           categories: result.categories,
 33 |           currentCategory: result.current_category
 34 |         })
 35 |       },
 36 |       error: (error) => {
 37 |         alert('Unable to load questions. Please try your request again')
 38 |       }
 39 |     })
 40 |   }
 41 | 
 42 |   selectPage(num) {
 43 |     this.setState({page: num}, () => this.getQuestions());
 44 |   }
 45 | 
 46 |   createPagination(){
 47 |     let pageNumbers = [];
 48 |     let maxPage = Math.ceil(this.state.totalQuestions / 10)
 49 |     for (let i = 1; i <= maxPage; i++) {
 50 |       pageNumbers.push(
 51 |         <span
 52 |           key={i}
 53 |           className={`page-num ${i === this.state.page ? 'active' : ''}`}
 54 |           onClick={() => {this.selectPage(i)}}>{i}
 55 |         </span>)
 56 |     }
 57 |     return pageNumbers;
 58 |   }
 59 | 
 60 |   getByCategory= (id) => {
 61 |     $.ajax({
 62 |       url: `/categories/${id}/questions`, //TODO: update request URL
 63 |       type: "GET",
 64 |       success: (result) => {
 65 |         this.setState({
 66 |           questions: result.questions,
 67 |           totalQuestions: result.total_questions,
 68 |           currentCategory: result.current_category
 69 |         })
 70 |       },
 71 |       error: (error) => {
 72 |         alert('Unable to load questions. Please try your request again')
 73 |       }
 74 |     })
 75 |   }
 76 | 
 77 |   submitSearch = (searchTerm) => {
 78 |     $.ajax({
 79 |       url: `/questions`, //TODO: update request URL
 80 |       type: "POST",
 81 |       dataType: 'json',
 82 |       contentType: 'application/json',
 83 |       data: JSON.stringify({searchTerm: searchTerm}),
 84 |       xhrFields: {
 85 |         withCredentials: true
 86 |       },
 87 |       crossDomain: true,
 88 |       success: (result) => {
 89 |         this.setState({
 90 |           questions: result.questions,
 91 |           totalQuestions: result.total_questions,
 92 |           currentCategory: result.current_category
 93 |         })
 94 |       },
 95 |       error: (error) => {
 96 |         alert('Unable to load questions. Please try your request again')
 97 |       }
 98 |     })
 99 |   }
100 | 
101 |   questionAction = (id) => (action) => {
102 |     if(action === 'DELETE') {
103 |       if(window.confirm('are you sure you want to delete the question?')) {
104 |         $.ajax({
105 |           url: `/questions/${id}`, //TODO: update request URL
106 |           type: "DELETE",
107 |           success: (result) => {
108 |             this.getQuestions();
109 |           },
110 |           error: (error) => {
111 |             alert('Unable to load questions. Please try your request again')
112 |           }
113 |         })
114 |       }
115 |     }
116 |   }
117 | 
118 |   render() {
119 |     return (
120 |       <div className="question-view">
121 |         <div className="categories-list">
122 |           <h2 onClick={() => {this.getQuestions()}}>Categories</h2>
123 |           <ul>
124 |             {Object.keys(this.state.categories).map((id, ) => (
125 |               <li key={id} onClick={() => {this.getByCategory(id)}}>
126 |                 {this.state.categories[id]}
127 |                 <img className="category" src={`${this.state.categories[id].toLowerCase()}.svg`}/>
128 |               </li>
129 |             ))}
130 |           </ul>
131 |           <Search submitSearch={this.submitSearch}/>
132 |         </div>
133 |         <div className="questions-list">
134 |           <h2>Questions</h2>
135 |           {this.state.questions.map((q, ind) => (
136 |             <Question
137 |               key={q.id}
138 |               question={q.question}
139 |               answer={q.answer}
140 |               category={this.state.categories[q.category]}
141 |               difficulty={q.difficulty}
142 |               questionAction={this.questionAction(q.id)}
143 |             />
144 |           ))}
145 |           <div className="pagination-menu">
146 |             {this.createPagination()}
147 |           </div>
148 |         </div>
149 | 
150 |       </div>
151 |     );
152 |   }
153 | }
154 | 
155 | export default QuestionView;
156 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/src/components/Search.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | 
 3 | class Search extends Component {
 4 |   state = {
 5 |     query: '',
 6 |   }
 7 | 
 8 |   getInfo = (event) => {
 9 |     event.preventDefault();
10 |     this.props.submitSearch(this.state.query)
11 |   }
12 | 
13 |   handleInputChange = () => {
14 |     this.setState({
15 |       query: this.search.value
16 |     })
17 |   }
18 | 
19 |   render() {
20 |     return (
21 |       <form onSubmit={this.getInfo}>
22 |         <input
23 |           placeholder="Search questions..."
24 |           ref={input => this.search = input}
25 |           onChange={this.handleInputChange}
26 |         />
27 |         <input type="submit" value="Submit" className="button"/>
28 |       </form>
29 |     )
30 |   }
31 | }
32 | 
33 | export default Search
34 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './stylesheets/index.css';
 4 | import App from './App';
 5 | import * as serviceWorker from './serviceWorker';
 6 | 
 7 | ReactDOM.render(<App />, document.getElementById('root'));
 8 | 
 9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
11 | // Learn more about service workers: https://bit.ly/CRA-PWA
12 | serviceWorker.unregister();
13 | 
14 | 
15 |  //"start": "HOST='127.0.0.1' PORT='5000' react-scripts start",
16 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.1/8 is considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl)
104 |     .then(response => {
105 |       // Ensure service worker exists, and that we really are getting a JS file.
106 |       const contentType = response.headers.get('content-type');
107 |       if (
108 |         response.status === 404 ||
109 |         (contentType != null && contentType.indexOf('javascript') === -1)
110 |       ) {
111 |         // No service worker found. Probably a different app. Reload the page.
112 |         navigator.serviceWorker.ready.then(registration => {
113 |           registration.unregister().then(() => {
114 |             window.location.reload();
115 |           });
116 |         });
117 |       } else {
118 |         // Service worker found. Proceed as normal.
119 |         registerValidSW(swUrl, config);
120 |       }
121 |     })
122 |     .catch(() => {
123 |       console.log(
124 |         'No internet connection found. App is running in offline mode.'
125 |       );
126 |     });
127 | }
128 | 
129 | export function unregister() {
130 |   if ('serviceWorker' in navigator) {
131 |     navigator.serviceWorker.ready.then(registration => {
132 |       registration.unregister();
133 |     });
134 |   }
135 | }
136 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/src/stylesheets/App.css:
--------------------------------------------------------------------------------
 1 | .App-header {
 2 |   background-color: #222;
 3 |   color: white;
 4 |   display: flex;
 5 |   justify-content: space-between;
 6 |   height: 75px;
 7 |   padding: 20px;
 8 |   padding-right: 40%;
 9 |   padding-left: 5%;
10 | }
11 | 
12 | .App-header > h1 {
13 |   color: dodgerblue;
14 | }
15 | 
16 | .App-intro {
17 |   font-size: large;
18 | }
19 | 
20 | h2 {
21 |   text-align: center;
22 | }
23 | 
24 | li {
25 |   text-align: center;
26 |   margin: 5px 0px;
27 | }
28 | 
29 | ul {
30 |   list-style-type: none;
31 |   padding-inline-start: 0px;
32 | }
33 | 
34 | form {
35 |   display: flex;
36 |   flex-direction: column;
37 |   width: 80%;
38 |   margin: auto;
39 | }


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/src/stylesheets/FormView.css:
--------------------------------------------------------------------------------
1 | .form-view > label {
2 |   padding: 0px 0px 10px;
3 | }
4 | 
5 | #add-form {
6 |   text-align: center;
7 | }
8 | 


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/src/stylesheets/Header.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/FSND/eb54c2ef45d7fdfeb022dd7ca793e49967ce9aaa/projects/02_trivia_api/starter/frontend/src/stylesheets/Header.css


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/src/stylesheets/Question.css:
--------------------------------------------------------------------------------
 1 | .question-view {
 2 |   display: flex;
 3 |   flex-direction: row;
 4 | }
 5 | 
 6 | .categories-list {
 7 |   flex-basis: 25%;
 8 |   flex-shrink: 2;
 9 | }
10 | 
11 | .categories-list > form {
12 |   width: 60%;
13 | }
14 | 
15 | .questions-list {
16 |   flex-basis: 75%;
17 |   text-align: center;
18 | }
19 | 
20 | .Question-holder {
21 |   padding: 10px 20px;
22 |   border: 2px black solid;
23 |   text-align: left;
24 |   margin: 7px;
25 | }
26 | 
27 | .Question-status {
28 |   display: flex;
29 |   flex-direction: row;
30 |   height: 30px;
31 |   width: 200px;
32 |   align-items: center;
33 |   justify-content: space-between;
34 | }
35 | 
36 | .Question {
37 |   font-size: 21px;
38 |   width: 100%;
39 | }
40 | 
41 | .answer-holder {
42 |   font-size: 25px;
43 |   height: 25px;
44 |   margin: 5px 0px;
45 | }
46 | 
47 | .show-answer {
48 |   width: 100px;
49 |   margin-top: 5px;
50 |   background-color: dodgerblue;
51 |   color: white;
52 |   padding: 3px 5px;
53 |   margin-left: 0px !important;
54 | }
55 | 
56 | span.page-num {
57 |   margin: 5px;
58 |   padding-bottom: 50px;
59 |   /* color: blue; */
60 |   font-weight: bolder;
61 |   text-decoration: underline;
62 |   font-size: 16px;
63 | }
64 | 
65 | span.page-num.active {
66 |   color: blue;
67 | }
68 | 
69 | img.category {
70 |   width: 30px;
71 | }
72 | 
73 | img.delete {
74 |   width: 20px;
75 | }


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/src/stylesheets/QuizView.css:
--------------------------------------------------------------------------------
 1 | .quiz-play-holder {
 2 |     width: 80%;
 3 |     margin-left: 10%;
 4 |     text-align: center;
 5 |     margin-top: 40px;
 6 | }
 7 | 
 8 | .category-holder {
 9 |     margin-top: 16px;
10 |     font-size: 24px;
11 | }
12 | 
13 | .choose-header {
14 |     font-size: 34px;
15 |     font-weight: bold;
16 | }
17 | 
18 | .play-category:hover {
19 |     color: dodgerblue;
20 | }
21 | 
22 | .button {
23 |     width: 100px;
24 |     margin-top: 5px;
25 |     background-color: dodgerblue;
26 |     color: white;
27 |     padding: 3px 5px;
28 |     align-self: center;
29 | }
30 | 
31 | div.button {
32 |     margin-top: 20px;
33 |     margin-left: calc(50% - 50px);
34 | }
35 | 
36 | .quiz-question {
37 |     margin: 12px;
38 |     font-size: 24px;
39 | }
40 | 
41 | .correct {
42 |     color: green;
43 | }
44 | 
45 | .wrong {
46 |     color: red;
47 | }


--------------------------------------------------------------------------------
/projects/02_trivia_api/starter/frontend/src/stylesheets/index.css:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   padding: 0;
4 |   font-family: sans-serif;
5 | }
6 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/.gitignore:
--------------------------------------------------------------------------------
 1 | venv/
 2 | .vscode/
 3 | __pycache__/
 4 | test.db
 5 | 
 6 | # OS generated files #
 7 | ######################
 8 | .DS_Store
 9 | .DS_Store?
10 | ._*
11 | .Spotlight-V100
12 | .Trashes
13 | ehthumbs.db
14 | Thumbs.db


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/README.md:
--------------------------------------------------------------------------------
 1 | # Coffee Shop Full Stack
 2 | 
 3 | ## Full Stack Nano - IAM Final Project
 4 | 
 5 | Udacity has decided to open a new digitally enabled cafe for students to order drinks, socialize, and study hard. But they need help setting up their menu experience.
 6 | 
 7 | You have been called on to demonstrate your newly learned skills to create a full stack drink menu application. The application must:
 8 | 
 9 | 1. Display graphics representing the ratios of ingredients in each drink.
10 | 2. Allow public users to view drink names and graphics.
11 | 3. Allow the shop baristas to see the recipe information.
12 | 4. Allow the shop managers to create new drinks and edit existing drinks.
13 | 
14 | ## Tasks
15 | 
16 | There are `@TODO` comments throughout the project. We recommend tackling the sections in order. Start by reading the READMEs in:
17 | 
18 | 1. [`./backend/`](./backend/README.md)
19 | 2. [`./frontend/`](./frontend/README.md)
20 | 
21 | ## About the Stack
22 | 
23 | We started the full stack application for you. It is designed with some key functional areas:
24 | 
25 | ### Backend
26 | 
27 | The `./backend` directory contains a partially completed Flask server with a pre-written SQLAlchemy module to simplify your data needs. You will need to complete the required endpoints, configure, and integrate Auth0 for authentication.
28 | 
29 | [View the README.md within ./backend for more details.](./backend/README.md)
30 | 
31 | ### Frontend
32 | 
33 | The `./frontend` directory contains a complete Ionic frontend to consume the data from the Flask server. You will only need to update the environment variables found within (./frontend/src/environment/environment.ts) to reflect the Auth0 configuration details set up for the backend app.
34 | 
35 | [View the README.md within ./frontend for more details.](./frontend/README.md)
36 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/backend/README.md:
--------------------------------------------------------------------------------
 1 | # Coffee Shop Backend
 2 | 
 3 | ## Getting Started
 4 | 
 5 | ### Installing Dependencies
 6 | 
 7 | #### Python 3.7
 8 | 
 9 | Follow instructions to install the latest version of python for your platform in the [python docs](https://docs.python.org/3/using/unix.html#getting-and-installing-the-latest-version-of-python)
10 | 
11 | #### Virtual Environment
12 | 
13 | We recommend working within a virtual environment whenever using Python for projects. This keeps your dependencies for each project separate and organized. Instructions for setting up a virtual environment for your platform can be found in the [python docs](https://packaging.python.org/guides/installing-using-pip-and-virtual-environments/)
14 | 
15 | #### PIP Dependencies
16 | 
17 | Once you have your virtual environment setup and running, install dependencies by naviging to the `/backend` directory and running:
18 | 
19 | ```bash
20 | pip install -r requirements.txt
21 | ```
22 | 
23 | This will install all of the required packages we selected within the `requirements.txt` file.
24 | 
25 | ##### Key Dependencies
26 | 
27 | - [Flask](http://flask.pocoo.org/) is a lightweight backend microservices framework. Flask is required to handle requests and responses.
28 | 
29 | - [SQLAlchemy](https://www.sqlalchemy.org/) and [Flask-SQLAlchemy](https://flask-sqlalchemy.palletsprojects.com/en/2.x/) are libraries to handle the lightweight sqlite database. Since we want you to focus on auth, we handle the heavy lift for you in `./src/database/models.py`. We recommend skimming this code first so you know how to interface with the Drink model.
30 | 
31 | - [jose](https://python-jose.readthedocs.io/en/latest/) JavaScript Object Signing and Encryption for JWTs. Useful for encoding, decoding, and verifying JWTS.
32 | 
33 | ## Running the server
34 | 
35 | From within the `./src` directory first ensure you are working using your created virtual environment.
36 | 
37 | Each time you open a new terminal session, run:
38 | 
39 | ```bash
40 | export FLASK_APP=api.py;
41 | ```
42 | 
43 | To run the server, execute:
44 | 
45 | ```bash
46 | flask run --reload
47 | ```
48 | 
49 | The `--reload` flag will detect file changes and restart the server automatically.
50 | 
51 | ## Tasks
52 | 
53 | ### Setup Auth0
54 | 
55 | 1. Create a new Auth0 Account
56 | 2. Select a unique tenant domain
57 | 3. Create a new, single page web application
58 | 4. Create a new API
59 |    - in API Settings:
60 |      - Enable RBAC
61 |      - Enable Add Permissions in the Access Token
62 | 5. Create new API permissions:
63 |    - `get:drinks`
64 |    - `get:drinks-detail`
65 |    - `post:drinks`
66 |    - `patch:drinks`
67 |    - `delete:drinks`
68 | 6. Create new roles for:
69 |    - Barista
70 |      - can `get:drinks-detail`
71 |    - Manager
72 |      - can perform all actions
73 | 7. Test your endpoints with [Postman](https://getpostman.com).
74 |    - Register 2 users - assign the Barista role to one and Manager role to the other.
75 |    - Sign into each account and make note of the JWT.
76 |    - Import the postman collection `./starter_code/backend/udacity-fsnd-udaspicelatte.postman_collection.json`
77 |    - Right-clicking the collection folder for barista and manager, navigate to the authorization tab, and including the JWT in the token field (you should have noted these JWTs).
78 |    - Run the collection and correct any errors.
79 |    - Export the collection overwriting the one we've included so that we have your proper JWTs during review!
80 | 
81 | ### Implement The Server
82 | 
83 | There are `@TODO` comments throughout the `./backend/src`. We recommend tackling the files in order and from top to bottom:
84 | 
85 | 1. `./src/auth/auth.py`
86 | 2. `./src/api.py`
87 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/backend/requirements.txt:
--------------------------------------------------------------------------------
 1 | astroid==2.2.5
 2 | Click==7.0
 3 | ecdsa==0.13.2
 4 | Flask==1.0.2
 5 | Flask-SQLAlchemy==2.5.0
 6 | future==0.17.1
 7 | isort==4.3.18
 8 | itsdangerous==1.1.0
 9 | Jinja2==2.10.1
10 | lazy-object-proxy==1.4.0
11 | MarkupSafe==1.1.1
12 | mccabe==0.6.1
13 | pycryptodome==3.3.1
14 | pylint==2.3.1
15 | python-jose-cryptodome==1.3.2
16 | six==1.12.0
17 | typed-ast==1.4.2
18 | Werkzeug==0.15.6
19 | wrapt==1.11.1
20 | Flask-Cors==3.0.8
21 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/backend/src/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/FSND/eb54c2ef45d7fdfeb022dd7ca793e49967ce9aaa/projects/03_coffee_shop_full_stack/starter_code/backend/src/__init__.py


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/backend/src/api.py:
--------------------------------------------------------------------------------
  1 | import os
  2 | from flask import Flask, request, jsonify, abort
  3 | from sqlalchemy import exc
  4 | import json
  5 | from flask_cors import CORS
  6 | 
  7 | from .database.models import db_drop_and_create_all, setup_db, Drink
  8 | from .auth.auth import AuthError, requires_auth
  9 | 
 10 | app = Flask(__name__)
 11 | setup_db(app)
 12 | CORS(app)
 13 | 
 14 | '''
 15 | @TODO uncomment the following line to initialize the datbase
 16 | !! NOTE THIS WILL DROP ALL RECORDS AND START YOUR DB FROM SCRATCH
 17 | !! NOTE THIS MUST BE UNCOMMENTED ON FIRST RUN
 18 | !! Running this function will add one
 19 | '''
 20 | # db_drop_and_create_all()
 21 | 
 22 | # ROUTES
 23 | '''
 24 | @TODO implement endpoint
 25 |     GET /drinks
 26 |         it should be a public endpoint
 27 |         it should contain only the drink.short() data representation
 28 |     returns status code 200 and json {"success": True, "drinks": drinks} where drinks is the list of drinks
 29 |         or appropriate status code indicating reason for failure
 30 | '''
 31 | 
 32 | 
 33 | '''
 34 | @TODO implement endpoint
 35 |     GET /drinks-detail
 36 |         it should require the 'get:drinks-detail' permission
 37 |         it should contain the drink.long() data representation
 38 |     returns status code 200 and json {"success": True, "drinks": drinks} where drinks is the list of drinks
 39 |         or appropriate status code indicating reason for failure
 40 | '''
 41 | 
 42 | 
 43 | '''
 44 | @TODO implement endpoint
 45 |     POST /drinks
 46 |         it should create a new row in the drinks table
 47 |         it should require the 'post:drinks' permission
 48 |         it should contain the drink.long() data representation
 49 |     returns status code 200 and json {"success": True, "drinks": drink} where drink an array containing only the newly created drink
 50 |         or appropriate status code indicating reason for failure
 51 | '''
 52 | 
 53 | 
 54 | '''
 55 | @TODO implement endpoint
 56 |     PATCH /drinks/<id>
 57 |         where <id> is the existing model id
 58 |         it should respond with a 404 error if <id> is not found
 59 |         it should update the corresponding row for <id>
 60 |         it should require the 'patch:drinks' permission
 61 |         it should contain the drink.long() data representation
 62 |     returns status code 200 and json {"success": True, "drinks": drink} where drink an array containing only the updated drink
 63 |         or appropriate status code indicating reason for failure
 64 | '''
 65 | 
 66 | 
 67 | '''
 68 | @TODO implement endpoint
 69 |     DELETE /drinks/<id>
 70 |         where <id> is the existing model id
 71 |         it should respond with a 404 error if <id> is not found
 72 |         it should delete the corresponding row for <id>
 73 |         it should require the 'delete:drinks' permission
 74 |     returns status code 200 and json {"success": True, "delete": id} where id is the id of the deleted record
 75 |         or appropriate status code indicating reason for failure
 76 | '''
 77 | 
 78 | 
 79 | # Error Handling
 80 | '''
 81 | Example error handling for unprocessable entity
 82 | '''
 83 | 
 84 | 
 85 | @app.errorhandler(422)
 86 | def unprocessable(error):
 87 |     return jsonify({
 88 |         "success": False,
 89 |         "error": 422,
 90 |         "message": "unprocessable"
 91 |     }), 422
 92 | 
 93 | 
 94 | '''
 95 | @TODO implement error handlers using the @app.errorhandler(error) decorator
 96 |     each error handler should return (with approprate messages):
 97 |              jsonify({
 98 |                     "success": False,
 99 |                     "error": 404,
100 |                     "message": "resource not found"
101 |                     }), 404
102 | 
103 | '''
104 | 
105 | '''
106 | @TODO implement error handler for 404
107 |     error handler should conform to general task above
108 | '''
109 | 
110 | 
111 | '''
112 | @TODO implement error handler for AuthError
113 |     error handler should conform to general task above
114 | '''
115 | 
116 | if __name__ == "__main__":
117 |     app.debug = True
118 |     app.run()
119 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/backend/src/auth/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/FSND/eb54c2ef45d7fdfeb022dd7ca793e49967ce9aaa/projects/03_coffee_shop_full_stack/starter_code/backend/src/auth/__init__.py


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/backend/src/auth/auth.py:
--------------------------------------------------------------------------------
 1 | import json
 2 | from flask import request, _request_ctx_stack
 3 | from functools import wraps
 4 | from jose import jwt
 5 | from urllib.request import urlopen
 6 | 
 7 | 
 8 | AUTH0_DOMAIN = 'udacity-fsnd.auth0.com'
 9 | ALGORITHMS = ['RS256']
10 | API_AUDIENCE = 'dev'
11 | 
12 | ## AuthError Exception
13 | '''
14 | AuthError Exception
15 | A standardized way to communicate auth failure modes
16 | '''
17 | class AuthError(Exception):
18 |     def __init__(self, error, status_code):
19 |         self.error = error
20 |         self.status_code = status_code
21 | 
22 | 
23 | ## Auth Header
24 | 
25 | '''
26 | @TODO implement get_token_auth_header() method
27 |     it should attempt to get the header from the request
28 |         it should raise an AuthError if no header is present
29 |     it should attempt to split bearer and the token
30 |         it should raise an AuthError if the header is malformed
31 |     return the token part of the header
32 | '''
33 | def get_token_auth_header():
34 |    raise Exception('Not Implemented')
35 | 
36 | '''
37 | @TODO implement check_permissions(permission, payload) method
38 |     @INPUTS
39 |         permission: string permission (i.e. 'post:drink')
40 |         payload: decoded jwt payload
41 | 
42 |     it should raise an AuthError if permissions are not included in the payload
43 |         !!NOTE check your RBAC settings in Auth0
44 |     it should raise an AuthError if the requested permission string is not in the payload permissions array
45 |     return true otherwise
46 | '''
47 | def check_permissions(permission, payload):
48 |     raise Exception('Not Implemented')
49 | 
50 | '''
51 | @TODO implement verify_decode_jwt(token) method
52 |     @INPUTS
53 |         token: a json web token (string)
54 | 
55 |     it should be an Auth0 token with key id (kid)
56 |     it should verify the token using Auth0 /.well-known/jwks.json
57 |     it should decode the payload from the token
58 |     it should validate the claims
59 |     return the decoded payload
60 | 
61 |     !!NOTE urlopen has a common certificate error described here: https://stackoverflow.com/questions/50236117/scraping-ssl-certificate-verify-failed-error-for-http-en-wikipedia-org
62 | '''
63 | def verify_decode_jwt(token):
64 |     raise Exception('Not Implemented')
65 | 
66 | '''
67 | @TODO implement @requires_auth(permission) decorator method
68 |     @INPUTS
69 |         permission: string permission (i.e. 'post:drink')
70 | 
71 |     it should use the get_token_auth_header method to get the token
72 |     it should use the verify_decode_jwt method to decode the jwt
73 |     it should use the check_permissions method validate claims and check the requested permission
74 |     return the decorator which passes the decoded payload to the decorated method
75 | '''
76 | def requires_auth(permission=''):
77 |     def requires_auth_decorator(f):
78 |         @wraps(f)
79 |         def wrapper(*args, **kwargs):
80 |             token = get_token_auth_header()
81 |             payload = verify_decode_jwt(token)
82 |             check_permissions(permission, payload)
83 |             return f(payload, *args, **kwargs)
84 | 
85 |         return wrapper
86 |     return requires_auth_decorator


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/backend/src/database/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/FSND/eb54c2ef45d7fdfeb022dd7ca793e49967ce9aaa/projects/03_coffee_shop_full_stack/starter_code/backend/src/database/__init__.py


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/backend/src/database/database.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/FSND/eb54c2ef45d7fdfeb022dd7ca793e49967ce9aaa/projects/03_coffee_shop_full_stack/starter_code/backend/src/database/database.db


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/backend/src/database/models.py:
--------------------------------------------------------------------------------
  1 | import os
  2 | from sqlalchemy import Column, String, Integer
  3 | from flask_sqlalchemy import SQLAlchemy
  4 | import json
  5 | 
  6 | database_filename = "database.db"
  7 | project_dir = os.path.dirname(os.path.abspath(__file__))
  8 | database_path = "sqlite:///{}".format(os.path.join(project_dir, database_filename))
  9 | 
 10 | db = SQLAlchemy()
 11 | 
 12 | '''
 13 | setup_db(app)
 14 |     binds a flask application and a SQLAlchemy service
 15 | '''
 16 | 
 17 | 
 18 | def setup_db(app):
 19 |     app.config["SQLALCHEMY_DATABASE_URI"] = database_path
 20 |     app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
 21 |     db.app = app
 22 |     db.init_app(app)
 23 | 
 24 | 
 25 | '''
 26 | db_drop_and_create_all()
 27 |     drops the database tables and starts fresh
 28 |     can be used to initialize a clean database
 29 |     !!NOTE you can change the database_filename variable to have multiple verisons of a database
 30 | '''
 31 | 
 32 | 
 33 | def db_drop_and_create_all():
 34 |     db.drop_all()
 35 |     db.create_all()
 36 |     # add one demo row which is helping in POSTMAN test
 37 |     drink = Drink(
 38 |         title='water',
 39 |         recipe='[{"name": "water", "color": "blue", "parts": 1}]'
 40 |     )
 41 | 
 42 | 
 43 |     drink.insert()
 44 | # ROUTES
 45 | 
 46 | '''
 47 | Drink
 48 | a persistent drink entity, extends the base SQLAlchemy Model
 49 | '''
 50 | 
 51 | 
 52 | class Drink(db.Model):
 53 |     # Autoincrementing, unique primary key
 54 |     id = Column(Integer().with_variant(Integer, "sqlite"), primary_key=True)
 55 |     # String Title
 56 |     title = Column(String(80), unique=True)
 57 |     # the ingredients blob - this stores a lazy json blob
 58 |     # the required datatype is [{'color': string, 'name':string, 'parts':number}]
 59 |     recipe = Column(String(180), nullable=False)
 60 | 
 61 |     '''
 62 |     short()
 63 |         short form representation of the Drink model
 64 |     '''
 65 | 
 66 |     def short(self):
 67 |         print(json.loads(self.recipe))
 68 |         short_recipe = [{'color': r['color'], 'parts': r['parts']} for r in json.loads(self.recipe)]
 69 |         return {
 70 |             'id': self.id,
 71 |             'title': self.title,
 72 |             'recipe': short_recipe
 73 |         }
 74 | 
 75 |     '''
 76 |     long()
 77 |         long form representation of the Drink model
 78 |     '''
 79 | 
 80 |     def long(self):
 81 |         return {
 82 |             'id': self.id,
 83 |             'title': self.title,
 84 |             'recipe': json.loads(self.recipe)
 85 |         }
 86 | 
 87 |     '''
 88 |     insert()
 89 |         inserts a new model into a database
 90 |         the model must have a unique name
 91 |         the model must have a unique id or null id
 92 |         EXAMPLE
 93 |             drink = Drink(title=req_title, recipe=req_recipe)
 94 |             drink.insert()
 95 |     '''
 96 | 
 97 |     def insert(self):
 98 |         db.session.add(self)
 99 |         db.session.commit()
100 | 
101 |     '''
102 |     delete()
103 |         deletes a new model into a database
104 |         the model must exist in the database
105 |         EXAMPLE
106 |             drink = Drink(title=req_title, recipe=req_recipe)
107 |             drink.delete()
108 |     '''
109 | 
110 |     def delete(self):
111 |         db.session.delete(self)
112 |         db.session.commit()
113 | 
114 |     '''
115 |     update()
116 |         updates a new model into a database
117 |         the model must exist in the database
118 |         EXAMPLE
119 |             drink = Drink.query.filter(Drink.id == id).one_or_none()
120 |             drink.title = 'Black Coffee'
121 |             drink.update()
122 |     '''
123 | 
124 |     def update(self):
125 |         db.session.commit()
126 | 
127 |     def __repr__(self):
128 |         return json.dumps(self.short())
129 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/.gitignore:
--------------------------------------------------------------------------------
 1 | # Specifies intentionally untracked files to ignore when using Git
 2 | # http://git-scm.com/docs/gitignore
 3 | 
 4 | *~
 5 | *.sw[mnpcod]
 6 | *.log
 7 | *.tmp
 8 | *.tmp.*
 9 | log.txt
10 | *.sublime-project
11 | *.sublime-workspace
12 | .vscode/
13 | npm-debug.log*
14 | 
15 | .idea/
16 | .ionic/
17 | .sourcemaps/
18 | .sass-cache/
19 | .tmp/
20 | .versions/
21 | coverage/
22 | www/
23 | node_modules/
24 | tmp/
25 | temp/
26 | platforms/
27 | plugins/
28 | plugins/android.json
29 | plugins/ios.json
30 | $RECYCLE.BIN/
31 | 
32 | .DS_Store
33 | Thumbs.db
34 | UserInterfaceState.xcuserstate
35 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/README.md:
--------------------------------------------------------------------------------
 1 | # Coffee Shop Frontend
 2 | 
 3 | ## Getting Setup
 4 | 
 5 | > _tip_: this frontend is designed to work with [Flask-based Backend](../backend). It is recommended you stand up the backend first, test using Postman, and then the frontend should integrate smoothly.
 6 | 
 7 | ### Installing Dependencies
 8 | 
 9 | #### Installing Node and NPM
10 | 
11 | This project depends on Nodejs and Node Package Manager (NPM). Before continuing, you must download and install Node (the download includes NPM) from [https://nodejs.com/en/download](https://nodejs.org/en/download/).
12 | 
13 | #### Installing Ionic Cli
14 | 
15 | The Ionic Command Line Interface is required to serve and build the frontend. Instructions for installing the CLI is in the [Ionic Framework Docs](https://ionicframework.com/docs/installation/cli).
16 | 
17 | #### Installing project dependencies
18 | 
19 | This project uses NPM to manage software dependencies. NPM Relies on the package.json file located in the `frontend` directory of this repository. After cloning, open your terminal and run:
20 | 
21 | ```bash
22 | npm install
23 | ```
24 | 
25 | > _tip_: **npm i** is shorthand for **npm install**
26 | 
27 | ## Required Tasks
28 | 
29 | ### Configure Environment Variables
30 | 
31 | Ionic uses a configuration file to manage environment variables. These variables ship with the transpiled software and should not include secrets.
32 | 
33 | - Open `./src/environments/environments.ts` and ensure each variable reflects the system you stood up for the backend.
34 | 
35 | ## Running Your Frontend in Dev Mode
36 | 
37 | Ionic ships with a useful development server which detects changes and transpiles as you work. The application is then accessible through the browser on a localhost port. To run the development server, cd into the `frontend` directory and run:
38 | 
39 | ```bash
40 | ionic serve
41 | ```
42 | 
43 | > _tip_: Do not use **ionic serve** in production. Instead, build Ionic into a build artifact for your desired platforms.
44 | > [Checkout the Ionic docs to learn more](https://ionicframework.com/docs/cli/commands/build)
45 | 
46 | ## Key Software Design Relevant to Our Coursework
47 | 
48 | The frontend framework is a bit beefy; here are the two areas to focus your study.
49 | 
50 | ### Authentication
51 | 
52 | The authentication system used for this project is Auth0. `./src/app/services/auth.service.ts` contains the logic to direct a user to the Auth0 login page, managing the JWT token upon successful callback, and handle setting and retrieving the token from the local store. This token is then consumed by our DrinkService (`./src/app/services/drinks.service.ts`) and passed as an Authorization header when making requests to our backend.
53 | 
54 | ### Authorization
55 | 
56 | The Auth0 JWT includes claims for permissions based on the user's role within the Auth0 system. This project makes use of these claims using the `auth.can(permission)` method which checks if particular permissions exist within the JWT permissions claim of the currently logged in user. This method is defined in  `./src/app/services/auth.service.ts` and is then used to enable and disable buttons in `./src/app/pages/drink-menu/drink-form/drink-form.html`.
57 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './src/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: require('path').join(__dirname, './tsconfig.e2e.json')
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };
29 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('new App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getPageTitle()).toContain('Tab One');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getPageTitle() {
 9 |     return element(by.css('ion-title')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/ionic.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "udaspicelatte",
3 |   "integrations": {},
4 |   "type": "angular"
5 | }
6 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "udaspicelatte",
 3 |   "version": "0.0.1",
 4 |   "author": "Ionic Framework",
 5 |   "homepage": "https://ionicframework.com/",
 6 |   "scripts": {
 7 |     "ng": "ng",
 8 |     "start": "ng serve",
 9 |     "build": "ng build",
10 |     "test": "ng test",
11 |     "lint": "ng lint",
12 |     "e2e": "ng e2e"
13 |   },
14 |   "private": true,
15 |   "dependencies": {
16 |     "@angular/common": "^7.2.2",
17 |     "@angular/core": "^7.2.2",
18 |     "@angular/forms": "^7.2.2",
19 |     "@angular/http": "^7.2.2",
20 |     "@angular/platform-browser": "^7.2.2",
21 |     "@angular/platform-browser-dynamic": "^7.2.2",
22 |     "@angular/router": "^7.2.2",
23 |     "@auth0/angular-jwt": "^2.1.0",
24 |     "@ionic-native/core": "^5.0.0",
25 |     "@ionic-native/splash-screen": "^5.0.0",
26 |     "@ionic-native/status-bar": "^5.0.0",
27 |     "@ionic/angular": "^4.1.0",
28 |     "core-js": "^2.5.4",
29 |     "jwt-decode": "^2.2.0",
30 |     "rxjs": "~6.5.1",
31 |     "tslib": "^1.9.0",
32 |     "zone.js": "~0.8.29",
33 |     "lodash": "^4.17.13"
34 |   },
35 |   "devDependencies": {
36 |     "@angular-devkit/architect": "~0.13.8",
37 |     "@angular-devkit/build-angular": "~0.13.8",
38 |     "@angular-devkit/core": "~7.3.8",
39 |     "@angular-devkit/schematics": "~7.3.8",
40 |     "@angular/cli": "~7.3.8",
41 |     "@angular/compiler": "~7.2.2",
42 |     "@angular/compiler-cli": "~7.2.2",
43 |     "@angular/language-service": "~7.2.2",
44 |     "@ionic/angular-toolkit": "~1.5.1",
45 |     "@types/node": "~12.0.0",
46 |     "@types/jasmine": "~2.8.8",
47 |     "@types/jasminewd2": "~2.0.3",
48 |     "codelyzer": "~4.5.0",
49 |     "jasmine-core": "~2.99.1",
50 |     "jasmine-spec-reporter": "~4.2.1",
51 |     "karma": "~4.1.0",
52 |     "karma-chrome-launcher": "~2.2.0",
53 |     "karma-coverage-istanbul-reporter": "~2.0.1",
54 |     "karma-jasmine": "~1.1.2",
55 |     "karma-jasmine-html-reporter": "^0.2.2",
56 |     "protractor": "~5.4.0",
57 |     "ts-node": "~8.1.0",
58 |     "tslint": "~5.16.0",
59 |     "typescript": "~3.1.6"
60 |   },
61 |   "description": "An Ionic project"
62 | }
63 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 3 | 
 4 | const routes: Routes = [
 5 |   { path: '', loadChildren: './pages/tabs/tabs.module#TabsPageModule' },
 6 | ];
 7 | @NgModule({
 8 |   imports: [
 9 |     RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
10 |   ],
11 |   exports: [RouterModule]
12 | })
13 | export class AppRoutingModule {}
14 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <ion-app>
2 |   <ion-router-outlet></ion-router-outlet>
3 | </ion-app>
4 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 2 | import { TestBed, async } from '@angular/core/testing';
 3 | 
 4 | import { Platform } from '@ionic/angular';
 5 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 6 | import { StatusBar } from '@ionic-native/status-bar/ngx';
 7 | 
 8 | import { AppComponent } from './app.component';
 9 | 
10 | describe('AppComponent', () => {
11 | 
12 |   let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy;
13 | 
14 |   beforeEach(async(() => {
15 |     statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
16 |     splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
17 |     platformReadySpy = Promise.resolve();
18 |     platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
19 | 
20 |     TestBed.configureTestingModule({
21 |       declarations: [AppComponent],
22 |       schemas: [CUSTOM_ELEMENTS_SCHEMA],
23 |       providers: [
24 |         { provide: StatusBar, useValue: statusBarSpy },
25 |         { provide: SplashScreen, useValue: splashScreenSpy },
26 |         { provide: Platform, useValue: platformSpy },
27 |       ],
28 |     }).compileComponents();
29 |   }));
30 | 
31 |   it('should create the app', () => {
32 |     const fixture = TestBed.createComponent(AppComponent);
33 |     const app = fixture.debugElement.componentInstance;
34 |     expect(app).toBeTruthy();
35 |   });
36 | 
37 |   it('should initialize the app', async () => {
38 |     TestBed.createComponent(AppComponent);
39 |     expect(platformSpy.ready).toHaveBeenCalled();
40 |     await platformReadySpy;
41 |     expect(statusBarSpy.styleDefault).toHaveBeenCalled();
42 |     expect(splashScreenSpy.hide).toHaveBeenCalled();
43 |   });
44 | 
45 |   // TODO: add more tests!
46 | 
47 | });
48 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | import { Platform } from '@ionic/angular';
 4 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 5 | import { StatusBar } from '@ionic-native/status-bar/ngx';
 6 | import { AuthService } from './services/auth.service';
 7 | 
 8 | @Component({
 9 |   selector: 'app-root',
10 |   templateUrl: 'app.component.html'
11 | })
12 | export class AppComponent {
13 |   constructor(
14 |     private auth: AuthService,
15 |     private platform: Platform,
16 |     private splashScreen: SplashScreen,
17 |     private statusBar: StatusBar
18 |   ) {
19 |     this.initializeApp();
20 |   }
21 | 
22 |   initializeApp() {
23 |     this.platform.ready().then(() => {
24 |       this.statusBar.styleDefault();
25 |       this.splashScreen.hide();
26 | 
27 |       // Perform required auth actions
28 |       this.auth.load_jwts();
29 |       this.auth.check_token_fragment();
30 |     });
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | import { RouteReuseStrategy } from '@angular/router';
 4 | 
 5 | import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 6 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 7 | import { StatusBar } from '@ionic-native/status-bar/ngx';
 8 | 
 9 | import { AppRoutingModule } from './app-routing.module';
10 | import { AppComponent } from './app.component';
11 | 
12 | import { DrinksService } from './services/drinks.service';
13 | import { AuthService } from './services/auth.service';
14 | 
15 | import { HttpClientModule } from '@angular/common/http';
16 | 
17 | import { from } from 'rxjs';
18 | 
19 | @NgModule({
20 |   declarations: [AppComponent],
21 |   entryComponents: [],
22 |   imports: [
23 |     BrowserModule,
24 |     IonicModule.forRoot(),
25 |     HttpClientModule,
26 |     AppRoutingModule
27 |   ],
28 |   providers: [
29 |     StatusBar,
30 |     SplashScreen,
31 |     AuthService,
32 |     DrinksService,
33 |     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
34 |   ],
35 |   bootstrap: [AppComponent]
36 | })
37 | export class AppModule {}
38 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/drink-menu/drink-form/drink-form.component.html:
--------------------------------------------------------------------------------
 1 | <ion-header>
 2 |   <ion-toolbar>
 3 |     <ion-title *ngIf="isNew">New Drink Creator</ion-title>
 4 |     <ion-title *ngIf="!isNew">Drink Editor</ion-title>
 5 |   </ion-toolbar>
 6 | </ion-header>
 7 | 
 8 | <ion-content *ngIf="drink">
 9 |     <app-drink-graphic [drink]="drink"></app-drink-graphic>
10 | 
11 |     <form (ngSubmit)="logForm()">
12 |       <ion-item>
13 |         <ion-label>Drink Title</ion-label>
14 |         <ion-input type="text" [(ngModel)]="drink.title" name="title"></ion-input>
15 |       </ion-item>
16 | 
17 |       <ion-item *ngFor="let ingredient of drink.recipe; let i = index;  trackBy: customTrackBy">
18 |         <ion-label>Ingredient Name</ion-label>
19 |         <ion-input [(ngModel)]="drink.recipe[i].name" [name]="'Ingredient Title'+i"></ion-input>
20 | 
21 |         <ion-label>Number of Parts</ion-label>
22 |         <ion-input type="number" [(ngModel)]="drink.recipe[i].parts" [name]="'Ingredient Parts'+i"></ion-input>
23 | 
24 |         <ion-label>Color</ion-label>
25 |         <ion-input type="text" [(ngModel)]="drink.recipe[i].color" [name]="'Ingredient Color'+i"></ion-input>
26 | 
27 |         <ion-button (click)="removeIngredient(i)" [disabled]="i==0 && drink.recipe.length==1">Remove</ion-button><br />
28 |         <ion-button (click)="addIngredient(i)" [disabled]="drink.recipe.length==5">ADD</ion-button><br />
29 | 
30 |       </ion-item>
31 | 
32 |       <ion-button 
33 |         [disabled]="!auth.can('delete:drinks')"
34 |         (click)="deleteClicked()">Delete</ion-button><br />
35 |       <ion-button (click)="closeModal()">Cancel</ion-button>
36 |       <ion-button 
37 |         [disabled]="!auth.can('patch:drinks') || !auth.can('post:drinks')"
38 |         (click)="saveClicked()">Save</ion-button>
39 | 
40 |     </form>
41 | </ion-content>


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/drink-menu/drink-form/drink-form.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/FSND/eb54c2ef45d7fdfeb022dd7ca793e49967ce9aaa/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/drink-menu/drink-form/drink-form.component.scss


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/drink-menu/drink-form/drink-form.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | 
 4 | import { DrinkFormComponent } from './drink-form.component';
 5 | 
 6 | describe('DrinkFormComponent', () => {
 7 |   let component: DrinkFormComponent;
 8 |   let fixture: ComponentFixture<DrinkFormComponent>;
 9 | 
10 |   beforeEach(async(() => {
11 |     TestBed.configureTestingModule({
12 |       declarations: [ DrinkFormComponent ],
13 |       schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 |     })
15 |     .compileComponents();
16 |   }));
17 | 
18 |   beforeEach(() => {
19 |     fixture = TestBed.createComponent(DrinkFormComponent);
20 |     component = fixture.componentInstance;
21 |     fixture.detectChanges();
22 |   });
23 | 
24 |   it('should create', () => {
25 |     expect(component).toBeTruthy();
26 |   });
27 | });
28 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/drink-menu/drink-form/drink-form.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, Input } from '@angular/core';
 2 | import { Drink, DrinksService } from 'src/app/services/drinks.service';
 3 | import { ModalController } from '@ionic/angular';
 4 | import { AuthService } from 'src/app/services/auth.service';
 5 | 
 6 | @Component({
 7 |   selector: 'app-drink-form',
 8 |   templateUrl: './drink-form.component.html',
 9 |   styleUrls: ['./drink-form.component.scss'],
10 | })
11 | export class DrinkFormComponent implements OnInit {
12 |   @Input() drink: Drink;
13 |   @Input() isNew: boolean;
14 | 
15 |   constructor(
16 |     public auth: AuthService,
17 |     private modalCtrl: ModalController,
18 |     private drinkService: DrinksService
19 |     ) { }
20 | 
21 |   ngOnInit() {
22 |     if (this.isNew) {
23 |       this.drink = {
24 |         id: -1,
25 |         title: '',
26 |         recipe: []
27 |       };
28 |       this.addIngredient();
29 |     }
30 |   }
31 | 
32 |   customTrackBy(index: number, obj: any): any {
33 |     return index;
34 |   }
35 | 
36 |   addIngredient(i: number = 0) {
37 |     this.drink.recipe.splice(i + 1, 0, {name: '', color: 'white', parts: 1});
38 |   }
39 | 
40 |   removeIngredient(i: number) {
41 |     this.drink.recipe.splice(i, 1);
42 |   }
43 | 
44 |   closeModal() {
45 |     this.modalCtrl.dismiss();
46 |   }
47 | 
48 |   saveClicked() {
49 |     this.drinkService.saveDrink(this.drink);
50 |     this.closeModal();
51 |   }
52 | 
53 |   deleteClicked() {
54 |     this.drinkService.deleteDrink(this.drink);
55 |     this.closeModal();
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/drink-menu/drink-graphic/drink-graphic.component.html:
--------------------------------------------------------------------------------
1 | <div class="cup">
2 |   <div 
3 |   *ngFor="let ingredient of drink && drink.recipe"
4 |   class="ingredient"
5 |   [style.flexGrow]="ingredient.parts"
6 |   [style.background]="ingredient.color">
7 |     {{t}}
8 |   </div>
9 | </div>


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/drink-menu/drink-graphic/drink-graphic.component.scss:
--------------------------------------------------------------------------------
 1 | .cup {
 2 |     width: 50px;
 3 |     height: 50px;
 4 |     display: flex;
 5 |     flex-direction: column;
 6 |     border-radius: 7px;
 7 |     overflow: hidden;
 8 | }
 9 | 
10 | .ingredient {
11 |     width: 50px;
12 |     flex-grow: 1;
13 | }


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/drink-menu/drink-graphic/drink-graphic.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | 
 4 | import { DrinkGraphicComponent } from './drink-graphic.component';
 5 | 
 6 | describe('DrinkGraphicComponent', () => {
 7 |   let component: DrinkGraphicComponent;
 8 |   let fixture: ComponentFixture<DrinkGraphicComponent>;
 9 | 
10 |   beforeEach(async(() => {
11 |     TestBed.configureTestingModule({
12 |       declarations: [ DrinkGraphicComponent ],
13 |       schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 |     })
15 |     .compileComponents();
16 |   }));
17 | 
18 |   beforeEach(() => {
19 |     fixture = TestBed.createComponent(DrinkGraphicComponent);
20 |     component = fixture.componentInstance;
21 |     fixture.detectChanges();
22 |   });
23 | 
24 |   it('should create', () => {
25 |     expect(component).toBeTruthy();
26 |   });
27 | });
28 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/drink-menu/drink-graphic/drink-graphic.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, Input } from '@angular/core';
 2 | import { Drink } from 'src/app/services/drinks.service';
 3 | 
 4 | @Component({
 5 |   selector: 'app-drink-graphic',
 6 |   templateUrl: './drink-graphic.component.html',
 7 |   styleUrls: ['./drink-graphic.component.scss'],
 8 | })
 9 | export class DrinkGraphicComponent implements OnInit {
10 |   @Input() drink: Drink;
11 | 
12 |   constructor() { }
13 | 
14 |   ngOnInit() {}
15 | 
16 | }
17 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/drink-menu/drink-menu.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { CommonModule } from '@angular/common';
 3 | import { FormsModule } from '@angular/forms';
 4 | import { Routes, RouterModule } from '@angular/router';
 5 | 
 6 | import { IonicModule } from '@ionic/angular';
 7 | 
 8 | import { DrinkMenuPage } from './drink-menu.page';
 9 | import { DrinkGraphicComponent } from './drink-graphic/drink-graphic.component';
10 | import { DrinkFormComponent } from './drink-form/drink-form.component';
11 | 
12 | const routes: Routes = [
13 |   {
14 |     path: '',
15 |     component: DrinkMenuPage
16 |   }
17 | ];
18 | 
19 | @NgModule({
20 |   imports: [
21 |     CommonModule,
22 |     FormsModule,
23 |     IonicModule,
24 |     RouterModule.forChild(routes)
25 |   ],
26 |   entryComponents: [DrinkFormComponent],
27 |   declarations: [DrinkMenuPage, DrinkGraphicComponent, DrinkFormComponent],
28 | })
29 | export class DrinkMenuPageModule {}
30 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/drink-menu/drink-menu.page.html:
--------------------------------------------------------------------------------
 1 | <ion-header>
 2 |   <ion-toolbar style="text-align: center">
 3 |     <ion-title><b>Uda-Spice Latte</b> Cafe</ion-title>
 4 |   </ion-toolbar>
 5 | </ion-header>
 6 | 
 7 | <ion-content *ngIf="drinks && drinks.items">
 8 | <div style="display: flex; justify-content: center; padding-top: 20px;">
 9 |     <ion-card
10 |      style="align-items: center; display: flex; flex-direction: column; cursor: pointer;" 
11 |      *ngFor="let drink of Object.keys(drinks.items)"
12 |      (click)="openForm(drinks.items[drink])">
13 |         <ion-card-header>
14 |           <ion-card-title>{{drinks.items[drink].title}}</ion-card-title>
15 |         </ion-card-header>
16 |       
17 |         <ion-card-content>
18 |             <app-drink-graphic [drink]="drinks.items[drink]"></app-drink-graphic>
19 |         </ion-card-content>
20 |       </ion-card>
21 |     <ion-card
22 |      style="opacity: .7; align-items: center; display: flex; flex-direction: column; cursor: pointer;" 
23 |      *ngIf="auth.can('post:drinks')"
24 |      (click)="openForm()">
25 |         <ion-card-header>
26 |           <ion-card-title>Create Drink</ion-card-title>
27 |         </ion-card-header>
28 |       
29 |         <ion-card-content style="color:grey; font-size: 256%;">
30 |             <ion-icon name="add-circle"></ion-icon>
31 |         </ion-card-content>
32 |       </ion-card>
33 | </div>
34 | </ion-content>
35 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/drink-menu/drink-menu.page.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,900&display=swap');
2 | ion-title {
3 |     font-family: 'Playfair Display', serif;  
4 |     font-size: 1.7em;
5 | }


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/drink-menu/drink-menu.page.spec.ts:
--------------------------------------------------------------------------------
 1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | 
 4 | import { DrinkMenuPage } from './drink-menu.page';
 5 | 
 6 | describe('DrinkMenuPage', () => {
 7 |   let component: DrinkMenuPage;
 8 |   let fixture: ComponentFixture<DrinkMenuPage>;
 9 | 
10 |   beforeEach(async(() => {
11 |     TestBed.configureTestingModule({
12 |       declarations: [ DrinkMenuPage ],
13 |       schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 |     })
15 |     .compileComponents();
16 |   }));
17 | 
18 |   beforeEach(() => {
19 |     fixture = TestBed.createComponent(DrinkMenuPage);
20 |     component = fixture.componentInstance;
21 |     fixture.detectChanges();
22 |   });
23 | 
24 |   it('should create', () => {
25 |     expect(component).toBeTruthy();
26 |   });
27 | });
28 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/drink-menu/drink-menu.page.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { DrinksService, Drink } from '../../services/drinks.service';
 3 | import { ModalController } from '@ionic/angular';
 4 | import { DrinkFormComponent } from './drink-form/drink-form.component';
 5 | import { AuthService } from 'src/app/services/auth.service';
 6 | 
 7 | @Component({
 8 |   selector: 'app-drink-menu',
 9 |   templateUrl: './drink-menu.page.html',
10 |   styleUrls: ['./drink-menu.page.scss'],
11 | })
12 | export class DrinkMenuPage implements OnInit {
13 |   Object = Object;
14 | 
15 |   constructor(
16 |     private auth: AuthService,
17 |     private modalCtrl: ModalController,
18 |     public drinks: DrinksService
19 |     ) { }
20 | 
21 |   ngOnInit() {
22 |     this.drinks.getDrinks();
23 |   }
24 | 
25 |   async openForm(activedrink: Drink = null) {
26 |     if (!this.auth.can('get:drinks-detail')) {
27 |       return;
28 |     }
29 | 
30 |     const modal = await this.modalCtrl.create({
31 |       component: DrinkFormComponent,
32 |       componentProps: { drink: activedrink, isNew: !activedrink }
33 |     });
34 | 
35 |     modal.present();
36 |   }
37 | 
38 | }
39 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/tabs/tabs.module.ts:
--------------------------------------------------------------------------------
 1 | import { IonicModule } from '@ionic/angular';
 2 | import { NgModule } from '@angular/core';
 3 | import { CommonModule } from '@angular/common';
 4 | import { FormsModule } from '@angular/forms';
 5 | 
 6 | import { TabsPageRoutingModule } from './tabs.router.module';
 7 | 
 8 | import { TabsPage } from './tabs.page';
 9 | 
10 | @NgModule({
11 |   imports: [
12 |     IonicModule,
13 |     CommonModule,
14 |     FormsModule,
15 |     TabsPageRoutingModule
16 |   ],
17 |   declarations: [TabsPage]
18 | })
19 | export class TabsPageModule {}
20 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/tabs/tabs.page.html:
--------------------------------------------------------------------------------
 1 | <ion-tabs>
 2 | 
 3 |   <ion-tab-bar slot="bottom">
 4 |     <ion-tab-button tab="drink-menu">
 5 |       <ion-icon name="cafe"></ion-icon>
 6 |       <ion-label>Drink Menu</ion-label>
 7 |     </ion-tab-button>
 8 | 
 9 |     <ion-tab-button tab="user-page">
10 |       <ion-icon name="person"></ion-icon>
11 |       <ion-label>User</ion-label>
12 |     </ion-tab-button>
13 | 
14 |   </ion-tab-bar>
15 | 
16 | </ion-tabs>
17 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/tabs/tabs.page.scss:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/tabs/tabs.page.spec.ts:
--------------------------------------------------------------------------------
 1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | 
 4 | import { TabsPage } from './tabs.page';
 5 | 
 6 | describe('TabsPage', () => {
 7 |   let component: TabsPage;
 8 |   let fixture: ComponentFixture<TabsPage>;
 9 | 
10 |   beforeEach(async(() => {
11 |     TestBed.configureTestingModule({
12 |       declarations: [TabsPage],
13 |       schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 |     }).compileComponents();
15 |   }));
16 | 
17 |   beforeEach(() => {
18 |     fixture = TestBed.createComponent(TabsPage);
19 |     component = fixture.componentInstance;
20 |     fixture.detectChanges();
21 |   });
22 | 
23 |   it('should create', () => {
24 |     expect(component).toBeTruthy();
25 |   });
26 | });
27 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/tabs/tabs.page.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | 
3 | @Component({
4 |   selector: 'app-tabs',
5 |   templateUrl: 'tabs.page.html',
6 |   styleUrls: ['tabs.page.scss']
7 | })
8 | export class TabsPage {}
9 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/tabs/tabs.router.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { RouterModule, Routes } from '@angular/router';
 3 | import { TabsPage } from './tabs.page';
 4 | 
 5 | const routes: Routes = [
 6 |   {
 7 |     path: 'tabs',
 8 |     component: TabsPage,
 9 |     children: [
10 |       { path: 'drink-menu', loadChildren: '../drink-menu/drink-menu.module#DrinkMenuPageModule' },
11 |       { path: 'user-page', loadChildren: '../user-page/user-page.module#UserPagePageModule' }, 
12 |       {
13 |         path: '',
14 |         redirectTo: '/tabs/drink-menu',
15 |         pathMatch: 'full'
16 |       }
17 |     ]
18 |   },
19 |   {
20 |     path: '',
21 |     redirectTo: '/tabs/drink-menu',
22 |     pathMatch: 'full'
23 |   }
24 | ];
25 | 
26 | @NgModule({
27 |   imports: [
28 |     RouterModule.forChild(routes)
29 |   ],
30 |   exports: [RouterModule]
31 | })
32 | export class TabsPageRoutingModule {}
33 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/user-page/user-page.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { CommonModule } from '@angular/common';
 3 | import { FormsModule } from '@angular/forms';
 4 | import { Routes, RouterModule } from '@angular/router';
 5 | 
 6 | import { IonicModule } from '@ionic/angular';
 7 | 
 8 | import { UserPagePage } from './user-page.page';
 9 | 
10 | const routes: Routes = [
11 |   {
12 |     path: '',
13 |     component: UserPagePage
14 |   }
15 | ];
16 | 
17 | @NgModule({
18 |   imports: [
19 |     CommonModule,
20 |     FormsModule,
21 |     IonicModule,
22 |     RouterModule.forChild(routes)
23 |   ],
24 |   declarations: [UserPagePage]
25 | })
26 | export class UserPagePageModule {}
27 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/user-page/user-page.page.html:
--------------------------------------------------------------------------------
 1 | <ion-header>
 2 |   <ion-toolbar>
 3 |     <ion-title>user-page</ion-title>
 4 |   </ion-toolbar>
 5 | </ion-header>
 6 | 
 7 | <ion-content *ngIf="!auth.token">
 8 |   <ion-button [href]="loginURL">Log In</ion-button>
 9 | </ion-content>
10 | <ion-content *ngIf="auth.token">
11 |   <ion-button (click)="auth.logout()">Log Out</ion-button>
12 |       <ion-item>
13 |         <ion-label>Active JWT</ion-label>
14 |         <ion-textarea [ngModel]="auth.token" name="Active JWT"></ion-textarea>
15 |       </ion-item>
16 | </ion-content>
17 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/user-page/user-page.page.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/FSND/eb54c2ef45d7fdfeb022dd7ca793e49967ce9aaa/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/user-page/user-page.page.scss


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/user-page/user-page.page.spec.ts:
--------------------------------------------------------------------------------
 1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | 
 4 | import { UserPagePage } from './user-page.page';
 5 | 
 6 | describe('UserPagePage', () => {
 7 |   let component: UserPagePage;
 8 |   let fixture: ComponentFixture<UserPagePage>;
 9 | 
10 |   beforeEach(async(() => {
11 |     TestBed.configureTestingModule({
12 |       declarations: [ UserPagePage ],
13 |       schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 |     })
15 |     .compileComponents();
16 |   }));
17 | 
18 |   beforeEach(() => {
19 |     fixture = TestBed.createComponent(UserPagePage);
20 |     component = fixture.componentInstance;
21 |     fixture.detectChanges();
22 |   });
23 | 
24 |   it('should create', () => {
25 |     expect(component).toBeTruthy();
26 |   });
27 | });
28 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/pages/user-page/user-page.page.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { AuthService } from '../../services/auth.service';
 3 | 
 4 | @Component({
 5 |   selector: 'app-user-page',
 6 |   templateUrl: './user-page.page.html',
 7 |   styleUrls: ['./user-page.page.scss'],
 8 | })
 9 | export class UserPagePage implements OnInit {
10 |   loginURL: string;
11 | 
12 |   constructor(public auth: AuthService) {
13 |     this.loginURL = auth.build_login_link('/tabs/user-page');
14 |   }
15 | 
16 |   ngOnInit() {
17 |   }
18 | 
19 | }
20 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/services/auth.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { JwtHelperService } from '@auth0/angular-jwt';
 3 | 
 4 | import { environment } from '../../environments/environment';
 5 | 
 6 | const JWTS_LOCAL_KEY = 'JWTS_LOCAL_KEY';
 7 | const JWTS_ACTIVE_INDEX_KEY = 'JWTS_ACTIVE_INDEX_KEY';
 8 | 
 9 | @Injectable({
10 |   providedIn: 'root'
11 | })
12 | export class AuthService {
13 |   url = environment.auth0.url;
14 |   audience = environment.auth0.audience;
15 |   clientId = environment.auth0.clientId;
16 |   callbackURL = environment.auth0.callbackURL;
17 | 
18 |   token: string;
19 |   payload: any;
20 | 
21 |   constructor() { }
22 | 
23 |   build_login_link(callbackPath = '') {
24 |     let link = 'https://';
25 |     link += this.url + '.auth0.com';
26 |     link += '/authorize?';
27 |     link += 'audience=' + this.audience + '&';
28 |     link += 'response_type=token&';
29 |     link += 'client_id=' + this.clientId + '&';
30 |     link += 'redirect_uri=' + this.callbackURL + callbackPath;
31 |     return link;
32 |   }
33 | 
34 |   // invoked in app.component on load
35 |   check_token_fragment() {
36 |     // parse the fragment
37 |     const fragment = window.location.hash.substr(1).split('&')[0].split('=');
38 |     // check if the fragment includes the access token
39 |     if ( fragment[0] === 'access_token' ) {
40 |       // add the access token to the jwt
41 |       this.token = fragment[1];
42 |       // save jwts to localstore
43 |       this.set_jwt();
44 |     }
45 |   }
46 | 
47 |   set_jwt() {
48 |     localStorage.setItem(JWTS_LOCAL_KEY, this.token);
49 |     if (this.token) {
50 |       this.decodeJWT(this.token);
51 |     }
52 |   }
53 | 
54 |   load_jwts() {
55 |     this.token = localStorage.getItem(JWTS_LOCAL_KEY) || null;
56 |     if (this.token) {
57 |       this.decodeJWT(this.token);
58 |     }
59 |   }
60 | 
61 |   activeJWT() {
62 |     return this.token;
63 |   }
64 | 
65 |   decodeJWT(token: string) {
66 |     const jwtservice = new JwtHelperService();
67 |     this.payload = jwtservice.decodeToken(token);
68 |     return this.payload;
69 |   }
70 | 
71 |   logout() {
72 |     this.token = '';
73 |     this.payload = null;
74 |     this.set_jwt();
75 |   }
76 | 
77 |   can(permission: string) {
78 |     return this.payload && this.payload.permissions && this.payload.permissions.length && this.payload.permissions.indexOf(permission) >= 0;
79 |   }
80 | }
81 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/app/services/drinks.service.ts:
--------------------------------------------------------------------------------
  1 | import { Injectable } from '@angular/core';
  2 | import { HttpClient, HttpHeaders } from '@angular/common/http';
  3 | 
  4 | import { AuthService } from './auth.service';
  5 | import { environment } from 'src/environments/environment';
  6 | 
  7 | export interface Drink {
  8 |   id: number;
  9 |   title: string;
 10 |   recipe: Array<{
 11 |           name: string,
 12 |           color: string,
 13 |           parts: number
 14 |         }>;
 15 | }
 16 | 
 17 | @Injectable({
 18 |   providedIn: 'root'
 19 | })
 20 | export class DrinksService {
 21 | 
 22 |   url = environment.apiServerUrl;
 23 | 
 24 |   public items: {[key: number]: Drink} = {};
 25 |   // = {
 26 |   //                             1: {
 27 |   //                             id: 1,
 28 |   //                             title: 'matcha shake',
 29 |   //                             recipe: [
 30 |   //                                   {
 31 |   //                                     name: 'milk',
 32 |   //                                     color: 'grey',
 33 |   //                                     parts: 1
 34 |   //                                   },
 35 |   //                                   {
 36 |   //                                     name: 'matcha',
 37 |   //                                     color: 'green',
 38 |   //                                     parts: 3
 39 |   //                                   },
 40 |   //                                 ]
 41 |   //                           },
 42 |   //                           2: {
 43 |   //                             id: 2,
 44 |   //                             title: 'flatwhite',
 45 |   //                             recipe: [
 46 | 
 47 |   //                                   {
 48 |   //                                     name: 'milk',
 49 |   //                                     color: 'grey',
 50 |   //                                     parts: 3
 51 |   //                                   },
 52 |   //                                   {
 53 |   //                                     name: 'coffee',
 54 |   //                                     color: 'brown',
 55 |   //                                     parts: 1
 56 |   //                                   },
 57 |   //                                 ]
 58 |   //                           },
 59 |   //                           3: {
 60 |   //                             id: 3,
 61 |   //                             title: 'cap',
 62 |   //                             recipe: [
 63 |   //                                   {
 64 |   //                                     name: 'foam',
 65 |   //                                     color: 'white',
 66 |   //                                     parts: 1
 67 |   //                                   },
 68 |   //                                   {
 69 |   //                                     name: 'milk',
 70 |   //                                     color: 'grey',
 71 |   //                                     parts: 2
 72 |   //                                   },
 73 |   //                                   {
 74 |   //                                     name: 'coffee',
 75 |   //                                     color: 'brown',
 76 |   //                                     parts: 1
 77 |   //                                   },
 78 |   //                                 ]
 79 |   //                           }
 80 |   //   };
 81 | 
 82 | 
 83 |   constructor(private auth: AuthService, private http: HttpClient) { }
 84 | 
 85 |   getHeaders() {
 86 |     const header = {
 87 |       headers: new HttpHeaders()
 88 |         .set('Authorization',  `Bearer ${this.auth.activeJWT()}`)
 89 |     };
 90 |     return header;
 91 |   }
 92 | 
 93 |   getDrinks() {
 94 |     if (this.auth.can('get:drinks-detail')) {
 95 |       this.http.get(this.url + '/drinks-detail', this.getHeaders())
 96 |       .subscribe((res: any) => {
 97 |         this.drinksToItems(res.drinks);
 98 |         console.log(res);
 99 |       });
100 |     } else {
101 |       this.http.get(this.url + '/drinks', this.getHeaders())
102 |       .subscribe((res: any) => {
103 |         this.drinksToItems(res.drinks);
104 |         console.log(res);
105 |       });
106 |     }
107 | 
108 |   }
109 | 
110 |   saveDrink(drink: Drink) {
111 |     if (drink.id >= 0) { // patch
112 |       this.http.patch(this.url + '/drinks/' + drink.id, drink, this.getHeaders())
113 |       .subscribe( (res: any) => {
114 |         if (res.success) {
115 |           this.drinksToItems(res.drinks);
116 |         }
117 |       });
118 |     } else { // insert
119 |       this.http.post(this.url + '/drinks', drink, this.getHeaders())
120 |       .subscribe( (res: any) => {
121 |         if (res.success) {
122 |           this.drinksToItems(res.drinks);
123 |         }
124 |       });
125 |     }
126 | 
127 |   }
128 | 
129 |   deleteDrink(drink: Drink) {
130 |     delete this.items[drink.id];
131 |     this.http.delete(this.url + '/drinks/' + drink.id, this.getHeaders())
132 |     .subscribe( (res: any) => {
133 | 
134 |     });
135 |   }
136 | 
137 |   drinksToItems( drinks: Array<Drink>) {
138 |     for (const drink of drinks) {
139 |       this.items[drink.id] = drink;
140 |     }
141 |   }
142 | }
143 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/assets/icon/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/udacity/FSND/eb54c2ef45d7fdfeb022dd7ca793e49967ce9aaa/projects/03_coffee_shop_full_stack/starter_code/frontend/src/assets/icon/favicon.png


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/assets/shapes.svg:
--------------------------------------------------------------------------------
1 | <svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>
2 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | /* @TODO replace with your variables
 2 |  * ensure all variables on this page match your project
 3 |  */
 4 | 
 5 | export const environment = {
 6 |   production: false,
 7 |   apiServerUrl: 'http://127.0.0.1:5000', // the running FLASK api server url
 8 |   auth0: {
 9 |     url: '', // the auth0 domain prefix
10 |     audience: '', // the audience set for the auth0 app
11 |     clientId: '', // the client id generated for the auth0 app
12 |     callbackURL: 'http://localhost:8100', // the base url of the running ionic application. 
13 |   }
14 | };
15 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/global.scss:
--------------------------------------------------------------------------------
 1 | // http://ionicframework.com/docs/theming/
 2 | @import '~@ionic/angular/css/core.css';
 3 | @import '~@ionic/angular/css/normalize.css';
 4 | @import '~@ionic/angular/css/structure.css';
 5 | @import '~@ionic/angular/css/typography.css';
 6 | @import '~@ionic/angular/css/display.css';
 7 | @import '~@ionic/angular/css/padding.css';
 8 | @import '~@ionic/angular/css/float-elements.css';
 9 | @import '~@ionic/angular/css/text-alignment.css';
10 | @import '~@ionic/angular/css/text-transformation.css';
11 | @import '~@ionic/angular/css/flex-utils.css';
12 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <title>Ionic App</title>
 7 | 
 8 |   <base href="/" />
 9 | 
10 |   <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
11 |   <meta name="format-detection" content="telephone=no" />
12 |   <meta name="msapplication-tap-highlight" content="no" />
13 | 
14 |   <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
15 | 
16 |   <!-- add to homescreen for ios -->
17 |   <meta name="apple-mobile-web-app-capable" content="yes" />
18 |   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
19 | </head>
20 | 
21 | <body>
22 |   <app-root></app-root>
23 | </body>
24 | 
25 | </html>
26 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../coverage'),
20 |       reports: ['html', 'lcovonly', 'text-summary'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false
30 |   });
31 | };
32 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.log(err));
13 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/guide/browser-support
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
23 | 
24 | /**
25 |  * Web Animations `@angular/platform-browser/animations`
26 |  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 |  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 |  */
29 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
30 | 
31 | /**
32 |  * By default, zone.js will patch all possible macroTask and DomEvents
33 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
34 |  * because those flags need to be set before `zone.js` being loaded, and webpack
35 |  * will put import in the top of bundle, so user need to create a separate file
36 |  * in this directory (for example: zone-flags.ts), and put the following flags
37 |  * into that file, and then add the following code before importing zone.js.
38 |  * import './zone-flags.ts';
39 |  *
40 |  * The flags allowed in zone-flags.ts are listed here.
41 |  *
42 |  * The following flags will work for all browsers.
43 |  *
44 |  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 |  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 |  * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 |  *
48 |  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 |  *  with the following flag, it will bypass `zone.js` patch for IE/Edge
50 |  *
51 |  *  (window as any).__Zone_enable_cross_context_check = true;
52 |  *
53 |  */
54 | 
55 | import './zone-flags.ts';
56 | 
57 | /***************************************************************************************************
58 |  * Zone JS is required by default for Angular itself.
59 |  */
60 | 
61 | import 'zone.js/dist/zone';  // Included with Angular CLI.
62 | 
63 | 
64 | /***************************************************************************************************
65 |  * APPLICATION IMPORTS
66 |  */
67 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/theme/variables.scss:
--------------------------------------------------------------------------------
 1 | // Ionic Variables and Theming. For more info, please see:
 2 | // http://ionicframework.com/docs/theming/
 3 | 
 4 | /** Ionic CSS Variables **/
 5 | :root {
 6 |   /** primary **/
 7 |   --ion-color-primary: #3880ff;
 8 |   --ion-color-primary-rgb: 56, 128, 255;
 9 |   --ion-color-primary-contrast: #ffffff;
10 |   --ion-color-primary-contrast-rgb: 255, 255, 255;
11 |   --ion-color-primary-shade: #3171e0;
12 |   --ion-color-primary-tint: #4c8dff;
13 | 
14 |   /** secondary **/
15 |   --ion-color-secondary: #0cd1e8;
16 |   --ion-color-secondary-rgb: 12, 209, 232;
17 |   --ion-color-secondary-contrast: #ffffff;
18 |   --ion-color-secondary-contrast-rgb: 255, 255, 255;
19 |   --ion-color-secondary-shade: #0bb8cc;
20 |   --ion-color-secondary-tint: #24d6ea;
21 | 
22 |   /** tertiary **/
23 |   --ion-color-tertiary: #7044ff;
24 |   --ion-color-tertiary-rgb: 112, 68, 255;
25 |   --ion-color-tertiary-contrast: #ffffff;
26 |   --ion-color-tertiary-contrast-rgb: 255, 255, 255;
27 |   --ion-color-tertiary-shade: #633ce0;
28 |   --ion-color-tertiary-tint: #7e57ff;
29 | 
30 |   /** success **/
31 |   --ion-color-success: #10dc60;
32 |   --ion-color-success-rgb: 16, 220, 96;
33 |   --ion-color-success-contrast: #ffffff;
34 |   --ion-color-success-contrast-rgb: 255, 255, 255;
35 |   --ion-color-success-shade: #0ec254;
36 |   --ion-color-success-tint: #28e070;
37 | 
38 |   /** warning **/
39 |   --ion-color-warning: #ffce00;
40 |   --ion-color-warning-rgb: 255, 206, 0;
41 |   --ion-color-warning-contrast: #ffffff;
42 |   --ion-color-warning-contrast-rgb: 255, 255, 255;
43 |   --ion-color-warning-shade: #e0b500;
44 |   --ion-color-warning-tint: #ffd31a;
45 | 
46 |   /** danger **/
47 |   --ion-color-danger: #f04141;
48 |   --ion-color-danger-rgb: 245, 61, 61;
49 |   --ion-color-danger-contrast: #ffffff;
50 |   --ion-color-danger-contrast-rgb: 255, 255, 255;
51 |   --ion-color-danger-shade: #d33939;
52 |   --ion-color-danger-tint: #f25454;
53 | 
54 |   /** dark **/
55 |   --ion-color-dark: #222428;
56 |   --ion-color-dark-rgb: 34, 34, 34;
57 |   --ion-color-dark-contrast: #ffffff;
58 |   --ion-color-dark-contrast-rgb: 255, 255, 255;
59 |   --ion-color-dark-shade: #1e2023;
60 |   --ion-color-dark-tint: #383a3e;
61 | 
62 |   /** medium **/
63 |   --ion-color-medium: #989aa2;
64 |   --ion-color-medium-rgb: 152, 154, 162;
65 |   --ion-color-medium-contrast: #ffffff;
66 |   --ion-color-medium-contrast-rgb: 255, 255, 255;
67 |   --ion-color-medium-shade: #86888f;
68 |   --ion-color-medium-tint: #a2a4ab;
69 | 
70 |   /** light **/
71 |   --ion-color-light: #f4f5f8;
72 |   --ion-color-light-rgb: 244, 244, 244;
73 |   --ion-color-light-contrast: #000000;
74 |   --ion-color-light-contrast-rgb: 0, 0, 0;
75 |   --ion-color-light-shade: #d7d8da;
76 |   --ion-color-light-tint: #f5f6f9;
77 | }
78 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "exclude": [
 8 |     "test.ts",
 9 |     "**/*.spec.ts"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "test.ts",
12 |     "zone-flags.ts",
13 |     "polyfills.ts"
14 |   ],
15 |   "include": [
16 |     "**/*.spec.ts",
17 |     "**/*.d.ts"
18 |   ]
19 | }
20 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tslint.json",
 3 |   "rules": {
 4 |     "directive-selector": [
 5 |       true,
 6 |       "attribute",
 7 |       "app",
 8 |       "camelCase"
 9 |     ],
10 |     "component-selector": [
11 |       true,
12 |       "element",
13 |       "app",
14 |       "page",
15 |       "kebab-case"
16 |     ]
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/src/zone-flags.ts:
--------------------------------------------------------------------------------
1 | /**
2 |  * Prevents Angular change detection from
3 |  * running with certain Web Component callbacks
4 |  */
5 | (window as any).__Zone_disable_customElements = true;
6 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "module": "es2015",
 9 |     "moduleResolution": "node",
10 |     "emitDecoratorMetadata": true,
11 |     "experimentalDecorators": true,
12 |     "importHelpers": true,
13 |     "target": "es5",
14 |     "typeRoots": [
15 |       "node_modules/@types"
16 |     ],
17 |     "lib": [
18 |       "es2018",
19 |       "dom"
20 |     ]
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/projects/03_coffee_shop_full_stack/starter_code/frontend/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "tslint:recommended",
 3 |   "rulesDirectory": [
 4 |     "codelyzer"
 5 |   ],
 6 |   "rules": {
 7 |     "array-type": false,
 8 |     "arrow-parens": false,
 9 |     "deprecation": {
10 |       "severity": "warn"
11 |     },
12 |     "import-blacklist": [
13 |       true,
14 |       "rxjs/Rx"
15 |     ],
16 |     "interface-name": false,
17 |     "max-classes-per-file": false,
18 |     "max-line-length": [
19 |       true,
20 |       140
21 |     ],
22 |     "member-access": false,
23 |     "member-ordering": [
24 |       true,
25 |       {
26 |         "order": [
27 |           "static-field",
28 |           "instance-field",
29 |           "static-method",
30 |           "instance-method"
31 |         ]
32 |       }
33 |     ],
34 |     "no-consecutive-blank-lines": false,
35 |     "no-console": [
36 |       true,
37 |       "debug",
38 |       "info",
39 |       "time",
40 |       "timeEnd",
41 |       "trace"
42 |     ],
43 |     "no-empty": false,
44 |     "no-inferrable-types": [
45 |       true,
46 |       "ignore-params"
47 |     ],
48 |     "no-non-null-assertion": true,
49 |     "no-redundant-jsdoc": true,
50 |     "no-switch-case-fall-through": true,
51 |     "no-use-before-declare": true,
52 |     "no-var-requires": false,
53 |     "object-literal-key-quotes": [
54 |       true,
55 |       "as-needed"
56 |     ],
57 |     "object-literal-sort-keys": false,
58 |     "ordered-imports": false,
59 |     "quotemark": [
60 |       true,
61 |       "single"
62 |     ],
63 |     "trailing-comma": false,
64 |     "no-output-on-prefix": true,
65 |     "use-input-property-decorator": true,
66 |     "use-output-property-decorator": true,
67 |     "use-host-property-decorator": true,
68 |     "no-input-rename": true,
69 |     "no-output-rename": true,
70 |     "use-life-cycle-interface": true,
71 |     "use-pipe-transform-interface": true,
72 |     "one-variable-per-declaration": false,
73 |     "component-class-suffix": [true, "Page", "Component"],
74 |     "directive-class-suffix": true
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/projects/capstone/heroku_sample/starter/Procfile:
--------------------------------------------------------------------------------
1 | web: gunicorn app:app


--------------------------------------------------------------------------------
/projects/capstone/heroku_sample/starter/app.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | from flask import Flask
 3 | from models import setup_db
 4 | from flask_cors import CORS
 5 | 
 6 | def create_app(test_config=None):
 7 | 
 8 |     app = Flask(__name__)
 9 |     setup_db(app)
10 |     CORS(app)
11 | 
12 |     @app.route('/')
13 |     def get_greeting():
14 |         excited = os.environ['EXCITED']
15 |         greeting = "Hello" 
16 |         if excited == 'true': 
17 |             greeting = greeting + "!!!!! You are doing great in this Udacity project."
18 |         return greeting
19 | 
20 |     @app.route('/coolkids')
21 |     def be_cool():
22 |         return "Be cool, man, be coooool! You're almost a FSND grad!"
23 | 
24 |     return app
25 | 
26 | app = create_app()
27 | 
28 | if __name__ == '__main__':
29 |     app.run()
30 | 


--------------------------------------------------------------------------------
/projects/capstone/heroku_sample/starter/manage.py:
--------------------------------------------------------------------------------
 1 | from flask_script import Manager
 2 | from flask_migrate import Migrate, MigrateCommand
 3 | 
 4 | from app import app
 5 | from models import db
 6 | 
 7 | migrate = Migrate(app, db)
 8 | manager = Manager(app)
 9 | 
10 | manager.add_command('db', MigrateCommand)
11 | 
12 | 
13 | if __name__ == '__main__':
14 |     manager.run()


--------------------------------------------------------------------------------
/projects/capstone/heroku_sample/starter/models.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | from sqlalchemy import Column, String, create_engine
 3 | from flask_sqlalchemy import SQLAlchemy
 4 | import json
 5 | 
 6 | database_path = os.environ['DATABASE_URL']
 7 | if database_path.startswith("postgres://"):
 8 |   database_path = database_path.replace("postgres://", "postgresql://", 1)
 9 | 
10 | db = SQLAlchemy()
11 | 
12 | '''
13 | setup_db(app)
14 |     binds a flask application and a SQLAlchemy service
15 | '''
16 | def setup_db(app, database_path=database_path):
17 |     app.config["SQLALCHEMY_DATABASE_URI"] = database_path
18 |     app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
19 |     db.app = app
20 |     db.init_app(app)
21 |     db.create_all()
22 | 
23 | 
24 | '''
25 | Person
26 | Have title and release year
27 | '''
28 | class Person(db.Model):  
29 |   __tablename__ = 'People'
30 | 
31 |   id = Column(db.Integer, primary_key=True)
32 |   name = Column(String)
33 |   catchphrase = Column(String)
34 | 
35 |   def __init__(self, name, catchphrase=""):
36 |     self.name = name
37 |     self.catchphrase = catchphrase
38 | 
39 |   def format(self):
40 |     return {
41 |       'id': self.id,
42 |       'name': self.name,
43 |       'catchphrase': self.catchphrase}
44 | 


--------------------------------------------------------------------------------
/projects/capstone/heroku_sample/starter/requirements.txt:
--------------------------------------------------------------------------------
 1 | alembic==1.6.5
 2 | click==8.0.1
 3 | Flask==1.1.2
 4 | Flask-Cors==3.0.10
 5 | Flask-Migrate==2.7.0
 6 | Flask-Script==2.0.6
 7 | Flask-SQLAlchemy==2.5.1
 8 | greenlet==1.1.0
 9 | gunicorn==20.1.0
10 | itsdangerous==2.0.1
11 | Jinja2==3.0.1
12 | Mako==1.1.4
13 | MarkupSafe==2.0.1
14 | psycopg2-binary==2.9.1
15 | python-dateutil==2.8.1
16 | python-editor==1.0.4
17 | six==1.16.0
18 | SQLAlchemy==1.4.18
19 | Werkzeug==2.0.1


--------------------------------------------------------------------------------
/projects/capstone/heroku_sample/starter/runtime.txt:
--------------------------------------------------------------------------------
1 | python-3.8.12


--------------------------------------------------------------------------------
/projects/capstone/heroku_sample/starter/setup.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | export DATABASE_URL="postgresql://postgres@localhost:5432/postgres"
3 | export EXCITED="true"
4 | echo "setup.sh script executed successfully!"


--------------------------------------------------------------------------------
/projects/capstone/starter/app.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | from flask import Flask, request, abort, jsonify
 3 | from flask_sqlalchemy import SQLAlchemy
 4 | from flask_cors import CORS
 5 | 
 6 | def create_app(test_config=None):
 7 |   # create and configure the app
 8 |   app = Flask(__name__)
 9 |   CORS(app)
10 | 
11 |   return app
12 | 
13 | APP = create_app()
14 | 
15 | if __name__ == '__main__':
16 |     APP.run(host='0.0.0.0', port=8080, debug=True)


--------------------------------------------------------------------------------
/projects/capstone/starter/models.py:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/projects/capstone/starter/setup.sh:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/projects/capstone/starter/test_app.py:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------