Skip to content

User Manual

Jump to bottom
lorance19 edited this page Mar 8, 2021 · 12 revisions

Installation Instructions

To install the application on your local machine, please complete the following steps:

  1. If you haven't already, install Node.js using the instructions on this page and make sure that you are using version 12.19.0.

  2. Install and run PostgreSQL using the instructions here.

  3. We get our stock data from finnhub.io , so follow that link and make a free account. Get your API KEY, and save it for step 7.

  4. When steps 1, 2 and 3 are completed, head over to the main page of this repository and clone it.

  5. Inside the project repository, run the following command to install the required modules: npm run install:all

  6. Make sure your PostgreSQL app is running, and then specify the connection string in the #environment variable PG_CONNSTR by executing the following command:

    export PG_CONNSTR="postgresql://username:password@localhost:5432/db_name"

    Also make sure to set your username, password, and db_name accordingly.

  7. Add your API KEY from step 3, by running the following command:

    export FINNHUB_API_KEY="YOUR_API_KEY_HERE"

  8. Start both the client and server in development mode. See the root directory package.json for more details. npm start

  9. Navigate to localhost:3000 by to see the frontend! Backend is hosted in the default port 8080.

User Guide

  1. Our application's landing page is the Market page, where most of the action happens 💁. This is what it should look like:

Landing Page

As evident from the picture above, a new user does not have permission to create a watchlist and/or view their portfolio. They also cannot begin trading stocks without creating an account. At the very minimum, the user can still search up stocks and view the corresponding charts.

  1. A new user should navigate to the Sign Up Page via the navigation bar. The result should look like this:

The user should fill out the necessary fields, and be able to register an account successfully.

  1. Once the registration is completed, the user will be redirected back to the Market Page, but this time with all permissions enabled.

  1. To help users with onboarding, we decided to include an inbuilt tutorial as part of our application, which, when launched, will give users a guided tour of the application’s main features. The picture above shows the starting point of the tutorial (captured by the beacon). The tutorial gets launched automatically for new users, and for registered users it can be relaunched by clicking on the ‘?’ button in the navigation bar.

  1. In the search bar at the top of the page, the user can search for stocks by ticker or company name, and find the corresponding graphical data in the chart section below.

  2. Once the user has chosen a stock, they can move to the chart section, and analyze data for the given stock. If they like, they may watchlist the stock by clicking on the star icon, and the watchlisted stock should then appear in their watchlist at the bottom of the page.

  1. By now the user should know how to search for a stock, and add it to their watchlist. The next step is to learn how to trade. All users start out with $75,000 in paper money that they can use to buy or sell stocks. To trade a stock, the user must use the 'Buy and Sell' widget shown below.

To execute the order, the user must 1) press either the Buy or Sell button, 2) enter the amount they wish to buy or sell in the provided input field, and then finally 3) click on the 'buy/sell unit...' button. As long as the user had enough "money" in their account and the trade occurred during open market hours, the order should be filled successfully. After the stock is traded, the user can go down to the Portfolio tab on the same page, and see their newest addition or updated item in the portfolio.

  1. For more insights on their portfolio and trading history, the user can move to the Profile page from the navigation bar. The user's profile page will have the user's entire portfolio and trading history on their account, along with some graphs showcasing their portfolio distribution and portfolio growth over time.

  2. With help of the “Watchlist” tab, the user will be able to know the current price of favorite stocks and their current market price. Beside the “Watchlist” tab, there is a “Portfolio” tab where users can see the stocks they owned and the total value of each shares. Move to the Profile page for more insights on your portfolio and trading history.

  3. In the Profile Page, the portfolio will be shown with trading history. Also with the Portfolio Growth chart, users can see the trading performance and they can use this chart to improve their future strategies. Moreover, there is also a line chart for users to see the total values they earn from the stocks from each period.

  4. In “Your Trading History” tab on Stonks, it shows the user all the purchase they made. To make it convenient, the user can sort each column as he desires.

Clone this wiki locally