# Forex Buddy

> Lightweight browser extension for quick, reliable currency conversion

## Project Overview

**Forex Buddy** is a lightweight, privacy-conscious browser extension for quick, reliable currency conversion. It provides instant access to live exchange rates, a compact conversion matrix centered on your home currency, and a focused list of your five chosen favorites.

Ideal for travelers, online shoppers, freelancers, and anyone needing fast multi-currency awareness.

## Key Information

- **Name:** Forex Buddy
- **Version:** 1.0.8
- **Type:** Browser Extension & Landing Page
- **Website:** https://forexbuddy.app
- **Tech Stack:** React 19, Vite 7, Tailwind CSS 4
- **Purpose:** Marketing and information site for the Forex Buddy browser extension
- **Price:** Free
- **Rating:** 4.8/5.0 (1 rating)

## Core Features

1. **💱 Real-Time Currency Conversion Matrix**
   - Instantly convert amounts between your home currency and 5 customizable favorites
   - Live exchange rates from ExchangeRate-API, cached for 1 hour
   - View all conversions in a clean, organized table

2. **🔄 Cross-Device Settings Sync**
   - All preferences (home currency, favorites, theme) automatically sync across devices
   - Uses chrome.storage.sync for seamless synchronization
   - Works across Chrome, Edge, and Firefox

3. **📋 Smart Clipboard Pre-fill**
   - Automatically detects numeric values in your clipboard
   - Pre-fills the amount field (opt-in via settings)
   - Saves time when converting copied values

4. **🔀 Swap Button with Dynamic Conversion**
   - Quickly toggle between conversion directions with a single click
   - Favorites table updates accordingly
   - Reverses source and target currencies instantly

5. **🌙 Dark/Light Theme Toggle**
   - Switch between dark and light modes instantly
   - Theme preference syncs across devices
   - Supports "auto" mode that follows system preferences

## Installation

### Available On:
- **Chrome Web Store** - https://tinyurl.com/forexbuddy-chrome-landing
- **Microsoft Edge Add-ons** - https://tinyurl.com/forexbuddy-edge-landing  
- **Firefox Add-ons** - https://addons.mozilla.org/es-MX/firefox/addon/forex-buddy

### Quick Install Steps:
1. Choose your browser from the links above
2. Install Forex Buddy from the official store
3. Pin the extension to your toolbar for quick access

## How to Use Forex Buddy

### 1. Install the Extension
- Choose your browser and install Forex Buddy from the official store
- Pin the extension to your toolbar for quick access

### 2. Configure Your Settings
- Click the gear icon (⚙️) in the popup header to open settings
- Select your home currency from the dropdown
- Choose up to 5 favorite currencies you convert frequently
- Optionally enable clipboard auto-fill and extended currency list

### 3. Start Converting
- Click the Forex Buddy icon to open the popup
- Enter an amount and select source currency
- View instant conversions for all your favorites
- Use the swap button to reverse conversion direction
- Click copy icons to copy converted values

## Target Audience

- **Travelers** - Need quick currency conversions when booking flights, hotels, or planning budgets
- **Online Shoppers** - Purchasing in foreign currencies from international websites
- **Freelancers** - Working with international clients and need to convert payment amounts
- **Business Professionals** - Managing international transactions and budgets
- **Students** - Studying abroad or managing international tuition payments
- **Anyone** - Needing fast multi-currency awareness in their daily workflow

## Privacy & Data

**Privacy-First Design:**
- All data stored locally in your browser (favorites, home/display currency, amount, theme preferences)
- No personal information collected or shared
- Nothing is sent to external servers except API calls for exchange rates
- Optional anonymous analytics events if enabled by user
- No tracking, no ads, no data selling
- Full transparency in data handling

**What's Stored:**
- Your selected home currency
- Your 5 favorite currencies
- Amount preference
- Theme preference (dark/light/auto)
- Clipboard auto-fill preference
- Extended currency list preference

All settings sync via browser's built-in sync mechanism (chrome.storage.sync).

## Social Sharing

Share Forex Buddy on your favorite platforms:

**Available Platforms:**
- Facebook
- X (Twitter) - with hashtags: #CurrencyConverter #Forex #ExchangeRates #BrowserExtension
- Instagram - copy formatted text with hashtags
- TikTok - copy formatted caption text
- LinkedIn
- Reddit
- WhatsApp
- Telegram
- Discord - copy formatted message
- Email - pre-formatted message with description
- Copy Link - direct URL copy to clipboard

**Share Message:**
"Forex Buddy - Browser Extension for Currency Conversion. Lightweight browser extension for quick, reliable currency conversion with real-time exchange rates, customizable favorites, and cross-device sync."

## Contact & Support

**Support Email:** codedsyntax@outlook.com
**Twitter/X Creator:** @marcrossmann
**Twitter/X Extension:** @forexbuddyext

For support, feedback, feature requests, or bug reports, contact via email.

## Donation & Support

**Buy Me a Coffee:** Available via integrated widget on the website
**Creator:** marcrossmann

Support message: "Love Forex Buddy? Your support means the world! If my work has made your life a little more colorful, a virtual coffee helps fuel the next update and shows your appreciation. Thanks for being a fan! ☕"

## Tech Details

### Frontend Stack
- **React:** 19.2.0 - Modern UI library
- **React DOM:** 19.2.0
- **Tailwind CSS:** 4.1.18 - Utility-first CSS framework
- **@tailwindcss/vite:** 4.1.18
- **Vite:** 7.2.4 - Fast build tool and dev server

### Development Tools
- **ESLint:** 9.39.1 - Code linting
- **@eslint/js:** 9.39.1
- **eslint-plugin-react-hooks:** 7.0.1
- **eslint-plugin-react-refresh:** 0.4.24
- **globals:** 16.5.0
- **@vitejs/plugin-react:** 5.1.1 - React plugin for Vite
- **@types/react:** 19.2.5 - TypeScript definitions
- **@types/react-dom:** 19.2.3

### Project Structure
```
forexbuddy-dev/
├── public/                    # Static assets
│   ├── llms.txt              # LLM information file
│   ├── robots.txt            # Search engine crawling rules
│   ├── sitemap.xml           # Site structure for SEO
│   └── images/               # Image assets
├── src/
│   ├── main.jsx              # React entry point
│   ├── App.jsx               # Main application component
│   ├── App.css               # Application styles
│   ├── index.css             # Global styles
│   ├── assets/               # Additional assets
│   ├── components/           # React components
│   │   ├── Header.jsx        # Header with logo and title
│   │   ├── Carousel.jsx      # Image carousel/slider
│   │   ├── About.jsx         # About section
│   │   ├── CallToAction.jsx  # Install CTA with browser links
│   │   ├── KeyFeatures.jsx   # Features showcase with emojis
│   │   ├── HowToUse.jsx      # Usage instructions
│   │   ├── SocialShare.jsx   # Social sharing buttons
│   │   └── Footer.jsx        # Footer with contact info
│   └── hooks/
│       └── useShare.js       # Web Share API hook
├── index.html                # HTML entry point with extensive SEO
├── package.json              # Dependencies and scripts
├── vite.config.js            # Vite configuration
├── tailwind.config.js        # Tailwind CSS configuration
├── eslint.config.js          # ESLint configuration
├── CHANGELOG.md              # Version history
├── REACT-MIGRATION.md        # React migration notes
└── README.md                 # Project documentation
```

### Page Structure

The landing page includes these main sections:

1. **Header** - Logo, title "Forex Buddy", and brief description
2. **Carousel** - Visual showcase of the extension interface
3. **About** - Detailed description of the extension and its benefits
4. **Call to Action** - Install buttons for Chrome, Edge, and Firefox
5. **Key Features** - 5 main features with emoji icons
6. **How to Use** - 3-step usage guide with detailed instructions
7. **Social Share** - Share on 12+ platforms (Facebook, X/Twitter, Instagram, TikTok, LinkedIn, Reddit, WhatsApp, Telegram, Discord, Email, Copy Link)
8. **Footer** - Contact information and version number

### Browser Support & Compatibility

- **Chrome:** Full support via Chrome Web Store
- **Microsoft Edge:** Full support via Edge Add-ons
- **Firefox:** Full support via Firefox Add-ons
- **Cross-browser sync:** Settings sync across all supported browsers

## SEO & Marketing

The site includes comprehensive SEO optimization with:

### Meta Tags
- Primary SEO meta tags (title, description, keywords, author)
- Robots directives for optimal indexing
- Language and distribution tags
- Theme color and app configuration
- Canonical URL: https://forexbuddy.app

### Open Graph (Facebook/Social)
- Type: website
- Full URL and title optimization
- High-quality preview image (1200x630px)
- Secure image URLs
- Site name and locale configuration

### Twitter Cards
- Large image summary card format
- Creator: @marcrossmann
- Site: @forexbuddyext
- Custom labels showing browser support and free pricing

### JSON-LD Structured Data
```json
{
  "@type": "WebApplication",
  "name": "Forex Buddy - Browser Extension for Currency Conversion",
  "applicationCategory": "BrowserExtension",
  "operatingSystem": "Web Browser",
  "browserRequirements": "Chrome, Edge, Firefox",
  "softwareVersion": "1.0",
  "offers": { "price": "0", "priceCurrency": "USD" },
  "aggregateRating": { "ratingValue": "4.8", "ratingCount": "1" },
  "featureList": [
    "Real-Time Currency Conversion Matrix",
    "Cross-Device Settings Sync",
    "Smart Clipboard Pre-fill",
    "Swap Button with Dynamic Conversion",
    "Dark/Light Theme Toggle"
  ]
}
```

### Additional SEO Features
- Sitemap.xml for search engine crawling
- Robots.txt for crawler directives
- Google Analytics (G-435JGDCYLL)
- Preconnect to external domains
- DNS prefetch for performance
- Apple touch icon
- Image optimization (WebP format)

## Design & UI

**Design System:**
- Modern, clean UI with Tailwind CSS 4
- Responsive design for all devices (mobile, tablet, desktop)
- Accessibility features throughout (ARIA labels, semantic HTML)
- Custom color scheme with primary teal color: #38c89a
- Professional typography and spacing

**Theme Support:**
- Dark/light theme toggle (mentioned in features)
- Consistent color palette
- Teal accent color (#38c89a) for buttons and highlights
- Gray backgrounds and white cards for content sections

**Component Styling:**
- Rounded corners on cards (rounded-lg)
- Shadow effects for depth (shadow-md)
- Hover states on interactive elements
- Responsive spacing (mb-4, mb-6, mb-8, p-8)
- Centered content with max-width constraints

**Typography:**
- Clear heading hierarchy (text-4xl, text-3xl, text-2xl, text-xl)
- Bold font weights for emphasis
- Gray color palette for text (text-gray-900, text-gray-700, text-gray-600)

## Available Scripts

```bash
npm run dev      # Start development server with Vite
npm run build    # Build for production
npm run preview  # Preview production build locally
npm run lint     # Run ESLint for code quality
```

## Key Selling Points

1. **100% Free** - No subscriptions, no hidden fees, no premium tiers
2. **Privacy-First** - All data stored locally, no tracking
3. **Cross-Platform** - Works on Chrome, Edge, and Firefox
4. **Real-Time Rates** - Always up-to-date exchange rates
5. **Customizable** - Choose your own favorite currencies
6. **Fast & Lightweight** - Minimal resource usage
7. **Sync Enabled** - Settings follow you across devices
8. **Professional Design** - Clean, modern interface
9. **Easy to Use** - Simple 3-step setup process
10. **Active Development** - Regular updates and support

## Keywords & SEO Terms

Primary: currency converter, forex, exchange rates, browser extension, chrome extension, firefox addon, edge extension

Secondary: real-time conversion, currency favorites, currency exchange tool, multi-currency converter, live exchange rates, currency calculator, travel currency converter, online shopping currency, freelancer currency tool, cross-device sync, privacy-focused extension, dark mode extension, clipboard auto-fill, swap conversion direction

Long-tail: Forex Buddy App, personal forex currency converter, browser currency conversion tool, real-time currency conversion matrix, smart clipboard currency pre-fill

## Deployment

**Production Site:** /var/www/synergyaiq/forexbuddy/
**Build Output:** dist/ directory
**Deployment Method:** Manual copy to production server

The site is a static React SPA built with Vite and deployed as static files.