<div align="center"> <img src="./public/crypto-logo.png" alt="CryptoHub Logo" width="200"> </div> <h1 align="center">CRYPTOHUB</h1> <div align="center" style="margin: 10px 0 24px;"> <a href="https://github.com/KaranUnique/CryptoHub/issues">🐛 Report Bug</a> • <a href="https://github.com/KaranUnique/CryptoHub/issues">💡 Request Feature</a> • <a href="https://crypto-hub-rosy.vercel.app">🌐 Live Demo</a> </div> <img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="100%">

📑 Table of Contents

🔍 Overview
✨ Vision
🎯 Why CryptoHub
🚀 Live Demo
📸 Screenshots
🌟 Key Features
- 👤 User Features
- 🔐 Authentication
- 📊 Market Data
🛠️ Tech Stack
- Frontend
- Backend & Services
- Styling & Design
📊 Project Insights
🧭 Project Flow
⚙️ Installation and Setup
- 📋 Prerequisites
- 🔧 Environment Setup
- 🏃 Running Locally
📁 Project Structure
👨‍💼 Project Leadership
✴️ Issue Creation
📑 Contribution Guidelines
🤝 Contributing
- Ways to Contribute
👥 Contributors
📋 Code of Conduct
💡 Suggestions & Feedback
🙌 Show Your Support
📄 License
👨‍💼 Project Leadership
📞 Contact
⭐ Stargazers
🍴 Forkers

<img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="100%"> <h2 id="overview">🔍 Overview</h2>

CryptoHub is a modern, fully responsive cryptocurrency dashboard built with React and Vite. It empowers users to track real-time crypto prices, analyze market trends through interactive charts, explore educational content, and manage their crypto portfolio—all in one beautifully designed platform.

<img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="100%"> <div align="center"> <img src="https://readme-typing-svg.herokuapp.com?font=Fira+Code&pause=1000&color=7927FF&center=true&width=435&lines=Track+Crypto+Prices+Live!+%F0%9F%9A%80;Real-time+Market+Data+%F0%9F%93%88;Beautiful+Interactive+Charts+%E2%9C%A8;Multi-Currency+Support+%F0%9F%92%B1;Dark+%2F+Light+Theme+%F0%9F%8C%99;Mobile+Responsive+Design+%F0%9F%93%B1" alt="Typing SVG" /> </div> <img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="100%"> <h2 id="project-insights">📊 Project Insights</h2> <table align="center"> <thead align="center"> <tr> <td><b>🌟 Stars</b></td> <td><b>🍴 Forks</b></td> <td><b>🐛 Issues</b></td> <td><b>🔔 Open PRs</b></td> <td><b>🔕 Closed PRs</b></td> <td><b>🛠️ Languages</b></td> <td><b>👥 Contributors</b></td> </tr> </thead> <tbody> <tr> <td><img alt="Stars" src="https://img.shields.io/github/stars/KaranUnique/CryptoHub?style=flat&logo=github"/></td> <td><img alt="Forks" src="https://img.shields.io/github/forks/KaranUnique/CryptoHub?style=flat&logo=github"/></td> <td><img alt="Issues" src="https://img.shields.io/github/issues/KaranUnique/CryptoHub?style=flat&logo=github"/></td> <td><img alt="Open PRs" src="https://img.shields.io/github/issues-pr/KaranUnique/CryptoHub?style=flat&logo=github"/></td> <td><img alt="Closed PRs" src="https://img.shields.io/github/issues-pr-closed/KaranUnique/CryptoHub?style=flat&color=critical&logo=github"/></td> <td><img alt="Languages" src="https://img.shields.io/github/languages/count/KaranUnique/CryptoHub?style=flat&color=green&logo=github"></td> <td><img alt="Contributors" src="https://img.shields.io/github/contributors/KaranUnique/CryptoHub?style=flat&color=blue&logo=github"/></td> </tr> </tbody> </table> <img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="100%"> <h2 id="vision">✨ Vision</h2>

CryptoHub aims to democratize cryptocurrency information and make it accessible to everyone:

🌐 24/7 Access - Real-time cryptocurrency data at your fingertips
🔍 Transparency - Clear, accurate market information for informed decisions
📊 Comprehensive Analytics - Interactive charts with historical data
🎓 Education First - Learn about crypto through blogs and guides
📱 Mobile-First - Seamless experience across all devices

<img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="100%"> <h2 id="why-cryptohub">🎯 Why CryptoHub?</h2>

CryptoHub is built to provide the best cryptocurrency tracking experience:

🧭 All-in-One Platform - Market data, charts, news, and portfolio tracking in one place
🔍 Real-time Updates - Live price updates and market movements
⚙️ Smart Features - Advanced search, filters, and multi-currency support
🛡️ Secure & Private - Firebase authentication with data protection
📱 Beautiful UI - Modern glassmorphism design with smooth animations
🌙 Theme Toggle - Comfortable viewing in dark or light mode

Experience CryptoHub live here:

👉

</div> <img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="100%">

Visitors GitHub Contributors GitHub Last Commit GitHub Repo Size

<img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="100%"> <h2 id="screenshots">📸 Screenshots</h2> <div align="center"> <img src="./src/assets/CryptoHub.png" alt="CryptoHub Dashboard Preview" width="100%"/> <p><i>Modern, responsive cryptocurrency dashboard with real-time data</i></p> </div> <img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="100%"> <h2 id="project-flow">🧭 Comprehensive Project Flow</h2> <div align="center">

Complete User Journey & Application Routes

</div>

flowchart TD
  A[User] --> B[Visit CryptoHub]
  B --> C{Authenticated?}
  C -->|No| D[Browse Public Pages]
  C -->|Yes| E[Access Dashboard]
  D --> F[Home: Search & Filter Coins]
  D --> G[Blog: Read Articles]
  D --> H[Pricing: View Plans]
  D --> I[Features: Explore]
  F --> J[Click Coin]
  J --> K[View Details & Chart]
  D --> L{Want Login?}
  L -->|Yes| M[Login/Signup]
  M --> N[Firebase Auth]
  N -->|Success| E
  N -->|Failed| D
  E --> O[Dashboard]
  E --> P[Leaderboard]
  E --> Q[Change Password]

Market Data Lifecycle

</div>

graph LR
    subgraph External
    CG[(CoinGecko API)]
    end
    
    subgraph React_App
    CC[CoinContext]
    H[Home Page]
    D[Details Page]
    end
    
    CG -- "JSON Data" --> CC
    CC -- "State: coinsArray" --> H
    CC -- "State: singleCoin" --> D
    H -- "User Search" --> CC

<img src="https://user-images.githubusercontent.com/74038190/212284100-561aa473-3905-4a80-b561-0d28506553ee.gif" width="100%"> <h2 id="key-features">🌟 Key Features</h2>

👤 User Features

🔐 Secure Authentication - Firebase-based login/signup with email verification
👤 User Dashboard - Personalized dashboard with greeting and quick stats
🏆 Leaderboard - Track top-performing cryptocurrencies
📰 Crypto Blog - Educational content and market insights
💰 Pricing Plans - Flexible subscription tiers (Free, Pro, Premium)

🔐 Authentication

🔑 Email/Password Login - Traditional authentication method
🌐 Google OAuth - One-click sign-in with Google account
🔒 Secure Sessions - JWT-based session management with Firebase
👥 User Profiles - Personalized user experience with full name display
🔐 Password Management - Change password securely from dashboard
🔓 Password Reset - Forgot password recovery via email link

📊 Market Data

📈 Real-time Prices - Live cryptocurrency prices powered by CoinGecko API
🔍 Advanced Search - Search 100+ cryptocurrencies with autocomplete
💱 Multi-Currency - Support for USD, EUR, INR
📊 Interactive Charts - 10-day historical price charts with Victory.js
🎯 Price Filters - Filter coins by minimum and maximum price
✨ Floating Tickers - Real-time animated price tickers (Bitcoin, Ethereum, S

CryptoHub

Install / Use

README

📑 Table of Contents

👤 User Features

🔐 Authentication

📊 Market Data