Detailed Development Prompt: SMASH FX EA Web Application (MT5 Live Trading) 1. Project Overview Build a production-ready web application that allows users to securely log into their MetaTrader 5 (MT5) live trading account and execute an automated EMA crossover strategy. The application consists of two primary pages: Login Page: Authenticates user's MT5 account credentials against the broker's server. Dashboard Page: Provides strategy configuration inputs, a start button, and a live countdown of trades executed. Important: This system is intended for real money trading on live MT5 accounts. All components must be robust, secure, and handle real trade execution via a server-side MT5 connection. Theme: "Ghost Purple" – a dark, neon purple aesthetic with glowing elements and subtle animated dust particles for a futuristic trading feel. 2. Technology Stack (Recommended) Layer Technology Frontend React (or Vue.js) with TypeScript, Vite, TailwindCSS for styling Backend Node.js + Express (or Python FastAPI) MT5 Bridge MetaTrader5 Python package (if using Python backend) or a Node.js wrapper like node-mt5 (requires careful implementation) Real-time WebSockets (Socket.IO) for trade countdown and status updates Database PostgreSQL or MongoDB for user session persistence (optional but recommended for production) Deployment Docker containers, hosted on a VPS with Windows (for MT5 terminal) or Linux with Wine 3. Frontend Requirements 3.1 Login Page (Existing Design Enhancement) The provided HTML file (Login - SMASH FX EA.html) is the starting point. It must be converted into a functional React/Vue component with the following adjustments: Preserve the existing visual design (gradient background, glassmorphism cards, error modal, AI chat button). Add dust particle animation in the background (e.g., using particles.js or a custom canvas with glowing purple dots moving slowly). Enhance form submission logic: Send credentials (account_number, password, server) to backend endpoint /api/auth/login. Handle loading states (spinner on button). On success: store authentication token/session and redirect to /dashboard. On failure: display the existing error modal with backend-provided message. Implement real server validation (the current HTML only has a mock fetch). Ensure the server dropdown and custom server input work together correctly. 3.2 Dashboard Page (New) After successful login, the user is redirected to the trading dashboard. Layout & Theme: Maintain the same "Ghost Purple" theme: dark gradient background (#0f172a to #581c87), glassmorphism cards, neon purple glow effects. Add floating dust particles across the entire dashboard. Components: Header: Logo and "SMASH FX EA" title. User info: account number (masked except last 4 digits) and broker server. Logout button. Strategy Configuration Card: Input fields: Symbol (dropdown populated with symbols available on the connected MT5 account, fetched from backend). Lot Size (numeric input, step 0.01, min 0.01). Number of Trades (integer input, min 1, max 100). Start Trading Button: Initiates the EMA crossover strategy. Stop/Reset Button: Allows user to stop the automated trading. Live Trade Countdown & Status Panel: Display "Trades Executed: X / Y" with a progress bar. Show real-time status messages (e.g., "Waiting for EMA crossover signal...", "Trade #3 executed at 1.2345"). List recent trades with timestamp, action (BUY/SELL), price, lot size. EMA Crossover Visualization (Optional but Nice): A small chart (using lightweight charts like Chart.js or TradingView Lightweight Charts) showing H1 candlesticks with EMA lines (e.g., EMA 9 and EMA 21) and markers for executed trades. Frontend Logic: On page load, fetch available symbols from backend. Use WebSocket connection to receive: Trade execution count updates. Real-time status messages. Errors or warnings. When "Start Trading" is clicked, send configuration to backend endpoint /api/trade/start. Implement a confirmation dialog if user tries to navigate away while trading is active. 4. Backend Requirements 4.1 Authentication & Session Management Endpoint: POST /api/auth/login Accepts account_number, password, server. Server-side MT5 Login Attempt: Initialize MT5 connection using provided credentials. If login successful, retrieve account info (balance, equity, leverage, symbols). Store the MT5 connection in a session-specific pool (see section 4.2). Return a JWT token or session cookie containing a session ID. If login fails, return appropriate error message (e.g., "Invalid credentials", "Server not found", "Connection timeout"). Endpoint: POST /api/auth/logout Terminate MT5 connection associated with the session. Clear session data. Session Management: Since MT5 connections are stateful and limited, use a connection manager that maintains a mapping of sessionId -> MT5 connection object. Implement automatic connection cleanup on session expiry (e.g., after 30 minutes of inactivity). 4.2 MT5 Integration (Server-Side) Technology: Python with MetaTrader5 package is recommended due to its maturity. If Node.js is preferred, consider using a child process to run Python scripts or use a lightweight bridge like mt5linux (requires Wine on Linux). MT5 Connection Lifecycle: When a user logs in, the backend calls mt5.initialize() and mt5.login(). On successful login, keep the connection alive in a thread-safe pool. All subsequent requests for that user will reuse the same connection. Symbol & Account Data Fetching: GET /api/account/info – returns balance, equity, leverage, currency. GET /api/symbols – returns list of symbols available for trading (filter by those with at least H1 data). 4.3 Trading Engine (EMA Crossover Strategy) Core Logic: Timeframe: H1 (fixed as per requirement). EMAs: Use two EMAs (e.g., Fast EMA = 9, Slow EMA = 21) – these should be configurable via environment variables, not user input. Signal Generation: BUY: Fast EMA crosses above Slow EMA. SELL: Fast EMA crosses below Slow EMA. Trade Execution Loop: Once started, the backend will: Fetch latest H1 data for the selected symbol. Check for crossover on the current closed candle. If a new crossover is detected, place a market order with the specified lot size. Repeat until the requested number of trades is reached or user stops. Important: The strategy must only trade on new crossover signals, not on every tick. Endpoint: POST /api/trade/start Accepts: symbol, lot_size, num_trades. Validate that user's MT5 connection is active. Launch the strategy as an asynchronous background task (e.g., using Celery, BullMQ, or a simple asyncio task) associated with the user session. Return an immediate acknowledgment with a jobId. Endpoint: POST /api/trade/stop Cancel the running strategy for the user. Real-time Updates via WebSocket: Use Socket.IO to push events to the frontend: trade_executed: { count, total, action, price, time } status: informational messages error: fatal errors that stop the strategy completed: all trades executed Trade Execution Details: Use mt5.order_send() with proper request structure. Set slippage and magic number for identification. Log every trade attempt (success/failure) to a database table trades with user reference, timestamp, symbol, lot, price, action, and result. 4.4 Security Considerations Never store MT5 passwords in plaintext. Use encryption (e.g., AES-256) with a key stored in environment variables. Rate limiting on login attempts to prevent brute-force. CORS properly configured to allow only frontend origin. HTTPS mandatory for all communications. Input validation and sanitization on all user-provided parameters. Use environment variables for sensitive config (broker API endpoints, encryption keys). 5. Deployment & Infrastructure Server Requirements: Windows Server 2019/2022 or Linux with Wine (for running MT5 terminal). MT5 terminal installed and logged in with a demo account (for initial testing) but capable of live trading. Containerization: Create a Dockerfile for the backend (Python or Node.js). For Windows deployment, consider using a Windows container or run the MT5 terminal separately and connect via mt5.initialize(path=...). Environment Variables Example: text MT5_TERMINAL_PATH=C:\Program Files\MetaTrader 5\terminal64.exe ENCRYPTION_KEY=... JWT_SECRET=... ALLOWED_ORIGIN=https://app.smashfx.com 6. Additional Features (Optional but Recommended) Risk Management: Add a stop loss and take profit input fields (optional for user). Trade History: Page to view past trades executed by the EA. Email/SMS Alerts: Notify user when trading starts, stops, or on critical errors. Demo Mode: Allow users to test the strategy on a demo account without real money risk (this can be a separate deployment). 7. Deliverables Expected from Developer Fully functional web application with two pages (Login + Dashboard) matching the provided design theme. Backend API with proper authentication, MT5 integration, and EMA crossover strategy. WebSocket real-time updates. Comprehensive documentation on setup, environment variables, and deployment. Source code in a Git repository with clear commit history. 8. Important Notes The system must not execute any trade before user explicitly clicks "Start Trading". The login step is mandatory; dashboard cannot be accessed without successful MT5 authentication. The backend must handle multiple concurrent users with isolated MT5 connections. All trade execution must be logged for audit purposes. The application must be resilient to network interruptions and MT5 disconnections – implement automatic reconnection logic with user notification. This prompt provides a clear, actionable roadmap for building the SMASH FX EA web app. By following these specifications, a development team can deliver a professional-grade trading platform that meets the user's vision.