CryptoX - Cryptocurrency Tracker App 🚀

CryptoX is a mobile application built with React Native that allows users to track cryptocurrency prices, view detailed charts, and stay updated with market trends using the CoinGecko API. 📈

Table of Contents

• Features ✨
• Tech Stack 🛠️
• App Demo 📱
• Installation ⚙️
• Major Dependencies 📦
• Environment Variables 🔧
• Design 🎨
• To-Do (Optional Features) ✅
• Contributing 🤝
• License 📄
• Acknowledgements 🙏

Features ✨

• Real-time cryptocurrency price tracking ⏱️
• Interactive price charts with React Native Wagmi Charts 📊
• Smooth animations using React Native Reanimated 🎥
• Custom app splash screen with React Native Bootsplash 🌟
• Navigation between screens using React Navigation 🧭
• SVG icon support with React Native SVG 🖼️
• Type-safe development with TypeScript 🔍

Tech Stack 🛠️

• React Native: Framework for building the mobile app 📱
• TypeScript: For type-safe JavaScript development 🛡️
• React Navigation: For navigation and routing 🧭
• Axios: For making API requests to CoinGecko 🌐
• React Native Reanimated: For smooth animations 🎞️
• React Native Wagmi Charts: For rendering cryptocurrency charts 📈
• React Native Bootsplash: For custom splash screen 🚀
• React Native SVG: For rendering SVG icons 🖼️

App Demo 📱

• 🎥 App Demo Video:

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-07-26.at.20.10.31.mp4

• 🖼️ Screenshots:

Installation ⚙️

1. Clone the repository:

   git clone https://github.com/yourusername/cryptox.git

2. Navigate to the project directory:

   cd cryptox

3. Install dependencies:

   npm install

   Or with Yarn:

   yarn install

4. Set up environment variables (see Environment Variables). 🔧
5. Run the app:

   npm run start

   Or with Yarn:

   yarn start

   For Android:

   npm run android

   Or with Yarn:

   yarn android

   For iOS:

   npm run ios

   Or with Yarn:

   yarn ios

Major Dependencies 📦

Install the major dependencies using npm:

npm install @react-navigation/native axios react-native-reanimated react-native-wagmi-charts react-native-svg react-native-bootsplash

Or with Yarn:

yarn add @react-navigation/native axios react-native-reanimated react-native-wagmi-charts react-native-svg react-native-bootsplash

Environment Variables 🔧

Create a .env file in the root directory and add the following variables:

API_KEY=YOUR_COINGECKO_API_KEY
API_URL=https://api.coingecko.com/api/v3
PRO_API_URL=https://pro-api.coingecko.com/api/v3

• API_KEY: Required only when using PRO_API_URL. Optional for public API_URL. 🔑
• API_URL: Public CoinGecko API endpoint (no API key required). 🌐
• PRO_API_URL: Pro CoinGecko API endpoint (requires API key). 🔒

Design 🎨

The app's UI is inspired by the Figma community design:
View Figma Design

The app icon was generated using:
Icon Kitchen 🖼️

To-Do (Optional Features) ✅

• Add dark/light theme toggle 🌙☀️
• Add portfolio tracking 💼
• Push notifications for price alerts 🔔
• Language/localization support 🌍

Contributing 🤝

Contributions are welcome! Please follow these steps:

1. Fork the repository. 🍴
2. Create a new branch (git checkout -b feature/your-feature).
3. Commit your changes (git commit -m 'Add your feature'). ✅
4. Push to the branch (git push origin feature/your-feature). 🚀
5. Open a pull request. 📬

License 📄

This project is open-source and available under the MIT License.

Acknowledgements 🙏

• 🌐 CoinGecko API
• 📱 React Native
• 🎨 Figma Community
• 📈 Wagmi Charts