# Tech Stack 🛠️

#### **Frontend** 🌐

* **NextJS**:
  * The backbone of our interface, combining server-side rendering (SSR) for lightning-fast performance with client-side rendering (CSR) for dynamic updates.
  * Optimized for SEO and page speed to deliver smooth user experiences.
* **Tailwind CSS**:
  * A utility-first CSS framework used to craft sleek, modern, and responsive designs.
  * Customized for pixel-perfect alignment, ensuring an intuitive UI.
* **Framer Motion**:
  * Provides fluid animations and transitions for a visually engaging experience.

***

#### **Backend** 💾

* **Node.js**:
  * Enables high-performance, non-blocking operations to handle real-time requests and data processing.
* **Next.js API Routes**:
  * Simplified backend logic for fetching Solana blockchain data and calculating PNL in real-time.
  * Scalable architecture optimized for production workloads.

***

#### **Blockchain Integrations** 🔗

* **Solana Web3.js**:
  * Directly interfaces with the Solana blockchain to fetch balances, transactions, and real-time data.
  * Ensures high reliability and low-latency interaction with the blockchain.
* **QuickNode RPC**:
  * Powers fast and secure access to Solana nodes for seamless querying of wallet and transaction data.
  * Customized for low-latency and high-throughput performance.
* **Helius API**:
  * Fetches additional Solana wallet metadata, ensuring comprehensive analysis of account activities.

***

#### **Market Data Sources** 📊

* **Jupiter Aggregator API**:
  * Provides precise SOL price tracking in real-time, ensuring accurate PNL calculations.
  * Integrates fallback logic for alternative sources like CoinGecko and Binance APIs for redundancy.
* **DexScreener API**:
  * Enhances insights with live market data and sentiment tracking for SOL and BTC.

***

#### **Middleware and Enhancements** ⚙️

* **React Query**:
  * Streamlines asynchronous state management for fetching and caching PNL data.
  * Guarantees consistency across multiple components with auto-refetching mechanisms.
* **Typewriter.js**:
  * Adds dynamic, engaging typewriter effects for promotional content on the UI.