diff --git a/client/main.css b/client/main.css
index 0afca36..98aa02f 100644
--- a/client/main.css
+++ b/client/main.css
@@ -24,6 +24,65 @@ body {
.js-plotly-plot {
width: 100%;
}
+.footer-bg {
+ min-height: 120px;
+ width: 100%;
+ background-color: #EBEBEB;
+}
+
+.btn-primary {
+ border-color: #F64C72 !important;
+ background-color: #F64C72 !important;
+}
+
+.btn-danger {
+ border-color: #553D67 !important;
+ background-color: #553D67 !important;
+}
+
+.hoverable-text {
+ text-decoration: underline dashed rgb(63, 154, 223);
+ text-decoration-thickness: 2px;
+ -webkit-text-decoration: underline dashed rgb(63, 154, 223);
+ -webkit-text-decoration-thickness: 2px;
+}
+
+.tooltip {
+ max-width: 300px;
+}
+
+.floating-pink-card {
+ border-width: 3px !important;
+ border-color: black !important;
+ padding: 1em;
+ border-radius: 10px !important;
+ z-index: 4 !important;
+ position: relative;
+ min-height: 260px;
+ margin-top: 20px;
+}
+
+.pink-bg::before {
+ content: '.';
+ display: block;
+ position: absolute;
+ background-color: #F64C72;
+ color: #F64C72;
+ height: 90%;
+ width: 90%;
+ margin: -1.5em;
+ margin-top: 2.4em;
+ border-radius: 10px;
+ z-index: 1;
+}
+
+.wavy-bg {
+ padding-top: 2em;
+ min-height: 700px;
+ background-image: url("/wavylines.svg");
+ background-size: cover;
+ background-position-y: center;
+}
@media only screen and (max-width: 780px) {
.hide-mobile {
diff --git a/client/routes.jsx b/client/routes.jsx
index 6ff16bb..9753095 100644
--- a/client/routes.jsx
+++ b/client/routes.jsx
@@ -11,7 +11,9 @@ import { Dashboard } from '../imports/ui/Dashboard';
import { Logout } from '../imports/ui/Logout';
import { Error } from '../imports/ui/Error';
import { UEFANavbar } from '../imports/ui/Navbar';
-import { Course } from '../imports/ui/Course';
+import { Footer } from '../imports/ui/Footer';
+import { Courses } from '../imports/ui/Courses';
+import { Experiments } from '../imports/ui/Experiments';
import { Profile } from '../imports/ui/Profile';
const browserHistory = createBrowserHistory({ forceRefresh: true });
@@ -24,11 +26,13 @@ const UntrackedRoutes = () => (
- } />
+ } />
+ } />
+
);
diff --git a/data_service/index.py b/data_service/index.py
index faf3fd4..fac6eb5 100644
--- a/data_service/index.py
+++ b/data_service/index.py
@@ -46,27 +46,18 @@ quandl.ApiConfig.api_key = 'uyxvXKZ3zKytArHDVdwR'
ticker_to_company = {'HD': 'Home Depot','DIS': 'Disney','MSFT': 'Microsoft','BA': 'Boeing','MMM': '3M','PFE': 'Pfizer','NKE': 'Nike','JNJ': 'Johnson & Johnson','MCD': 'McDonalds','INTC': 'Intel','XOM': 'Exxon Mobil','GS': 'Goldman Sachs','JPM': 'JP Morgan','AXP': 'American Express','V': 'Visa','IBM': 'IBM','UNH': 'United Health','PG': 'Proctor & Gamble','GE': 'General Electric','KO': 'Coca-Cola','CSCO': 'Cisco Systems','CVX': 'Chevron','CAT': 'Caterpillar','MRK': 'Merck','WMT': 'Walmart','VZ': 'Verizon','UTX': 'Raytheon','TRV': 'Travelers' ,'AAPL': 'Apple'}
-@app.route('/stock-history/', methods=['GET'])
-def get_history():
- return request_stock(request.args)
+all_prices = pd.DataFrame()
-@app.route('/stock-tickers/', methods=['GET'])
-def get_tickers():
- return jsonify({'HD': 'Home Depot','DIS': 'Disney','MSFT': 'Microsoft','BA': 'Boeing','MMM': '3M','PFE': 'Pfizer','NKE': 'Nike','JNJ': 'Johnson & Johnson','MCD': 'McDonalds','INTC': 'Intel','XOM': 'Exxon Mobil','GS': 'Goldman Sachs','JPM': 'JP Morgan','AXP': 'American Express','V': 'Visa','IBM': 'IBM','UNH': 'United Health','PG': 'Proctor & Gamble','GE': 'General Electric','KO': 'Coca-Cola','CSCO': 'Cisco Systems','CVX': 'Chevron','CAT': 'Caterpillar','MRK': 'Merck','WMT': 'Walmart','VZ': 'Verizon','UTX': 'Raytheon','TRV': 'Travelers' ,'AAPL': 'Apple'})
+for ticker in ticker_to_company:
+ close_prices = quandl.get("EOD/{}".format(ticker))["Close"]
+ close_prices.name = ticker
+ all_prices[ticker] = close_prices
-@app.route('/bonds/', methods=['GET'])
-def get_bonds():
- df = quandl.get_table('CHORD7/BD', date='2013-05-01', qopts={'columns':['date', 'ask_price']})
- print(df.index)
-
- return df.to_json()
+print("Prices loaded")
-@app.route('/returns/', methods=['GET'])
-def get_return():
- input = request.args
- prices = str(quandl.get("EOD/" + input['stock'], start_date=input['start'], end_date=input['start'])['Close'][0])
- # end_price = str(quandl.get("EOD/" + input['stock'], start_date=input['end'], end_date=input['end'])['Close'][0])
- return
+@app.route('/stock-history/', methods=['GET'])
+def get_history():
+ return request_stock(request.args)
# Load the file once when the server gets started
wti_prices = pd.read_csv("data_service/wti_prices.csv")
@@ -76,7 +67,7 @@ def get_wti_prices():
return wti_prices.to_json()
# Load the file once when the server gets started
-etf_prices = pd.read_csv("data_service/etf_prices.csv"))
+etf_prices = pd.read_csv("data_service/etf_prices.csv")
@app.route('/etf_prices/', methods=['GET'])
def get_etf_prices():
@@ -88,19 +79,11 @@ def request_stock(input):
else:
return 'error: must provide stock ticker'
- df = quandl.get("EOD/" + stock)
-
- if 'start' in input:
- start = input['start']
- else:
- start = str(df.index[0])[:10]
-
- if 'end' in input:
- end = input['end']
- else:
- end = str(df.index[-1])[:10]
+ return all_prices[[stock]].to_json()
- return quandl.get("EOD/" + stock, start_date=start, end_date=end)["Close"].to_json()
+@app.route("/all-prices/", methods=["GET"])
+def get_all_prices():
+ return all_prices.to_json()
if __name__ == "__main__":
app.run(debug=False, port=5000)
\ No newline at end of file
diff --git a/imports/api/returns.js b/imports/api/returns.js
index f044021..606c17d 100644
--- a/imports/api/returns.js
+++ b/imports/api/returns.js
@@ -1,6 +1,7 @@
import PortfolioAnalytics from 'portfolio-analytics';
import math from 'mathjs';
import moment from 'moment';
+import Correlation from 'node-correlation';
const calc_pct_returns = value => {
return value.slice(1, value.length).map((v1, i) => 100 * (v1 / value.slice(0, value.length - 1)[i] - 1))
@@ -30,6 +31,47 @@ const sharpe = (value, begDate, endDate) => {
return (get_yr_return(value, begDate, endDate) - 1.5) / get_yr_sd(value, begDate, endDate)
}
+const calc_corrs = (stocks) => {
+ const names = stocks.map(stock => stock.ticker);
+ var corr_matrix = []
+
+ stocks.forEach(stock_left => {
+ returns_left = calc_pct_returns(Object.values(stock_left.prices))
+ var row = []
+ stocks.forEach(stock_right => {
+ returns_right = calc_pct_returns(Object.values(stock_right.prices))
+
+ corr = Correlation.calc(returns_left.slice(returns_left.length - 60, returns_left.length), returns_right.slice(returns_right.length - 60, returns_right.length))
+ row.push(corr)
+ })
+
+ corr_matrix.push(row)
+ })
+
+ return corr_matrix
+}
+
+
+const recommend_stocks = (value, allPrices, usedTickers) => {
+ portfolio_returns = calc_pct_returns(value)
+
+ corrs = Object.keys(allPrices).filter(t => !usedTickers.includes(t)).map(ticker => {
+ prices = allPrices[ticker]
+
+ stock_returns = calc_pct_returns(Object.values(prices))
+
+ return [ticker, Math.abs(Correlation.calc(
+ portfolio_returns.slice(portfolio_returns.length - 60, portfolio_returns.length),
+ stock_returns.slice(stock_returns.length - 60, stock_returns.length)
+ ))]
+ })
+
+ tickers = corrs.sort((a, b) => a[1] - b[1]).slice(0, 3).map(i => i[0])
+
+ return "" + tickers[0] + ", " + tickers[1] + ", or " + tickers[2]
+}
+
+
export {
- get_return, get_sd, get_yr_return, get_yr_sd, sharpe
+ get_return, get_sd, get_yr_return, get_yr_sd, sharpe, calc_corrs, recommend_stocks
}
\ No newline at end of file
diff --git a/imports/courses/benefitsOfDiversification.mdx b/imports/courses/benefitsOfDiversification.mdx
new file mode 100644
index 0000000..b7e635f
--- /dev/null
+++ b/imports/courses/benefitsOfDiversification.mdx
@@ -0,0 +1,32 @@
+import { PortfolioManager } from '../ui/PortfolioManager';
+
+# Diversificaton
+**Types of Risk**
+
+Investors confront two main types of risk when investing. The first is **undiversifiable**, which is also known as systematic or market risk. This type of risk is **associated with every company**. Common causes include inflation rates, exchange rates, political instability, war, and interest rates. This type of risk is not specific to a particular company or industry, and it cannot be eliminated or reduced through diversification—it is just a risk investors must accept.
+
+The second type of risk is **diversifiable**. This risk is also known as unsystematic risk and is **specific to a company, industry, market, economy, or country**. It can be reduced through diversification. The most common sources of unsystematic risk are business risk and financial risk. Thus, the aim is to invest in various assets so they will not all be affected the same way by market events.
+
+---
+
+**Diversification**
+
+Diversification is a technique that **reduces risk by allocating investments among various financial instruments**, industries, and other categories. It aims to maximize returns by investing in different areas that would each react differently to the same event.
+
+Most investment professionals agree that, although it does not guarantee against loss, diversification is the most important component of reaching long-range financial goals while minimizing risk.
+
+Let's say you have a portfolio of only airline stocks. If it is announced that airline pilots are going on an indefinite strike and that all flights are canceled, share prices of airline stocks will drop. That means your portfolio will experience a noticeable drop in value.
+
+If, however, you **counterbalanced** the airline industry stocks with a couple of railway stocks, only part of your portfolio would be affected. In fact, there is a good chance the railway stock prices would climb, as passengers turn to trains as an alternative form of transportation.
+
+But, you could diversify even further because there are many risks that affect both rail and air because each is involved in transportation. An event that reduces any form of travel hurts both types of companies. Statisticians, for example, would say that rail and air stocks have a strong correlation.
+
+Therefore, you would want to diversify across the board, not only **different types of companies** but also different types of industries. **The more uncorrelated your stocks are, the better**.
+
+It's also important to diversify among different asset classes. Different assets such as bonds and stocks will not react in the same way to adverse events. A **combination of asset classes** will reduce your portfolio's sensitivity to market swings. Generally, bond and equity markets move in opposite directions, so if your portfolio is diversified across both areas, unpleasant movements in one will be offset by positive results in another.
+
+And finally, don't forget **location, location, location**. Diversification also means you should look for investment opportunities beyond your own geographical borders. After all, volatility in the United States may not affect stocks and bonds in Europe, so investing in that part of the world may minimize and offset the risks of investing at home.
+
+Try the tool below - you can add stocks and change how much you invest in each! Your goal should be to minimize your Sharpe ratio (in other words, maximize your return and minimize your volatility).
+
+
\ No newline at end of file
diff --git a/imports/courses/correlation.mdx b/imports/courses/correlation.mdx
new file mode 100644
index 0000000..f849547
--- /dev/null
+++ b/imports/courses/correlation.mdx
@@ -0,0 +1,11 @@
+import { PortfolioManager } from '../ui/PortfolioManager';
+
+## Correlation
+
+Correlation shows the **strength of a relationship between two variables** and is expressed numerically by the correlation coefficient. The correlation coefficient's values range **between -1.0 and 1.0**. A perfect positive correlation means that the correlation coefficient is exactly 1. This implies that as one security moves, either up or down, the other security moves in lockstep, in the same direction. A perfect negative correlation means that two assets move in opposite directions, while a zero correlation implies no linear relationship at all.
+
+For example, large-cap mutual funds generally have a high positive correlation to the Standard and Poor's (S&P) 500 Index or nearly one. Small-cap stocks have a positive correlation to the S&P, but it's not as high or approximately 0.8.
+
+When you're creating your portfolio, you generally want to **pick stocks that have low correlation with each other**. This way, if one of your assets goes down in price, they don't all follow!
+
+
\ No newline at end of file
diff --git a/imports/courses/courseThree.mdx b/imports/courses/courseThree.mdx
deleted file mode 100644
index c7e8d1f..0000000
--- a/imports/courses/courseThree.mdx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { PortfolioManager } from '../ui/PortfolioManager';
-
-# Portfolio Construction
-Portfolio construction is an extremely important aspect of investing. Understanding what proportion of your money to put in different asset classes, and how to distribute it within asset classes, is crucial to money preservation and growth.an
-
----
-
-## Types of Risk
-Investors confront two main types of risk when investing. The first is undiversifiable, which is also known as systematic or market risk. This type of risk is associated with every company. Common causes include inflation rates, exchange rates, political instability, war, and interest rates. This type of risk is not specific to a particular company or industry, and it cannot be eliminated or reduced through diversification—it is just a risk investors must accept.
-
-The second type of risk is diversifiable. This risk is also known as unsystematic risk and is specific to a company, industry, market, economy, or country. It can be reduced through diversification. The most common sources of unsystematic risk are business risk and financial risk. Thus, the aim is to invest in various assets so they will not all be affected the same way by market events.
-
----
-
-## Diversification
-Diversification is a technique that reduces risk by allocating investments among various financial instruments, industries, and other categories. It aims to maximize returns by investing in different areas that would each react differently to the same event.
-
-Most investment professionals agree that, although it does not guarantee against loss, diversification is the most important component of reaching long-range financial goals while minimizing risk.
-
-Let's say you have a portfolio of only airline stocks. If it is announced that airline pilots are going on an indefinite strike and that all flights are canceled, share prices of airline stocks will drop. That means your portfolio will experience a noticeable drop in value.
-
-If, however, you counterbalanced the airline industry stocks with a couple of railway stocks, only part of your portfolio would be affected. In fact, there is a good chance the railway stock prices would climb, as passengers turn to trains as an alternative form of transportation.
-
-But, you could diversify even further because there are many risks that affect both rail and air because each is involved in transportation. An event that reduces any form of travel hurts both types of companies. Statisticians, for example, would say that rail and air stocks have a strong correlation.
-
-Therefore, you would want to diversify across the board, not only different types of companies but also different types of industries. The more uncorrelated your stocks are, the better.
-
-It's also important to diversify among different asset classes. Different assets such as bonds and stocks will not react in the same way to adverse events. A combination of asset classes will reduce your portfolio's sensitivity to market swings. Generally, bond and equity markets move in opposite directions, so if your portfolio is diversified across both areas, unpleasant movements in one will be offset by positive results in another.
-
-And finally, don't forget location, location, location. Diversification also means you should look for investment opportunities beyond your own geographical borders. After all, volatility in the United States may not affect stocks and bonds in Europe, so investing in that part of the world may minimize and offset the risks of investing at home.
-
----
-
-## Diversification within Equities
-Below is a tool to help you construct portfolios. It lets you try out different scenarios on how you allocate your money with various measures of risk and return!
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/imports/courses/courseTwo.mdx b/imports/courses/courseTwo.mdx
deleted file mode 100644
index 0616dbf..0000000
--- a/imports/courses/courseTwo.mdx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { InterestGraph } from '../ui/InterestGraph';
-
-# Introduction to Saving
-
-**What is the premise of a savings account?**
-
-A bank will hold onto your money for some time. They are allowed to use your money to make more money for the amount of time that it
-is in the bank. The bank is confident enough in their ability to do this, so they other you a reward in the form of interest. A bank
-will give you more money that you put in. So, it's a win-win situation. You make a small percentage of interest off the cash you have
-saved, and the bank gets to use your money to leverage more money while it's in there.
-
-___
-
-**Pre-tax versus Post-tax Savings Account**
-
-With any form of income, you have to pay taxes to the government. Some accounts will allow you to divert money from your paycheck
-before it gets taxed into a savings account. On the contrary, some accounts will only take income that has already been taxed.
-However, when you want to cash in on this savings account, the Pre-tax account *still needs to be taxed*. The post-tax account doesn't.
-A good example is the Traditional IRA versus the Roth IRA. IRA simply stands for Induvidual Retirement Account. A Traditional IRA is pre-tax
-and a Roth IRA is post-tax. With interest, over time, you would rather pay tax on the smaller intial amount versus the larger amount
-that includes interest.
-
-___
-
-**Interest: Simple versus Compound**
-
-Imagine you have $1000 in the bank with 10% interest per year. Using the formula *($ amount) x (% interest) / 100 *, one year later you will have $100 in interest.
-With simple interest, to the amount earned from interest is only based on the initial deposit. That means every year you will gain $100. With compound interest,
-you add the interest back into the acccount and determine next year's interest off of that number. So year two you'll make 10% of $1100 dollars. This slight
-difference makes a huge difference over time.
-
-
-
-If you're familiar with your math terms, simple interest (with no additional payments) models as a linear curve and the compound
-
-
-
diff --git a/imports/courses/courseOne.mdx b/imports/courses/introToInvesting.mdx
similarity index 78%
rename from imports/courses/courseOne.mdx
rename to imports/courses/introToInvesting.mdx
index c22b262..5c6fbaa 100644
--- a/imports/courses/courseOne.mdx
+++ b/imports/courses/introToInvesting.mdx
@@ -1,18 +1,17 @@
-import { RiskGraph } from '../ui/RiskGraph';
-import { StockGraph } from '../ui/StockGraph';
-import { FixedIncome } from '../ui/FixedIncome';
-import { OilPrices } from '../ui/OilPrices';
-import { Meteor } from 'meteor/meteor';
+import { RiskGraph } from '../ui/graphs/RiskGraph';
+import { StockGraph } from '../ui/graphs/StockGraph';
+import { FixedIncome } from '../ui/graphs/FixedIncome';
+import { OilPrices } from '../ui/graphs/OilPrices';
+import UserName from '../ui/components/UserName';
+import Dictionary from '../ui/components/Dictionary';
# Introduction to Investing
-Over the next few courses, we're hoping to answer a few questions for you:
+Hi ! Over the next few courses, we're hoping to answer a few questions for you:
- *What do I do with my money?*
-- *What can I invest in?*
+- *What can I in?*
- *How do I decide where to invest?*
-Of course, {Meteor.user().profile.name}
-
---
## Asset classes
@@ -28,7 +27,7 @@ There are a ton of asset classes, and we'll cover a few of the most common ones:
- Foreign currencies
- Cash
-What are the differences between each? Which one is right for you? It depends on your **risk tolerance**! Each asset class is different, and thus has a different expected return and level of risk.
+What are the differences between each? Which one is right for you? It depends on your ****! Each asset class is different, and thus has a different expected return and level of risk.
@@ -37,7 +36,7 @@ What are the differences between each? Which one is right for you? It depends on
### Equities
Equities represent partial ownership of a company. The value of that ownership changes over time with the value of the company!
-They're extremely volatile in the short term but tend to outperform other asset classes over long periods. When you buy a stock of a company, you're investing in their equity.
+They're extremely in the short term but tend to outperform other asset classes over long periods. When you buy a stock of a company, you're investing in their equity.
Here's a chart that shows the price of different equities over time! Select a ticker with the text box below and click **Add ticker** to see the prices. You can add more than one, and you can click on a ticker to remove it.
diff --git a/imports/courses/introToSaving.mdx b/imports/courses/introToSaving.mdx
new file mode 100644
index 0000000..c9d06d9
--- /dev/null
+++ b/imports/courses/introToSaving.mdx
@@ -0,0 +1,42 @@
+import { SimpleVsCompoundGraph } from '../ui/InterestGraph';
+import { CompoundGraphx2 } from '../ui/InterestGraph';
+
+# Introduction to Saving
+
+**What is the premise of a savings account?**
+
+A bank will hold onto your money for some time. They are allowed to use your money to make more money for the amount of time that it
+is in the bank. The bank is confident enough in their ability to do this, so they other you a reward in the form of interest. A bank
+will give you more money that you put in. So, it's a win-win situation. You make a small percentage of interest off the cash you have
+saved, and the bank gets to use your money to leverage more money while it's in there.
+
+___
+
+**Interest: Simple versus Compound**
+
+Imagine you have $5000 in the bank with 10% interest per year. Using the formula *($ amount) x (% interest) / 100 *, one year later you will have $100 in interest.
+With simple interest, to the amount earned from interest is only based on the initial deposit. That means every year you will gain $100. With compound interest,
+you add the interest back into the acccount and determine next year's interest off of that number. So year two you'll make 10% of $1100 dollars. This slight
+difference actually makes a huge difference over time.
+
+
+
+___
+
+**Importance of Saving Early**
+
+If you're familiar with your math terms, simple interest (with no additional payments) models as a linear curve and the compound models as an exponential.
+However with any savings account, you shouldn't make one inital deposit and let it sit, but rather contribute small amounts over time. Even better, you
+setup a budget and allocate money every month to your savings. A good rule of thumb is that 20% of your income after tax should go towards saving and paying off debts.
+
+For example; if you make $50,000 per year after tax, following the rule of thumb this $20,000 per year. Let's say that $10,000 is going into your retirement account per year.
+For this type of account, a 7% interest rate is reasonable. Let's also assume that you found **merx** so you were savvy enough to start investing at 25. If you retire at 65,
+that gives us ***40 years*** of compound interest. Let's also setup a second senario where you don't start investing until you're 30 and still withdraw at 65.
+Here's what that looks like
+
+
+
+**Holy cow 3 million dollars!!**
+
+And those 5 years of delay that saved you $50,000 in the short term, ended up costing you $1,000,000 from your retirement. Now there are a lot of assumptions made but the
+numbers used are attainable. The takeaway here should be that you *need* to start saving early. One of the most valuable things you can leverage is time.
diff --git a/imports/courses/portfolioConstruction.mdx b/imports/courses/portfolioConstruction.mdx
new file mode 100644
index 0000000..1801bb1
--- /dev/null
+++ b/imports/courses/portfolioConstruction.mdx
@@ -0,0 +1,19 @@
+import { PortfolioManager } from '../ui/PortfolioManager';
+
+# Portfolio Construction
+**What is portfolio construction?**
+
+Portfolio construction is an extremely important aspect of investing. Understanding what proportion of your money to put in different asset classes, and how to distribute it within asset classes, is crucial to money preservation and growth.
+
+
+**Diversification within Equities**
+
+Try to create a low-risk, high-return portfolio using everything you've learned!
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/imports/experiments/portfolio.mdx b/imports/experiments/portfolio.mdx
new file mode 100644
index 0000000..41a38a8
--- /dev/null
+++ b/imports/experiments/portfolio.mdx
@@ -0,0 +1,7 @@
+import { PortfolioManager } from '../ui/PortfolioManager';
+
+# Portfolio Playground
+
+Try to create a low-risk, high-return portfolio using everything you've learned!
+
+
\ No newline at end of file
diff --git a/imports/ui/Courses.jsx b/imports/ui/Courses.jsx
new file mode 100644
index 0000000..46b5563
--- /dev/null
+++ b/imports/ui/Courses.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import IntroToInvesting from '../courses/introToInvesting.mdx';
+import IntroToSaving from '../courses/introToSaving.mdx';
+import BenefitsOfDiversification from '../courses/benefitsOfDiversification.mdx';
+import Correlation from '../courses/correlation.mdx';
+import PortfolioConstruction from '../courses/portfolioConstruction.mdx'
+
+import { Link } from 'react-router-dom';
+import { Container, Button } from 'react-bootstrap';
+import { Meteor } from 'meteor/meteor';
+
+const courseComponents = {
+ 1: ,
+ 2: ,
+ 3: ,
+ 6: ,
+ 7:
+}
+
+export const Courses = ({ match: { params: { courseID }}}) => {
+ const user = Meteor.user();
+ let courseStatus = user ? user.profile.courseStatus : null;
+ return (
+
+
+
+
+ Back to Dashboard
+
+
+ {courseComponents[courseID]}
+ {user &&
+
}
+
+
+ );
+}
diff --git a/imports/ui/Dashboard.jsx b/imports/ui/Dashboard.jsx
index 031b63d..451e306 100644
--- a/imports/ui/Dashboard.jsx
+++ b/imports/ui/Dashboard.jsx
@@ -1,97 +1,93 @@
import React, { useState } from 'react';
-import { Container, Card, Button, Jumbotron } from 'react-bootstrap';
-import { Course } from './Course';
+import { Container, Card, Button, Jumbotron, Badge, Row, Col, ProgressBar } from 'react-bootstrap';
+import { Courses } from './Courses';
import { Link } from 'react-router-dom';
+import { sections, catalog, tracks } from './data/catalog';
-const intro = [
- {
- key: 1,
- title: "Introduction to Investing",
- description: "A quick introduction to the world of investing.",
- status: "Open"
- },
- {
- key: 4,
- title: "What's Interest?",
- description: "An introduction to the fundamentals of making money work for you.",
- status: "Coming Soon"
- },
- {
- key: 6,
- title: "Making Debt Pay You",
- description: "Introduction to the math behind leverage and how rich people stay rich.",
- status: "Coming Soon"
- }
-]
-
-const personal_finance = [
- {
- key: 2,
- title: "Introduction to Saving",
- description: "An introduction to why saving money and starting early is important.",
- status: "Open"
- }
-]
-
-const stocks = [
- {
- key: 3,
- title: "Portfolio Construction",
- description: "How to construct optimal portfolios.",
- status: "Open"
- }
-]
-
-const re = [
- {
- key: 5,
- title: "Introduction to Mortgages",
- description: "How to use mortgages to your advantage.",
- status: "Open"
- }
-]
-
-const CourseCard = ({ course }) => (
-
-
- {course.title}
- {course.description}
-
-
-
-
-
-);
+const CourseCard = ({ course }) => {
+ const user = Meteor.user();
+ const courseStatus = (user) ? user.profile.courseStatus : {};
+ return (
+
+
+ {course.title}
+ {course.difficulty}{' '}
+
+ {courseStatus[course.key] || "incomplete"}
+
+
+ {course.description}
+
+
+
+
+
+ );
+}
export const Dashboard = (props) => {
+ const user = Meteor.user();
+ const username = (user) ? user.profile.name : '';
+ const courseStatus = (user) ? user.profile.courseStatus : {};
+ const track = user ? tracks[user.profile.reason] : 0;
+ // console.log(user ? Object.values(user.profile.courseStatus).filter(s => s === 'completed').length / catalog.length : 0)
+
return (
Learning Dashboard
Access all your courses here.
+ {user &&
+
Your Course Progress
+ s === 'completed').length * 100 / catalog.length)} />
+
);
}
diff --git a/imports/ui/GetStarted.jsx b/imports/ui/GetStarted.jsx
index 3950ee8..f4d4914 100644
--- a/imports/ui/GetStarted.jsx
+++ b/imports/ui/GetStarted.jsx
@@ -1,40 +1,13 @@
import { Meteor } from 'meteor/meteor';
import React, { useState } from 'react';
-import { Form, Button, Modal, Container, Card } from 'react-bootstrap';
+import { Form, Button, Modal, Container, Card, Alert } from 'react-bootstrap';
import { Accounts } from 'meteor/accounts-base';
import { Redirect } from 'react-router-dom';
-
-export const reasons = [
- [
- 1,
- "Literacy",
- "Get an educational foundation in finance, investing, and understanding how to make your money work for you.",
- "Choose this option if you're stable financially and just looking to learn more about how to optimize your existing investments or want to know how to utilize some level of savings."
- ],
- [
- 2,
- "Stability",
- "Create financial stability so in times of economic downturn you have a backup plan.",
- "Choose this option if you lack savings or don't know how to afford bills and your living expenses if you didn't have a job."
- ],
- [
- 3,
- "Retirement",
- "Ensure you are targeting to retire with enough money to last you for the rest of your life.",
- "Choose this option if you have enough savings for if the market went into a downturn or you lost a job, but want to set yourself up well to retire."
- ],
- [
- 4,
- "Wealth",
- "Grow your wealth to give you more options to do what you want with your life.",
- "Choose this option if you have disposable savings that you want to put to work."
- ]
-]
+import { reasons } from './data/reasons';
export const CardDisplay = ({ title, body, reason, selected, setSelected }) => {
-
return (
- {
setSelected();
@@ -54,24 +27,29 @@ class GetStarted extends React.Component {
super(props);
this.email = React.createRef();
this.password = React.createRef();
+ this.name = React.createRef();
+
this.state = {
dialog: false,
selected: null,
- redirect: false
+ redirect: false,
+ error: null
}
}
handleSubmit(event) {
event.preventDefault();
-
+
const email = this.email.current.value;
const password = this.password.current.value;
+ const name = this.name.current.value;
console.log("FORM SUBMITTED", email, password);
- Meteor.call("createCustomUser", email, password, this.state.selected, (err, user) => {
+ Meteor.call("createCustomUser", email, password, this.state.selected, name, (err) => {
if (err) {
console.error(err);
+ this.setState({ error: err });
} else {
Meteor.loginWithPassword(email, password, err => {
if (err) console.error(err)
@@ -85,41 +63,50 @@ class GetStarted extends React.Component {
if (this.state.redirect) return
return (
-
-