🚀 CryptoVision — Cryptocurrency Analytics Dashboard

CryptoVision is a modern cryptocurrency analytics dashboard built with React.js, Vite, Chart.js, and the CoinPaprika REST API. It provides users with cryptocurrency market information through an interactive and responsive dashboard.

🔗 Live Demo: https://cryptovision-rouge.vercel.app/

---

📌 Project Overview

CryptoVision fetches cryptocurrency market data from the CoinPaprika REST API and displays it through an easy-to-use dashboard.

The application allows users to explore cryptocurrency prices, market statistics, trends, individual coin details, watchlists, comparisons, and portfolio information.

---

✨ Features

📊 Dashboard

• Global cryptocurrency market statistics
• Market capitalization
• 24-hour trading volume
• Bitcoin and Ethereum dominance
• Active cryptocurrency information
• Trending cryptocurrencies
• Top gainers and losers

📈 Data Visualization

• Interactive market charts
• Market capitalization charts
• Cryptocurrency price charts
• Historical price visualization using Chart.js

🔍 Search & Filtering

• Search cryptocurrencies by name or symbol
• Sort cryptocurrencies by price, market cap, rank, and 24H change
• Filter the number of displayed cryptocurrencies

⭐ Watchlist

• Add cryptocurrencies to a personal watchlist
• Remove cryptocurrencies from the watchlist
• Watchlist data is persisted using LocalStorage

⚔️ Compare Coins

Compare two cryptocurrencies based on:

• Price
• Market capitalization
• Trading volume
• Rank
• 24H change
• Supply

💼 Portfolio

• Add cryptocurrency holdings
• Calculate portfolio value
• Track individual asset values
• View profit/loss information

🌗 Theme & Customization

• Light and Dark mode
• Customizable dashboard widgets
• User preferences stored locally

📤 Data Export

Export portfolio and watchlist information in:

• CSV
• JSON
• PDF

---

🏗️ System Architecture

              User
                │
                ▼
        React.js Frontend
                │
          HTTP Requests
                │
                ▼
       CoinPaprika REST API
                │
           JSON Response
                │
                ▼
       React Components
                │
                ▼
          Dashboard UI

The application is a frontend-based REST API integration project. It does not have a custom backend. Cryptocurrency market data is retrieved directly from the CoinPaprika REST API.

---

🛠️ Tech Stack

Technology	Purpose
React.js	Frontend development
Vite	Development & build tool
JavaScript	Application logic
Axios	API requests
CoinPaprika API	Cryptocurrency market data
Chart.js	Data visualization
React Router	Client-side routing
Context API	Global state management
LocalStorage	Local data persistence
CSS Modules	Component styling
Git & GitHub	Version control
Vercel	Deployment

---

📂 Project Structure

cryptovision/
│
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── context/
│   ├── hooks/
│   ├── pages/
│   ├── services/
│   ├── styles/
│   ├── utils/
│   ├── App.jsx
│   └── main.jsx
│
├── vercel.json
├── package.json
└── README.md

---

🚀 Getting Started

Prerequisites

Make sure you have installed:

• Node.js 18+
• npm

Clone the Repository

git clone https://github.com/Maxmukesh7/cryptovision.git

Navigate to the Project

cd cryptovision

Install Dependencies

npm install

Start Development Server

npm run dev

The application will run locally at:

http://localhost:5173

Build for Production

npm run build

---

🌐 Deployment

CryptoVision is deployed using Vercel.

🔗 Live Application: https://cryptovision-rouge.vercel.app/

To deploy your own version:

1. Push the project to GitHub.
2. Import the repository into Vercel.
3. Select Vite as the framework.
4. Use npm run build as the build command.
5. Use dist as the output directory.
6. Deploy.

---

📚 What I Learned

Through this project, I gained practical experience in:

• React component-based development
• REST API integration
• Axios and asynchronous requests
• JSON data processing
• React Router
• Context API
• Custom React hooks
• Chart.js data visualization
• LocalStorage
• Responsive UI development
• Git and GitHub
• Vercel deployment

---

🔮 Future Enhancements

• User authentication
• Real-time WebSocket market updates
• Cryptocurrency price alerts
• AI-powered market insights
• News and sentiment analysis
• Advanced portfolio analytics
• Multiple currency support

---

👨‍💻 Developer

Mukesh Kumar

BE — Cyber Security

GitHub: https://github.com/Maxmukesh7

---

📄 License

This project is licensed under the MIT License.