- 🔍 Overview
- ✨ Vision
- 🎯 Why CryptoHub
- 🚀 Live Demo
- 📸 Screenshots
- 🌟 Key Features
- 🛠️ Tech Stack
- 📊 Project Insights
- 🧭 Project Flow
- ⚙️ Installation and Setup
- 🛠️ Troubleshooting
- 📁 Project Structure
- 🎨 Design Philosophy
- 📱 Responsive Design
- 👨💼 Project Leadership
- ❓ FAQ
- ✴️ Issue Creation
- 📑 Contribution Guidelines
- 🤝 Contributing
- 👥 Contributors
- 📋 Code of Conduct
- 💡 Suggestions & Feedback
- 🙌 Show Your Support
- 📄 License
- 👨💼 Project Leadership
- 📞 Contact
- ⭐ Stargazers
- 🍴 Forkers
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.
| 🌟 Stars | 🍴 Forks | 🐛 Issues | 🔔 Open PRs | 🔕 Closed PRs | 🛠️ Languages | 👥 Contributors |
 |
 |
 |
 |
 |
 |
 |
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
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:
👉
Modern, responsive cryptocurrency dashboard with real-time data
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]
- 🔐 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)
- 🔑 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
- 📈 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
Ensure you have the following installed:
- 🟢 Node.js 14+ and npm
- 🔑 CoinGecko API Key (Get it here)
- 🔥 Firebase Project (Create one here)
git clone https://github.com/KaranUnique/CryptoHub.git
cd CryptoHubnpm install# 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-idHow to get credentials:
- CoinGecko API: Sign up at CoinGecko API
- Firebase: Go to Firebase Console → Project Settings → Your Apps
Important: To enable Google Sign-In, follow these steps:
- Go to Firebase Console
- Select your project
- Navigate to Authentication → Sign-in method
- Click on Google in the providers list
- Toggle Enable
- Set Project support email (your email)
- Click Save
For local development, add authorized domains:
- In Firebase Console → Authentication → Settings tab
- Scroll to Authorized domains
- Click Add domain
- Add the following:
localhost(for local development)127.0.0.1(alternative localhost)- Your deployment domain (e.g.,
cryptohub.vercel.app)
Note: Without adding
localhostto authorized domains, Google OAuth will not work in local development!
Test Google Sign-In:
- Run
npm run dev - Click "Sign up" or "Login"
- Try Google authentication
- If you see "auth/unauthorized-domain" error:
- Double-check authorized domains in Firebase Console
- Ensure
localhostis added - Clear browser cache and retry
Common Issues:
| Error | Solution |
|---|---|
auth/unauthorized-domain |
Add localhost to Firebase authorized domains |
auth/popup-blocked |
Allow popups in browser settings |
auth/network-request-failed |
Check internet connection & Firebase config |
auth/invalid-api-key |
Verify VITE_FIREBASE_API_KEY in .env |
Firebase Console Quick Links:
npm run devhttp://localhost:5173
npm run buildnpm run preview
Common issues and their solutions:
- ⛔ Node version errors - Check
node -v(requires v14+) - 🔐 Missing .env file - Ensure
.envexists with all required keys - 🔌 Port already in use - Vite will automatically try ports 5174, 5175, etc.
- 🌐 API errors - Verify CoinGecko API key is valid and not rate-limited
- 🔥 Firebase errors - Check Firebase configuration and authentication is enabled
- 🎨 Theme not persisting - Clear browser localStorage and try again
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
| 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 |
.env- API keys (CoinGecko, Firebase)vite.config.js- Vite build configurationpackage.json- Project dependencies and scriptsfirebase.js- Firebase initialization
- Glassmorphism - Modern frosted glass aesthetic
- Vibrant Gradients - Purple (#7927ff) to Cyan (#00f3ff) transitions with Orange accents (#ff6b35)
- Smooth Animations - Micro-interactions with Framer Motion
- Dark-First Design - Eye-friendly default with light mode toggle
--neon-purple: #7927ff /* Primary brand color */
--neon-cyan: #00f3ff /* Accent color */
--neon-orange: #ff6b35 /* Call-to-action */
--neon-green: #00e676 /* Success indicators */
--glass-surface: rgba(255, 255, 255, 0.03)
--glass-border: rgba(255, 255, 255, 0.06)
- Desktop: 1024px+ - Full feature set with all columns visible
- Tablet: 768px - 1024px - Optimized spacing and font sizes
- Mobile: 481px - 768px - Horizontal scroll enabled, compact layout
- Small Mobile: 320px - 480px - Maximum space efficiency
✅ Navbar
- Hamburger menu with smooth slide-down animation
- Touch-optimized buttons (44px minimum)
- Compact logo and spacing
✅ Coin List Table
- Horizontal scrolling - All 5 columns visible (Rank, Asset, Price, Change, Market Cap)
- Smooth swipe gestures
- Optimized font sizes for readability
✅ Hero Section
- Floating crypto tickers visible on mobile with compact styling
- Responsive heights (50vh - 70vh)
- Full-width search bar
✅ General
- Touch-friendly interactive elements
- Optimized images
- Fast performance on 3G/4G
Q1: Is CryptoHub free to use?
Yes! CryptoHub is completely free and open-source. You can access real-time crypto prices, charts, and basic features without any cost. Premium features are planned for future releases.
Q2: Do I need an account to view cryptocurrency prices?
No, you can browse crypto prices, search coins, and view charts without creating an account. However, you'll need to sign up to access features like the Dashboard, Leaderboard, and personalized portfolio tracking.
Q3: How often are cryptocurrency prices updated?
Prices are fetched in real-time from the CoinGecko API. The data refreshes automatically to ensure you always see the most current market information.
Q4: What cryptocurrencies are supported?
CryptoHub supports 100+ major cryptocurrencies including Bitcoin, Ethereum, Solana, Cardano, BNB, and many more. You can search for any coin using the search bar on the home page.
Q5: How do I sign up for an account?
Click the "Sign up" button in the navbar, enter your name, email, and password. You'll receive a verification email from Firebase. Verify your email to activate your account.
Q6: Can I use CryptoHub on mobile devices?
Absolutely! CryptoHub is fully responsive and works seamlessly on all devices - desktop, tablet, and mobile. The UI adapts perfectly to your screen size.
Q7: What is the difference between Light and Dark mode?
CryptoHub offers both Light and Dark themes for comfortable viewing. Click the theme toggle in the navbar to switch between modes. Your preference is saved locally.
Q8: How do I view detailed information about a specific coin?
Click on any cryptocurrency in the coin list table. You'll be redirected to a detailed page showing: - Interactive 10-day price chart - Current price - 24-hour change - Market cap - Price history
Q10: What if I forget my password?
No worries! Click "Forgot password?" on the login page, enter your email address, and you'll receive a password reset link. Click the link in your email to create a new password securely.
Q11: Can I change my password?
Yes! If you signed up with email/password, navigate to Dashboard and click the lock icon, or go to `/change-password` to update your password securely.
Q12: How can I contribute to this project?
We welcome contributions! Here's how: 1. Fork the repository 2. Create a feature branch 3. Make your changes 4. Submit a Pull Request
Check the Contributing Guidelines for detailed steps.
Q13: What happens if the CoinGecko API rate limit is exceeded?
The free CoinGecko API has rate limits. If exceeded, you may see delayed data updates. For production use, consider upgrading to a paid CoinGecko API plan for higher limits.
Q14: Is my data secure?
Yes! We use Firebase Authentication for secure user management. Passwords are encrypted and never stored in plain text. We follow industry-standard security practices.
Q15: Can I deploy CryptoHub to my own server?
Yes! CryptoHub can be deployed to: - Vercel (recommended) - Netlify - AWS - Any platform supporting React + Vite
Check the Installation Setup section for deployment instructions.
Q16: What should I do if I find a bug?
Please report bugs by: 1. Opening an [Issue](https://github.com/KaranUnique/CryptoHub/issues) 2. Providing screenshots if UI-related 3. Describing steps to reproduce 4. Mentioning your browser/device info
Q17: How can I request a new feature?
Create a [Feature Request](https://github.com/KaranUnique/CryptoHub/issues) issue with: - Clear description of the feature - Use case/benefits - Any mockups or examples (optional)
We review all suggestions and prioritize based on community needs.
Found a bug or have a feature request?
- Check the issue tracker first
- Create a new issue with a clear description
- Include screenshots/videos if reporting UI bugs
- Tag appropriately (bug, enhancement, documentation, etc.)
We welcome contributions! Follow these steps:
- ⭐ Star the Repository
- 🍴 Fork the Repository
- 🔀 Create a new branch for your feature/fix
- 💻 Make your changes and test thoroughly
- 📝 Commit with clear messages
- 🔼 Push to your fork
- 🎯 Create a Pull Request with screenshots
Check the CONTRIBUTING.md for detailed steps.
- 🐛 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
We welcome all contributions and suggestions! Whether it's a new feature, design improvement, or a bug fix - your voice matters 💜
Thanks to all our amazing contributors! 🎉
See the full list on the GitHub Contributors Graph.
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.
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
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
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
- Admin & Mentor: KaranUnique
Feel free to reach out to the admin for questions, guidance, or support on your contributions.
For questions, feedback, or collaboration:
- 🐛 Bug Reports: Open an Issue
- 💡 Feature Requests: Create Feature Request
- 💬 Discussions: GitHub Discussions
- 📧 Contact Admin: KaranUnique
Open an Issue | 🌟 Star on GitHub | 🚀 Live Demo
Ready to explore the crypto universe? Get started with CryptoHub today! 🚀💎