GLOBAL FX ALLIANCE

🚀 Launch ready  ·  Live: https://globalfxalliance.io  ·  also at https://www.globalfxalliance.io and https://global-fx-alliance.vercel.app

The Global Community for Forex Traders — marketing site + member dashboard.

Stack: Next.js 14 (App Router) · TypeScript · Tailwind CSS · lucide-react · TradingView Lightweight Charts. Dark theme only.

Real OHLC via Yahoo Finance and a real news wire via ForexLive / Investing.com / FXStreet RSS — both free, no API key, and both with a labelled fallback. The chart never passes synthetic candles off as history, and the wire never dresses curated copy up as live headlines.

Cross-Broker Journal Analytics — upload an MT4/MT5 statement from any broker and see your worst hour, worst pair, session win rates, hold-time asymmetry and revenge-sizing flags. Parsed entirely in the browser; the statement never leaves the device. Pattern Radar — a continuous scan for engulfing candles, RSI divergence, S/R tests and fair-value-gap retests over the same real candles the chart draws. AI Tools — a market assistant that reads your imported statement, the pattern scanner, live quotes and the session clock, with slash commands like /explain last loss, /my best hour and /why gold moved. Conversation persists locally. Chart Snap — drop a screenshot from any platform, name the instrument, and get a worked plan built from live candles, real auto-drawn levels and your own statement. The image is never parsed, stored or uploaded.

GFXA Terminal — the Market Analysis tab is a Bloomberg-style workstation: a pro candlestick chart that draws its own support, resistance, trendline and fair-value gaps, and a four-agent analyst (technical · fundamental · flow · risk) that reads the same numbers the chart is showing. All indicator maths is local and dependency-free; live quotes come from free upstreams with a seeded fallback that never fails.

Routes

Route	What it is
/	Landing page — hero, pillars, global community map, member benefits, journey, ecosystem, CTA
/dashboard	Member dashboard — market pulse, EUR/USD intelligence, AI assistant, community, leaderboard

Getting started

npm install
npm run dev

Runs on http://localhost:3210.

npm run build && npm start

Deploying to Vercel

Zero config — import the repo and Vercel detects Next.js. Both routes are statically prerendered, so there is nothing to configure and no environment variables to set.

Navigation map

Every navbar and footer destination is declared once in src/lib/links.ts, so the navbar, the footer and the scroll-spy cannot drift apart. In-page targets are plain #anchor links — no route change — and section[id] { scroll-margin-top: 80px } in globals.css keeps headings clear of the sticky navbar.

Navbar	Target	Active state watches
Community	#global-community	global-community
Academy	#what-members-get	what-members-get
Intelligence	#market-intelligence-preview	market-intelligence-preview
Events	#ecosystem	ecosystem
Chapters	#global-community + pill highlight	chapters-preview

Community and Chapters both scroll to the world map, so Chapters additionally dispatches gfxa:highlight-chapters, which briefly rings the chapter pills, and its active state is keyed to the chapter grid immediately below.

Section order: #why → #market-intelligence-preview → #global-community → #chapters-preview → #what-members-get → #academy-preview → #pro-trader → #ecosystem → #blog-preview.

Footer: About → #why, Membership → #pro-trader, Chapters → #chapters-preview, Events → #ecosystem, Resources → #what-members-get, Market Insights → #market-intelligence-preview, Trading Tools → /dashboard#economic-calendar, AI → /dashboard#ai-assistant, Blog → #blog-preview. Social links are external and open in a new tab with rel="noopener noreferrer".

CTAs carry a ?ref= param so entry points are attributable: hero, nav, login, final-cta, intelligence, academy, chapter-<code>, blog, footer-tools, footer-ai.

The navbar's sticky background and its active-link state both run on IntersectionObserver rather than a scroll listener — no per-frame work, and it keeps reporting correctly in embedded webviews that throttle scroll events.

Dashboard tabs

/dashboard is a single route driven by ?tab=, so every panel is shareable and back/forward work, but Next's client router swaps panels without a document navigation. Tabs are declared once in src/lib/tabs.ts; the sidebar, the mobile bar and the content switch (src/components/dashboard/panels/index.tsx) all read from it, so a tab cannot exist without a panel.

Group	Tabs
Main	Dashboard · Market Overview · Market Analysis · Market News · Watchlist
Community	Community · Discussions · Academy · Challenges · Global Chapters
Tools	Trading Calculator · Economic Calendar · Trading Journal · AI Tools
Account	My Profile · Membership · Settings

Deep links: ?tab=<slug>, plus &pair=<symbol> to preselect an instrument — a card on Market Overview links straight to ?tab=market-analysis&pair=XAU/USD.

What actually works

• Market Analysis — pair pills and 1D/1W/1M/3M/1Y both regenerate the chart, the technicals, the levels and the fundamental panel from src/lib/market.ts.
• Trading Calculator — real arithmetic for position size, pip value, profit and margin, including the conversion when the quote currency is not the dollar. 10,000 at 1% risk with a 25-pip stop on EUR/USD gives 0.40 lots.
• Trading Journal — add and delete trades; P/L, win rate, profit factor and the equity curve are all computed from the entries, not hardcoded.
• AI Tools — keyword routing over the app's own data (src/lib/ai.ts). No model and no network, but answers quote the live quotes, technicals and calendar, so they never contradict the rest of the dashboard. It declines to give signals.
• Academy — lesson completion drives per-track and overall progress.
• Watchlist / Chapters / Challenges / Settings / Community likes — all persist.

Persistence

usePersistentState in src/lib/storage.ts backs the watchlist, journal, academy progress, chat history, chapter joins, challenge entries, post likes and settings. Everything is localStorage, wrapped in try/catch — storage throws in private mode and when a browser blocks site data, so reads fall back to the default rather than crashing a panel.

Two things the hook gets deliberately right: the first render always returns the supplied default so server and client markup match, and the write-back effect is gated on a hydrated state flag rather than a ref. A ref flipped inside the load effect is already true when the write effect runs in the same commit, which would write the default back over real saved data on every mount.

Design system

Defined once in tailwind.config.ts and src/app/globals.css.

Token	Value
Background	#070A12 → #0A1931 gradient
Primary	Electric Blue #2A7FFF
Success	Trading Green #00D094
Danger	#FF4D4D
Text	#E6EAF2 primary, #8A93A8 secondary
Borders	rgba(255,255,255,0.08)
Glass (.glass)	rgba(16,22,38,0.8) + 20px backdrop blur + hairline border
Glow (shadow-glow)	0 0 40px rgba(42,127,255,0.15)
Type	Inter, tight tracking on headlines

Icons are lucide-react; the UI carries no decorative emoji (country flags in the community feed, chapter pills and leaderboard are content, not decoration).

Notable implementation details

src/lib/geo.ts — the dotted world map used in the hero, the community split and the market-pulse backdrop. Land is a union of simplified [lon, lat] polygons (minus holes for Hudson Bay, the Caspian and the Baltic) rasterised into a dot grid and emitted as a single SVG path, so the densest variant costs one DOM node rather than a few thousand <circle>s. Also exports the chapter hubs and the arc generator for the glowing connection lines.

src/components/brand/LogoMark.tsx — the emblem as vector. /public/logo.png is the supplied master artwork (used for OG/social and as the Apple touch icon) but it carries a baked-in dark backdrop, so on glass and at small sizes the app renders this scalable mark instead. The globe's continents are the Americas projected orthographically from the same geo.ts polygons. Gradients live in one document-level <LogoDefs /> sprite mounted in the root layout — per-instance ids would desynchronise between server and client render and trip hydration.

src/components/ui/PriceChart.tsx — custom SVG area chart (Catmull-Rom smoothed, horizontal grid only, hover crosshair and tooltip) rather than a chart library, so the grid, ticks and crosshair match the design system exactly and ship no extra bytes.

src/lib/data.ts — all mock market data. Series are generated from a seeded PRNG at module scope and detrended onto their quoted close, so server and client render identical markup and prices land exactly on EUR/USD 1.1742, GBP/USD 1.3521, USD/JPY 147.42, XAU/USD 2648.90.

Content disclaimer

The platform publishes education, research and community commentary. Nothing in the UI is financial advice, and the leaderboard ranks contribution and reputation — never claimed profits. That framing is deliberate and is repeated in the footer, the AI assistant and the sentiment panel.