project-c86ca996 System Requirements Document

Introduction

The project "project-c86ca996" aims to build a production-ready AI-powered SaaS platform called "MarketLead AI" — an Indian Share Market Lead Generation and Growth Platform. This document outlines the system requirements for the development of MarketLead AI, focusing on providing high-quality, permission-based mobile leads through free trading tools, educational content, AI personalization, and daily market analysis.

System Overview

MarketLead AI is designed for Indian retail traders and investors, offering a bilingual interface (Hindi and English) with a toggle option in the header. The platform targets the Indian market, including Nifty 50, Bank Nifty, F&O, Equity, and Mutual Funds. The primary goal is to generate leads through engaging and informative content and tools.

Source Content Inventory

• Product Name: MarketLead AI
• Tagline: "India Ka Sabse Smart Trading Platform"
• Target Users: Indian retail traders and investors
• Primary Goal: Generate high-quality, permission-based mobile leads
• Language: Bilingual — Hindi + English
• Market: India — Nifty 50, Bank Nifty, F&O, Equity, Mutual Funds

Functional Requirements as Story Points

• As a User, I should be able to toggle between Hindi and English languages.
• As a User, I should be able to access free trading tools and educational content.
• As a User, I should receive AI-powered personalized insights and daily market analysis.
• As a User, I should be able to view live ticker strips showing Nifty, Bank Nifty, and Sensex prices.
• As a User, I should be able to use the Risk-Reward Calculator and receive a lead capture modal trigger.
• As a User, I should be able to use the Position Size Calculator with visual outputs.
• As a User, I should be able to use the Brokerage Calculator and see detailed cost breakdowns.
• As a User, I should be able to take a Trading Quiz and receive a Trader Profile Card.
• As a User, I should be able to view daily market analysis with AI-generated summaries.
• As a User, I should be able to access the Learning Center with various trading topics.
• As a User, I should be able to filter blog posts by category, date, and language.
• As a User, I should be able to manage my watchlist and trading journal in the dashboard.
• As a User, I should be able to trigger lead capture under specified conditions.

User Personas

• Retail Trader: Engages with the platform for trading tools and market analysis.
• Investor: Uses the platform for educational content and investment insights.
• Admin: Manages content, leads, and user analytics on the platform.

Core User Flows

• User accesses the homepage -> toggles language -> views live market data -> uses trading tools -> triggers lead capture.
• User visits the Learning Center -> reads articles -> scrolls 70% -> triggers lead capture.
• User completes a trading quiz -> receives profile card -> saves result -> triggers lead capture.

Visuals Colors and Theme

• primary: #0A0E14 (dark premium trading terminal)
• primary_light: #111720 (lighter surface tint)
• secondary: #F0A500 (amber gold)
• accent: #00C896 (success/bullish)
• highlight: #FF4C6A (danger/bearish)
• bg: #0A0E14 (page background)
• surface: rgba(17, 23, 32, 0.8) (card/panel background)
• text: #E8EDF2 (primary text color)
• text_muted: #5A7080 (muted text color)
• border: rgba(30, 45, 61, 0.2) (subtle border color)

Signature Design Concept

Dark Terminal with Live Chart Animation

The homepage will feature a dark terminal aesthetic with a live chart animation as the hero visual. This animation will simulate a real-time trading environment, with dynamic chart movements and live ticker updates for Nifty, Bank Nifty, and Sensex. Users can interact with the chart by hovering over data points to see detailed information. The animation will be built using motion/react for smooth transitions and interactions.

Landing Hero Motion Brief

The hero section will open with a headline "India Ka Sabse Smart Trading Platform" and a subheadline in Hindi. The live chart will animate continuously, showing real-time market data. Users can click on CTAs to explore tools or view daily analysis. The animation will loop every 10 seconds, with a focus on market data transformation and user engagement.

Interaction Model & Motion Direction

• Intended Interaction Model: Animated
• The homepage will feature moderate scroll-triggered reveals and hover transitions, with spring physics on interactive elements. This will enhance user engagement and provide a polished experience.

Non-Functional Requirements

• The platform must be responsive and mobile-first.
• It should support high traffic and ensure data security, especially for lead capture and user information.

Tech Stack

• Frontend: Next.js 14 (App Router) + TypeScript
• Styling: Tailwind CSS
• State Management: Zustand
• Data Fetching: React Query (TanStack)
• Forms: React Hook Form + Zod validation
• Charts: Recharts or TradingView Lightweight Charts
• Backend: FastAPI (Python 3.12)
• Database: PostgreSQL with SQLAlchemy async
• Cache: Redis
• Task Queue: Celery
• AI: Claude Sonnet (pluggable via AI Gateway abstraction)
• Auth: JWT — httpOnly cookies, OTP-based mobile login
• SMS: Fast2SMS API
• Storage: S3-compatible
• Deployment: Docker + docker-compose

Assumptions and Constraints

• The platform will primarily serve Indian users, with content tailored to the Indian stock market.
• The lead capture system must comply with Indian data protection regulations.
• The platform should be scalable to accommodate a growing user base.

Glossary

• Nifty 50: A stock market index representing 50 major companies on the National Stock Exchange of India.
• Bank Nifty: An index comprising the most liquid and large capitalized Indian Banking stocks.
• F&O: Futures and Options, types of financial derivatives.
• SEBI: Securities and Exchange Board of India, the regulator for the securities market in India.