Add Lesson 1 exercises

lesson-1-refactoring-from-a-monolith/.gitignore

@@ -0,0 +1 @@
+__pycache__/

lesson-1-refactoring-from-a-monolith/udacredit-monolith-solution/.gitignore

@@ -0,0 +1,10 @@
+# Ignore React production build
+client/build
+
+# Ignore pycache
+api/__pycache__
+
+# Ignore auxillary files
+.idea
+.DS_Store
+roadmap.txt

lesson-1-refactoring-from-a-monolith/udacredit-monolith-solution/README.md

@@ -0,0 +1,22 @@
+# UdaCredit Union App
+
+## Overview
+This is a lightweight application built with ReactJS for the frontend and Flask for the backend API. It's built as a slimmed-down application intended to represent a simple monolith application. API responses are static so that we don't need to set up a database to keep the complexity low.
+
+## Instructions
+You should have Docker installed on your machine.
+```
+docker-compose up --build
+```
+The command should take a few minutes to run. This will create multiple Docker containers as specified in the `docker-compose.yml` file.
+
+For subsequent runs, you can run `docker-compose up` without the `--build` command.
+
+* The Flask application can be found at `http://localhost:5000`:
+    `http://localhost:5000/api/employees`
+
+    `http://localhost:5000/api/customers`
+
+* The UI can be found at `http://localhost:3000`
+
+The application can be killed by holding `CTRL+C` or cleanly shut down with `docker-compose down`.

lesson-1-refactoring-from-a-monolith/udacredit-monolith-solution/api/Dockerfile

@@ -0,0 +1,7 @@
+FROM python:3.7-slim
+RUN mkdir /backend
+WORKDIR /backend
+COPY requirements.txt /backend/requirements.txt
+RUN pip install --upgrade pip && \
+    pip install -r requirements.txt
+COPY . .

lesson-1-refactoring-from-a-monolith/udacredit-monolith-solution/api/app.py

@@ -0,0 +1,44 @@
+from flask import Flask, jsonify, make_response
+
+from .services.employees import get_employees
+from .services.notifications import send_notifications
+
+app = Flask(__name__)
+
+# Mozilla provides good references for Access Control at:
+# https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
+# https://developer.mozilla.org/en-US/docs/Web/HTTP/Server-Side_Access_Control
+
+
+@app.route('/api/employees', methods=['GET'])
+def employees():
+    """Return a JSON response for all employees."""
+    sample_response = {
+        "employees": get_employees()
+    }
+    # JSONify response
+    response = make_response(jsonify(sample_response))
+
+    # Add Access-Control-Allow-Origin header to allow cross-site request
+    response.headers['Access-Control-Allow-Origin'] = 'http://localhost:3000'
+
+    return response
+
+
+@app.route('/api/employees/notifications', methods=['POST'])
+def notifications():
+    # Notifications service can be used to remind employees to fill out their timecards
+    employee_emails = [employee.get('email') for employee in get_employees()]
+    send_notifications(employee_emails)
+
+    sample_response = {
+        "recipients": employee_emails
+    }
+
+    # JSONify response
+    response = make_response(jsonify(sample_response))
+
+    # Add Access-Control-Allow-Origin header to allow cross-site request
+    response.headers['Access-Control-Allow-Origin'] = 'http://localhost:3000'
+
+    return response

lesson-1-refactoring-from-a-monolith/udacredit-monolith-solution/api/requirements.txt

@@ -0,0 +1 @@
+Flask==1.1.2

lesson-1-refactoring-from-a-monolith/udacredit-monolith-solution/api/services/employees.py

@@ -0,0 +1,7 @@
+def get_employees():
+    return [
+        {"id": 1, "name": "Faye Solomon", "email": "fsolomon@udacredit.com"},
+        {"id": 2, "name": "Frank Chang", "email": "fchang@udacredit.com"},
+        {"id": 3, "name": "Cullen Ocean", "email": "cocean@udacredit.com"},
+        {"id": 4, "name": "Arvind Patel", "email": "apatel@udacredit.com"}
+    ]

lesson-1-refactoring-from-a-monolith/udacredit-monolith-solution/api/services/notifications.py

@@ -0,0 +1,3 @@
+def send_notifications(recipients):
+    # this method is stubbed -- we don't want to send anything!
+    return

lesson-1-refactoring-from-a-monolith/udacredit-monolith-solution/client/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

lesson-1-refactoring-from-a-monolith/udacredit-monolith-solution/client/Dockerfile

@@ -0,0 +1,5 @@
+FROM node:14.11.0-alpine
+RUN mkdir /frontend
+WORKDIR /frontend
+COPY package.json /frontend/package.json
+RUN npm install

lesson-1-refactoring-from-a-monolith/udacredit-monolith-solution/client/README.md

@@ -0,0 +1,8 @@
+## Setup 
+### `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+You will also see any lint errors in the console.

lesson-1-refactoring-from-a-monolith/udacredit-monolith-solution/client/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "client",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^3.4.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

lesson-1-refactoring-from-a-monolith/udacredit-monolith-solution/client/public/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

lesson-1-refactoring-from-a-monolith/udacredit-monolith-solution/client/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

lesson-1-refactoring-from-a-monolith/udacredit-monolith-solution/client/src/index.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css'
+
+class App extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            error: null,
+            customers: [],
+            employees: []
+        };
+    }
+
+    loadCustomers = () => {
+        fetch("http://localhost:5001/api/customers")
+            .then(res => res.json())
+            .then(
+                (result) => {
+                    this.setState({
+                        customers: result.customers,
+                    });
+                },
+                (error) => {
+                    this.setState({
+                        error,
+                    });
+                }
+            )
+    }
+
+    loadEmployees = () => {
+        fetch("http://localhost:5000/api/employees")
+            .then(res => res.json())
+            .then(
+                (result) => {
+                    this.setState({
+                        employees: result.employees,
+                    });
+                },
+                (error) => {
+                    this.setState({
+                        error,
+                    });
+                }
+            )
+    }
+
+    componentDidMount() {
+        this.loadCustomers();
+        this.loadEmployees();
+    }
+
+    render() {
+        const {error, customers, employees} = this.state;
+        if (error) {
+            return <div>Error: {error.message}</div>;
+        } else {
+            return (
+                <div>
+                    <h1>UdaCredit Union</h1>
+                    <h2>Customers</h2>
+                    <ul>
+                        {customers.map(customer => (
+                            <li key={customer.name}>
+                                {customer.name} - {customer.balance}
+                            </li>
+                        ))}
+                    </ul>
+                    <h2>Employees</h2>
+                    <ul>
+                        {employees.map(employee => (
+                            <li key={employee.name}>
+                                {employee.name} - {employee.email}
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            );
+        }
+    }
+}
+
+ReactDOM.render(
+    <App/>,
+    document.getElementById('root')
+);

lesson-1-refactoring-from-a-monolith/udacredit-monolith-solution/customers_api/Dockerfile

@@ -0,0 +1,7 @@
+FROM python:3.7-slim
+RUN mkdir /backend
+WORKDIR /backend
+COPY requirements.txt /backend/requirements.txt
+RUN pip install --upgrade pip && \
+    pip install -r requirements.txt
+COPY . .

lesson-1-refactoring-from-a-monolith/udacredit-monolith-solution/customers_api/app.py

@@ -0,0 +1,23 @@
+from flask import Flask, jsonify, make_response
+
+from .services.customers import get_customers
+
+app = Flask(__name__)
+
+# Mozilla provides good references for Access Control at:
+# https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
+# https://developer.mozilla.org/en-US/docs/Web/HTTP/Server-Side_Access_Control
+
+@app.route('/api/customers', methods=['GET'])
+def customers():
+    """Return a JSON response for all customers."""
+    sample_response = {
+        "customers": get_customers()
+    }
+    # JSONify response
+    response = make_response(jsonify(sample_response))
+
+    # Add Access-Control-Allow-Origin header to allow cross-site request
+    response.headers['Access-Control-Allow-Origin'] = 'http://localhost:3000'
+
+    return response

lesson-1-refactoring-from-a-monolith/udacredit-monolith-solution/customers_api/requirements.txt

@@ -0,0 +1 @@
+Flask==1.1.2

lesson-1-refactoring-from-a-monolith/udacredit-monolith-solution/customers_api/services/customers.py

@@ -0,0 +1,7 @@
+def get_customers():
+    return [
+        {"id": 1, "name": "John Smith", "balance": "$2000"},
+        {"id": 2, "name": "Ronald Alberts", "balance": "$500"},
+        {"id": 3, "name": "Raymond Sparks", "balance": "$250"},
+        {"id": 4, "name": "Amy Salvador", "balance": "$890"}
+    ]