/labs9-stock-trainer

Primary LanguageJavaScriptMIT LicenseMIT

Stock Trainer

Welcome to our application that teaches and guides you on trading stocks.

Team

Andrew McLaughlin Jun Kim Tylar Pierson
Github Github Github
LinkedIn LinkedIn LinkedIn

Table of Contents

Test the Site and Setup

Start by cloning the repository to your local machine. Once cloned cd into the folder and open it in your preferred editor of choice. The Front End of the app will be located on localhost:3000. The Back End of the app will be located on localhost:8000.

.env Requirements

A .env file must be included in the root folder, as well as the front-end folder.

The root .env (located in this level) should look similar to:

# blanks require your own key

SECRET_KEY =
DEBUG = True
ALLOWED_HOSTS=localhost,127.0.0.1
DATABASE_URL="sqlite:///db.sqlite3"
# Stripe API Keys
STRIPE_SECRET_KEY =
STRIPE_PUBLISHABLE_KEY =
# Stripe Test Keys
STRIPE_SECRET_TEST_KEY =
STRIPE_PUBLISHABLE_TEST_KEY =
# QUANDL API
QUANDL_API_KEY =
# AUTH0 KEYS
AUTH0_DOMAIN =
AUTH0_AUDIENCE =

The front-end .env (located in /stockTrainerFrontend) should look similar to:

# blanks require your own key

REACT_APP_BACKEND_URL=http://127.0.0.1:8000/
REACT_APP_URL=http://localhost:3000/

# Stripe Test Keys
REACT_APP_STRIPE_SECRET_TEST_KEY =
REACT_APP_STRIPE_PUBLISHABLE_TEST_KEY =

# Auth0
REACT_APP_AUTH0_DOMAIN =
REACT_APP_AUTH0_AUDIENCE =
REACT_APP_AUTH0_CLIENTID =

When deploying, make sure that env variables are set.

Auth0 Setup

Front-end .env The domain and client ID can be found in settings for your Auth0 application. The audience can be found in the APIs tab, where you should use the Auth0 Management API API identifier. This will usually be composed of an identifier that ends in /api/v2/.

Root .env The root .env should have the domain and audience set respectively, which should be the same as the domain and audience identified in the front-end. When running the application the first time, uncomment line 192 in stockTrainerBackEnd/settings.py and copy + paste the logged certification into lines 258-263 of stockTrainerApp/views.py. This was attempted to be stored in the .env multiple times, but as a multi-line variable, we were unable to do so.

Front End

Once you are in the project folder cd into stockTrainerFrontend and yarn install to install all of the dependencies in package.json. Once everything has install run yarn start to get the project up and running on localhost:3000.

Back End Prerequities

You will need Django installed for this project. Please see https://www.djangoproject.com/download/ for a guide to installing it on your system.

This project uses PEP8 as a style guide.

Back End

It's time to get the server running locally. Open a new terminal window and make sure you're in the root directory. We are using pipenv for our environment. Envoke the pipenv by typing: pipenv shell

To download all dependencies type: pipenv install

To be able to log into the admin interface type: python manage.py createsuperuser and follow the prompts.

To make the tables and DB type: python manage.py migrate

This should create a local instance of db.sqlite3 in the root directory.

To run the server locally on localhost:8000 type: python manage.py runserver append admin to the local browser to log in and see your DB.

Styling Guidelines

The JavaScript code follows Airbnb's Javascript Style Guide and is integrated via ESLint and Prettier.

The Python code follows Pep 8 Style Guide

Tech Stack

Front-End Dependencies Production

React

A JavaScript library that allows users to create user interfaces. React has a large community and is a highly scalable library for any modern web application. | View Dependency

React Router

A powerful collection of navigational components that allows developers to create single page applications by utilizing the components provided. | View Dependency

Axios

A library that helped us make XMLHttpRequests from our React application. It supports the Promise API, and so allows us to use the power of Promises. | View Dependency

Semantic UI

A styling library used to quickly build elegant layouts and components. | View Dependency

React-Stockcharts

A charting library that uses D3 to graph data points. Contains helper functions to help display indicators | View Dependency

Re-carousel

Minimal carousel component for React | View Dependency

Auth0

An OAuth (Open Authorization) platform to help users login using their accounts from third party websites. | View Dependency

React-stripe-elements

A stripe component that allows for easy integration with stripe. | View Dependency

React-autosuggest

A library that helps suggest different search terms for users | View Dependency

Front-End Dependencies Development

ESLint

Linting tool utilized to keep consistent styling throughout members of the team. | View Dependency

Prettier

An opinionated code formatter that formats code. Project integrated ESLint configurations to work with Prettier. | View Dependency

Back-End Dependencies Production

Django

An opinionated high-level Python Web framework that allows for super quick development of a web server. | View Dependency

Django Coverage

Tool to help test Django and Python code. | View Dependency

Python-decouple

Helps utilize environment variables throughout the Django application. | View Dependency

Djangorestframework

Powerful toolkit to assist building RESTful APIs. | View Dependency

Django-cors-headers

Django application that adds CORS headers to responses. | View Dependency

Whitenoise

Django application that allows the application to server its own static files. | View Dependency

Gunicorn

A Python WSGI HTTP Server used on Heroku. | View Dependency

Pyjwt

Library to help read and decode JWTs (JSON Web Tokens). | View Dependency

Python-jose

Library used alongside Pyjwt to help encrypt/sign JWTs. | View Dependency

Psycopg2-binary

PostgreSQL adapter for Python. | View Dependency

Dj-database-url

Allows Django apps to use Database URLs. | View Dependency

Cryptography

Used alongside Pyjwt and Jose to encrypt. | View Dependency

Stripe-Django

Used for easy integration with Stripe. | View Dependency

Back-End Dependencies Development

Pylint

Allows for consistent styling in code contributed by different team members.

Autopep8

See above

API Documentation

Third-Party APIs

Stripe

Payment toolkit that allows for secure payments for users. | View API

Implementation:

The front-end uses the Stripe element and components to get user info, and then the Stripe component creates a secure token that is sent to the back-end. The back-end receives this token, and sends a request to the Stripe server for payment. Depending on the result of the payment, user account status may be upgraded, or there may be further steps to complete payment.

IEX

API that allows for stock data retrieval. Data provided for free by IEX. View IEX's Term of Use

Implementation:

The front-end uses IEX's API in order to get real-time stock data. This populates the stock data in the dashboard. A get request is made to https://api.iextrading.com/1.0/stock/market/batch?symbols=${stockshere}&types=quote, which turns necessary information to populate the stock cards.

Quandl

The backend uses Quandl's API to get stock data in a certain date range.

Implementation

When a user queries for stock data in the reports page in the front-end, this sends a request to the back-end, which looks to see if the stock data is currently in the database. If not, the server requests information from Quandl, saves it to the database, and then returns it to the user

Auth0

Authentication made simple with Auth0!

Implementation

We are using the JWT flow in order to authenticate users in our back-end. When the user logs in with Auth0 in the front-end, we send a token to the back-end to identify the user and find the user within our database.