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

Area Chart

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,
  },
});

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()
};

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
    }
  },

How to run it locally?

Backend

• Prerequisites: node.js >=14
• Local Installation Steps:

- clone repo
- access "BACKEND"
- run yarn install
- run node index.js

Frontend

• Prerequisites: Node.js >= 14
• Local Installation Steps:

- clone repo
- access  "FRONTEND"
- run yarn install
- run yarn dev

Collaborators

Role: Backend

Valentine Sean ChanengetaFollow

Software Developer (Python, Flask, Java, Spring Boot, MySQL, MongoDB, Git, Docker, Redis)

Me
Role: FrontEnd

Deployment

We recommend running this project Locally following the steps above

License

MIT