DEV Community: emacliam

StockMarket Sample App

emacliam — Thu, 08 Dec 2022 14:55:24 +0000

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:

Login to the system(mongo realm login).
You will see a dashboard with cards and a chart section
You can switch between area chart and candlestick chart
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

emacliam / Stockmarket-app-mongo-hackathon

Stockmarket-app-mongo-hackathon

View on GitHub

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

Project Management

emacliam — Wed, 21 Sep 2022 10:59:29 +0000

PROJECT MANAGEMENT

Collaborators

Role: Python Developer
He developed a python Api using flask

Valentine Sean ChanengetaFollow

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

This project allows users to manage their projects by planning, organising and managing different required aspects.

Basic Functionality:

Auth(JWT)
Create,Edit,Delete Projects
Create,Edit,Delete Project Tasks
Track Project Tasks(from todo -> in progress -> completed)
Create Project Budget
Download Budget as pdf
Generate Project Summary/Report
Download Report as pdf
Generate Project Gantt Chat from Tasks
Download Gantt Chat as pdf
Add project Files

Languages Used:

Javascript(Vue,js) html Tailwindcss Python mosaic-Tailwindcss-template mySql flask

Screen screenshots

Landing Page

Dashboard Page

Projects Page

Project Page

Tasks Page

Project Gantt Chat Page

Settings Page

Reports Page

Customer Relationship Management

emacliam — Mon, 29 Aug 2022 20:00:00 +0000

Overview of My Submission

STACKER

Is a software that helps businesses to easily track communications between customer service agents and clients.It uses REDIS to store data(issues submitted by clients). It is integrated with a chat developed using socketIO. This Project comes with apython(Flask) API and a Vue,Vite Application.The user interface was built using tailwindCss.

Basic Functionality:

As a client, you create an account or register.
Access the dashboard
Create an Issue(the issue will be added to a queue)
On the customer service agent side.
Login to the system.
You will see a dashboard with a list of Issues to be attended.
Those that are already being attended by other agents, will be indicated in red.
Attend an issue with a green background.
To attend an issue, click go to chat. It will redirect you to a chat where you can communicate with a client.
The client will be notified when the issue is being attended.
If an issue has been completed, it is CLOSED.
If it is under investigation, it is ARCHIVED.
Otherwise, it is left OPEN / in PROGRESS.
On the dashboard, the client and the customer service agent will be able to see their issues -open,closed and archived.

Why this?:

We want to provide a simple way for customer representative agents to handle multiple clients at the same time seemlessly, using a chat and a queuing system.

Where we used redis.

((as a primary database using `RedisJson` Module through `Redis OM Python`))

Storage of chat information - messages
Storage of Issues
Storage of user data

Submission Category:

Wacky Wildcards

Overview video (Optional)

Link to Code

emacliam / REDIS-HACKERTHON---CRM

Customer Relationship Management Application

Overview of Project

STACKER

Basic Functionality:

As a client, you create an account or register.
Access the dashboard
Create an Issue(the issue will be added to a queue)
On the customer service agent side.
Login to the system.
You will see a dashboard with a list of Issues to be attended.
Those that are already being attended by other agents, will be indicated in red.
Attend an issue with a green background.
To attend an issue, click go to chat. It will redirect you to a chat where you can communicate with a client.
The client will…

View on GitHub

Languages Used:

Javascript(Vue,js) html Tailwindcss Python

Screen screenshots

Landing Page

Dashboard Page

Chat Page

How it works

How the data is stored:

Data is stored using RedisJSON module in DB and RedisOM Python as a client library

Store (Add): model_instance = ModelName(key1=value1, key2=value2, ..., keyN=valueN) model_instance.save()

Code Example:Database Schema

Issues

class Issue(EmbeddedJsonModel, JsonModel):
    subject: Optional[Optional[str]] = Field(index=True)
    description: Optional[str] = Field(index=True)
    issue_status: Optional[str] = Field(index=True)
    sender: Optional[str] = Field(index=True)
    created_at: Optional[str] = Field(index=True)
    record_status: Optional[str] = Field(index=True)

Messages

class Message(JsonModel):
    issue: Optional[Optional[str]] = Field(index=True)
    sender: Optional[str] = Field(index=True)
    sender_data: User
    issue_data: Issue
    message_body: Optional[str] = Field(index=True)

User

class User(EmbeddedJsonModel, JsonModel):
    first_name: Optional[str] = Field(index=True)
    last_name: Optional[str] = Field(index=True)
    role: Optional[str] = Field(index=True)
    created_at: Optional[str] = Field(index=True)
    record_status: Optional[str] = Field(index=True)

How the data is accessed:

Get:
model_instance = ModelName.find((ModelName.field1=="value1")&(ModelName.field2=="value2")) - to filterby field1's and field2's values.
Update:
model_instance = ModelName().get(model_instance_id)
model_instance.field1 = new_value1
model_instance.field2 = new_value2
model_instance.fieldN = new_valueN
model_instance.save()

Code Example: How to access/get user data

def get_users():
    try:
        users = User.find(User.record_status=="ALIVE").all()
        users_list = []

        for user in users:
            user_dict = {}

            for x in user:
                user_dict[x[0]] = x[1]

            users_list.append(user_dict)

        return jsonify({
            "status_code": "200",
            "status": "success",
            "message": "users_retrieved_ok",
            "data": users_list
        })

    except:
        traceback.print_exc()
        return jsonify({
            "status_code": "500",
            "status": "error",
            "message": "failed_to_retrieve_users",
            "data": [],
        })

How to run it locally?

Backend

Prerequisites: Python 3.8.2
Local Installation Steps:

- clone repo
- access folder titled "CRM BACKEND"
- add ".env" file in the root directory of the project and add the line:
        -> "REDIS_OM_URL=[URL_TO_REDIS_CLOUD]"
- create and activate virtual environment in the root directory using the command (on Windows 10 cmd):
        -> "python -m venv [ENVIRONMENT_NAME]"
        -> "[ENVIRONMENT_NAME]\scripts\activate"
-install project packages in the active environment using the command (on Windows 10 cmd):
        -> "pip install -r requirements.txt"
    -run flask API using the command (on Windows 10 cmd):
        -> "flask run"
    -it should give an output like:
        * Debug mode: on
        * Running on localhost:[PORT_NUMBER]
        * Restarting with stat
        * Debugger is active!
        * Debugger PIN: [DEBUGGER_PIN]

Frontend

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

- clone repo
- access folder titled "CRM FRONTEND"
- run "YARN INSTALL"
- In the project folder, there is a file "config.js".change url to your backends server url.
- run "YARN DEV" to run the project
- To expose host on a network run with --host flag eg:"YARN DEV --host"

Prerequisites

Node.js >= 14 Python 3.8.2 Redis Cloud Account

Additional Resources / Info

Architecture

Model

Collaborators

Role: Python Developer
On this Project, he developed a python Api using flask

Valentine Sean ChanengetaFollow

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

Me
Role: Front End Developer
On this project, i developed a vue.js application

Deployment

We recommend running this project Locally following the steps above

License

APACHE

DEV Community: emacliam

StockMarket Sample App

Overview of My Submission

Stockmarket Charts

Basic Functionality:

Why this?:

Where we used mongo.

Submission Category:

Overview video (Optional)

Link to Code

emacliam / Stockmarket-app-mongo-hackathon

Stockmarket-app-mongo-hackathon

Languages Used:

Screen screenshots

CandleStick Chart

Area Chart

How it works

Models:

How the data is stored:

How data is retrieved in realtime

How to run it locally?

Backend

Frontend

Collaborators

Valentine Sean ChanengetaFollow

Deployment

License

Project Management

PROJECT MANAGEMENT

Collaborators

Valentine Sean ChanengetaFollow

Basic Functionality:

Languages Used:

Screen screenshots

Landing Page

Dashboard Page

Projects Page

Project Page

Tasks Page

Project Gantt Chat Page

Settings Page

Reports Page

Customer Relationship Management

Overview of My Submission

STACKER

Basic Functionality:

Why this?:

Where we used redis.

((as a primary database using RedisJson Module through Redis OM Python))

Submission Category:

Overview video (Optional)

Link to Code

emacliam / REDIS-HACKERTHON---CRM

Customer Relationship Management Application

Overview of Project

STACKER

Basic Functionality:

Languages Used:

Screen screenshots

Landing Page

Dashboard Page

Chat Page

How it works

How the data is stored:

Code Example:Database Schema

Issues

Messages

User

How the data is accessed:

Code Example: How to access/get user data

How to run it locally?

Backend

Frontend

Prerequisites

Additional Resources / Info

Collaborators

Valentine Sean ChanengetaFollow

Deployment

License

((as a primary database using `RedisJson` Module through `Redis OM Python`))