Charts That Move Markets — Trade. Analyze. Backtest. Free.
The professional crypto charting platform built for serious traders — 100+ indicators, 50+ drawing tools, real-time data from 11 exchanges, multi-chart layouts, strategy replay & backtesting. All free during Beta.
🌐 Live App • 📖 Features • 📝 Blog • 💰 Coins Hub • 📊 Status • 💎 Pricing
Cinematic landing experience — built to convert traders from first scroll.
Complete in-product feature guide — 15 chart types, 100+ indicators, 50+ drawing tools.
Dedicated landing pages for every major asset — Bitcoin, Ethereum, Solana, XRP, and 100+ more.
Transparent pricing — every Zenith feature unlocked free during Beta.
15+ in-depth trading guides — RSI, Fibonacci, MACD, Wyckoff, scalping & more.
- ✨ Preview
- Overview
- Architecture
- Tech Stack
- Features
- Project Structure
- Data Flow
- Exchange Integrations
- Backend & Edge Functions
- Database Schema
- Authentication
- SEO & Marketing Pages
- Legal & Compliance
- Configuration
- Getting Started
- Environment Variables
- Deployment
- Monitoring & Status
VizionX is a professional-grade cryptocurrency charting and technical-analysis platform built for traders who refuse to compromise. We rebuilt the entire trading-terminal experience from scratch — fast as native, beautiful as a flagship app, and completely free during Beta.
- 🆓 Truly free — Every Zenith-tier feature unlocked during Beta. No credit card. No hidden paywalls.
- ⚡ Faster than the rest — Client-side direct-fetch architecture means your charts load instantly. We talk to exchanges directly; no slow proxy in the middle.
- 🌍 11 exchanges, one chart — Binance, Coinbase, Bybit, Kraken, OKX, KuCoin, Bitget, MEXC, Gate.io, HTX, Bitstamp — all unified under one symbol search.
- 📊 100+ technical indicators — Trend, momentum, volatility, volume, and advanced systems (Wyckoff, Ichimoku, Liquidation Heatmap, Volume Profile).
- ✏️ 50+ drawing tools — Trend lines, Fibonacci, harmonic patterns, Elliott Wave, Long/Short Position planner with live P&L and R/R.
- 🧪 Strategy Replay & Backtesting — Step through historical bars at 1×–100× to practice any setup. History from 2017 onward, cached locally.
- 📐 Multi-chart layouts — Up to 8 synchronized panels with shared crosshair, time, and symbol controls.
- 🌐 50+ languages — AI-powered translation engine with full RTL/LTR support. Real traders, real markets, every language.
- 🔒 Single-session security — Device enforcement, IP-based alerts, GDPR/CCPA compliance.
- Day traders & scalpers — instant execution feedback with multi-panel layouts and 1-minute candles.
- Swing & position traders — full historical backtesting with Wyckoff phase detection and weekly/monthly views.
- Crypto researchers — Liquidation Heatmaps, Whale Bubbles, Sentiment widgets, and a pluggable Web Browser inside the workspace.
- Trading educators — replay mode and shareable drawings make teaching strategy effortless.
┌──────────────────────────────────────────────────────────────┐
│ VizionX Platform │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────────┐ │
│ │ Charts │ │Watchlists│ │ Drawings │ │ Replay & │ │
│ │ Engine │ │ & Alerts │ │ & Tools │ │ Backtesting │ │
│ └────┬─────┘ └────┬─────┘ └────┬─────┘ └──────┬───────┘ │
│ │ │ │ │ │
│ ┌────▼──────────────▼──────────────▼───────────────▼─────┐ │
│ │ State Management & Persistence Layer │ │
│ │ React Context · TanStack Query · IndexedDB Cache │ │
│ └────┬─────────────────────────────────────┬─────────────┘ │
│ │ │ │
│ ┌────▼─────────────┐ ┌───────▼────────────┐ │
│ │ Exchange APIs │ │ Supabase Backend │ │
│ │ (Direct Fetch) │ │ (Self-Hosted) │ │
│ │ 11 Adapters │ │ Auth · DB · Edge │ │
│ │ REST + WebSocket│ │ Storage · Realtime │ │
│ └──────────────────┘ └────────────────────┘ │
└──────────────────────────────────────────────────────────────┘
VizionX uses a Client-Side Direct-Fetch architecture for maximum performance:
┌──────────────────────────────────────────────────────────────┐
│ Browser (Client) │
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌──────────────────┐ │
│ │ React App │───▶│ KLine Cache │───▶│ IndexedDB + │ │
│ │ (Vite/TS) │ │ (Memory) │ │ Memory Cache │ │
│ └──────┬───────┘ └──────┬──────┘ └──────────────────┘ │
│ │ │ │
│ │ ┌─────────────▼───────────────┐ │
│ │ │ Exchange Adapter Layer │ │
│ │ │ ┌───────┐ ┌──────┐ ┌─────┐ │ │
│ │ │ │Binance│ │Bybit │ │ OKX │ │ │
│ │ │ └───────┘ └──────┘ └─────┘ │ │
│ │ │ ┌────────┐ ┌──────┐ ┌────┐ │ │
│ │ │ │Coinbase│ │Kraken│ │MEXC│ │ │
│ │ │ └────────┘ └──────┘ └────┘ │ │
│ │ └─────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────────────────────────────┐ │
│ │ Supabase (Self-Hosted) │ │
│ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌─────────┐ │ │
│ │ │ Auth │ │ DB │ │Edge │ │ Storage │ │ │
│ │ │ │ │ │ │Funcs │ │ │ │ │
│ │ └──────┘ └──────┘ └──────┘ └─────────┘ │ │
│ └──────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘
Key design decisions:
- Market data (klines) fetched directly from exchanges — no backend proxy
- Multi-layer cache: Memory → IndexedDB for instant chart loads
- Supabase used only for user data (profiles, layouts, drawings, settings)
- Dual-URL fallback: HTTPS primary (
api.vizionx.pro) + LAN secondary for local dev
| Layer | Technology |
|---|---|
| Framework | React 18 + TypeScript 5 |
| Build Tool | Vite 5 |
| Styling | Tailwind CSS 3 + shadcn/ui |
| Charts | Lightweight Charts v5 (TradingView) |
| State | React Context + TanStack React Query |
| Animation | Framer Motion |
| Auth & DB | Supabase (self-hosted) |
| Edge Functions | Deno (Supabase Edge Functions) |
| Testing | Vitest + Playwright |
| Deployment | Lovable Cloud + Custom Domain |
- 15+ chart types: Candles, Heikin Ashi, Renko, Line Break, Kagi, Point & Figure, Hollow Candles, Baseline, Area, Line, Step Line, Columns, and more
- Real-time WebSocket price streaming
- Crosshair sync across multiple panels
- Price scale context menus with auto/manual scaling
- Time zones support with timezone selector
Full registry-based indicator system (src/lib/indicators/registry.ts):
- Trend: MA, EMA, SMA, WMA, DEMA, TEMA, HMA, VWMA
- Momentum: RSI, MACD, Stochastic, CCI, Williams %R, ROC, MFI
- Volatility: Bollinger Bands, ATR, Keltner Channels, Donchian
- Volume: OBV, Volume Profile, VWAP, CMF, ADL
- Advanced: Ichimoku Cloud, Parabolic SAR, Supertrend, Wyckoff Analysis
- Custom: Elliott Wave overlay, Liquidation Heatmap
Organized in categories (src/lib/drawingToolCategories.ts):
- Lines: Trend Line, Ray, Extended Line, Horizontal/Vertical Lines
- Channels: Parallel, Regression, Fibonacci Channel
- Fibonacci: Retracement, Extension, Fan, Arc, Time Zones
- Patterns: Head & Shoulders, Triangle, Wedge, XABCD, Cypher
- Shapes: Rectangle, Circle, Ellipse, Arc
- Annotations: Text, Notes, Callouts, Price Labels, Emoji Stamps
- Measurement: Date Range, Price Range, Bars Pattern
- Multiple watchlists with custom sections
- Real-time price updates via WebSocket
- Drag-and-drop reordering
- Quick symbol switching
- Step through historical price action bar by bar
- Adjustable speed (1x–100x)
- Practice trading strategies on historical data
- Split-screen: 1, 2, 3, 4, 6, 8 panel layouts
- Sync options: Symbol, Interval, Crosshair, Time, Date Range
- Save/load named layouts
- Per-panel independent symbols and intervals
Alternative widget-based interface (src/components/newui/):
- Draggable, resizable widget panels
- Embeddable widgets: Spotify, YouTube, Twitter/X, TikTok, Instagram
- Web browser widget
- Custom analytics widgets (Sentiment, Whale Bubbles, Volatility Vortex, Performance DNA)
vizionx/
├── public/
│ ├── robots.txt # SEO crawl rules
│ ├── sitemap.xml # XML sitemap for search engines
│ └── placeholder.svg # Default placeholder image
│
├── src/
│ ├── App.tsx # Root component & route definitions
│ ├── main.tsx # Entry point
│ ├── config.ts # ⚙️ Central configuration (URLs, keys)
│ ├── index.css # Global styles & design tokens
│ │
│ ├── components/
│ │ ├── chart/ # 📈 All chart-related components
│ │ │ ├── TradingChart.tsx # Main chart rendering engine
│ │ │ ├── TopToolbar.tsx # Symbol, interval, chart type selector
│ │ │ ├── LeftToolbar.tsx # Drawing tools sidebar
│ │ │ ├── RightSidebar.tsx # Watchlist & alerts panel
│ │ │ ├── DrawingCanvas.tsx # Canvas overlay for drawings
│ │ │ ├── IndicatorOverlay.tsx # Indicator rendering layer
│ │ │ ├── IndicatorsDialog.tsx # Add/configure indicators
│ │ │ ├── LayoutManager.tsx # Multi-chart layout management
│ │ │ ├── ReplayControls.tsx # Bar replay playback controls
│ │ │ ├── SymbolSearch.tsx # Search across all exchanges
│ │ │ ├── Watchlist.tsx # Price watchlist component
│ │ │ ├── AlertsPanel.tsx # Price alert management
│ │ │ ├── WyckoffOverlay.tsx # Wyckoff analysis overlay
│ │ │ ├── LiquidationHeatmap.tsx # Liquidation visualization
│ │ │ ├── FeedbackWidgets.tsx # Bug report & feature request
│ │ │ ├── UserProfileMenu.tsx # User avatar & menu
│ │ │ └── ... # 20+ more chart components
│ │ │
│ │ ├── newui/ # 🆕 Widget-based alternative UI
│ │ │ ├── NewUIView.tsx # Widget layout manager
│ │ │ ├── WidgetHub.tsx # Widget catalog & adding
│ │ │ ├── WidgetWrapper.tsx # Draggable/resizable wrapper
│ │ │ └── widgets/ # Individual widget implementations
│ │ │ ├── SpotifyWidget.tsx
│ │ │ ├── YouTubeWidget.tsx
│ │ │ ├── TwitterWidget.tsx
│ │ │ ├── WebBrowserWidget.tsx
│ │ │ └── ...
│ │ │
│ │ └── ui/ # 🎨 shadcn/ui design system
│ │ ├── button.tsx
│ │ ├── dialog.tsx
│ │ └── ... (40+ components)
│ │
│ ├── context/
│ │ ├── AuthContext.tsx # 🔐 Authentication state & actions
│ │ ├── ChartContext.tsx # 📊 Chart state management
│ │ ├── ThemeContext.tsx # 🎨 Theme management
│ │ └── ViewModeContext.tsx # 👁️ Classic vs New UI toggle
│ │
│ ├── hooks/
│ │ ├── useChartPersistence.ts # Save/load chart state to DB
│ │ ├── useWorkspacePersistence.ts # Save/load workspace to DB
│ │ ├── useKeyboardShortcuts.ts # Global keyboard shortcuts
│ │ ├── useSessionEnforcement.ts # Single-session enforcement
│ │ ├── useAdmin.ts # Admin panel data hooks
│ │ └── useProfile.ts # User profile management
│ │
│ ├── lib/
│ │ ├── exchanges/ # 🏦 Exchange adapters
│ │ │ ├── index.ts # Unified exchange interface
│ │ │ ├── types.ts # Exchange types & interfaces
│ │ │ ├── symbols.ts # Symbol normalization
│ │ │ ├── binance.ts # Binance REST + WebSocket
│ │ │ ├── bybit.ts # Bybit adapter
│ │ │ ├── coinbase.ts # Coinbase adapter
│ │ │ ├── okx.ts # OKX adapter
│ │ │ ├── kraken.ts # Kraken adapter
│ │ │ ├── kucoin.ts # KuCoin adapter
│ │ │ ├── gateio.ts # Gate.io adapter
│ │ │ ├── mexc.ts # MEXC adapter
│ │ │ ├── htx.ts # HTX (Huobi) adapter
│ │ │ ├── bitget.ts # Bitget adapter
│ │ │ └── bitstamp.ts # Bitstamp adapter
│ │ │
│ │ ├── indicators/
│ │ │ ├── registry.ts # 📊 Full indicator registry (100+)
│ │ │ └── wyckoff.ts # Wyckoff phase detection
│ │ │
│ │ ├── drawing/
│ │ │ ├── types.ts # Drawing tool type definitions
│ │ │ ├── renderers.ts # Canvas rendering functions
│ │ │ ├── hit-testing.ts # Click detection on drawings
│ │ │ ├── math.ts # Geometric calculations
│ │ │ └── snap.ts # Snap-to-grid logic
│ │ │
│ │ ├── klineCache.ts # 📦 Memory + IndexedDB kline cache
│ │ ├── backtestCache.ts # Backtest data caching
│ │ ├── chartIntervals.ts # Interval definitions & mapping
│ │ ├── planLimits.ts # Plan-based feature limits
│ │ ├── seo.ts # 🔍 SEO helper (meta, JSON-LD)
│ │ └── utils.ts # General utilities
│ │
│ ├── pages/
│ │ ├── Landing.tsx # 🏠 Home / marketing page
│ │ ├── ChartPage.tsx # 📈 Main chart application
│ │ ├── Pricing.tsx # 💎 Plans & pricing
│ │ ├── Settings.tsx # ⚙️ User settings & sessions
│ │ ├── Admin.tsx # 🛡️ Admin dashboard
│ │ ├── Signup.tsx # 📝 Registration page
│ │ ├── Status.tsx # 📊 System status & uptime
│ │ ├── Features.tsx # 📖 Feature showcase & guides
│ │ │
│ │ ├── blog/ # 📝 SEO blog articles
│ │ │ ├── BlogIndex.tsx
│ │ │ ├── RsiCryptoTrading.tsx
│ │ │ ├── FibonacciStrategyBitcoin.tsx
│ │ │ └── ... (12 articles)
│ │ │
│ │ ├── seo/ # 🔍 SEO landing pages
│ │ │ ├── BitcoinChart.tsx
│ │ │ ├── EthereumChart.tsx
│ │ │ ├── FreeCryptoCharts.tsx
│ │ │ └── ... (10 pages)
│ │ │
│ │ └── (legal pages) # ⚖️ Legal & compliance
│ │ ├── Terms.tsx
│ │ ├── Privacy.tsx
│ │ ├── Cookies.tsx
│ │ ├── DMCA.tsx
│ │ ├── DoNotSell.tsx
│ │ ├── DataProcessing.tsx
│ │ ├── RegulatoryCompliance.tsx
│ │ ├── AcceptableUse.tsx
│ │ ├── RefundPolicy.tsx
│ │ ├── Disclaimer.tsx
│ │ ├── Accessibility.tsx
│ │ ├── SecurityPage.tsx
│ │ └── BugBounty.tsx
│ │
│ └── integrations/
│ └── supabase/
│ ├── client.ts # Auto-generated Supabase client
│ └── types.ts # Auto-generated DB types
│
├── supabase/
│ ├── config.toml # Supabase project configuration
│ ├── functions/
│ │ ├── health-monitor/ # 🏥 Auto health checks (every 2min)
│ │ ├── backtest-klines/ # 📊 Historical kline fetching
│ │ ├── chart-heartbeat/ # 💓 Chart session heartbeat
│ │ ├── list-sessions/ # 📋 List user sessions
│ │ ├── register-device/ # 📱 Device registration
│ │ └── revoke-session/ # 🔒 Session revocation
│ │
│ └── migrations/ # 📦 Database migrations (read-only)
│
├── tailwind.config.ts # Tailwind configuration & tokens
├── vite.config.ts # Vite build configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies & scripts
Exchange REST API → fetchKlines() → Memory Cache → IndexedDB
↓ ↑
Exchange WebSocket → Real-time updates → Cache Update → Chart Re-render
User Action → React State → Debounced Save → Supabase DB
↓
App Load → Supabase Query → React State → UI Render
getCachedKlines(symbol, interval)
│
├─ HIT (Memory) ──────────► Return immediately (~0ms)
│
├─ HIT (IndexedDB) ───────► Load to Memory, Return (~5ms)
│
└─ MISS ───────────────────► Fetch from Exchange API (~200ms)
└─► Store in IndexedDB + Memory
Each exchange has a dedicated adapter in src/lib/exchanges/:
| Exchange | File | REST | WebSocket | Spot | Futures |
|---|---|---|---|---|---|
| Binance | binance.ts |
✅ | ✅ | ✅ | ✅ |
| Bybit | bybit.ts |
✅ | ✅ | ✅ | ✅ |
| OKX | okx.ts |
✅ | ✅ | ✅ | ✅ |
| Coinbase | coinbase.ts |
✅ | ✅ | ✅ | ❌ |
| Kraken | kraken.ts |
✅ | ✅ | ✅ | ❌ |
| KuCoin | kucoin.ts |
✅ | ✅ | ✅ | ❌ |
| Gate.io | gateio.ts |
✅ | ✅ | ✅ | ✅ |
| MEXC | mexc.ts |
✅ | ✅ | ✅ | ❌ |
| HTX | htx.ts |
✅ | ✅ | ✅ | ❌ |
| Bitget | bitget.ts |
✅ | ✅ | ✅ | ✅ |
| Bitstamp | bitstamp.ts |
✅ | ✅ | ✅ | ❌ |
- Create
src/lib/exchanges/newexchange.ts - Implement the
ExchangeAdapterinterface fromtypes.ts - Register in
src/lib/exchanges/index.ts
Edge Functions run on Deno and are deployed automatically:
| Function | Path | Schedule | Description |
|---|---|---|---|
health-monitor |
/functions/v1/health-monitor |
Every 2 min (cron) | Checks 9 services, logs status, creates incidents, calculates downtime |
backtest-klines |
/functions/v1/backtest-klines |
On demand | Fetches historical kline data for backtesting |
chart-heartbeat |
/functions/v1/chart-heartbeat |
On demand | Tracks active chart sessions |
list-sessions |
/functions/v1/list-sessions |
On demand | Lists user's active auth sessions |
register-device |
/functions/v1/register-device |
On demand | Registers device info for session management |
revoke-session |
/functions/v1/revoke-session |
On demand | Revokes a specific auth session |
| Table | Purpose | RLS |
|---|---|---|
profiles |
User profiles (name, avatar, plan, socials) | Owner read/write |
user_roles |
Role assignments (admin, moderator, user) | Owner read only |
user_chart_state |
Per-user chart state (symbol, indicators, drawings) | Owner CRUD |
user_workspace |
Workspace settings (watchlists, layout, favorites) | Owner CRUD |
user_layouts |
Saved multi-chart layouts | Owner CRUD |
user_widget_layouts |
New UI widget positions & favorites | Owner CRUD |
user_exchange_keys |
Encrypted exchange API keys | Owner CRUD |
| Table | Purpose | RLS |
|---|---|---|
user_login_log |
Login timestamp tracking | Owner insert/read |
user_activity |
Last-seen heartbeat | Owner upsert/read |
user_active_tab |
Single-tab enforcement | Owner upsert/read |
session_devices |
Device fingerprinting per session | Owner CRUD |
security_alerts |
Security event logging | Owner insert/read |
| Table | Purpose | RLS |
|---|---|---|
feedback_tickets |
Bug reports & feature requests | Owner + anon insert |
support_messages |
Support tickets | Owner insert/read, admin all |
health_checks |
Service health check results | Public read, service insert |
status_incidents |
Outage/incident tracking | Public read, service CRUD |
daily_uptime |
Daily uptime percentages | Public read, service CRUD |
klines |
Cached market data (deprecated) | Public read/write |
| Function | Type | Purpose |
|---|---|---|
has_role(user_id, role) |
SECURITY DEFINER |
Check user role without RLS recursion |
handle_new_user() |
Trigger | Auto-create profile on signup |
get_user_sessions(user_id) |
SECURITY DEFINER |
List auth sessions with device info |
revoke_user_session(user_id, session_id) |
SECURITY DEFINER |
Delete auth session |
admin_get_stats() |
SECURITY DEFINER |
Dashboard statistics |
admin_get_all_profiles() |
SECURITY DEFINER |
All user profiles (admin only) |
admin_get_activity_stats() |
SECURITY DEFINER |
Online/login activity stats |
admin_toggle_block(user_id, blocked) |
SECURITY DEFINER |
Block/unblock user |
admin_update_plan(user_id, plan) |
SECURITY DEFINER |
Change user plan |
cleanup_old_health_checks() |
SECURITY DEFINER |
Purge health checks > 7 days |
cleanup_klines_retention(max_rows) |
SECURITY DEFINER |
Trim kline table |
Powered by Supabase Auth with multiple providers:
┌──────────────┐ ┌───────────────┐ ┌──────────────┐
│ Email/Pass │────▶│ Supabase │────▶│ Profile │
│ Google OAuth │────▶│ Auth │────▶│ Created │
│ Apple OAuth │────▶│ (JWT) │────▶│ (trigger) │
└──────────────┘ └───────┬───────┘ └──────────────┘
│
┌───────▼───────┐
│ Session │
│ Management │
│ (multi- │
│ device) │
└───────────────┘
- Guest mode: Browse charts without an account (limited features)
- Session enforcement: Single active tab per user (configurable)
- Device tracking: IP, User-Agent logged per session
- Plan-based limits: Feature gating via
planLimits.ts
| Route | Target Keywords |
|---|---|
/bitcoin-chart |
Bitcoin chart, BTC price chart |
/ethereum-chart |
Ethereum chart, ETH analysis |
/solana-chart |
Solana chart, SOL price |
/xrp-chart |
XRP chart, Ripple price |
/free-crypto-charts |
Free crypto charts online |
/crypto-trading-tools |
Crypto trading tools |
/crypto-screener |
Crypto screener |
/technical-analysis |
Technical analysis crypto |
/crypto-glossary |
Crypto glossary terms |
/best-free-crypto-charting-platform |
TradingView alternative |
12 in-depth SEO articles covering RSI, Fibonacci, MACD, Candlestick Patterns, Volume Profile, Bollinger Bands, Ichimoku Cloud, VWAP, Elliott Wave, Scalping, and more.
src/lib/seo.ts— Dynamic meta tags, Open Graph, JSON-LD schemaspublic/robots.txt— Crawl rulespublic/sitemap.xml— Full sitemap for all pages- Semantic HTML with single
<h1>per page - FAQ Schema + Breadcrumb Schema on key pages
Full global compliance framework:
| Page | Route | Coverage |
|---|---|---|
| Terms of Use | /terms |
Force Majeure, Export, AML, COPPA, Israeli Consumer Protection |
| Privacy Policy | /privacy |
GDPR, CCPA, Israeli Privacy Protection Law (§11-15) |
| Cookie Policy | /cookies |
Cookie categories & consent |
| Do Not Sell | /do-not-sell |
CCPA/CPRA + Global Privacy Control (GPC) |
| Data Processing | /data-processing |
DPA (GDPR + Israeli law) |
| Regulatory | /regulatory-compliance |
SEC, ISA, MiFID II, MiCA, OFAC |
| DMCA | /dmca |
DMCA takedown procedure |
| Acceptable Use | /acceptable-use |
Platform usage rules |
| Refund Policy | /refund-policy |
Refund terms |
| Disclaimer | /disclaimer |
Financial disclaimer |
| Accessibility | /accessibility |
WCAG compliance |
| Security | /security |
Security practices |
| Bug Bounty | /bug-bounty |
Vulnerability disclosure |
Cookie Consent Banner (CookieConsentBanner.tsx): GDPR-compliant with granular preferences (necessary, analytics, advertising).
// Supabase Connection (dual-URL fallback)
SUPABASE_URL_PRIMARY = 'https://api.vizionx.pro' // HTTPS (production)
SUPABASE_URL_SECONDARY = 'http://192.168.1.37:8000' // LAN (local dev)
SUPABASE_FALLBACK_TIMEOUT_MS = 2500 // Health-check timeout
// Keys
SUPABASE_ANON_KEY // Public anon key
SUPABASE_SERVICE_ROLE_KEY // Service role (edge functions only)
// App
APP_NAME = 'VizionX'
APP_VERSION = '1.0.0'| What | Where |
|---|---|
| Supabase URL/Keys | src/config.ts |
| Design tokens/colors | src/index.css + tailwind.config.ts |
| Add new route | src/App.tsx |
| Add new exchange | src/lib/exchanges/ |
| Add new indicator | src/lib/indicators/registry.ts |
| Add drawing tool | src/lib/drawingToolCategories.ts + src/lib/drawing/ |
| Plan feature limits | src/lib/planLimits.ts |
| SEO meta/schema | src/lib/seo.ts |
| Edge function | supabase/functions/<name>/index.ts |
| DB schema change | Write SQL migration for Supabase |
- Node.js 18+
- npm or bun
# Install dependencies
npm install
# Start dev server
npm run dev
# → http://localhost:8080
# Run tests
npm run test
# Build for production
npm run build- Install Supabase CLI and run
supabase start - Update
src/config.tswith your Supabase URL and keys - Run all migrations from
supabase/migrations/ - Deploy edge functions:
supabase functions deploy
| Variable | Description | Where Used |
|---|---|---|
VITE_SUPABASE_URL |
Supabase API URL (auto, Lovable Cloud) | Client |
VITE_SUPABASE_PUBLISHABLE_KEY |
Supabase anon key (auto) | Client |
SUPABASE_URL |
Internal Supabase URL | Edge Functions |
SUPABASE_ANON_KEY |
Anon key | Edge Functions |
SUPABASE_SERVICE_ROLE_KEY |
Service role key | Edge Functions |
SUPABASE_DB_URL |
Direct DB connection | Edge Functions |
Note: The project uses a custom Supabase client (
src/lib/supabaseClient.ts) that reads fromsrc/config.tsinstead of.envfor dual-URL fallback support.
- Frontend: Click Publish in Lovable editor
- Backend/Edge Functions: Deploy automatically on save
- Production URL:
https://vizionx.pro
- Publish the project first
- Go to Project Settings → Domains
- Add your custom domain and configure DNS
- Health Monitor edge function runs every 2 minutes
- Checks 9 services: Website, Backend, Data Feeds, Alerts, Indicators, Chart Engine, Watchlist, Drawing Tools, User Accounts
- Auto-creates incidents on failure, auto-resolves on recovery
- Calculates downtime in seconds
- Daily uptime aggregation
- Live at
/status - 90-day uptime timeline
- Real-time service status
- Incident history with details
- Response time metrics
Proprietary. All rights reserved. © VizionX 2024–2026.
Built with ❤️ by the VizionX team
vizionx.pro