Awesome

StockViz

Realtime - Stock Charts with Fluvio

This repository contains a complete system for fetching and visualizing real-time stock market data. It includes:

Server: A backend service for fetching stock prices.
Client: A web application for displaying stock price charts.
Fluvio: Configuration files for Fluvio cloud deployment.

Demo

Overview

Server: Provides a REST API to get current stock prices and a streaming endpoint for real-time updates. (uses Fluvio)
Client: A React-based application that visualizes stock prices using Recharts and Tailwind CSS.
Fluvio: YAML configuration files used to define the sources to sync data and Docker files. (for Fluvio)

Setup Instructions

Server

Navigate to the Server Directory
```
cd server
```
Install Dependencies
```
bun install
```
Run the Server
```
bun dev
```
The server will be available at http://localhost:5000.

Client

Navigate to the Client Directory
```
cd client
```

Create a .env File

In the client directory of the project, create a file named .env with the following content:

AUTH_SECRET="changeMe"
AUTH_GITHUB_ID="<github-id>"
AUTH_GITHUB_SECRET="<github-secret>"
NEXT_PUBLIC_SERVER_URL="http://localhost:8000"
NEXT_PUBLIC_URL="http://localhost:3000"
DATABASE_URL="<mongodb>"

Install Dependencies
```
bun install
```
Generate Prisma Schema
```
npx prisma db push
```
Run the Development Server
```
bun dev
```
The client application will be available at http://localhost:3000.

Fluvio

Navigate to the Fluvio Directory
```
cd fluvio
```

Install Required Fluvio Package

cdk hub download infinyon/http-source@0.3.8

Create a Topic
```
fluvio topic create stocks-sinker
```

Deploy Sinker

cdk deploy start --ipkg ./infinyon-http-source-0.3.8.ipkg -c ./sinker.yml

Widget Scripts

To see widget open widget/index.html in root and change its div id with locally created id and open in browser.

You will find widget scripts in widget/dist/ to add to your website. You need to build widget again after any change in widget folder by:

bun run build