CryptoTon

A high-performance, real-time cryptocurrency dashboard and portfolio manager.
Built with modern web technologies to provide live market insights and personalized asset tracking.

View Live Application

Tip

Performance Note: The application is live with an optimized 120-second API polling configuration and fully working Tailwind styling. Short refresh intervals were intentionally avoided to prevent CoinGecko API rate limiting and ensure a stable user experience.

🚀 Overview

CryptoTon is a modern cryptocurrency tracker designed to give you a comprehensive overview of the digital asset market. It leverages the CoinGecko API to deliver real-time data, top trends, and market cap leaders. Furthermore, it includes a robust, locally-persisted portfolio manager and customizable price alerts, making it a complete toolkit for cryptocurrency enthusiasts.

---

✨ Key Features

• 🔴 Live Market Data: Real-time price updates running on a 120-second polling interval with a visual countdown timer.
• 📊 Advanced Filtering & Categories:
  • Top: Market cap leaders.
  • Trending: Currently trending assets on CoinGecko.
  • Most Visited: High-traffic cryptocurrencies.
  • New: Recently listed tokens.
  • Gainers & Losers: Top market movers over the last 24 hours.
  • Real-World Assets (RWA): Tracking tokenized real-world assets.
• 💼 Local Portfolio Manager: Input your holdings directly. CryptoTon automatically calculates total values based on live prices and saves your data locally.
• 🔔 Custom Price Alerts: Set visual notifications for when an asset crosses above or below a specific price threshold.
• 💡 Smart Sorting: Sort the market by Price, 1h %, 24h %, Market Cap, or your Personal Holdings Value.
• 🛡️ Resilience & Demo Mode: Built-in fallback mechanism automatically generates realistic mock data if API rate limits are reached, ensuring a smooth UX at all times.

---

🛠️ Technology Stack

• Frontend Framework: React (bootstrapped with Vite)
• Styling: Tailwind CSS for a utility-first, fully responsive design.
• Icons: Lucide React
• Data Source: CoinGecko API

---

💻 Getting Started

Follow these instructions to run the project locally.

Prerequisites

• Node.js (v16.x or newer recommended)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/abhranilsingharoy-cloud/CryptoTon.git
   cd CryptoTon

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Build for production:

   npm run build

Open your browser and navigate to http://localhost:5173 to view the application.

---

☁️ Deployment (Vercel)

CryptoTon is highly optimized for deployment on Vercel.

Deploying to Vercel

1. Connect your GitHub repository to Vercel.
2. Vercel will automatically detect the Vite framework and configure the build settings (npm run build and dist output directory).
3. Click Deploy.

Note

API Rate Limiting on Vercel: Since Vercel provides public URLs, your application might be visited by many users. To prevent hitting the CoinGecko API rate limit from individual client browsers, the application avoids short refreshes and uses a conservative 120-second (2-minute) polling interval. This ensures a smooth, uninterrupted experience for users in production without triggering the "Demo Mode" fallback too often.

---

📂 Project Structure

cryptoton/
├── src/
│   ├── App.jsx            # Core application and routing logic
│   ├── index.css          # Global styles & Tailwind configuration imports
│   └── main.jsx           # React entry point
├── public/                # Static assets
├── .eslintrc.cjs          # ESLint configuration
├── tailwind.config.js     # Tailwind CSS theme and styling rules
└── package.json           # Dependencies and build scripts

---

⚠️ API Rate Limits

CryptoTon uses the free tier of the CoinGecko API, which generally allows 10-30 requests per minute.

To provide a seamless experience:

• If the rate limit is exceeded, CryptoTon seamlessly switches to Demo Mode (indicated by an orange WiFi icon).
• The application generates realistic mock data, ensuring UI components, sorting, and pagination remain fully testable.
• The system will continuously attempt to reconnect to the live API automatically.

---

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

Developed by Abhranil Singha Roy