Skip to content

implementation_plan.md

Latest commit

 

History

History
57 lines (45 loc) · 3.99 KB

implementation_plan.md

File metadata and controls

57 lines (45 loc) · 3.99 KB
Raw

AI Market Intelligence Assistant ("AIRA") Implementation Plan

A hackathon-winning, cinematic, story-driven AI Stock Market Intelligence platform. AIRA provides a highly interactive and stunning visual experience using React, Tailwind CSS, Framer Motion, Zustand, and Plotly.

User Review Required

Important

I have incorporated your enhancements for the Guided Demo Mode, AI Battle Mode, and the Fallback Experience into the plan.

Unless you specify otherwise, I will:

  1. Initialize the Vite + React app directly in c:\SRTTC\Economic Times Hackathon.
  2. Use JavaScript + Tailwind CSS v3 to prototype quickly and avoid build friction.
  3. Use dummy data featuring RELIANCE and TCS for the new Battle Mode.

Please confirm if you are ready for me to execute this plan!

Proposed Changes

We will build the application in carefully sequenced phases, breaking down the complex cinematic flow into manageable components, strictly avoiding reliance on a live backend.

1. Project Setup and Design System

  • Initialize a React app using Vite (npx create-vite).
  • Core dependencies: tailwindcss, framer-motion, lucide-react, zustand, plotly.js-dist-min, react-plotly.js.
  • Custom Animations & Colors (tailwind.config.js): Setup deep space neon colors (Purple, Bullish Green, Bearish Red) and pulsing/shimmering keyframes.
  • Global State (useStore.js): Manage currentView, demoModeActive, aiMode (Beginner/Pro), and activeStocks.

2. Guided Demo & Cinematic Entry (Views)

  • Hero Screen: Fullscreen animated gradient with floating particles, live NSE ticker, and preloaded animations for instant visual feedback.
  • Guided Demo Trigger: Two CTAs - "Start AI Analysis" (manual) and "Play Demo" (automated).
    • The Demo Mode will automatically step through the flow: Hero -> AI Thinking -> Dashboard -> Decision -> Verdict on a timed sequence.
  • Reality Shift Transition: Screen dims, an "AI Orb" expands, and step-by-step thinking text ("Checking RSI...") is displayed. Fake a 2-3s AI delay even if data is hardcoded to sell the "thinking" illusion.

3. Smart Dashboard & Fallback Experience

  • Layout: Premium grid-based glassmorphic layout.
  • Skeleton Shimmers: High-quality skeleton loaders to avoid blank screens while the simulated API delays occur.
  • KPI Row: Dynamic RSI, Trend Direction arrows, and animated numerical counters for Confidence Score.
  • Market Mood & Risk: Visual gauges transitioning between Fear/Greed.
  • Interactive Chart: Plotly.js candlestick chart wrapped with smooth rendering and "AI detected breakout here" annotations.

4. AI Story-Driven Features & Demo Highlights

  • AI Insights Terminal: Typewriter animations with a toggle for Beginner Mode vs Pro Mode tone switching.
  • Demo Optimization (Highlights): Subtle glowing borders dynamically appear to point the judges' eyes to the most important elements (e.g., highlighting the insights terminal temporarily when it types).
  • Audio AI Experience Widget: Floating waveform simulation ("Listen to AI Market Brief").

5. Final Impact & New Battle Mode

  • AI Battle Mode: A new comparative view. Compare RELIANCE vs TCS. Shows split-screen or dual-column layout with a visual comparison chart and AI reasoning on which is the better buy today.
  • AI Decision Mode: Fullscreen takeover showing a hypothetical ₹1,00,000 portfolio allocation with pie chart visuals.
  • AI Verdict Mode: Massive glowing text ("BUY", "HOLD", or "AVOID") with the background ambient color shifting, accompanied by a shareable export UI card.

Verification Plan

Automated Tests

  • Run npm run dev to ensure successful compilation without dependency errors.

Manual Verification

  • Test the "Demo Mode" button to ensure it automatically transitions through the entire app lifecycle in under 60 seconds.
  • Verify that Skeleton loaders/shimmers appear during the "AI Thinking" phases.
  • Ensure the "AI Battle Mode" correctly renders side-by-side comparisons of RELIANCE and TCS.