Z e T e r m i n a l

A professional financial terminal application built with Next.js and TypeScript. Provides real-time market data, interactive charts, news feeds, and portfolio management using free financial APIs.

🌐 Live Demo 📦 View on GitHub

Overview

ZeTerminal is a modern financial terminal application that brings professional-grade market data visualization and portfolio management to your browser. Built with Next.js 14 and TypeScript, it leverages free financial APIs to provide real-time quotes, interactive charts, technical indicators, and comprehensive market information.

The application features a command-based interface with keyboard shortcuts, making it fast and efficient to navigate. With a dark theme and professional styling, ZeTerminal offers a sleek user experience for tracking securities, analyzing market trends, and managing watchlists.

Features

Market Data

  • Real-time quotes and price updates
  • Market ticker with major stock prices
  • Market indices (S&P 500, NASDAQ, Dow Jones, VIX)
  • Symbol search functionality

Charts & Analysis

  • Interactive intraday and daily charts
  • Technical indicators (RSI, SMA, EMA)
  • Order book visualization
  • Multiple chart intervals

Portfolio Management

  • Watchlist for tracking securities
  • Portfolio tracking with P&L calculations
  • Real-time price monitoring
  • Custom symbol management

News & Information

  • Financial news feed
  • Symbol-specific news filtering
  • Real-time market updates
  • News aggregation from multiple sources

User Interface

  • Dark theme with professional styling
  • Multi-panel resizable layout
  • Smooth animations and transitions
  • Command-based navigation

Keyboard Shortcuts

  • / - Open command bar
  • ESC - Close command bar
  • Quick symbol navigation
  • Efficient workflow optimization

Technologies

Next.js 14
TypeScript
Tailwind CSS
Recharts
Axios
Framer Motion
React Hotkeys
App Router

Commands

Available Commands

Press / to open the command interface. Available commands include:

GO AAPL Navigate to a symbol
NEWS MSFT View news for a symbol
CHART TSLA View chart for a symbol
WATCH GOOGL Add symbol to watchlist
PORTFOLIO Switch to portfolio view
INTRADAY Switch to intraday chart view
DAILY Switch to daily chart view

You can also type a symbol directly (e.g., AAPL) to view it.

Installation & Setup

Prerequisites

  • Node.js 18 or higher
  • npm or yarn package manager
  • Optional: API keys for enhanced functionality

Installation Steps

Clone the repository and install dependencies:

git clone https://github.com/zmahm/ZeTerminal.git
cd ZeTerminal
npm install

Environment Variables

Create a .env.local file in the root directory for API keys (optional):

ALPHA_VANTAGE_API_KEY=your_key_here
NEWS_API_KEY=your_key_here
FINNHUB_API_KEY=your_key_here

Free API keys are available from:

Running the Application

Start the development server:

npm run dev

Open http://localhost:3000 in your browser.

API Information

Alpha Vantage

  • Free tier: 5 calls/minute, 500 calls/day
  • Used for quotes, intraday data, daily data, and symbol search
  • Falls back to Yahoo Finance when rate limited

Yahoo Finance

  • No API key required
  • Used as fallback for quotes and market data
  • Public API endpoint

NewsAPI

  • Free tier: 100 requests/day
  • Used for financial news aggregation
  • Shows mock data if API key is missing

Rate Limits & Fallbacks

The application implements fallback mechanisms to minimize API calls and handle rate limits gracefully. When free tier limits are exceeded, the app automatically switches to alternative data sources to ensure continuous functionality.

Project Structure

ZeTerminal/
├── app/
│   ├── api/          # API routes
│   ├── globals.css   # Global styles
│   ├── layout.tsx    # Root layout
│   └── page.tsx      # Main page
├── components/        # React components
│   ├── Chart.tsx
│   ├── CommandBar.tsx
│   ├── MarketIndices.tsx
│   ├── MarketTicker.tsx
│   ├── NewsFeed.tsx
│   ├── OrderBook.tsx
│   ├── Portfolio.tsx
│   ├── QuotePanel.tsx
│   ├── SearchBar.tsx
│   ├── StatusBar.tsx
│   ├── TechnicalIndicators.tsx
│   └── Watchlist.tsx
├── lib/
│   ├── api.ts         # Server-side API functions
│   ├── api-client.ts  # Client-side API helpers
│   └── types.ts       # TypeScript type definitions
└── public/            # Static assets

Limitations & Notes

This application uses free APIs and has the following limitations:

  • Not truly real-time (limited by API rate limits)
  • Some features are simulated (e.g., order book)
  • Not suitable for actual trading decisions
  • For production use, consider upgrading to paid API tiers

The application is designed for educational purposes and market data visualization, not for live trading or financial advice.