Part 01
Architecture Overview
Shell Architecture Overview
React Frontend (Chart.js / Recharts)
|
v
API Layer (fetch from TickAtlas)
|
v
TickAtlas REST API
- /v1/indicator (RSI, MACD, BB...)
- /v1/ohlc (candlestick data)
- /v1/summary (rule-based market analysis)Patterns
Dashboard Components
Symbol Selector Dropdown to switch between EURUSD, GBPUSD, XAUUSD, etc.
Candlestick Chart OHLCV data rendered with react-financial-charts or lightweight-charts
Indicator Panel RSI gauge, MACD histogram, Bollinger Band overlay on the chart
Market Summary Card Natural language market analysis from the /v1/summary endpoint
Signal Alerts Real-time buy/sell signal notifications based on indicator confluence
Timeframe Tabs Switch between M15, H1, H4, D1 views instantly
Patterns
Key API Calls
GET /v1/ohlc?symbol=EURUSD&timeframe=H1&limit=100 Fetch 100 candles for the chart
GET /v1/multi?symbols=EURUSD&indicators=RSI_14,MACD_main,BB_upper,BB_lower&timeframe=H1 Fetch all indicators in one call
GET /v1/summary?symbol=EURUSD&timeframe=H1 Rule-based market analysis for the summary card
Production checklist
Recommended Libraries
1
lightweight-charts by TradingView — Best for candlestick charts
2
Recharts — React charting for indicator overlays
3
SWR or React Query — Data fetching with auto-refresh
4
Tailwind CSS — Rapid UI styling
Before you go live
Production hardening
The code above is the happy path. These are the concerns that decide whether it survives contact with a real deployment.
1
Keep the key server-side. The API key authenticates with the X-API-Key header and must never reach a browser bundle. Proxy it, or use a public widget key, which is domain-scoped and revocable. Authentication
2
Handle 429 before you need to. Rate limits are per key and per minute. Back off on 429 rather than retrying immediately, and read the X-RateLimit-* headers on every response. Rate limits
3
Branch on the error code, not the message. Errors carry a stable machine-readable code; the human-readable text can change. Codes were unified in v3.15. Error handling
4
Expect gaps, and do not invent values. Markets close, feeds stall, and a retention window can reject a request outright. Surface an explicit unavailable state rather than substituting a zero or the last known price. Troubleshooting
5
Cache what you poll. Responses are already cached briefly upstream, so polling faster than the data changes spends credits without improving freshness. Cache on your side and poll on the cadence your timeframe actually updates. Pricing and credits
6
Watch retention per timeframe. History depth is set per timeframe, never per plan, so a request that works on D1 can fall outside the window on M1. Check the published windows before backfilling. Timeframes
7
Rotate keys and scope them. Issue a separate key per deployment so one can be revoked without taking the others down, and rotate on a schedule rather than after an incident. Authentication
8
Log the request, not the key. Record endpoint, parameters, status and latency so a failure is reproducible. Never log the key itself, and scrub it from error reports.
Reference map
Related Guides
Everything this guide touches, linked directly — so it never dead-ends.
Guide How to Build a Trading Bot Step-by-step Python bot with RSI + MACD strategy Open Guide Build a TradingView Alternative Build your own charting solution with our API Open Docs API Quick Start Open Indicator Relative Strength Index (RSI) The Relative Strength Index (RSI) is a momentum oscillator that measures the speed and magnitude of price movements on a scale from 0 to 100. Open