phase4round1

Phase-4-Round-1/.gitignore

@@ -0,0 +1,18 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+

Phase-4-Round-1/README.md

@@ -0,0 +1,53 @@
+# Bank of Flatiron
+
+Welcome to the Bank of Flatiron, where you can trust us with all your financial data! Use the below gif as an example of how the app should function.
+
+![demo](./demo.gif)
+
+## Instructions
+
+For this project, you’ll be building out a React application that displays a list of your recent bank transactions, among other features.
+
+Part of what this code challenge is testing is your ability to follow given instructions. While you will definitely have a significant amount of freedom in how you implement the features, be sure to carefully read the directions for setting up the application.
+
+## Setup
+
+After cloning down the project:
+
+1. Run `npm install` in your terminal
+2. Run `npm start`: This will open both your React page on port `6002` and your backend on port `6001`.
+3. The app uses [Semantic UI](https://semantic-ui.com/) for styling. If you see any unfamiliar classNames on some components, don't sweat! That's coming from Semantic UI and you shouldn't need to touch it.
+4. If you are unfamiliar with HTML tables, take a look at the [docs with an example here](https://www.w3schools.com/html/html_tables.asp)
+
+## Endpoints
+
+The base URL for your backend is: `http://localhost:6001`
+
+These are the endpoints you might need:
+
+- GET: `/transactions`
+- POST: `/transactions`
+- DELETE: `/transactions/:id`
+
+## Core Deliverables
+
+As a user, I should be able to:
+
+- See a table of the transactions.
+- Fill out and submit the form to add a new transaction. This should add the new transaction to the table **as well as post the new transaction to the backend API for persistence**.
+- Filter transactions by typing into the search bar. Only transactions with a description matching the search term should be shown in the transactions table.
+
+## Advanced Deliverables
+
+These deliverables are not required to pass the code challenge, but if you have the extra time, or even after the code challenge, they are a great way to stretch your skills.
+
+> Note: If you are going to attempt these advanced deliverables, please be sure to have a working commit with all the Core Deliverables first!
+
+As a user, I should be able to:
+
+- Sort transactions alphabetically by category or description.
+- Delete a transaction which will remove it from the table and delete it from the backend.
+
+## Rubric
+
+You can find the rubric for this assessment [here](https://github.com/learn-co-curriculum/se-rubrics/blob/master/module-4.md).

Phase-4-Round-1/db.json

@@ -0,0 +1,88 @@
+{
+  "transactions": [
+    {
+      "id": 1,
+      "date": "2019-12-01",
+      "description": "Paycheck from Bob's Burgers",
+      "category": "Income",
+      "amount": 1000
+    },
+    {
+      "id": 2,
+      "date": "2019-12-01",
+      "description": "South by Southwest Quinoa Bowl at Fresh & Co",
+      "category": "Food",
+      "amount": -10.55
+    },
+    {
+      "id": 3,
+      "date": "2019-12-02",
+      "description": "South by Southwest Quinoa Bowl at Fresh & Co",
+      "category": "Food",
+      "amount": -10.55
+    },
+    {
+      "id": 4,
+      "date": "2019-12-04",
+      "description": "Sunglasses, Urban Outfitters",
+      "category": "Fashion",
+      "amount": -24.99
+    },
+    {
+      "id": 5,
+      "date": "2019-12-06",
+      "description": "Venmo, Alice Pays you for Burrito",
+      "category": "Food",
+      "amount": 8.75
+    },
+    {
+      "id": 6,
+      "date": "2019-12-06",
+      "description": "Chipotle",
+      "category": "Food",
+      "amount": -17.59
+    },
+    {
+      "id": 7,
+      "date": "2019-12-07",
+      "description": "Birthday Check from Grandma",
+      "category": "Gift",
+      "amount": 50
+    },
+    {
+      "id": 8,
+      "date": "2019-12-09",
+      "description": "Lyft Ride",
+      "category": "Transportation",
+      "amount": -13.25
+    },
+    {
+      "id": 9,
+      "date": "2019-12-11",
+      "description": "Paycheck from Bob's Burgers",
+      "category": "Income",
+      "amount": 1000
+    },
+    {
+      "id": 10,
+      "date": "2019-12-16",
+      "description": "Tickets, Flatiron Multiplex Cinemas",
+      "category": "Entertainment",
+      "amount": -24
+    },
+    {
+      "id": 11,
+      "date": "2019-12-16",
+      "description": "MTA Vending Machine: MetroCard",
+      "category": "Transportation",
+      "amount": -116.39
+    },
+    {
+      "id": 12,
+      "date": "2019-12-17",
+      "description": "Venmo, Pay Roommate for Rent",
+      "category": "Housing",
+      "amount": -975
+    }
+  ]
+}

Phase-4-Round-1/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "immersive-assessment-react-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
+    "semantic-ui-css": "^2.2.10",
+    "react-scripts": "3.2.0"
+  },
+  "scripts": {
+    "start": "json-server --watch db.json -p 6001 & open http://localhost:6001/transactions & PORT=6002 react-scripts start && fg",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

Phase-4-Round-1/public/index.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag 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>
+    <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`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>

Phase-4-Round-1/src/components/AccountContainer.js

@@ -0,0 +1,18 @@
+import React, { Component } from "react";
+import TransactionsList from "./TransactionsList";
+import Search from "./Search";
+import AddTransactionForm from "./AddTransactionForm";
+
+class AccountContainer extends Component {
+  render() {
+    return (
+      <div>
+        <Search />
+        <AddTransactionForm />
+        <TransactionsList />
+      </div>
+    );
+  }
+}
+
+export default AccountContainer;

Phase-4-Round-1/src/components/AddTransactionForm.js

@@ -0,0 +1,28 @@
+import React, { Component } from "react";
+
+class AddTransactionForm extends Component {
+  render() {
+    return (
+      <div className="ui segment">
+        <form className="ui form">
+          <div className="inline fields">
+            <input type="date" name="date" />
+            <input type="text" name="description" placeholder="Description" />
+            <input type="text" name="category" placeholder="Category" />
+            <input
+              type="number"
+              name="amount"
+              placeholder="Amount"
+              step="0.01"
+            />
+          </div>
+          <button className="ui button" type="submit">
+            Add Transaction
+          </button>
+        </form>
+      </div>
+    );
+  }
+}
+
+export default AddTransactionForm;

Phase-4-Round-1/src/components/App.js

@@ -0,0 +1,18 @@
+import React, { Component } from "react";
+import AccountContainer from "./AccountContainer";
+import "../stylesheets/App.css";
+
+class App extends Component {
+  render() {
+    return (
+      <div className="ui raised segment">
+        <div className="ui segment violet inverted">
+          <h2>The Royal Bank of Flatiron</h2>
+        </div>
+        <AccountContainer />
+      </div>
+    );
+  }
+}
+
+export default App;

Phase-4-Round-1/src/components/Search.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+const Search = () => {
+  return (
+    <div className="ui large fluid icon input">
+      <input
+        type="text"
+        placeholder={"Search your Recent Transactions"}
+        onChange={() => {
+          console.log("Searching...");
+        }}
+      />
+      <i className="circular search link icon"></i>
+    </div>
+  );
+};
+
+export default Search;

Phase-4-Round-1/src/components/Transaction.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+const Transaction = () => {
+  return (
+    <tr>
+      <td>{"your code here..."}</td>
+      <td>{"your code here..."}</td>
+      <td>{"your code here..."}</td>
+      <td>{"your code here..."}</td>
+    </tr>
+  );
+};
+
+export default Transaction;

Phase-4-Round-1/src/components/TransactionsList.js

@@ -0,0 +1,28 @@
+import React from "react";
+import Transaction from "./Transaction";
+
+const TransactionsList = () => {
+  return (
+    <table className="ui celled striped padded table">
+      <tbody>
+        <tr>
+          <th>
+            <h3 className="ui center aligned header">Date</h3>
+          </th>
+          <th>
+            <h3 className="ui center aligned header">Description</h3>
+          </th>
+          <th>
+            <h3 className="ui center aligned header">Category</h3>
+          </th>
+          <th>
+            <h3 className="ui center aligned header">Amount</h3>
+          </th>
+        </tr>
+        {/* render Transactions here */}
+      </tbody>
+    </table>
+  );
+};
+
+export default TransactionsList;

Phase-4-Round-1/src/index.js

@@ -0,0 +1,6 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./components/App";
+import "semantic-ui-css/semantic.min.css";
+
+ReactDOM.render(<App />, document.getElementById("root"));

Phase-4-Round-1/src/stylesheets/App.css

@@ -0,0 +1,27 @@
+* {
+  box-sizing: border-box;
+  text-align: center;
+}
+
+input {
+  width: 25% !important;
+  margin-right: 0.25em!important;
+  margin-left: 0.25em!important;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+
+.App {
+  text-align: center;
+}
+
+
+.App-header {
+  background-color: #222;
+  padding: 20px;
+  color: white;
+}