Crypto-XChange is a cryptocurrency market application that enables users to view real-time market data, explore historical price trends, and interact with a rich set of analytics per digital coin. The app also allows users to create accounts, favorite coins, and simulate transactions to track potential investment performance. All market data is sourced from the CoinGecko API.
- Secure sign-ups and logins using Firebase Authentication.
- Personalized dashboards with email/password access.
- Interactive charts via Lightweight Charts and TradingView.
- Trends, market analytics, and historical performance visualization.
- Chakra UI ensures a consistent and accessible experience across devices.
- Mobile-first design with adaptive layouts.
- Built with Next.js for SSR (Server-Side Rendering) and SSG (Static Site Generation).
- Code splitting, lazy loading, and dynamic imports for faster load times and improved SEO.
- Individual coin pages with aggregated data from CoinGecko.
- Includes price charts, statistics, news, external resources, and user actions (watchlist, simulated trades).
- Light and dark mode via Chakra UI.
- Global theming across UI components with instant theme switching on load.
- Line Charts for 7-day trend overview.
- TradingView charts with interactive tooltips and multiple timeframe support.
- Detailed technical analysis features.
- Framework: Next.js for SSR & SSG
- UI Library: Chakra UI
- Charting Libraries:
- Chart.js – Global visualizations like pie charts.
- TradingView – Interactive coin-level analytics.
- State Management: React Context API (
AuthContext.tsx) for global auth and portfolio state.
- Data Source: CoinGecko API for real-time market data and coin-specific metrics.
- Authentication & Database: Firebase Authentication + Firestore
- OAuth & email/password login.
- Real-time syncing of watchlists and transactions.
- Caching & Storage: AWS S3
- Historical and global data cached to reduce API load.
- Static JSON storage for rarely updated data.
- Frontend: Next.js, React, TypeScript, Chakra UI
- Charts: Chart.js, Lightweight Charts, TradingView
- Authentication: Firebase
- Database: Firebase Firestore
- APIs: CoinGecko
- Cloud Storage: AWS S3
- The app is designed with scalability and performance in mind.
- Emphasis on real-time data accuracy and user experience.
- Modular code structure with reusable components and centralized theming.
This project is a Next.js app bootstrapped with create-next-app.
##🔧 Step1: Clone the Repository
git clone https://github.com/your-username/crypto-xchange.git
cd crypto-xchange##📦 Step 2: Install Dependencies
npm install
# or
yarnCreate a .env.local file in the root of your project and add the following keys. These are required to run Crypto-XChange locally.
| Key | Description |
|---|---|
FIREBASE_API_KEY |
Firebase API key for client-side SDKs |
FIREBASE_AUTH_DOMAIN |
Auth domain, usually in the format *.firebaseapp.com |
FIREBASE_PROJECT_ID |
Your Firebase project ID |
FIREBASE_STORAGE_BUCKET |
Cloud storage bucket for Firebase |
FIREBASE_MESSAGING_SENDER_ID |
Firebase Cloud Messaging sender ID |
FIREBASE_APP_ID |
Unique Firebase app identifier |
| Key | Description |
|---|---|
ACCESS_KEY_ID_AWS |
AWS access key for S3 |
ACCESS_KEY_SECRET_AWS |
AWS secret key for S3 |
| Key | Description |
|---|---|
COINBASE_API |
API key for Coinbase or other crypto provider |
| Key | Description |
|---|---|
NEWS_KEY |
API key for accessing crypto news |
🛑 Important:
Do not commit your.env.localfile to source control. It should be listed in your.gitignorefile to protect sensitive information. ##▶️ Step 4: Run the Development Server
npm run dev
# or
yarn devMIT License. See LICENSE file for details.