like terminal with AI. It uses Redis with AlphaVantage data

news view， and TypeScript. This project demonstrates real-time financial data visualization with a professional interface inspired by the Bloomberg Terminal. Structured as an SPA because for a terminal with constantly mutating financial data， news， footer， etc. /components/ui: shadcn/ui base components (design system) /lib: Application-wide utility functions and shared code /public: Static assets and images Component Organization Philosophy Components are organized based on: Core Components : Foundational UI elements specific to the Bloomberg Terminal interface Layout Components : Define the overall structure and layout of the application UI Components : Specialized components for data visualization and user interaction View Components : Complete screens or major sections of the application Performance Optimizations React Query for efficient data fetching and caching Optimized update cycles to reduce API calls Memoization of expensive calculations Conditional rendering for performance-critical components Security Features Origin Restriction : API endpoints are restricted to specific domains configured via the ALLOWED_ORIGINS environment variable Rate Limiting : Prevents abuse by limiting requests per IP address Input Validation : All API inputs are validated and sanitized using Zod schemas Response Limiting : AI responses are limited in token count to prevent excessive usage Environment Variables : Sensitive keys are stored in environment variables and not exposed to the client ， React Query for server state Data Storage : Upstash Redis Animation : Motion (formerly Framer Motion) Linting/Formatting : Biome.js Getting Started Prerequisites Node LTS pnpm Environment Variables Create a .env.local file with the following variables: # Upstash Redis connection detailsUPSTASH_REDIS_REST_URL=your_upstash_redis_urlUPSTASH_REDIS_REST_TOKEN=your_upstash_redis_token# Alpha Vantage API key for market dataALPHA_VANTAGE_API_KEY=your_alpha_vantage_api_key# OpenAI API key for AI featuresOPENAI_API_KEY=your_openai_api_key# Allowed origins for API access (comma-separated list， React 19， header， market movers。

no spaces)ALLOWED_ORIGINS=https://your-domain.com， URL structure and browser history have limited utility compared to a traditional SPA approach. Features Real-time Market Data : Simulated market updates with configurable refresh rates Multiple Views : Market data， sparklines， volatility view。

modals。

etc.) /hooks: Custom React hooks for data fetching and UI state /layout: Layout components that define the terminal structure Terminal container， watchlist，:3000 Project Structure The project is structured as follows: /app: Next.js App Router pages and API routes /components/bloomberg: Terminal-specific components /api: API client functions for market data fetching and simulation /atoms: Jotai atoms for local state management /core: Core Bloomberg Terminal components Reusable UI elements specific to the terminal (buttons， Bloomberg Terminal Clone Clone of the Bloomberg Terminal built with Next.js 15， and navigation elements /lib: Terminal-specific utility functions and configuration /providers: Context providers for React Query and other global state /ui: Terminal-specific UI components Data visualization components (tables， etc.) Terminal-specific UI elements that aren't part of the core /views: Main view components for different terminal screens Market view， etc.) User interaction components (keyboard shortcuts， and volatility analysis Interactive UI : Terminal-like interface with keyboard shortcuts Watchlist : Create and manage lists of financial instruments Dark/Light Mode : Toggle between color schemes Responsive Design : Works on desktop and tablet devices Tech Stack Framework : Next.js 15 (App Router) UI Library : React 19 with shadcn/ui components Styling : Tailwind CSS State Management : Jotai for local state，。