Pattern Forge

Choose a market, inspect a candle pattern and rewind the chart. At every point, the reading uses only prices that were already visible—not what happened next.

React · TypeScript · Next.js · WebSockets

The problem

When reviewing a market, it is easy to let later prices influence an earlier decision. I wanted to inspect what an indicator could actually have shown at a chosen point in time.

My contribution

I built the market controls, data validation, replay calculations, candle API and connection handling. TradingView Lightweight Charts renders the chart; I did not build that charting library.

Skills this work used

Tools and what they did in this project
Skill	Where it was used
React and TypeScript	Workspace controls, loading and error states, replay slider and timeframe compare.
Next.js candle API	Validates markets and closed candles before anything reaches the chart.
WebSockets	A separate live mid-price with heartbeat and reconnection. Not the replay source.
PostgreSQL	Local/CI persistence of closed candles and ingest runs. The public demo does not serve that database.
Docker and GitHub Actions	Image build, tests and a restart check that the stored rows survive.

Try it step by step

Choose a market and interval. Public Bitcoin loads a closed-candle snapshot; Gold and the other recorded markets use dated files.
Choose Candlestick patterns and Bullish engulfing. Inspect the highlighted candle pair; a shape is not a prediction of the next price.
Switch to Trend & location for Murphy-inspired context. Add supporting indicators only if you want them; drawing is optional.
Rewind a recording and step forward. Later candles stay out of indicator calculations.
For an hourly recording, select 4h and Preview forming 4h. The amber body uses only closed hourly input; it may change before the four-hour close.
Export the selected closed-candle prefix. Provisional bodies never enter the export. Refresh reloads public candles; it does not turn an archive into a live feed.

What depends on what

Components, dependencies and responsibility
Component	Depends on	Responsibility
React workspace	Candle API and local analysis functions	Selection, chart controls and loading/error states.
Next.js candle API	Fixed Hyperliquid HTTP endpoint	Validates supported markets and closed candles; shares concurrent requests and caches successful snapshots in process memory.
Live quote connection	Hyperliquid public WebSocket	A separate mid-price with receipt time, heartbeat and reconnection. No trading account.
Recorded replay	Bundled OHLC JSON and the replay cursor	Only the selected prefix reaches indicators and timeframe aggregation.
Chart rendering	TradingView Lightweight Charts	Candles, overlays and chart interaction.
Python ingester (local/CI)	Validated public candles or a recorded fixture, psycopg and PostgreSQL	Writes closed candles; records each attempt and its fetch/write timing.

How the data was organised

Closed candles and ingest runs can be stored in PostgreSQL locally and in CI. The public demo uses recording files and process memory; it does not serve that database.

Stored records, keys and responsibility
Record	Depends on	Responsibility
candles table	Primary key (symbol, interval, open_time)	Upserts OHLCV and ingestion time. Revisions replace the row; this is not immutable history.
ingest_runs table	Each ingestion attempt	Stores source, counts, timing and errors in a separate transaction from candle writes.
Stored-candle API (local/CI)	PostgreSQL through the pg client and DATABASE_URL	Reads saved candles into the existing chart. An empty store returns 404; an unavailable database returns 503.
Public demo storage	Recording files and temporary process memory	No user accounts and no hosted PostgreSQL on Vercel.

Implementation, step by step

Define a candle format with timestamps and OHLC values.
Reject malformed, conflicting and still-forming candles at the boundary.
Calculate indicators from the selected prefix, then render the result in React.
Keep the streaming mid-price separate from historical calculations.
Test malformed inputs, partial upstream failures, replay causality and connection cleanup; build and run the Docker image in CI.

Run the public code locally

npm ci
npm test
npm run build
npm start

Use the repository README for environment setup and supported versions.

Limits and unfinished work

The quote timestamp is local receipt time, not an exchange-latency benchmark. Public candles update on Refresh. The oil and other archive datasets are recordings. The repository also includes PostgreSQL persistence for local Docker and CI; the public Vercel demo does not serve that database. The README explains ingestion, duplicate handling and restart checks. This is a read-only analysis tool, not a trading terminal or a profitable strategy.