Code Monkey home page Code Monkey logo

how-to-stock's Introduction

How to Stock

Django CI CodeQL

stock graphs

This web service serves as an introduction to the stock market for users new to finance. Users can learn about various financial terms, simulate trading stocks using a virtual balance, and view stock predictions based on probability and statistical data.

Models

4 models are used: User, Stock, Portfolio, and Card. The database was designed to satisfy the three normal forms. The following diagrams summarize each model (using Chen Notation):

User

user model diagram

The User model extends Django's AbstractUser model for authenticating users. The default user model contains fields like username, email, and password (hashed). An additional field—balance—was added to save the user's balance when they log in.

Stock

stock model diagram

The Stock model contains information about each stock. The ticker uniquely identifies each stock. The price and change fields are updated whenever the user views their portfolio.

Portfolio

portfolio model diagram

The Portfolio model contains the number of shares the user owns of each stock. In addition, it contains two foreign keys referencing the user and stock model. Those models combined form the following diagram:

combined model diagram

Portfolio exibits a many-to-one relationship with User and a one-to-many relationship with Stock. This way, one user can own multiple stocks, and multiple users can own the same stock. If the user removes their account, their portfolio goes with them. But if they sell all of a stock, the stock information remains in the Stock object for future trades.

Card

card model diagram

The Card model contains the word and definition for every financial term used throughout the app. Besides displaying them as flashcards, some words are used in other views and their definition can be displayed through a popover.

Views

The app is split up into 4 sections:

  • Screener: This is where users can filter stocks by country, price, sector, and exchange.

  • Flashcards: Users can view a list of financial terms used throughout the app.

  • Portfolio: Users can view a list of stocks they've invested in. They start off with $10,000 and can view how their net worth changes each day.

  • Details: This page shows stock information about a company as well as a detailed analysis of the stock price for short and long-term investments. This is also where users can trade stocks.

The app also features an authentication system so users can save their portfolio and balance whenever they're logged in. Logging in is required for the Portfolio and Details view. Using session cookies, the users' sessions can last up to 2 weeks.

Dependencies

The front-end is created in HTML, CSS, & JS and the back-end is created in Django and utilizes an SQLite database. Bootstrap was used to enhance the site's design and implement UI elements such as alerts and popovers. Chart.js was used to visualize the stock trends on the details page. And Financial Modeling Prep was the API used to implement the screener functionality and obtain detailed profiles and stock history from all the companies. Above everything else, this web app is designed to be responsive, accessible, and thoroughly tested.

How to Run

Fly.io

This project is hosted live at Fly.io and can be accessed directly at https://how-to-stock-3.fly.dev. No installation required.

Manual

Before cloning this repo, you will need to obtain an API key from Financial Modeling Prep. Then do the following:

  1. Create a virtual environment, install all dependencies, save the API key, and run the Django server: ./start-local.sh YOUR_API_KEY or source start-local.sh YOUR_API_KEY (See step 3 for the differences.) On future visits, the API key doesn't need to be provided.
  2. Open localhost:8000 in your browser.
  3. When done, press CTRL/CMD-C to stop the Django server. If you used ./start-local.sh, you will return to your current shell. But if you used source start-local.sh, you will need to deactivate the virtual environment: deactivate

Docker

Make sure Docker and Docker Compose are installed. And make sure to obtain an API key from Financial Modeling Prep. Then do the following:

  1. Pass in the API key and start up a container for this app: ./start-docker.sh YOUR_API_KEY. On future visits, the container can be spun up directly using ./start-docker.sh or docker compose up -d.
  2. Once everything's installed, open localhost:8000 in your browser.
  3. When done, shut down and clean up the container: docker compose down

Troubleshooting

GitHub Actions

When making a request to FMP for the first time in GitHub Actions, the requests may fail with the following response:

<html>
  <head>
    <title>403 Forbidden</title>
  </head>
  <body bgcolor="white">
    <center><h1>403 Forbidden</h1></center>
    <hr />
    <center>nginx/1.14.0 (Ubuntu)</center>
  </body>
</html>

This error goes away after re-running the jobs.

Fly.io

If the Postgres database is down, run the following commands to restart the machine:

fly machines list -a how-to-stock-3-db
fly machines start MACHINE_ID -a how-to-stock-3-db

If the remote builder fails:

WARN Failed to start remote builder heartbeat: server returned a non-200 status code: 500

Error: failed to fetch an image or build from source: error connecting to docker: server returned a non-200 status code: 500

Destroy the builder app and redeploy:

fly apps destroy APP_NAME
fly deploy

how-to-stock's People

Contributors

abhiek187 avatar dependabot[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

how-to-stock's Issues

Stock History Charts Aren't Showing

image

The stock history charts aren't showing on the stock details pages. These APIs are returning a 400 error. The reason is because the FMP API for historical prices is returning an empty array. But it looks like there's a new API we should call. Previously, the technical_indicator API returned the following:

GET https://financialmodelingprep.com/api/v3/technical_indicator/daily/{{ticker}}?apikey={{apiKey}}
Sample Response: [
    {
        "date": "2022-12-05",
        "open": 107.1,
        "high": 107.1,
        "low": 104.01,
        "close": 104.74,
        "volume": 1278214,
        "sma": 100.197800004
    },
    {
        "date": "2022-12-02",
        "open": 106.7,
        "high": 107.85,
        "low": 106.63,
        "close": 107.68,
        "volume": 974567,
        "sma": 99.87660001
    },
...

The historical-price-full API returns something similar and could serve as a replacement:

GET https://financialmodelingprep.com/api/v3/historical-price-full/{{ticker}}?apikey={{apiKey}}
{
    "symbol": "META",
    "historical": [
        {
            "date": "2023-03-17",
            "open": 200.56,
            "high": 201.9,
            "low": 195.4304,
            "close": 195.61,
            "adjClose": 195.610001,
            "volume": 50141098,
            "unadjustedVolume": 50074800,
            "change": -4.95,
            "changePercent": -2.47,
            "vwap": 197.75,
            "label": "March 17, 23",
            "changeOverTime": -0.0247
        },
        {
            "date": "2023-03-16",
            "open": 198.26,
            "high": 205.76,
            "low": 196.0886,
            "close": 204.93,
            "adjClose": 204.929993,
            "volume": 50819659,
            "unadjustedVolume": 50447100,
            "change": 6.67,
            "changePercent": 3.36,
            "vwap": 200.57,
            "label": "March 16, 23",
            "changeOverTime": 0.0336
        },
...

However, we need to reference the historical property to get the stock history (which I believe was how the syntax was originally).

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.