stone-trading

As a frontend developer, I want to implement the Market Preview page based on the existing JSX design (Market Preview v1) so that guests can browse limited live market data without registering. The page includes: NavBar with Sign Up/Login CTAs, grid of market cards (price, 24h change, sparkline), trend charts, a 'Browse Trends' section, and a prompt banner encouraging account creation. Links from Landing page. Leads to Signup or Login. Responsive: 1-column card layout on mobile.

As a frontend developer, I want to implement the Login page based on the existing JSX design (Login v1) so that registered users and admins can sign in securely. The page includes: centered card layout, email/password fields, 'Forgot Password' link, primary CTA 'Sign In' button, link to Signup page, and Stone-Trading branding. On success, users are redirected to Dashboard; admins to Admin Dashboard. Responsive: full-width card on mobile.

As a frontend developer, I want to implement the Signup page based on the existing JSX design (Signup v1) so that new users can create an account. The page includes: centered card layout, fields for name/email/password/confirm password, terms & conditions checkbox, primary CTA 'Create Account', link back to Login, and Stone-Trading branding. On success, redirect to Login page. Responsive: full-width card on mobile.

As a frontend developer, I want to implement the Landing page based on the existing JSX design (Landing v2) so that guests and users are greeted with the full Stone-Trading experience. The page includes: NavBar (sticky, with logo, nav links, Login/Sign Up CTA), Hero section (full-viewport, animated background, headline + subheadline + CTA buttons), InteractiveGlobe section (3D rotating globe with glowing region markers, color shifts for bullish/bearish, hover tooltips with market stats), MarketPreview strip (live market cards for indices/pairs), FeatureHighlights grid (4-6 cards), TradingTools split section (TradingView mock chart + benefits list), MarketTrends (trending/gainers/losers cards), SecurityTrust badges, CallToAction banner, and Footer. Links to Login and Signup pages. Implements the Interactive Trading Universe signature concept.

As a frontend developer, I want to implement the Dashboard page based on the existing JSX design (Dashboard v1) so that logged-in users can view a personalized market overview. The page includes: TopBar with user info, Sidebar navigation (Dashboard, Charts, Trade, Profile), WelcomeBanner, StatsCards (portfolio value, daily P&L, open positions), ActivityChart (market overview mini-chart), RecentTrades list, QuickActions (Trade Now, View Charts), Notifications panel, and Footer. Links to Charts, Trade, and Profile pages. Responsive: sidebar collapses to hamburger drawer on mobile.

As a frontend developer, I want to implement the Admin Dashboard page based on the existing JSX design (Admin Dashboard v1) so that admins can view platform overview and monitor users. The page includes: TopBar with admin profile, Sidebar (Overview, Monitor Users, Manage Trades, Update Content), StatsCards (total users, active trades, revenue, alerts), UserActivityTable with search/filter, SystemHealthIndicators, RecentAlertsPanel, and QuickAction buttons. Linked from Login (admin role). Leads to Trades and Content pages. Responsive: sidebar collapses to drawer on mobile.

As a backend developer, I want to implement user registration and login API endpoints using FastAPI so that users and admins can authenticate securely. Includes: POST /auth/register (name, email, password, role), POST /auth/login (returns JWT), POST /auth/logout, GET /auth/me (current user profile), password hashing with bcrypt, JWT token generation and validation middleware, and role-based access control (user vs admin). Supports Login and Signup pages.

As a frontend developer, I want to implement the Content page based on the existing JSX design (Content v1) so that admins can update platform content. The page includes: Admin Sidebar, ContentList (page sections, banners, announcements), inline rich-text editor for each content block, image upload support, publish/draft toggle, save/revert actions, and a preview pane. Linked from Admin Dashboard. Responsive: editor takes full width on mobile, preview collapses below.

As a frontend developer, I want to implement the Charts page based on the existing JSX design (Charts v1) so that users can analyze market trends using TradingView integration. The page includes: full-width TradingView embedded chart widget, symbol selector, timeframe buttons (1m, 5m, 1H, 1D, 1W), technical indicator toggles, a side panel with market stats and watchlist, and a CTA to execute a trade. Linked from Dashboard. Leads to Trade page. Responsive: chart takes full-width on mobile, side panel collapses below chart.

As a frontend developer, I want to implement the Trade page based on the existing JSX design (Trade v1) so that users can execute trades directly from the platform. The page includes: NavBar/Sidebar, instrument selector, order form (Buy/Sell toggle, quantity input, order type: Market/Limit/Stop, price field, AED currency display), live price ticker, order summary panel, confirmation modal, and recent trade history table. Linked from Charts and Dashboard. Responsive: form stacks vertically on mobile, full-width buttons.

As a frontend developer, I want to implement the Trades page based on the existing JSX design (Trades v1) so that admins can manage and update trades. The page includes: Admin Sidebar, TradesTable (trade ID, user, instrument, type, quantity, price, status, actions), filters (by date range, status, instrument), pagination, inline Edit/Cancel actions, and a TradeDetailModal for updating trade details. Linked from Admin Dashboard. Responsive: table scrolls horizontally on mobile, action buttons stack.

As a backend developer, I want to implement market data API endpoints using FastAPI so that the Market Preview, Dashboard, and Charts pages can display live data. Includes: GET /markets (list of instruments with price, 24h change, sparkline data), GET /markets/{symbol} (detailed stats), GET /markets/trending (top gainers, losers, trending), WebSocket endpoint /ws/markets for real-time price streaming, and integration with an external market data provider or mock data layer.

As a frontend developer, I want to implement the Profile page based on the existing JSX design (Profile v1) so that users can manage their account details. The page includes: Sidebar navigation, profile avatar with upload option, personal info form (name, email, phone), account settings (AED currency, timezone, notification preferences), security section (change password, 2FA toggle), and save/cancel actions. Linked from Dashboard. Responsive: full-width stacked form on mobile.

As a backend developer, I want to implement admin management API endpoints using FastAPI so that admins can monitor users and manage platform operations. Includes: GET /admin/users (list all users with activity stats, search/filter), GET /admin/users/{id} (user detail), GET /admin/stats (platform KPIs: total users, active trades, revenue), GET /admin/trades (all trades with filters), PUT /admin/trades/{id} (admin update trade), GET /admin/system-health (uptime, error rates), all endpoints protected by admin role middleware. Supports Admin Dashboard and Trades pages.

As a backend developer, I want to implement trade execution API endpoints using FastAPI so that users can place and manage trades. Includes: POST /trades (place order: instrument, type, quantity, order_type, price), GET /trades (user's trade history with filters), GET /trades/{id} (trade detail), PUT /trades/{id} (update/cancel trade), DELETE /trades/{id} (cancel), input validation, AED currency handling, and trade status management (pending, open, closed, cancelled). Supports Trade and Dashboard pages.

As a backend developer, I want to implement content management API endpoints using FastAPI so that admins can update platform content. Includes: GET /content (list all content blocks), GET /content/{id} (single block), PUT /content/{id} (update text/images/status), POST /content (create new block), DELETE /content/{id} (remove block), POST /content/upload-image (image upload to storage), draft/publish status toggle. Supports the Content Management page.

As a backend developer, I want to implement user profile management API endpoints using FastAPI so that users can view and update their account details. Includes: GET /profile (current user info), PUT /profile (update name, phone, timezone, notification prefs), PUT /profile/password (change password with old password verification), POST /profile/avatar (upload avatar image), PUT /profile/2fa (enable/disable 2FA). Supports the Profile page.

As a frontend developer, I want to integrate the TradingView Lightweight Charts or TradingView Widget into the Charts page so that users can view real-time trading charts with full technical analysis capabilities. Implementation includes: embedding the TradingView chart widget, wiring up symbol selector to dynamically change the chart instrument, configuring timeframe controls (1m, 5m, 1H, 1D, 1W), enabling technical indicators panel, and connecting the Trade page symbol to pre-load the chart for the selected instrument.

As a backend developer, I want to implement two-factor authentication (2FA) so that users can secure their accounts with an additional verification step. Includes: TOTP-based 2FA using PyOTP, QR code generation for authenticator apps, API endpoints to enable/disable 2FA, 2FA verification step in the login flow, and frontend integration on the Profile page security section and Login page 2FA prompt.