CryptoTracker is the tool you've always needed. Compare different cryptocurrencies, view their graphs—prices, total volumes, market cap, etc. Search from the top 100 cryptocurrencies in real-time and add them to your watchlist.
Build a responsive and live crypto tracker using React JS to help users analyze, compare, and learn about cryptocurrencies all in one place.
- React JS: Frontend framework.
- Material UI: For reusable components.
- Chart.js: For creating interactive graphs.
- Axios: To make API calls to fetch real-time data.
- React Router: For managing routing in the application.
- Coingecko API: To fetch cryptocurrency data.
- Framer Motion: For smooth animations.
The world is moving towards Web3 and crypto, making it essential to stay updated. Cryptack provides real-time data, enabling users to make informed decisions. It’s a comprehensive tool for crypto enthusiasts and investors.
- Basic React Project Setup: Initial project setup using Create React App.
- API Review: Go through the Coingecko API documentation.
- Folder Structure: Organize the project structure.
- Styling Setup: Add global styling, fonts, and root variables.
- React Router Integration: Implement routing.
- Header: Add MUI drawer for the mobile navbar.
- Landing Page: Develop components for the landing page.
- Dashboard Page: Create the dashboard with MUI tabs.
- Fetching Coin Data: Use Axios to fetch data from the Coingecko API.
- Grid and List Views: Implement views for displaying cryptocurrencies.
- Coin Page: Integrate Chart.js for coin visualizations.
- Project Link: Cryptack
- GitHub Repo: CryptoTracker Repository
- Figma: Designs
- Dribbble: Design Inspirations
- API Documentation: Coingecko API
- Chart.js Documentation: Chart.js
- Material UI Documentation: Material UI
- Framer Motion Documentation: Framer Motion
Ensure you have Node.js installed.
- Clone the repository.
git clone https://github.com/yourusername/cryptotracker.git cd cryptotracker - Install dependencies.
npm install
- Start the development server.
npm start
npm start: Runs the app in development mode.npm test: Launches the test runner.npm run build: Builds the app for production.npm run eject: Removes the single build dependency.
Follow the steps in the Create React App Deployment Guide to deploy your application.
This project is licensed under the MIT License - see the LICENSE file for details.