CRYPTOHUB

🐛 Report Bug • 💡 Request Feature • 🌐 Live Demo

📑 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

🔍 Overview

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.

📊 Project Insights

🌟 Stars	🍴 Forks	🐛 Issues	🔔 Open PRs	🔕 Closed PRs	🛠️ Languages	👥 Contributors

✨ Vision

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

🎯 Why CryptoHub?

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

🚀 Live Demo

Experience CryptoHub live here:

👉

📸 Screenshots

Modern, responsive cryptocurrency dashboard with real-time data

🧭 Comprehensive Project Flow

Complete User Journey & Application Routes

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]

Loading

Market Data Lifecycle

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

Loading

🌟 Key Features

👤 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, Solana, Cardano, BNB)
• 📱 Horizontal Scroll - All data columns visible on mobile with smooth scrolling

🛠️ Tech Stack

Frontend

Backend & Services

Styling & Design

Deployment

⚙️ Installation and Setup

📋 Prerequisites

Ensure you have the following installed:

• 🟢 Node.js 14+ and npm
• 🔑 CoinGecko API Key (Get it here)
• 🔥 Firebase Project (Create one here)

1. Clone the repository

git clone https://github.com/KaranUnique/CryptoHub.git
cd CryptoHub

2. Install dependencies

npm install

🔧 Environment Setup

3. Create .env file in the project root

# CoinGecko API Key
VITE_CG_API_KEY=your-coingecko-api-key

# Firebase Configuration
VITE_FIREBASE_API_KEY=your-firebase-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-project-id.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-project-id.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
VITE_FIREBASE_APP_ID=your-app-id

How to get credentials:

• CoinGecko API: Sign up at CoinGecko API
• Firebase: Go to Firebase Console → Project Settings → Your Apps

🏃 Running Locally

4. Start the development server

npm run dev

5. Open in browser

http://localhost:5173

🐳 Docker Setup (Alternative)

For a containerized development environment:

# Start with Docker Compose
docker compose up

# Access at http://localhost:5173

📖 See DOCKER_SETUP.md for full guide

Build for Production

npm run build

Preview Production Build

npm run preview

📁 Project Structure

CryptoHub/
│
├── 📂 public/
│   └── crypto-logo.png                    # Application logo
│
├── 📂 src/
│   │
│   ├── 📂 assets/                         # Static assets
│   │   └── CryptoHub.png                  # Banner image
│   │
│   ├── 📂 components/                     # Reusable UI components
│   │   ├── Navbar.jsx                     # Responsive navigation bar
│   │   ├── Navbar.css                     # Navbar styling
│   │   ├── Footer.jsx                     # Footer component
│   │   ├── LineChart.jsx                  # Victory.js chart wrapper
│   │   ├── LoadingSpinner.jsx             # Loading indicator
│   │   ├── Pricing.jsx                    # Pricing plans page
│   │   ├── Blog.jsx                       # Blog listing page
│   │   ├── BlogDetail.jsx                 # Individual blog post
│   │   ├── Features.jsx                   # Features showcase
│   │   ├── Signup.jsx                     # User registration
│   │   ├── Login.jsx                      # User login
│   │   ├── ForgotPassword.jsx             # Password reset via email
│   │   ├── Contributors.jsx               # Contributors page
│   │   ├── Leaderboard.jsx                # Crypto leaderboard
│   │   ├── ChangePassword.jsx             # Password management
│   │   └── PrivateRoute.jsx               # Protected route wrapper
│   │
│   ├── 📂 context/                        # React Context API
│   │   ├── CoinContext.jsx                # Cryptocurrency data state
│   │   ├── AuthContext.jsx                # Authentication state
│   │   └── ThemeContext.jsx               # Dark/Light theme state
│   │
│   ├── 📂 pages/                          # Main application pages
│   │   ├── Home/
│   │   │   ├── Home.jsx                   # Landing page
│   │   │   └── Home.css                   # Home page styles
│   │   ├── Coin/
│   │   │   ├── Coin.jsx                   # Individual coin details
│   │   │   └── Coin.css                   # Coin page styles
│   │   └── Dashboard/
│   │       ├── Dashboard.jsx              # User dashboard
│   │       └── Dashboard.css              # Dashboard styles
│   │
│   ├── 📄 App.jsx                         # Main app component & routing
│   ├── 📄 main.jsx                        # Application entry point
│   ├── 📄 index.css                       # Global styles & CSS variables
│   └── 📄 firebase.js                     # Firebase configuration
│
├── 📄 .env                                # Environment variables (not in repo)
├── 📄 .gitignore                          # Git ignore rules
├── 📄 package.json                        # Dependencies & scripts
├── 📄 package-lock.json                   # Dependency lock file
├── 📄 vite.config.js                      # Vite configuration
├── 📄 index.html                          # HTML template
├── 📄 LICENSE                             # MIT License
└── 📄 README.md                           # Project documentation

📦 Key Directories

Directory	Purpose
/public	Static assets served directly
/src/components	Reusable React components
/src/context	Global state management using Context API
/src/pages	Main application pages with routing
/src/assets	Images, media files

🔧 Configuration Files

• .env - API keys (CoinGecko, Firebase)
• vite.config.js - Vite build configuration
• package.json - Project dependencies and scripts
• firebase.js - Firebase initialization

---

📖 Extended Documentation

Detailed guides to help you get started:

• ❓ General FAQ
• 🔥 Full Firebase & OAuth Setup
• 🎨 Design System & Branding
• 🛠 Advanced Troubleshooting

---

✴️ Issue Creation

Found a bug or have a feature request?

1. Check the issue tracker first
2. Create a new issue with a clear description
3. Include screenshots/videos if reporting UI bugs
4. Tag appropriately (bug, enhancement, documentation, etc.)

📑 Contribution Guidelines

We welcome contributions! Follow these steps:

1. ⭐ Star the Repository
2. 🍴 Fork the Repository
3. 🔀 Create a new branch for your feature/fix
4. 💻 Make your changes and test thoroughly
5. 📝 Commit with clear messages
6. 🔼 Push to your fork
7. 🎯 Create a Pull Request with screenshots

Check the CONTRIBUTING.md for detailed steps.

🤝 Contributing

Ways to Contribute

• 🐛 Bug Fixes - Help identify and fix bugs
• ✨ New Features - Add cryptocurrency tracking features
• 🎨 UI/UX Improvements - Enhance the user interface
• 📱 Mobile Responsiveness - Improve mobile experience
• 📝 Documentation - Improve guides and docs
• 🌐 Translations - Help make CryptoHub multilingual
• 🧪 Testing - Write unit and integration tests
• 🔒 Security - Help keep user data safe
• 📰 Blog Content - Write crypto educational articles

Contributing is fun 🧡

We welcome all contributions and suggestions! Whether it's a new feature, design improvement, or a bug fix - your voice matters 💜

👥 Contributors

Thanks to all our amazing contributors! 🎉

See the full list on the GitHub Contributors Graph.

📋 Code of Conduct

By participating in this project, you agree to maintain a respectful and inclusive environment for all contributors. Harassment, discrimination, or any form of abuse will not be tolerated.

For more details, see CODE_OF_CONDUCT.md.

Show some by starring this awesome repository!

💡 Suggestions & Feedback

We'd love to hear from you! Feel free to:

• 💬 Open a Discussion
• 🐛 Report Issues
• 💡 Request Features
• ⭐ Star the repository if you find it helpful

🙌 Show Your Support

If you find CryptoHub helpful, please consider:

• ⭐ Star the repository
• 🐦 Share on social media
• 💬 Tell your friends and colleagues
• 🤝 Contribute to the project
• 📝 Write a blog post about it

📄 License

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

MIT License - Free to use, modify, and distribute
✅ Commercial use
✅ Modification
✅ Distribution
✅ Private use

👨‍💼 Project Leadership

• Admin & Mentor: KaranUnique

Feel free to reach out to the admin for questions, guidance, or support on your contributions.

📞 Contact

For questions, feedback, or collaboration:

• 🐛 Bug Reports: Open an Issue
• 💡 Feature Requests: Create Feature Request
• 💬 Discussions: GitHub Discussions
• 📧 Contact Admin: KaranUnique

⭐ Stargazers

🍴 Forkers

Give us a Star and let's track crypto together!

👨‍💻 Built with ❤️ by the CryptoHub Community

Open an Issue | 🌟 Star on GitHub | 🚀 Live Demo

⬆️ Back to Top

Ready to explore the crypto universe? Get started with CryptoHub today! 🚀💎