StockMarket Sample App
Tags: atlashackathon22, vue, deriv
Published: 2022-12-08 14:55:24

## 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)

{% embed https://youtu.be/o7vdJG6D_Hg %}

## Link to Code

{% embed https://github.com/emacliam/Stockmarket-app-mongo-hackathon %}

## Languages Used:

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

## Screen screenshots

### CandleStick Chart


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6193a8hdxrm37lpzg1yt.png)


### Area Chart

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4w1t3cvrh2o8jme9ar7.png)


## 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

{% embed https://dev.to/valentinesean22 %}


Me
Role: FrontEnd


## Deployment

We recommend running this project Locally following the steps above

### License
```
MIT
```