DEV Community

Cover image for StockMarket Sample App
emacliam
emacliam

Posted on

4 1

StockMarket Sample App

Overview of My Submission

Stockmarket Charts

It is a web application that is used to view stock market trading charts using candlesticks and area charts.It was built using deriv api.It uses Mongo to store data.Chart data is fetched from deriv using websockets and the data is send to mongoDB.The Web application will listen for the data using change streams and mongo Realm.The data that is received from change streams is presented on a Chart. The backend was build with Nodejs and the frontend with Nuxt.js.The user interface was built using tailwindCss and primeVue.

Basic Functionality:

  1. Login to the system(mongo realm login).
  2. You will see a dashboard with cards and a chart section
  3. You can switch between area chart and candlestick chart
  4. The charts will show ohlc data(open,high,low,close)

Why this?:

We want to provide a way for traders to view trading charts.This is just a start, we want to create a more robust platform which will make it easier for traders to make market analytics and trade different markets.

Where we used mongo.

  • Storage of candlestick data
  • Fetching realtime data from the database
  • Mongo Realm

Submission Category:

About Real-time

Overview video (Optional)

Link to Code


Languages Used:

Vue.js PrimeVue Node.js html Tailwindcss Nuxt.js

Screen screenshots

CandleStick Chart

Image description

Area Chart

Image description

How it works

Models:

const CandlesSchema = new mongoose.Schema({
  raw: {
    type: Object,
  },
  open: {
    type: String,
    default: 0,
  },
  close: {
    type: String,
    default: 0,
  },
  high: {
    type: String,
    default: 0,
  },
  low: {
    type: String,
    default: 0,
  },
});
Enter fullscreen mode Exit fullscreen mode

How the data is stored:

const tickResponse = (res) => {
    const candle = new CandlesModel({
      raw:JSON.parse(res.data).ohlc,
      high:JSON.parse(res.data).ohlc?.high,
      low:JSON.parse(res.data).ohlc?.low,
      open:JSON.parse(res.data).ohlc?.open,
      close:JSON.parse(res.data).ohlc?.close
    })
    candle.save()
};
Enter fullscreen mode Exit fullscreen mode

How data is retrieved in realtime

async watchCollection(){

      const collection = realmApp.currentUser
      .mongoClient("mongodb-atlas")
      .db("test")
      .collection("candles")

    for await (const change of collection.watch()) {
      const { documentKey, fullDocument } = change;
          console.log(`new document with _id: ${documentKey}`, fullDocument);
          const data = {
            epoch:fullDocument.raw.epoch,
            open:fullDocument.open,
            close:fullDocument.close,
            high:fullDocument.high,
            low:fullDocument.low,
          }
          this.currentData = data;
          this.FETCHING_DATA = false
    }
  },
Enter fullscreen mode Exit fullscreen mode

How to run it locally?

Backend

  • Prerequisites: node.js >=14
  • Local Installation Steps:
- clone repo
- access "BACKEND"
- run yarn install
- run node index.js
Enter fullscreen mode Exit fullscreen mode

Frontend

  • Prerequisites: Node.js >= 14
  • Local Installation Steps:
- clone repo
- access  "FRONTEND"
- run yarn install
- run yarn dev
Enter fullscreen mode Exit fullscreen mode

Collaborators

Role: Backend

Me
Role: FrontEnd

Deployment

We recommend running this project Locally following the steps above

License

MIT
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more