USD/RUB Rate Monitor

A demo web application that displays USD/RUB exchange rate data using interactive candlestick charts powered by TradingView's Lightweight Charts library.

Features

• Interactive Candlestick Chart: Real-time visualization of OHLC (Open, High, Low, Close) data
• Responsive Design: Works seamlessly on desktop and mobile devices
• Modern UI: Clean, professional interface with Material Design principles
• TypeScript: Type-safe development with full TypeScript support
• GitHub Pages Ready: Automatic deployment via GitHub Actions

Technology Stack

• Vite - Fast build tool and development server
• TypeScript - Type-safe JavaScript development
• Lightweight Charts - Professional trading charts by TradingView
• Vanilla JavaScript - No framework dependencies, lightweight and fast

Getting Started

Prerequisites

• Node.js 18 or higher
• npm or yarn package manager

Installation

1. Clone the repository:

git clone https://github.com/northis/BestChangeRateMonitor.git
cd BestChangeRateMonitor

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

Building for Production

npm run build

The built files will be in the dist/ directory.

Preview Production Build

npm run preview

Data Format

The application expects OHLC data in the following JSON format:

[
  {
    "time": "2024-01-01",
    "open": 89.50,
    "high": 90.25,
    "low": 89.10,
    "close": 89.80
  }
]

Sample data is provided in public/usdtrub-data.json.

GitHub Pages Deployment

The project is configured for automatic deployment to GitHub Pages:

1. Push your changes to the main branch
2. GitHub Actions will automatically build and deploy the site
3. Your site will be available at https://yourusername.github.io/BestChangeRateMonitor/

Manual GitHub Pages Setup

1. Go to your repository settings
2. Navigate to "Pages" section
3. Set source to "GitHub Actions"
4. The deployment workflow will handle the rest

Project Structure

BestChangeRateMonitor/
├── .github/
│   └── workflows/
│       └── deploy.yml          # GitHub Actions deployment
├── public/
│   └── usdtrub-data.json      # Sample OHLC data
├── src/
│   └── main.ts                # Main TypeScript application
├── index.html                 # HTML template
├── package.json              # Dependencies and scripts
├── tsconfig.json            # TypeScript configuration
├── vite.config.ts          # Vite configuration
└── README.md              # This file

Customization

Adding New Data

Replace the data in public/usdtrub-data.json with your own OHLC data following the same format.

Styling

Modify the CSS in index.html or create separate stylesheets to customize the appearance.

Chart Configuration

Edit src/main.ts to modify chart settings, colors, or add new features like indicators or overlays.

License

This project is open source and available under the MIT License.