AI Trading App - Real-Time Stock Market Dashboard

A modern, full-stack stock trading application built with Next.js 15, featuring real-time market data, personalized watchlists, AI-powered email automation, and comprehensive stock analytics. Deployed on Cloudflare Workers for global edge performance.

🚀 Live Demo

Deployed URL: https://ai-trading-app.bhaskarg.workers.dev/

📸 App Screenshots

Homepage Dashboard

The homepage features:

Market Overview with interactive charts and real-time stock data
Stock Heatmap showing market performance by industry
Top Stories with latest financial news
Market Data Widget displaying key financial metrics

Stock Detail Page

The stock detail page provides:

Real-time Price Data with candlestick charts
Technical Analysis with AI-powered insights
Company Profile and financial metrics
Watchlist Management with one-click add/remove
Comprehensive Financials including P/E ratios, market cap, and more

✨ Key Features

🔐 Authentication & User Management

Secure authentication with Better Auth
Email/password sign-up and sign-in
User profile management with investment preferences
Session management with Cloudflare D1

📊 Real-Time Market Data

Live stock prices and market data via Finnhub API
Interactive TradingView widgets for charts and analysis
Market overview with heatmaps and sector performance
Real-time price updates and percentage changes

⭐ Watchlist Management

Create and manage personalized stock watchlists
Add/remove stocks with one-click functionality
Real-time price tracking for watchlisted stocks
Market cap and performance metrics

🔍 Stock Search & Discovery

Advanced stock search with autocomplete
Quick access to stock details
Filter by industry and sector
Search command palette for power users

📧 AI-Powered Email Automation

Welcome Emails: Personalized welcome messages using Gemini AI based on user investment profile
Daily News Summaries: Automated daily email digests with AI-summarized market news
Personalized content based on user watchlist and preferences
Scheduled cron jobs for automated delivery

🎨 Modern UI/UX

Dark theme optimized for financial data
Responsive design for all devices
Shadcn UI components for consistent design
Toast notifications for user feedback
Smooth animations and transitions

🛠️ Tech Stack

Frontend

Next.js 15 - React framework with App Router
React 19 - UI library
TypeScript - Type-safe development
Tailwind CSS 4 - Utility-first styling
Shadcn UI - Component library
TradingView Widgets - Financial charts and data visualization
React Hook Form - Form management
Lucide React - Icon library

Backend & Infrastructure

Cloudflare Workers - Edge computing platform
Cloudflare D1 - SQLite database at the edge
Better Auth - Authentication framework
Drizzle ORM - Type-safe database queries
OpenNext.js - Next.js adapter for Cloudflare

APIs & Services

Finnhub API - Real-time stock market data
Inngest - Background job processing and automation
Google Gemini AI - AI-powered content generation
Nodemailer - Email delivery service
TradingView - Financial widgets and charts

Development Tools

Bun - Fast JavaScript runtime and package manager
Wrangler - Cloudflare Workers CLI
TypeScript - Static type checking
ESLint - Code linting

🏗️ Architecture & Automation Flow

Application Flow Diagram

┌─────────────────────────────────────────────────────────────────┐
│                        USER JOURNEY                              │
└─────────────────────────────────────────────────────────────────┘

1. SIGN UP / SIGN IN
   │
   ├─► Better Auth (Cloudflare D1)
   │   └─► User Session Management
   │
   └─► Inngest Event: app/user.created
       │
       └─► sendSignUpEmail Function
           │
           ├─► Step 1: Get User Profile
           │   └─► Country, Investment Goals, Risk Tolerance
           │
           ├─► Step 2: AI Content Generation
           │   └─► Gemini AI generates personalized welcome message
           │
           └─► Step 3: Send Welcome Email
               └─► Nodemailer delivers personalized email

2. DASHBOARD INTERACTION
   │
   ├─► Market Overview Widget
   │   └─► TradingView Widget (Real-time data)
   │
   ├─► Stock Heatmap
   │   └─► TradingView Widget (Sector performance)
   │
   ├─► Top Stories
   │   └─► Finnhub API (Market news)
   │
   └─► Market Data Table
       └─► Finnhub API (Stock quotes)

3. STOCK SEARCH & DETAILS
   │
   ├─► Search Command
   │   └─► Finnhub API (Symbol search)
   │
   └─► Stock Detail Page
       │
       ├─► Symbol Info Widget
       ├─► Candlestick Chart
       ├─► Technical Analysis
       ├─► Company Profile
       └─► Financials Data
           └─► All via TradingView & Finnhub APIs

4. WATCHLIST MANAGEMENT
   │
   ├─► Add to Watchlist
   │   └─► Cloudflare D1 (Store watchlist item)
   │
   └─► Remove from Watchlist
       └─► Cloudflare D1 (Delete watchlist item)

5. AUTOMATED DAILY NEWS (Cron: 12:00 PM Daily)
   │
   └─► sendDailyNewsSummary Function
       │
       ├─► Step 1: Get All Users
       │   └─► Query Cloudflare D1
       │
       ├─► Step 2: Fetch User Watchlists
       │   └─► Get symbols for each user
       │
       ├─► Step 3: Fetch News Articles
       │   ├─► For each user:
       │   │   ├─► Get news for watchlist symbols
       │   │   └─► Fallback to general market news
       │   └─► Limit to 6 articles per user
       │
       ├─► Step 4: AI News Summarization
       │   └─► Gemini AI summarizes articles per user
       │
       └─► Step 5: Send Email Digests
           └─► Nodemailer sends personalized summaries

Automation & Background Jobs

1. Welcome Email Automation

User Sign Up
    │
    ▼
Inngest Event Triggered
    │
    ▼
┌─────────────────────────────────────┐
│  sendSignUpEmail Function           │
├─────────────────────────────────────┤
│  • Extract user profile data        │
│  • Generate AI prompt               │
│  • Call Gemini AI API               │
│  • Generate personalized intro      │
│  • Send welcome email via Nodemailer│
└─────────────────────────────────────┘

2. Daily News Summary Automation

Cron Schedule: 0 12 * * * (12:00 PM Daily)
    │
    ▼
┌──────────────────────────────────────────────┐
│  sendDailyNewsSummary Function               │
├──────────────────────────────────────────────┤
│  Step 1: Get All Users                       │
│    └─► Query D1 database                    │
│                                            │
│  Step 2: Fetch User-Specific News           │
│    ├─► For each user:                       │
│    │   ├─► Get watchlist symbols            │
│    │   ├─► Fetch news for symbols           │
│    │   └─► Fallback to general news          │
│    └─► Limit to 6 articles                  │
│                                            │
│  Step 3: AI Summarization                   │
│    ├─► For each user's articles:            │
│    │   ├─► Generate summary prompt          │
│    │   ├─► Call Gemini AI API                │
│    │   └─► Generate news summary              │
│    └─► Store summaries                      │
│                                            │
│  Step 4: Send Email Digests                 │
│    └─► Send personalized emails via         │
│        Nodemailer                           │
└──────────────────────────────────────────────┘

Data Flow Architecture

┌──────────────┐
│   Browser    │
└──────┬───────┘
       │
       ▼
┌─────────────────────────────────┐
│   Cloudflare Workers (Edge)    │
│   ┌─────────────────────────┐ │
│   │   Next.js App Router     │ │
│   │   • Server Components    │ │
│   │   • Server Actions       │ │
│   │   • API Routes           │ │
│   └─────────────────────────┘ │
└──────┬─────────────────────────┘
       │
       ├─────────────────────────────────┐
       │                                 │
       ▼                                 ▼
┌──────────────┐              ┌──────────────────┐
│ Cloudflare D1│              │  External APIs   │
│ (SQLite DB)  │              ├──────────────────┤
│              │              │ • Finnhub API    │
│ • Users      │              │ • TradingView    │
│ • Sessions   │              │ • Gemini AI      │
│ • Watchlist  │              └──────────────────┘
└──────────────┘
       │
       ▼
┌──────────────────┐
│   Inngest        │
│   (Background    │
│    Jobs)         │
│                  │
│ • Email Jobs     │
│ • Cron Jobs      │
│ • AI Processing  │
└──────────────────┘

📦 Installation & Setup

Prerequisites

Node.js 20+ or Bun
Cloudflare account
Finnhub API key
Google Gemini API key
Inngest account

Environment Variables

Create a .dev.vars file:

BETTER_AUTH_SECRET=your-secret-key
BETTER_AUTH_URL=http://localhost:3000
FINNHUB_API_KEY=your-finnhub-key
GEMINI_API_KEY=your-gemini-key
INNGEST_EVENT_KEY=your-inngest-key
INNGEST_SIGNING_KEY=your-signing-key
NODEMAILER_EMAIL=your-email
NODEMAILER_PASSWORD=your-app-password

Local Development

# Install dependencies
bun install

# Set up Cloudflare D1 database
npx wrangler d1 create ticker_d1

# Run migrations
npx wrangler d1 execute ticker_d1 --local --file=./migrations/0001_better-auth-tables.sql
npx wrangler d1 execute ticker_d1 --local --file=./migrations/0002_watchlist-table.sql

# Start development server
bun run dev

# In another terminal, start Inngest dev server
npx inngest-cli dev

Deployment

# Build and deploy to Cloudflare
bun run deploy

🗄️ Database Schema

Users Table

User authentication and profile data
Investment preferences (goals, risk tolerance, industry)

Sessions Table

User session management
Token-based authentication

Watchlist Table

User watchlist items
Stock symbols and company names
Timestamps for tracking

🔄 API Integration

Finnhub API

Real-time stock quotes
Company profiles
Market news
Symbol search

TradingView Widgets

Interactive charts
Technical analysis
Market overview
Stock heatmaps

Google Gemini AI

Personalized email content generation
News summarization
User preference analysis

🚦 Project Structure

ai-trading-app/
├── app/                    # Next.js App Router
│   ├── (auth)/            # Authentication routes
│   ├── (root)/            # Protected routes
│   └── api/               # API routes
├── components/            # React components
│   ├── ui/               # Shadcn UI components
│   └── forms/            # Form components
├── lib/
│   ├── actions/          # Server actions
│   ├── better-auth/      # Auth configuration
│   ├── inngest/          # Background jobs
│   └── nodemailer/       # Email service
├── hooks/                # React hooks
├── schemas/              # Drizzle schemas
├── migrations/           # Database migrations
└── public/              # Static assets

🎯 Key Achievements

✅ Edge Deployment: Full-stack app deployed on Cloudflare Workers for global edge performance
✅ Real-Time Data: Live stock prices and market data integration
✅ AI Automation: Automated email system with AI-powered personalization
✅ Type Safety: End-to-end TypeScript with Drizzle ORM
✅ Modern Auth: Secure authentication with Better Auth
✅ Responsive Design: Mobile-first responsive UI
✅ Performance: Optimized with Next.js 15 and edge computing

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

Bhaskar Guthula

Portfolio: https://bhaskar.guthula.cc
GitHub: @BhaskarGuthula

🙏 Acknowledgments

TradingView for financial widgets
Finnhub for market data API
Cloudflare for edge infrastructure
Inngest for background job processing
Shadcn UI for component library

Built with ❤️ using Next.js, Cloudflare Workers, and modern web technologies

Bhaskar-Guthula-137/AIStockMarketApp-NextJS15-MongoDB-Cloudflare-BetterAuth-Inngest

README