Crypto Chat Assistant

A comprehensive, production-ready cryptocurrency assistant built with React, TypeScript, and modern web technologies. This application provides real-time crypto data, portfolio management, voice interaction, and interactive charts through an intuitive chat interface with a clean, modern light theme.

🚀 Live Demo: https://ascender1729.github.io/CryptoChatAssistant/

🌟 Features

Core Functionality

• Real-time Cryptocurrency Data: Live prices, market caps, and 24h changes using CoinGecko API
• Natural Language Processing: Understand queries like "What's Bitcoin's price?" or "BTC price"
• Portfolio Management: Add, remove, and track cryptocurrency holdings with persistent storage
• Interactive Price Charts: 7-day historical data with Chart.js integration
• Trending Cryptocurrencies: Display top 5 trending coins with key metrics
• Voice Integration: Speech-to-text input and text-to-speech responses

User Experience

• Modern Light Theme: Clean, professional UI with subtle gradients and glass effects
• Modern Chat Interface: Beautiful message bubbles with timestamps and smooth animations
• Responsive Design: Mobile-first approach with optimized layouts for all devices
• Loading States: Thinking indicators with gentle animations for better user feedback
• Error Handling: Comprehensive error management with user-friendly messages
• Accessibility: Screen reader support and keyboard navigation

Technical Features

• TypeScript: Full type safety and enhanced developer experience
• Modular Architecture: Clean separation of concerns with dedicated services
• Caching System: Intelligent API response caching to reduce requests
• Local Storage: Persistent portfolio data across sessions
• Performance Optimized: Lazy loading and efficient rendering

🚀 Technology Stack

• Frontend: React 18, TypeScript, Tailwind CSS
• Charts: Chart.js with React Chart.js 2
• APIs: CoinGecko API (no API key required)
• Voice: Web Speech API (Speech Recognition & Synthesis)
• Build Tool: Vite
• Icons: Lucide React

📋 Prerequisites

• Node.js 16+ and npm/yarn
• Modern browser with Web Speech API support (Chrome, Edge, Safari)
• Internet connection for real-time crypto data

🛠️ Installation

1. Clone the repository

   git clone https://github.com/ascender1729/CryptoChatAssistant.git
   cd CryptoChatAssistant

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173

🎯 Usage Guide

Basic Commands

Price Queries

• "What's Bitcoin's price?"
• "BTC price"
• "How much is Ethereum worth?"
• "ETH value"

Portfolio Management

• "I bought 0.5 BTC"
• "Add 100 ETH to my portfolio"
• "Remove my Bitcoin"
• "Show my portfolio"

Market Information

• "Show trending crypto"
• "What are the hot coins?"
• "BTC chart"
• "Show Ethereum history"

Voice Features

1. Voice Input: Click the microphone button and speak your query
2. Voice Output: Toggle the speaker button to enable/disable voice responses
3. Settings: Adjust volume, speed, and pitch in voice settings

Portfolio Features

• Add Holdings: Specify amount and cryptocurrency symbol
• View Portfolio: See total value, individual positions, and allocations
• Remove Holdings: Delete specific cryptocurrency from portfolio
• Auto-Update: Prices update automatically when viewing portfolio

🏗️ Project Structure

├── public/              # Static assets
├── dist/                # Production build output (generated)
├── .github/             # GitHub Actions workflows for deployment
│   └── workflows/
│       └── deploy.yml   # Automated GitHub Pages deployment workflow
├── src/
│   ├── components/      # React components
│   │   ├── ChatContainer.tsx    # Main chat interface with header and cryptocurrency icon
│   │   ├── ChatMessage.tsx      # Individual message display with enhanced bubble styling
│   │   ├── ChatInput.tsx        # Message input with voice controls
│   │   ├── PriceChart.tsx       # Interactive price charts
│   │   ├── PortfolioDisplay.tsx # Portfolio visualization with improved layout
│   │   ├── VoiceControls.tsx    # Voice input/output controls
│   │   └── TypingIndicator.tsx  # Thinking animation with custom styling
│   ├── services/        # Business logic and API services
│   │   ├── cryptoApi.ts         # CoinGecko API integration
│   │   ├── portfolioService.ts  # Portfolio management
│   │   ├── voiceService.ts      # Speech recognition/synthesis
│   │   └── messageProcessor.ts  # Natural language processing
│   ├── types/           # TypeScript type definitions
│   │   └── index.ts
│   ├── App.tsx          # Main application component
│   ├── main.tsx         # Application entry point
│   └── index.css        # Global styles
├── vite.config.ts       # Vite configuration with GitHub Pages base path
├── tailwind.config.js   # Tailwind CSS configuration
└── tsconfig.json        # TypeScript configuration

🔧 Configuration

API Configuration

The application uses CoinGecko's free API which doesn't require authentication. Rate limits apply:

• 30 calls/minute for free tier
• Caching is implemented to minimize API calls (30-second cache duration)

GitHub Pages Configuration

• Base Path: /CryptoChatAssistant/ set in vite.config.ts
• Deployment Branch: gh-pages (automatically created by the deployment script)
• Automation: GitHub Actions workflow available for CI/CD

Voice Settings

Configurable through the UI:

• Volume: 0-100%
• Speech Rate: 0.5x-2x
• Pitch: 0-2

Browser Compatibility

• Speech Recognition: Chrome, Edge, Safari (iOS 14.5+)
• Speech Synthesis: All modern browsers
• Charts: All modern browsers with Canvas support

🚀 Deployment

GitHub Pages (Current Deployment)

The application is currently hosted on GitHub Pages. To deploy to GitHub Pages:

1. Configure deployment settings (already done)

   • Set base in vite.config.ts to /CryptoChatAssistant/
   • Add GitHub Pages scripts to package.json

2. Build and deploy

   npm run deploy

   This command builds the application and deploys it to the gh-pages branch.

3. Access the deployed application Visit https://ascender1729.github.io/CryptoChatAssistant/

Other Deployment Options

Building for any hosting provider

1. Build the application

   npm run build

2. Preview the build

   npm run preview

3. Deploy Upload the dist folder to your hosting provider

Vercel/Netlify

The application is also compatible with one-click deployments on Vercel or Netlify. Simply connect your GitHub repository to either platform for automated deployments.

🔍 Known Limitations

API Limitations

• CoinGecko free tier: 30 calls/minute
• Some lesser-known cryptocurrencies may not be available
• Historical data limited to CoinGecko's offerings

Browser Limitations

• Voice recognition requires HTTPS in production
• Speech synthesis voices vary by operating system
• Safari has limited Web Speech API support on iOS

Feature Limitations

• Portfolio data stored locally (not synced across devices)
• Charts limited to price data (no volume or technical indicators)
• No real-time price streaming (manual refresh required)

🛡️ Error Handling

The application includes comprehensive error handling:

• Network Errors: Graceful degradation when API is unavailable
• Voice Errors: Fallback to text input when voice fails
• Data Validation: Input sanitization and validation
• User Feedback: Clear error messages in chat interface

🎨 Customization

Styling

• Modify tailwind.config.js for theme changes (extended color palette, shadows, and border radius)
• Update src/index.css for custom animations and scrollbar styling
• Customize colors and glass effects in component files
• Header uses a custom cryptocurrency icon SVG from Heroicons

Features

• Add new cryptocurrency commands in messageProcessor.ts
• Extend API integration in cryptoApi.ts
• Modify chart options in PriceChart.tsx

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

🐛 Troubleshooting

Voice not working?

• Ensure HTTPS is used (required for production)
• Check browser permissions for microphone access
• Try a different browser (Chrome recommended)

API errors?

• Check internet connection
• Verify CoinGecko API status
• Clear browser cache and reload

Chart not displaying?

• Ensure JavaScript is enabled
• Check for console errors
• Try refreshing the page

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• CoinGecko for providing free crypto data API
• Chart.js for beautiful charts
• Lucide for clean, consistent icons
• Tailwind CSS for utility-first styling
• Heroicons for the cryptocurrency icon
• GitHub Pages for free hosting
• gh-pages for simplified GitHub Pages deployment

📱 Live Demo

Access the live application at https://ascender1729.github.io/CryptoChatAssistant/

---

Built with ❤️ for the crypto community