BLS Regional Price Intelligence Premium

A stunning, modern web application for tracking real-time pricing data across the United States

🚀 Live Demo | View Demo Page

---

✨ Features

🎨 Beautiful Design

• Stripe & Linear Inspired - Modern, sleek interface with stunning gradients
• Glass Morphism - Frosted glass effects and backdrop blur
• Smooth Animations - Powered by Framer Motion
• Grid Overlays - Subtle grid patterns inspired by Linear
• Gradient Text - Eye-catching gradient effects
• Hover Effects - Interactive glow effects on buttons and cards

🚀 Powerful Functionality

• Real-time Data Collection - Track prices for gas, eggs, and milk
• 30 Parallel Requests - Collect data from 10 states simultaneously
• Live Progress Tracking - Watch data collection in real-time
• Interactive Map - Beautiful US map with animated state markers
• Activity Log - Live streaming activity feed
• Data Export - Export collected data as JSON

🗺️ Coverage

10 Major US States:

• California (CA)
• Texas (TX)
• New York (NY)
• Florida (FL)
• Illinois (IL)
• Pennsylvania (PA)
• Ohio (OH)
• Georgia (GA)
• North Carolina (NC)
• Washington (WA)

3 Product Categories:

1. ⛽ Gas Prices (via GasBuddy)
2. 🥚 Eggs - 12 count (via Walmart)
3. 🥛 Milk - 1 gallon (via Walmart)

---

🚀 Quick Start

Prerequisites

• Node.js 18+ or npm/pnpm/yarn
• TinyFish API key (Get yours here)

Installation

1. Navigate to the project directory

   cd "BLS-Premium"

2. Install dependencies

   npm install
   # or
   pnpm install
   # or
   yarn install

3. Set up environment variables

   cp .env.local.example .env.local

   Edit .env.local and add your TinyFish API key:

   TINYFISH_API_KEY=your_tinyfish_api_key_here
   NEXT_PUBLIC_TINYFISH_API_KEY=your_tinyfish_api_key_here

4. Run the development server

   npm run dev
   # or
   pnpm dev
   # or
   yarn dev

5. Open your browser Navigate to http://localhost:3000

---

🎨 Design Philosophy

Inspired by the Best

This application draws inspiration from the stunning design systems of:

• Stripe - Beautiful gradients, smooth animations, professional polish
• Linear - Minimalist aesthetic, grid patterns, sharp UI

Design Features

• Dark Mode First - Optimized for dark backgrounds
• Purple/Violet Palette - Primary colors inspired by modern design trends
• Animated Gradients - Dynamic background animations
• Micro-interactions - Delightful hover effects and transitions
• Glass Effects - Frosted glass morphism throughout
• Typography - Clean, readable fonts with proper hierarchy

---

🏗️ Architecture

File Structure

BLS-Premium/
├── app/
│   ├── api/
│   │   └── fetch-price/
│   │       └── route.ts          # TinyFish API integration
│   ├── demo/
│   │   └── page.tsx               # Main demo page
│   ├── layout.tsx                 # Root layout
│   ├── page.tsx                   # Landing page
│   └── globals.css                # Global styles & utilities
├── components/
│   └── EnhancedUSMap.tsx          # Interactive map component
├── lib/
│   └── bls-config.ts              # Configuration & data structures
└── Configuration files

Key Technologies

Frontend

• Next.js 15 - React framework
• React 18 - UI library
• TypeScript - Type safety
• Tailwind CSS - Utility-first styling
• Framer Motion - Animations

Visualization

• react-simple-maps - Map rendering
• Custom SVG - State markers and effects

API Integration

• TinyFish Browser Automation API
• Server-Sent Events (SSE) streaming
• Real-time progress updates

---

🎯 How It Works

Data Collection Process

1. Configuration Generation

   • Creates 30 API call configurations (10 states × 3 products)

2. Parallel Execution

   • Launches 30 browser automation sessions simultaneously
   • Each session navigates to product pages
   • Extracts price data using natural language goals

3. Real-time Streaming

   • Progress updates streamed via SSE
   • Live activity log shows each step
   • Map updates dynamically as data arrives

4. Data Visualization

   • Interactive US map with color-coded states
   • Price labels appear on completion
   • Hover tooltips show detailed information

TinyFish API Integration

const response = await fetch('/api/fetch-price', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    url: 'https://www.walmart.com/ip/...',
    goal: 'Find the price shown on this product page.',
  }),
});

// Stream SSE events
const reader = response.body.getReader();
// Process STREAMING_URL, PROGRESS, and COMPLETE events

---

🎨 Custom Styling

Tailwind Utilities

Glass Morphism

<div class="glass"><!-- frosted glass effect --></div>
<div class="glass-card"><!-- glass card with gradient --></div>

Gradient Text

<h1 class="gradient-text">Beautiful Gradient Text</h1>

Hover Glow

<button class="hover-glow">Glowing Button</button>

Grid Overlay

<div class="grid-overlay"><!-- subtle grid pattern --></div>

Animated Background

<div class="animated-gradient"><!-- flowing gradient animation --></div>

---

📊 Features Breakdown

Landing Page

• Hero section with animated gradient background
• Feature cards with hover effects
• Stats display
• Smooth scroll animations
• Call-to-action buttons

Demo Page

• Live data collection controls
• Real-time progress bar
• Interactive US map with state markers
• Activity log with color-coded messages
• Stats cards (completed, running, pending, errors)
• Data table with export functionality
• Category filters (All, Gas, Eggs, Milk)

Enhanced Map

• Animated state markers
• Color-coded by price range
• Hover tooltips with detailed info
• Pulsing animation for active states
• Smooth transitions

---

🚢 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

Environment Variables

Remember to add these in your deployment platform:

• TINYFISH_API_KEY
• NEXT_PUBLIC_TINYFISH_API_KEY

---

🛠️ Development

Available Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm run start    # Start production server
npm run lint     # Run ESLint

Customization

Add More States Edit lib/bls-config.ts and add to the STATES array:

{
  name: "New State",
  code: "NS",
  coordinates: [-123.456, 45.678],
  zipCode: "12345",
  color: "#8b5cf6"
}

Add More Products Edit lib/bls-config.ts and add to the PRODUCTS array:

{
  id: "new-product",
  name: "New Product",
  category: "new-product",
  icon: "🎯",
  url: "https://example.com/product",
  goal: "Find the price...",
  color: "#8b5cf6"
}

---

🎓 Learning Resources

• Next.js Documentation
• Tailwind CSS
• Framer Motion
• TinyFish API

---

📝 License

MIT License - feel free to use this project for any purpose!

---

🙏 Credits

• Design Inspiration: Stripe, Linear
• Browser Automation: TinyFish
• Icons: Lucide React
• Maps: react-simple-maps

---

Built with ❤️ using Next.js, React, and TinyFish

Report Bug · Request Feature