React/Next.js Trading small App Development. React

I would someone to create 4 screens for me using React / [login to view URL] with other required tools. There are 3 Primary task in this project. 1. Create 4 UI screens as per Mockup given as attachment. 2. Populate the screen with hard coded data provided by me. 3. Once screen is submitted, Exposed API's should be called. There are 3 API's exposed. One to submit screen details. second one for get status and thrird to stop monitoring. Requirement Document PostTrade Software Application 1. Overview Product Name: PostTrade (aka Monitor My Trade) Objective: Build a mobile-friendly application that allows users to start, monitor, and stop an options trade (initial focus: Short Iron Condor) using a clean 3‑screen flow, based on the provided mockups. The system focuses on post‑trade monitoring, risk status visibility, and simple user actions. ________________________________________ 2. Scope In Scope • 3 mobile screens as per approved mockups • Hard‑coded data population for UI validation • Integration with backend APIs for Short Iron Condor (Start, Status, Stop) ________________________________________ 3. User Flow (High Level) 1. User selects strategy and enters trade details 2. User starts monitoring the trade 3. User views live trade status (Safe / Warning / Danger) 4. User can stop monitoring the trade ________________________________________ 4. Screen Design Requirements (3 Screens) Screen 1: Strategy Selection & Trade Setup Purpose: Allow user to select strategy and input trade parameters. UI Components: - Header with brand logo: PostTrade / Monitor My Trade - Strategy carousel/cards - Short Iron Condor (default selected) - Bull Put Spread (disabled / future) - Bear Call Spread (disabled / future) - Trade details form: - Instrument (Dropdown – hard coded) - NIFTY - BANKNIFTY - Expiry Date (Dropdown – hard coded) - Strike Price (CE) - Strike Price (PE) - LTP (CE) – read only - LTP (PE) – read only - Primary CTA button: - “Monitor My Trade” Behavior: - All dropdown values and LTPs are hard coded (Phase‑1) - CTA navigates to Screen‑2 and triggers Start API ________________________________________ Screen 2: Trade Monitoring Status (Dashboard) Purpose: Show current risk state of monitored trades. UI Components: - Header with Monitor New Trade button - Trade cards (Max 3 shown on screen): 1. SAFE (Green) 2. WARNING (Amber) 3. DANGER (Red) Each Trade Card Displays: - Instrument name (e.g., NIFTY) - Expiry date - Large, clear status badge (SAFE / WARNING / DANGER) - One‑line risk message - CE & PE strike summary Behavior: - Status values populated via hard‑coded data initially - Poll Status API at fixed interval (e.g., every 30 sec – configurable) - Clicking a trade navigates to Screen‑3 ________________________________________ Screen 3: Trade Detail & Control Purpose: Provide deeper visibility and stop control. UI Components: - Trade summary section - Current risk status (large visual indicator) - Risk reason text (e.g., Delta breach, Vega spike) - Action buttons: - Stop Monitoring Trade Behavior: - Stop button calls Stop API - On success, trade is removed from monitoring list ________________________________________ 5. Hard‑Coded Data Requirements (Phase‑1) Instruments • NIFTY • BANKNIFTY Sample Trade Values Field Value CE Strike 22500 PE Strike 21500 CE LTP 182.35 PE LTP 75.65 Expiry 25‑Jan‑2026 Status Samples • SAFE → “Range stable. No action needed” • WARNING → “Gamma increasing. Theta decay accelerating” • DANGER → “CE short side breached” ________________________________________ 6. API Integration Requirements 6.1 Start Trade Monitoring API Purpose: Register a trade for monitoring Trigger: - On click of Monitor My Trade button (Screen‑1) Request (Sample): { "strategy": "SHORT_IRON_CONDOR", "instrument": "NIFTY", "expiry": "25-JAN-2026", "ce_strike": 22500, "pe_strike": 21500, "ce_ltp": 182.35, "pe_ltp": 75.65 } Response: - Trade ID - Initial status ________________________________________ 6.2 Trade Status API Purpose: Fetch latest trade risk status Trigger: - Auto polling on Screen‑2 & Screen‑3 Response (Sample): { "trade_id": "T123", "status": "WARNING", "reason": "Vega increasing", "spot_price": 22640 } ________________________________________ 6.3 Stop Trade Monitoring API Purpose: Stop monitoring an active trade Trigger: - Click on Stop Monitoring Trade button Response: - Success / failure message ________________________________________ 7. Non‑Functional Requirements • Mobile‑first responsive design • Clean, readable typography • Status colors must be clearly distinguishable • API failure states handled gracefully ________________________________________ 8. Assumptions • Backend APIs are already available • Authentication not required in Phase‑1 • Single user context

Project ID: 40209443