Code Monkey home page Code Monkey logo

andy-wu12 / paper-profit Goto Github PK

View Code? Open in Web Editor NEW
1.0 2.0 0.0 28.68 MB

Web application that allows you to test trades in the stock market without using any real money. Real-time market data is provided through TD Ameritrade's Websocket API. Note: The Yahoo APIs used are currently unavailable, so the application might be broken.

License: MIT License

JavaScript 0.38% CSS 3.87% TypeScript 95.74%
mongodb nextjs react real-time-data stock-data stock-trading tdameritrade-api websockets koa koa-router

paper-profit's Introduction

Stock Trading Simulator

Web application that allows you to simulate trades in the stock market without using any real money.

Demo

Sign Up:

SignUp.mov

Stock Search:

StockSearch.mov

Held Positions:

Positions.mov

Watchlist:

Watchlist.mov

Portfolio Reset:

Reset.mov

Dependencies:

  1. Next.js - npm install next
  2. React.js - npm install react
  3. react-dom - npm install react-dom

Run all these commands at once with npm install next react react-dom

To run this project locally you will need:

  1. MongoDB either through the cloud with Atlas or locally (preferably along with Compass)
  2. A TD Ameritrade developer account
    • After signing up, you need to get your User Principal Details manually (everyday). I plan to make this a process that can be done programmatically, but for now:
      • Enter streamerSubscriptionKeys,streamerConnectionInfo into the fields parameter
      • Click on the OAuth 2.0 Button and authenticate with your TD Ameritrade account.
      • Click Send, and copy the JSON from the Response section, making sure that streamerSubscriptionKeys is part of the response.
      • Paste this json in a file named userprincipal.json in the pages/api folder inside the client directory.
  3. A RapidAPI account
    1. Create an app by clicking My Apps then Add New App
    2. Enter a name of your choosing then click Save.
    3. Under the My Apps section, click on the name of your app.
    4. Click Security then the eye icon to reveal your Application key
    5. Copy that key into a .env file in the server folder, with the key name RAPID_API_YAHOO_KEY
    6. Subscribe to the YFINANCE API
  4. .env file for server
    1. FRONTEND_BASE_URL="http://localhost:3000" or whatever port your frontend is running on.
    2. RAPID_API_YAHOO_KEY=[insert your api key here]
  5. .env.local for client
    1. NEXT_PUBLIC_API_BASE_URL="http://localhost:3011" or whatever port your backend is running on.

Once everything is set up open two terminals, one each for both the client and server programs.

Run the server

Assuming you start at the root of the project:

  1. cd server
  2. npm install
  3. npm run start
  4. The server will be used to respond to various requests in the client-side
  5. You can see the various endpoints set up by accessing the index at http://localhost:3011

Run the client

In the other terminal instance,

  1. cd client
  2. npm install
  3. npm run dev OR npm run deploy for a production build.
  4. Open a browser and head to http://localhost:3000

paper-profit's People

Contributors

andy-wu12 avatar

Stargazers

 avatar

Watchers

 avatar  avatar

paper-profit's Issues

List of discovered bugs

  • Stock buy / sell re-rendering along with quote data. (Ex: Changing buy / sell quantity resets to default of 1 as a result of re-render)
  • Watchlist triggers undefined error on realtimeData update (Remember: Only updated data fields are sent)
  • Showing last search after either being on holdings or watchlist improperly shows updated data for stocks that weren't formally searched

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.