{"id":19306292,"url":"https://github.com/audrbar/cryptoapp","last_synced_at":"2026-05-15T23:13:12.428Z","repository":{"id":150271573,"uuid":"486667856","full_name":"audrbar/cryptoapp","owner":"audrbar","description":"A Single Page Crypto App build on React, hosted on Netlify","archived":false,"fork":false,"pushed_at":"2025-12-26T16:59:56.000Z","size":339,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-28T02:37:52.635Z","etag":null,"topics":["ant-design","charts-js","html-react-parser","millify","moment","react"],"latest_commit_sha":null,"homepage":"https://cryptoversel.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/audrbar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-04-28T16:22:22.000Z","updated_at":"2025-12-26T16:59:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"cc70d698-8cf6-4eb1-ae6b-863a0ae80f11","html_url":"https://github.com/audrbar/cryptoapp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/audrbar/cryptoapp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/audrbar%2Fcryptoapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/audrbar%2Fcryptoapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/audrbar%2Fcryptoapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/audrbar%2Fcryptoapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/audrbar","download_url":"https://codeload.github.com/audrbar/cryptoapp/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/audrbar%2Fcryptoapp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33082988,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-15T20:25:35.270Z","status":"ssl_error","status_checked_at":"2026-05-15T20:25:34.732Z","response_time":103,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","charts-js","html-react-parser","millify","moment","react"],"created_at":"2024-11-10T00:05:21.918Z","updated_at":"2026-05-15T23:13:12.423Z","avatar_url":"https://github.com/audrbar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🪙 Cryptoverse - Cryptocurrency Tracking Application\n\nA modern, feature-rich cryptocurrency tracking application built with React that provides real-time cryptocurrency data, market statistics, detailed coin information, exchange listings, and the latest crypto news.\n\n![Version](https://img.shields.io/badge/version-0.2.0-blue.svg)\n![React](https://img.shields.io/badge/React-18.3.1-61dafb.svg)\n![License](https://img.shields.io/badge/license-MIT-green.svg)\n\n## ✨ Features\n\n### 🏠 Homepage\n- **Global Crypto Statistics**: View comprehensive market stats including total cryptocurrencies, exchanges, market cap, and 24h trading volume\n- **Top 10 Cryptocurrencies**: Quick overview of the top-performing cryptocurrencies\n- **Latest News Feed**: Stay updated with the most recent cryptocurrency news\n\n### 💰 Cryptocurrencies\n- Browse up to **100 cryptocurrencies** with real-time data\n- **Search Functionality**: Quickly find specific cryptocurrencies by name\n- Display key metrics:\n  - Current price\n  - 24h price change percentage\n  - Market capitalization\n  - Rank\n- Interactive cards with cryptocurrency logos and symbols\n\n### 📊 Detailed Coin Information\n- Comprehensive cryptocurrency details including:\n  - Current price and market statistics\n  - All-time high prices\n  - Supply information (circulating, total)\n  - Number of markets and exchanges\n  - Historical price data\n- **Interactive Line Charts**: Visualize price history across multiple timeframes:\n  - 24 hours\n  - 7 days\n  - 30 days\n  - 1 year\n  - 5 years\n- Social links and official websites\n- Detailed descriptions and key information\n\n### 📰 Crypto News\n- Latest cryptocurrency news from multiple sources\n- Article cards with:\n  - Thumbnails\n  - Publication date\n  - Source information\n  - Direct links to full articles\n- Filter news by specific cryptocurrencies\n\n### 🏢 Exchanges\n- Comprehensive list of cryptocurrency exchanges\n- Exchange information and rankings\n\n## 🛠️ Technology Stack\n\n### Frontend Framework\n- **React 18.3.1**: Modern React with hooks\n- **React Router DOM 6.30.2**: Client-side routing\n- **React Redux 9.2.0**: State management\n- **Redux Toolkit 2.11.2**: Efficient Redux development\n\n### UI Components \u0026 Styling\n- **Ant Design (antd) 5.23.4**: Professional UI component library\n- **Ant Design Icons 5.5.2**: Icon system\n- **Custom CSS**: Additional styling\n\n### Data Visualization\n- **Chart.js 4.5.1**: Powerful charting library\n- **React-Chartjs-2 5.3.1**: React wrapper for Chart.js\n- **chartjs-adapter-moment 1.0.1**: Time scale support\n- **Moment.js 2.30.1**: Date and time formatting\n\n### Utilities\n- **Axios 1.13.2**: HTTP client for API requests\n- **Millify 6.1.0**: Number formatting (e.g., 1M, 1B)\n- **html-react-parser 5.2.11**: HTML string parsing\n\n### APIs\n- **CoinGecko API v3**: Free cryptocurrency data (no API key required)\n- **CryptoCompare API**: Cryptocurrency news feed\n\n## 📁 Project Structure\n\n```\ncryptoapp/\n├── public/\n│   └── index.html                 # HTML template\n├── src/\n│   ├── App.js                     # Main application component\n│   ├── App.css                    # Global styles\n│   ├── index.js                   # Application entry point\n│   ├── app/\n│   │   └── store.js               # Redux store configuration\n│   ├── components/\n│   │   ├── Navbar.jsx             # Navigation component\n│   │   ├── Homepage.jsx           # Homepage with stats\n│   │   ├── Cryptocurrencies.jsx   # Crypto list with search\n│   │   ├── CryptoDetails.jsx      # Detailed coin information\n│   │   ├── LineChart.jsx          # Price chart component\n│   │   ├── Exchanges.jsx          # Exchange listings\n│   │   ├── News.jsx               # News feed component\n│   │   ├── Loader.jsx             # Loading component\n│   │   └── index.js               # Component exports\n│   └── services/\n│       ├── cryptoApi.js           # CoinGecko API integration\n│       └── cryptoNewsApi.js       # CryptoCompare news API\n├── build/                         # Production build (generated)\n├── package.json                   # Dependencies and scripts\n└── README.md                      # This file\n```\n\n## 🚀 Getting Started\n\n### Prerequisites\n\nBefore running this application, make sure you have:\n- **Node.js** (version 14 or higher)\n- **npm** (comes with Node.js)\n\n### Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd cryptoapp\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Start the development server**\n   ```bash\n   npm start\n   ```\n\n   The application will open automatically in your browser at [http://localhost:3000](http://localhost:3000)\n\n### Available Scripts\n\n#### `npm start`\nRuns the app in development mode with hot reloading.\n- Open [http://localhost:3000](http://localhost:3000) to view it in your browser\n- The page reloads automatically when you make changes\n- Lint errors appear in the console\n\n#### `npm test`\nLaunches the test runner in interactive watch mode.\n\n#### `npm run build`\nBuilds the app for production to the `build` folder:\n- Optimizes React for best performance\n- Minifies code and includes hashes in filenames\n- Ready for deployment\n\n#### `npm run eject`\n**⚠️ Warning: This is a one-way operation!**\n\nEjects from Create React App, giving you full control over webpack, Babel, and ESLint configurations.\n\n## 🔌 API Integration\n\n### CoinGecko API\nThe application uses the free CoinGecko API v3 for cryptocurrency data:\n- **Base URL**: `https://api.coingecko.com/api/v3`\n- **No API key required**\n- Provides:\n  - Cryptocurrency prices and market data\n  - Historical price data\n  - Coin details and statistics\n  - Market rankings\n\n### CryptoCompare API\nUsed for cryptocurrency news:\n- **Base URL**: `https://min-api.cryptocompare.com/data/v2`\n- **No API key required**\n- Provides latest news articles from various sources\n\n## 🎨 Key Components\n\n### Homepage Component\n- Displays global statistics\n- Shows top 10 cryptocurrencies\n- Presents latest news\n- Uses `useGetCryptosQuery` RTK Query hook for data fetching\n\n### Cryptocurrencies Component\n- Lists cryptocurrencies with pagination\n- Real-time search filtering\n- Responsive card layout\n- Links to detailed coin pages\n\n### CryptoDetails Component\n- Comprehensive coin information\n- Interactive price charts with multiple timeframes\n- Supply and market statistics\n- Links to exchanges and resources\n\n### LineChart Component\n- Built with Chart.js and React-Chartjs-2\n- Responsive design\n- Multiple timeframe support\n- Formatted axes with price and time data\n\n### News Component\n- Displays latest crypto news\n- Filter by cryptocurrency\n- Article cards with images\n- External links to full articles\n\n## 🎯 Features Highlight\n\n### Redux Toolkit Query (RTK Query)\nEfficient data fetching and caching:\n- Automatic re-fetching\n- Built-in loading and error states\n- Optimistic updates\n- Cache management\n\n### Responsive Design\n- Mobile-first approach\n- Ant Design's responsive grid system\n- Adaptive layouts for all screen sizes\n\n### State Management\n- Redux Toolkit for global state\n- RTK Query for server state\n- React hooks for local state\n\n## 📦 Build and Deployment\n\n### Building for Production\n\n```bash\nnpm run build\n```\n\nThis creates an optimized production build in the `build` folder:\n- Minified and optimized code\n- Static files ready for deployment\n- Performance optimizations applied\n\n### Deployment Options\n\nThe build folder can be deployed to:\n- **Vercel**: Zero-config deployment for React apps\n- **Netlify**: Drag-and-drop or Git-based deployment\n- **GitHub Pages**: Free hosting for static sites\n- **AWS S3**: Cloud storage with CloudFront CDN\n- **Firebase Hosting**: Google's hosting solution\n\n## 🔧 Configuration\n\n### Environment Variables (Optional)\nCreate a `.env` file in the root directory for custom configuration:\n\n```env\nREACT_APP_API_URL=https://api.coingecko.com/api/v3\nREACT_APP_NEWS_API_URL=https://min-api.cryptocompare.com/data/v2\n```\n\n## 🤝 Contributing\n\nContributions are welcome! To contribute:\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## 🙏 Acknowledgments\n\n- **CoinGecko** for providing free cryptocurrency data API\n- **CryptoCompare** for the news API\n- **Ant Design** for the beautiful UI components\n- **Chart.js** for powerful data visualization\n- **Create React App** for the build configuration\n\n## 📧 Contact \u0026 Support\n\nFor questions, issues, or suggestions:\n- Open an issue on GitHub\n- Check existing issues before creating new ones\n\n## 🔮 Future Enhancements\n\nPotential features for future versions:\n- [ ] Portfolio tracking\n- [ ] Price alerts and notifications\n- [ ] User authentication\n- [ ] Favorite cryptocurrencies\n- [ ] Advanced filtering and sorting\n- [ ] Dark/light theme toggle\n- [ ] Multi-currency support\n- [ ] Historical data comparison\n- [ ] Mobile app version\n- [ ] Real-time WebSocket price updates\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faudrbar%2Fcryptoapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faudrbar%2Fcryptoapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faudrbar%2Fcryptoapp/lists"}