Cryptonite is a cryptocurrency tracking application that uses the CoinGecko API to provide real-time information on various cryptocurrencies. Built with Next.js, Tailwind CSS, and TypeScript, it offers a modern and responsive user interface with dynamic features.
- Next.js
- Tailwind CSS
- TypeScript
-
Suggestive Search Bar
- Implements debounce for efficient API calls
- Provides real-time suggestions as you type
-
Drag and Drop Functionality
- Easily add cryptocurrencies to your tracking list
- Rearrange tracked cryptocurrencies with intuitive drag and drop
-
Real-time Data Updates
- Automatically refetches data every 1 minute
- Ensures you always see the latest prices and market information
-
Caching Implementation
- Optimizes performance by caching frequently accessed data
- Reduces unnecessary API calls
-
Dynamic Theme Switching
- Supports both dark and light modes
- Seamlessly switch between themes for comfortable viewing in any environment
-
API Rate Limit Handling
- Gracefully handles CoinGecko API rate limits
- Displays appropriate error messages to users when limits are reached
-
Comprehensive Cryptocurrency Graphs
- Displays interactive charts for each cryptocurrency
- Includes graphs for daily, weekly, monthly, and yearly price trends
- Visualizes market capitalization over time
- Shows trading volume fluctuations
- Allows users to toggle between different time frames and metrics for detailed analysis
Understanding.Cryptocurrency.Market.Data.mp4
Follow these steps to set up the Cryptonite application on your local machine:
-
Clone the Repository:
git clone https://github.com/harshpathakzz/cryptonite.git
-
Navigate to the Project Directory:
cd cryptonite -
Install Dependencies:
Install the necessary dependencies for the project:
npm install
-
Set Up Environment Variables:
Create a .env file in the project root and add your CoinGecko API key:
NEXT_PUBLIC_API_KEY=your_coingecko_api_key
-
Run the Development Server:
Start the Next.js development server:
npm run dev
After running this command, the application will be available locally at http://localhost:3000.