Echelon: Elite Trading Simulator

Inspiration

The world of digital finance is often described as a "chaotic sea." For many, the barrier to entry isn't just lack of capital—it's fear. Tutorials are often dry, and real-world experience is expensive. I wanted to build a bridge: a "Financial Confidence Engine" that doesn't just teach you how to trade, but why the market moves. Inspired by high-fidelity terminal interfaces and RPG progression systems, Echelon was born to turn the anxiety of the "Red and Green" into a masterful quest for knowledge.

How I Built It

Echelon is built on a foundation of Raw Web Performance.

• Core Engine: A custom TypeScript-based game loop manages market ticks, news injections, and state updates every 1000ms.
• Visuals: I leveraged Vanilla CSS with a custom "CRT Retro" design system, using scanlines and glow effects to mimic a professional trading terminal.
• Data Visualization: Chart.js powers the real-time price action, dynamically shifting colors and gradients based on 24h price trends.
• State Management: A centralized state.ts acts as the single source of truth, ensuring that wallet balances, bit-held amounts, and XP are always in sync across the Tutorial, Hub, and Terminal.

The Math Behind the Pulse

I implemented a volatility-based price engine. The price update at each tick follows a basic stochastic movement: $$\Delta P = P_{current} \times (\text{random}(-v, v))$$ And the impact of news items is calculated as a direct multiplier to the asset's valuation: $$P_{new} = P_{old} \times (1 + \text{Impact}{news})$$ PnL (Profit and Loss) is tracked in real-time for all open echelons: $$PnL{USDT} = (P_{mark} - P_{entry}) \times \text{Amount}_{BTC}$$

What I Learned

Building Echelon was a deep dive into Asynchronous State Synchrony. I learned how to:

1. Manage DOM Updates efficiently: Without a framework like React, I had to optimize the renderer.ts to only repaint what changed, maintaining 60FPS even during high market volatility.
2. Game Design Psychology: I discovered that tying financial success to "XP" and "Ranks" (like Paper Handed to DeFi Legend) creates a much stronger educational loop than just showing a profit number.
3. Module Resolution: Solving the TypeScript allowImportingTsExtensions hurdle taught me the intricacies of modern bundler (Vite) module resolution.

Challenges I Faced

• The "Extension" Problem: A major hurdle was a TypeScript configuration mismatch where the compiler couldn't find my UI modules. I had to refactor the entire import system to include explicit .ts extensions.
• Z-Index Warfare: Coordinating a tutorial system that highlights specific elements while dimming the rest of the screen required careful CSS orchestration and absolute positioning logic.
• Balancing Realism and Fun: Real markets can be slow. I had to "compress" time so that 8 seconds in Echelon feels like 8 hours of market research, ensuring users stay engaged while learning.

The Future of Echelon

• Multi-Asset Support: Expanding beyond BTC/USDT to include synthetic assets and high-yield protocols.
• Social Echelons: Implementing a global leaderboard where users can compare their "Net Worth" ranks.
• AI Mentors: Integrating more dynamic dialogue that reacts specifically to a user's trading mistakes.

Built With

• dicebear
• html5
• languages:-typescript
• lucide
• node.js-libraries:-chart.js-(real-time-data-viz)
• vanilla-css-frameworks/tools:-vite-(frontend-tooling)