Crypto Price Streaming App

A full-stack web application that streams real-time cryptocurrency prices from TradingView, built with Node.js, Next.js, and Playwright.

This project demonstrates real-time data streaming, efficient browser automation, and frontend-backend communication via ConnectRPC.

---

Features

• 🔄 Live Streaming: Real-time crypto price updates from TradingView.
• 🖥 Frontend (Next.js):
  • Add/remove tickers dynamically.
  • Alphabetically sorted ticker list.
  • Displays live updates with timestamps.
• ⚙️ Backend (Node.js):
  • Uses Playwright to fetch price data.
  • Reuses a single browser instance across tickers for efficiency.
  • Push-based updates with minimal latency.
• 🛠 Error Handling: Graceful handling of invalid tickers and network errors.

---

Tech Stack

• Frontend: Next.js, React, TypeScript
• Backend: Node.js, TypeScript, ConnectRPC
• Automation: Playwright
• Package Manager: pnpm

---

Getting Started

Prerequisites

• Node.js (>=18)
• pnpm (>=8)
• bash (for run.sh script)

Installation

# Clone the repo
git clone https://github.com/your-username/crypto-price-streaming.git
cd crypto-price-streaming

# Install dependencies
pnpm install --recursive

Running the App

# Run the provided script
./run.sh

This will:

1. Generate protobuf files (npx buf generate).
2. Start the backend server.
3. Launch the Next.js frontend.

Open http://localhost:3000 in your browser.

---

Project Structure

├── backend
│   ├── proto/            # Protobuf definitions
│   ├── gen/              # Generated RPC code
│   ├── src/              # Backend source (server, scraper, client)
│   └── package.json
│
├── frontend
│   ├── src/app/          # Next.js frontend pages/components
│   └── package.json
│
├── run.sh                # Script to set up & run project
└── README.md

---

Demo

---

Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you’d like to change.

---

License

This project is licensed under the MIT License.