finish implementation

.gitignore

@@ -0,0 +1,3 @@
+.env
+/node_modules
+mock-data.json

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "files.associations": {
+        "**/src/**/*.js": "javascriptreact"
+    }
+}

README.md

@@ -1,2 +1,36 @@
-# project_fideligard_spa
-Buy low, sell high.
+# Project Fideligard
+
+[![Project Fideligard](http://i.imgur.com/N1OweUa.png)](https://pure-dawn-86561.herokuapp.com/)
+
+## Introduction
+Project Fideligard is a historical stock portfolio simulator. It leverages Quandl's stock API to provide End-of-Day stock prices.
+
+## Technologies Used
+Express is used in the back-end to provide a customized API for the client. The front-end is built entirely in React/Redux and uses react-router to provide navigation between different sections of the application. Please view the "Additional Notes" section at the end of this readme for some information regarding the implementation.
+
+## Getting Started
+For setting up a local version of the project, first clone the repository to your local machine. Then, install the dependencies using `yarn` or `npm install`. You will need to obtain a (free) Quandl API key from [their website.](https://www.quandl.com/) Then, set up an environment variable (preferably by creating a .env file inside the root directory) and setting your API key in the following manner:
+
+```
+QUANDL_API_KEY=YOUR_SECRET_KEY_HERE
+```
+
+If you would like to change the minimum date for stock data, simply change the appropriate static variables located in the `DatePicker.js` component. You will need to manually calculate the Unix timestamp for your chosen date.
+
+Finally, simply run `yarn start`/`npm start` to get the application running.
+
+## Deployment Link
+A deployed version of this project may be found [here.](https://pure-dawn-86561.herokuapp.com/)
+
+## Additional Notes
+Of interest is the helpers.js file in the root directory, which is used to help the back-end manually construct the API from the data provided by Quandl.
+
+Quandl's API returns data in a largely unhelpful format (a giant array of individual stock prices sorted alphabetically and by date). I created several helpful iterators to sort through the data. Since End-of-Day prices are not available for weekends, I also created some helpful functions to deal with these cases. If a user provides a weekend as a date, the API automatically converts this by looking backwards to find the most recent weekday date. 
+
+To deal with parsing these dates, I used the js-joda library. Although Moment.js is frequently used for date parsing within the Node.js world, Moment.js provides a thin wrapper around JavaScript's built-in mutable Date library. js-joda is a a fast and immutable library which proved to be a very pleasant alternative to the common options. 
+
+This helpers.js file uses js-joda extensively to parse all the dates. In addition to ensuring that the user provided date is not a weekend, it also ensures that the 1 day/7 day/30 day lookback dates are also not weekends.
+
+On the front end, some significant details to note are the date-picker component. Built from the ground up, you can edit the date manually by simply clicking on the date itself. Clicking away automatically cancels the input using the `onBlur` event listener. 
+
+The project uses cookies to persist the state of your portfolio. The trade form will automatically reject trades when the user does not have enough balance/stock to make a transaction. There are many sortable fields in the different tables. Sorting/searching results can be saved for the transactions table using url query strings. 

client/.gitignore

@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# 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*

client/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "client",
+  "version": "0.1.0",
+  "private": true,
+  "license": "ISC",
+  "proxy": "http://localhost:3001/",
+  "dependencies": {
+    "bootswatch": "^3.3.7",
+    "react": "^15.6.1",
+    "react-bootstrap": "^0.31.0",
+    "react-dom": "^15.6.1",
+    "react-redux": "^5.0.5",
+    "react-router-bootstrap": "^0.24.2",
+    "react-router-dom": "^4.1.1",
+    "react-tap-event-plugin": "^2.0.1",
+    "redux": "^3.7.1",
+    "redux-thunk": "^2.2.0"
+  },
+  "devDependencies": {
+    "react-scripts": "1.0.10"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}

client/public/index.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <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 added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+
+    <!--
+      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>Fideligard</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>

client/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

client/src/App.test.js

@@ -0,0 +1,8 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<App />, div);
+});

client/src/actions.js

@@ -0,0 +1,158 @@
+export const SET_DATE = "SET_DATE";
+export const SET_FILTER = "SET_FILTER";
+export const RESET_FILTER = "RESET_FILTER";
+export const ADD_STOCK_TO_LIST = "ADD_STOCK_TO_LIST";
+export const GET_STOCKS_SUCCESS = "GET_STOCKS_SUCCESS";
+export const GET_STOCKS_REQUEST = "GET_STOCKS_REQUEST";
+export const GET_STOCKS_FAILURE = "GET_STOCKS_FAILURE";
+export const GET_SPECIFIC_STOCK_SUCCESS = "GET_SPECIFIC_STOCK_SUCCESS";
+export const GET_SPECIFIC_STOCK_REQUEST = "GET_SPECIFIC_STOCK_REQUEST";
+export const GET_SPECIFIC_STOCK_FAILURE = "GET_SPECIFIC_STOCK_FAILURE";
+export const SET_SORT_ASCENDING = "SET_SORT_ASCENDING";
+export const SET_SORT_DESCENDING = "SET_SORT_DESCENDING";
+export const ADD_TRANSACTION = "ADD_TRANSACTION";
+export const UPDATE_BALANCE = "UPDATE_BALANCE";
+export const UPDATE_PORTFOLIO = "UPDATE_PORTFOLIO";
+
+export function getStocksRequest() {
+  return {
+    type: GET_STOCKS_REQUEST
+  };
+}
+
+export function getStocksSuccess(data) {
+  return {
+    type: GET_STOCKS_SUCCESS,
+    data
+  };
+}
+
+export function getStocksFailure(error) {
+  return {
+    type: GET_STOCKS_FAILURE,
+    error
+  };
+}
+
+export function getSpecificStockRequest() {
+  return {
+    type: GET_SPECIFIC_STOCK_REQUEST
+  };
+}
+
+export function getSpecificStockSuccess(data) {
+  return {
+    type: GET_SPECIFIC_STOCK_SUCCESS,
+    data
+  };
+}
+
+export function getSpecificStockFailure(error) {
+  return {
+    type: GET_SPECIFIC_STOCK_FAILURE,
+    error
+  };
+}
+
+export function setDate(data) {
+  return {
+    type: SET_DATE,
+    data
+  };
+}
+
+export function setFilter(data = "") {
+  return {
+    type: SET_FILTER,
+    data: data.toUpperCase()
+  };
+}
+
+export function resetFilter(data) {
+  return {
+    type: RESET_FILTER
+  };
+}
+
+export function addStockToList(data) {
+  return {
+    type: ADD_STOCK_TO_LIST,
+    data
+  };
+}
+
+export function setSortAscending() {
+  return {
+    type: SET_SORT_ASCENDING
+  };
+}
+
+export function setSortDescending() {
+  return {
+    type: SET_SORT_DESCENDING
+  };
+}
+
+export function addTransaction(data) {
+  return {
+    type: ADD_TRANSACTION,
+    data
+  };
+}
+
+export function updateBalance(data) {
+  return {
+    type: UPDATE_BALANCE,
+    data
+  };
+}
+
+export function updatePortfolio(data) {
+  return {
+    type: UPDATE_PORTFOLIO,
+    data
+  };
+}
+
+// @param {array} stocks
+export function getStocks(stocks, date) {
+  return dispatch => {
+    dispatch(getStocksRequest());
+
+    fetch(`api/stocks?symbols=${stocks.toString()}&date=${date}`)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`${response.status}: ${response.statusText}`);
+        }
+
+        return response.json();
+      })
+      .then(json => {
+        dispatch(getStocksSuccess(json.data));
+      })
+      .catch(error => {
+        dispatch(getStocksFailure(error));
+      });
+  };
+}
+
+export function getSpecificStock(stock, date) {
+  return dispatch => {
+    dispatch(getSpecificStockRequest());
+
+    fetch(`api/stocks?symbols=${stock.toString()}&date=${date}`)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`${response.status}: ${response.statusText}`);
+        }
+
+        return response.json();
+      })
+      .then(json => {
+        dispatch(getSpecificStockSuccess(json.data[stock]));
+      })
+      .catch(error => {
+        dispatch(getSpecificStockFailure(error));
+      });
+  };
+}

client/src/components/App.js

@@ -0,0 +1,43 @@
+import React, { Component } from "react";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import { Grid, Row, Col } from "react-bootstrap";
+import ScrollToTop from "./ScrollToTop";
+import Navigation from "./Navigation";
+import StockDataContainer from "../containers/StockDataContainer";
+import DatePickerContainer from "../containers/DatePickerContainer";
+import TradesContainer from "../containers/TradesContainer";
+import TransactionsContainer from "../containers/TransactionsContainer";
+import PortfolioContainer from "../containers/PortfolioContainer";
+import Failure from "./Failure";
+import Success from "./Success";
+
+class App extends Component {
+  render() {
+    return (
+      <Router>
+        <ScrollToTop>
+          <Navigation title={"Fideligard"} />
+          <Grid fluid>
+            <Row>
+              <h1>Fideligard</h1>
+              <Col md={5} mdOffset={1} xs={12}>
+                <DatePickerContainer />
+                <StockDataContainer />
+              </Col>
+              <Switch>
+                <Route path="/trades" component={TradesContainer} />
+                <Route path="/transactions" component={TransactionsContainer} />
+                <Route path="/portfolio" component={PortfolioContainer} />
+                <Route path="/failure" component={Failure} />
+                <Route path="/success" component={Success} />
+                <Route exact path="/" component={PortfolioContainer} />
+              </Switch>
+            </Row>
+          </Grid>
+        </ScrollToTop>
+      </Router>
+    );
+  }
+}
+
+export default App;