Installation - VibeTrader

This guide will walk you through installing VibeTrader on your local development machine.

Prerequisites

Before installing VibeTrader, ensure you have the following installed:

Node.js

Node.js 18.x or higher is requiredDownload from nodejs.orgVerify your installation:

node --version
# Should output v18.0.0 or higher

npm

npm 9.x or higher (comes with Node.js)Verify your installation:

npm --version
# Should output 9.0.0 or higher

Git

Git for cloning the repositoryDownload from git-scm.comVerify your installation:

git --version

VibeTrader uses modern JavaScript features (ES2022) and requires a recent version of Node.js for optimal performance.

Installation Steps

1. Clone the Repository

First, clone the VibeTrader repository from GitHub:

git clone https://github.com/dcaoyuan/vibetrader.git
cd vibetrader

2. Install Dependencies

Install all required npm packages:

npm install

This will install all dependencies listed in package.json, including:

React 19 - Frontend framework
React Spectrum - Adobe’s accessible UI components
PineTS - PineScript compiler for custom indicators
Vite - Build tool and dev server
TypeScript - Type checking and compilation
html2canvas - Screenshot functionality
Temporal polyfill - Modern date/time handling

The installation may take a few minutes depending on your internet connection speed.

3. Verify Installation

After installation completes, verify everything is set up correctly:

npm run build

If the build completes without errors, you’re ready to go!

Project Structure

Once installed, you’ll see the following directory structure:

vibetrader/
├── src/
│   ├── lib/
│   │   ├── charting/       # Chart components and views
│   │   │   ├── view/       # ChartView, KlineView, IndicatorView
│   │   │   ├── plot/       # Plot types (line, kline, histogram, etc.)
│   │   │   ├── drawing/    # Drawing tools (Fibonacci, Gann, etc.)
│   │   │   ├── pane/       # UI panes (AxisX, AxisY, Title)
│   │   │   └── scalar/     # Y-axis scaling (linear, logarithmic)
│   │   ├── timeseris/      # Time series management
│   │   │   ├── TSer.ts     # Time series container
│   │   │   ├── TFrame.ts   # Timeframe definitions
│   │   │   ├── TVar.ts     # Time-varying variables
│   │   │   └── DefaultTSer.ts
│   │   ├── domain/         # Domain models and data fetchers
│   │   │   ├── Kline.ts    # OHLCV data structure
│   │   │   ├── DataFecther.ts  # Multi-source data fetching
│   │   │   ├── BinanaceData.ts # Binance integration
│   │   │   └── YFinanceData.ts # Yahoo Finance integration
│   │   ├── layouts/        # Page layouts
│   │   ├── svg/           # SVG rendering utilities
│   │   └── collection/    # Data structures
│   ├── App.tsx            # Main application component
│   ├── main.tsx          # Application entry point
│   └── Env.ts            # Environment configuration
├── tests/                # Test files
├── package.json          # Dependencies and scripts
├── tsconfig.json        # TypeScript configuration
├── vite.config.ts       # Vite configuration
└── README.md            # Project documentation

Familiarize yourself with the project structure to understand where different features are implemented.

Configuration

Environment Settings

VibeTrader’s environment settings are in src/Env.ts:

export const dev = true;  // Development mode
export const source = Source.binance;  // Default data source

You can modify these settings to:

Switch between development and production mode
Change the default data source (Binance, Yahoo Finance, or local)

Vite Configuration

The Vite configuration in vite.config.ts includes:

export default defineConfig({
  plugins: [
    macros.vite(),  // Parcel macros for React Spectrum
    react()
  ],
  base: '/vibetrader/',
  build: {
    target: ['es2022'],
    cssMinify: 'lightningcss'
  }
});

The base path is set to /vibetrader/ for GitHub Pages deployment. Change this to / if deploying to a root domain.

TypeScript Configuration

VibeTrader uses TypeScript 5.9+ with strict type checking. The tsconfig.json is configured for optimal React development with ES2022 features.

Dependencies Overview

Core Dependencies

React 19

Latest React with improved performance and new hooks

React Spectrum

Adobe’s accessible design system with 50+ components

PineTS

PineScript compiler for custom technical indicators

Vite

Lightning-fast build tool with HMR

Key Libraries

Package	Version	Purpose
`react`	19.2.0	UI framework
`@react-spectrum/s2`	1.1.0	Component library
`pinets`	0.8.12	PineScript integration
`vite`	7.2.2	Build tool
`typescript`	5.9.3	Type checking
`html2canvas`	1.4.1	Screenshot capture
`temporal-polyfill`	0.3.0	Date/time handling

Development Tools

Code Quality

VibeTrader includes ESLint for code quality:

npm run lint

This runs ESLint with React and TypeScript plugins to catch common issues.

Testing

Run the test suite with Vitest:

npm test

Tests are located in the tests/ directory and use Vitest for fast unit testing.

Troubleshooting

Build Errors

Error: Cannot find module

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

Error: TypeScript compilation failed

# Ensure TypeScript version is correct
npm install typescript@~5.9.3

Installation Issues

Error: EACCES permission denied

# Fix npm permissions (Unix/Mac)
sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib/node_modules

Error: Network timeout

# Increase npm timeout
npm config set fetch-timeout 60000
npm install

If you encounter persistent installation issues, try using a different Node.js version manager like nvm.

Platform-Specific Notes

Windows

On Windows, you may need to:

Run your terminal as Administrator
Enable long paths: git config --system core.longpaths true
Use PowerShell or Git Bash instead of Command Prompt

macOS

On macOS, you may need to:

Install Xcode Command Line Tools: xcode-select --install
Use Homebrew to install Node.js: brew install node

Linux

On Linux, you may need to:

Install build essentials: sudo apt-get install build-essential
Use nvm to manage Node.js versions

Next Steps

Now that VibeTrader is installed, you’re ready to start the development server!

Quick Start Guide

Learn how to run VibeTrader and start trading

Additional Resources

Vite Documentation - Learn about the build tool
React Spectrum - Explore the component library
PineTS Documentation - PineScript integration guide
TypeScript Handbook - TypeScript reference

Overview

​Prerequisites

​Installation Steps

​1. Clone the Repository

​2. Install Dependencies

​3. Verify Installation

​Project Structure

​Configuration

​Environment Settings

​Vite Configuration

​TypeScript Configuration

​Dependencies Overview

​Core Dependencies

React 19

React Spectrum

PineTS

Vite

​Key Libraries

​Development Tools

​Code Quality

​Testing

​Troubleshooting

​Build Errors

​Installation Issues

​Platform-Specific Notes

​Windows

​macOS

​Linux

​Next Steps

Quick Start Guide

​Additional Resources

Build docs developers (and LLMs) love

Prerequisites

Installation Steps

1. Clone the Repository

2. Install Dependencies

3. Verify Installation

Project Structure

Configuration

Environment Settings

Vite Configuration

TypeScript Configuration

Dependencies Overview

Core Dependencies

Key Libraries

Development Tools

Code Quality

Testing

Troubleshooting

Build Errors

Installation Issues

Platform-Specific Notes

Windows

macOS

Linux

Next Steps

Additional Resources