https://github.com/P8Labs/stock-charts
A stocks chart system powered by fluvio.
https://github.com/P8Labs/stock-charts
collaborate fluvio github nextjs real-time stock-prices stocks-charts
Last synced: about 2 months ago
JSON representation
A stocks chart system powered by fluvio.
- Host: GitHub
- URL: https://github.com/P8Labs/stock-charts
- Owner: P8Labs
- License: mit
- Created: 2024-08-17T14:18:13.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-09-10T13:47:06.000Z (about 1 year ago)
- Last Synced: 2025-08-11T10:50:32.037Z (about 2 months ago)
- Topics: collaborate, fluvio, github, nextjs, real-time, stock-prices, stocks-charts
- Language: TypeScript
- Homepage: https://stockviz.vercel.app
- Size: 630 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# StockViz
## Realtime - Stock Charts with Fluvio
This repository contains a complete system for fetching and visualizing real-time stock market data. It includes:
1. **Server**: A backend service for fetching stock prices.
2. **Client**: A web application for displaying stock price charts.
3. **Fluvio**: Configuration files for Fluvio cloud deployment.
## Demo
[Live Preview](https://stockviz.vercel.app/)
[Vote on Quira ✅️](https://quira.sh/repo/priyanshuverma-dev-stock-charts-843820386?utm_source=copy&utm_share_context=quests_creators)
[Youtube link](https://www.youtube.com/watch?v=pHJBXAq21iw)
[demo](https://github.com/user-attachments/assets/eaad9473-e23a-41b2-96d4-9ff6f2b2d816)
## Overview
- **Server**: Provides a REST API to get current stock prices and a streaming endpoint for real-time updates. (uses [Fluvio](https://www.fluvio.io/))
- **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](https://www.fluvio.io/))
## Setup Instructions
#### Server
1. **Navigate to the Server Directory**
```bash
cd server
```
2. **Install Dependencies**
```bash
bun install
```
3. **Run the Server**
```bash
bun dev
```
The server will be available at `http://localhost:5000`.
#### Client
1. **Navigate to the Client Directory**
```bash
cd client
```
2. **Create a `.env` File**
In the `client` directory of the project, create a file named .env with the following content:
```env
AUTH_SECRET="changeMe"
AUTH_GITHUB_ID=""
AUTH_GITHUB_SECRET=""
NEXT_PUBLIC_SERVER_URL="http://localhost:8000"
NEXT_PUBLIC_URL="http://localhost:3000"
DATABASE_URL=""
```
3. **Install Dependencies**
```bash
bun install
```
4. **Generate Prisma Schema**
```bash
npx prisma db push
```
5. **Run the Development Server**
```bash
bun dev
```
The client application will be available at `http://localhost:3000`.
#### Fluvio
1. **Navigate to the Fluvio Directory**
```bash
cd fluvio
```
2. **Install Required Fluvio Package**
```bash
cdk hub download infinyon/http-source@0.3.8
```
3. **Create a Topic**
```bash
fluvio topic create stocks-sinker
```
4. **Deploy Sinker**
```bash
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:
```bash
bun run build
```