🚀 CryptoHub

Your Central Hub for Cryptocurrency Data & Analytics

A premium, responsive cryptocurrency dashboard with real-time market data, interactive charts, and comprehensive analytics.

---

✨ Features

🎯 Core Functionality

• 📊 Real-time Price Tracking - Live cryptocurrency prices with instant updates
• 📈 Interactive Charts - Beautiful price charts powered by Chart.js
• 🔍 Advanced Filtering - Search and filter thousands of cryptocurrencies
• 📱 Fully Responsive - Perfect experience on mobile, tablet, and desktop
• 🌙 Dark Theme - Eye-friendly dark mode optimized for extended use
• ⚡ Lightning Fast - Optimized performance with Vite and React 19

🎨 Premium UI/UX

• 🎭 Glassmorphism Design - Modern glass-like effects and blur backgrounds
• ✨ Smooth Animations - Fluid transitions and hover effects
• 🎨 Gradient Accents - Beautiful color gradients throughout the interface
• 🚀 Custom Logo - Premium branded logo with animations
• 📱 Mobile-First - Touch-friendly interface optimized for all devices

🛠 Technical Excellence

• ⚡ Modern React - Built with React 19 and latest features
• 🔥 Vite Build System - Lightning-fast development and builds
• 📊 Data Visualization - Professional charts and analytics
• 🔒 Type Safety - TypeScript-ready codebase
• ♿ Accessibility - WCAG compliant and screen reader friendly

---

🚀 Live Demo

Check out the live project here: CryptoHub

---

Outcome of the Project:

Main Dashboard!

Coin Details Preview!

About Page Preview!

Error-404 Page Preview!

---

🚀 Quick Start

Prerequisites

• Node.js (v18.0.0 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/yourusername/cryptohub.git
   cd cryptohub

2. Install dependencies

   npm install
   # or
   yarn install

3. Start development server

   npm run dev
   # or
   yarn dev

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

Build for Production

npm run build
# or
yarn build

Preview Production Build

npm run preview
# or
yarn preview

---

🏗️ Tech Stack

Category	Technology	Version	Purpose
Frontend	React	19.1.1	UI Framework
Build Tool	Vite	7.1.7	Development & Build
Charts	Chart.js	4.5.0	Data Visualization
Routing	React Router	7.9.4	Navigation
Styling	CSS3	-	Responsive Design
API	CoinGecko	v3	Crypto Data

🔧 Dependencies

Core Dependencies

{
  "react": "^19.1.1",
  "react-dom": "^19.1.1",
  "react-router": "^7.9.4",
  "chart.js": "^4.5.0",
  "chartjs-adapter-date-fns": "^3.0.0",
  "react-chartjs-2": "^5.3.0"
}

Development Dependencies

{
  "vite": "^7.1.7",
  "@vitejs/plugin-react": "^5.0.4",
  "eslint": "^9.36.0",
  "@types/react": "^19.1.16",
  "@types/react-dom": "^19.1.16"
}

---

📱 Responsive Design

CryptoHub is built with a mobile-first approach and provides an exceptional experience across all devices:

📐 Breakpoints

• 📱 Mobile: ≤ 768px (iPhone, Android phones)
• 📱 Large Mobile: 769px - 1024px (Large phones, small tablets)
• 📟 Tablet: 1025px - 1200px (iPad, Android tablets)
• 💻 Desktop: 1201px+ (Laptops, desktops)
• 🖥️ Ultra-wide: 1600px+ (Large monitors)

🎯 Device Optimizations

• Touch-friendly interface with 44px minimum touch targets
• iOS Safari optimizations (prevents zoom on input focus)
• High DPI display support for crisp images
• Landscape orientation support for mobile devices
• Reduced motion support for accessibility

---

🎨 UI Components

🏠 Dashboard

• Header with branded logo and navigation
• Search & Filter controls for crypto discovery
• Coin Grid with responsive card layout
• Real-time price updates and market data

📊 Coin Details

• Comprehensive coin information and statistics
• Interactive price charts with multiple timeframes
• Market data including volume, market cap, and rankings
• External links to official websites and social media

📖 About Page

• Premium hero section with animated elements
• Feature showcase with glassmorphism cards
• Technology stack overview
• Call-to-action sections for engagement

---

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

# API Configuration
VITE_COINGECKO_API_URL=https://api.coingecko.com/api/v3
VITE_API_TIMEOUT=10000

# App Configuration
VITE_APP_NAME=CryptoHub
VITE_APP_VERSION=1.0.0

Vite Configuration

The project uses Vite with the following optimizations:

// vite.config.js
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'https://api.coingecko.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/api/v3')
      }
    }
  }
})

---

📁 Project Structure

cryptohub/
├── 📁 public/
│   ├── favicon.jpg          # Custom favicon
│   └── vite.svg            # Vite logo
├── 📁 src/
│   ├── 📁 assets/
│   │   ├── Logo.png        # Main logo
│   │   └── nav-logo.jpg    # Navigation logo
│   ├── 📁 components/
│   │   ├── CoinCard.jsx    # Crypto coin card
│   │   ├── FilterInput.jsx # Search filter
│   │   ├── Header.jsx      # Navigation header
│   │   ├── LimitSelector.jsx
│   │   ├── Loader.jsx      # Loading component
│   │   ├── PriceChart.jsx  # Chart component
│   │   └── SortSelector.jsx
│   ├── 📁 pages/
│   │   ├── About.jsx       # About page
│   │   ├── Coin-Details.jsx # Coin details
│   │   ├── home.jsx        # Main dashboard
│   │   └── not-found.jsx   # 404 page
│   ├── App.jsx             # Main app component
│   ├── index.css           # Global styles
│   └── main.jsx            # App entry point
├── index.html              # HTML template
├── package.json            # Dependencies
├── vite.config.js          # Vite configuration
└── README.md               # This file

---

🎯 Features in Detail

🔍 Search & Filter

• Real-time search through cryptocurrency names and symbols
• Advanced sorting by market cap, price, volume, and 24h change
• Limit selection to display 10, 25, 50, or 100 coins
• Instant results with smooth animations

📊 Data Visualization

• Price charts with multiple timeframes
• Market statistics with color-coded changes
• Volume indicators and market cap rankings
• 24h price changes with percentage indicators

🎨 Design System

• Consistent spacing using CSS custom properties
• Color palette optimized for dark theme
• Typography with proper hierarchy
• Animation system with smooth transitions

---

🚀 Performance

⚡ Optimizations

• Code splitting with React.lazy()
• Image optimization with proper sizing
• CSS optimization with minimal bundle size
• API caching for improved performance
• Lazy loading for non-critical components

📊 Metrics

• First Contentful Paint: < 1.5s
• Largest Contentful Paint: < 2.5s
• Cumulative Layout Shift: < 0.1
• Bundle Size: < 500KB gzipped

---

🤝 Contributing

We welcome contributions! Please follow these steps:

🔧 Development Setup

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Make your changes
4. Commit your changes

   git commit -m 'Add amazing feature'

5. Push to the branch

   git push origin feature/amazing-feature

6. Open a Pull Request

📝 Code Style

• Follow ESLint configuration
• Use prettier for code formatting
• Write meaningful commit messages
• Add comments for complex logic

🐛 Bug Reports

When reporting bugs, please include:

• Browser and version
• Device information
• Steps to reproduce
• Expected vs actual behavior
• Screenshots if applicable

---

📄 License

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

---

🙏 Acknowledgments

• CoinGecko for providing the cryptocurrency API
• React Team for the amazing framework
• Vite Team for the fast build tool
• Chart.js for beautiful data visualization
• Community for feedback and contributions

---

📞 Support

• 📧 Email: support@cryptohub.dev
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions
• 📖 Documentation: Wiki

---

⭐ Star this repository if you found it helpful!

Made with ❤️ for the crypto community