https://github.com/tariqkichawele/crypto-assignment-tariqkichawele
Crypto-Assignment is a dual-platform application that provides real-time cryptocurrency market data and insights. Built with React Query for efficient state management, the project features a web and mobile app that fetch and display cryptocurrency trends using a public API.
https://github.com/tariqkichawele/crypto-assignment-tariqkichawele
coingecko-api react-query shadcn-ui
Last synced: 3 months ago
JSON representation
Crypto-Assignment is a dual-platform application that provides real-time cryptocurrency market data and insights. Built with React Query for efficient state management, the project features a web and mobile app that fetch and display cryptocurrency trends using a public API.
- Host: GitHub
- URL: https://github.com/tariqkichawele/crypto-assignment-tariqkichawele
- Owner: TariqKichawele
- Created: 2025-03-02T15:34:14.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-02T15:58:42.000Z (3 months ago)
- Last Synced: 2025-03-02T16:34:46.203Z (3 months ago)
- Topics: coingecko-api, react-query, shadcn-ui
- Language: TypeScript
- Homepage:
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Crypto-Assignment Documentation
## Project Overview
Crypto-Assignment is a dual-platform application that provides cryptocurrency data visualization and tracking. It consists of both a web application and a mobile application, ensuring seamless access to market trends across different devices.
---
## Project Setup Guide
### Web Application
#### Prerequisites
- Node.js (latest LTS version recommended)
- npm or yarn package manager
#### Installation & Running
1. Clone the repository:
```sh
git clone https://github.com/TariqKichawele/Crypto-Assignment-TariqKichawele.git
cd Crypto-Assignment-TariqKichawele/web
```
2. Install dependencies:
```sh
npm install
```
3. Start the development server:
```sh
npm run dev
```
4. Open the web application in your browser:
```
http://localhost:3000
```
### Mobile Application
#### Prerequisites
- Node.js (latest LTS version recommended)
- Expo CLI (for React Native development)
- Android Emulator or physical device
#### Installation & Running
1. Navigate to the mobile project directory:
```sh
cd Crypto-Assignment-TariqKichawele/mobile
```
2. Install dependencies:
```sh
npm install
```
3. Start the Expo development server:
```sh
npm start
```
4. Open the app on an emulator or device using Expo Go.
---
## API Integration Details
### Data Fetching
The application fetches cryptocurrency market data using a CoinGecko public API, the API calls are made using **React Query** to handle caching and synchronization efficiently.
#### Example API Call
```js
import { useQuery } from 'react-query';
const fetchCryptoData = async () => {
const response = await fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd');
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
};
const { data, error, isLoading } = useQuery('cryptoData', fetchCryptoData);
```
### Data Updates
For updating user preferences or saved data, **React Query** is used to manage server-state efficiently, ensuring minimal API calls and keeping data fresh.
---
## State Management
### Why React Query?
- Efficient data fetching and caching.
- Automatic background synchronization.
- Simplified API call handling with loading and error states.
- Eliminates the need for manual state management, reducing complexity.
---
## Challenges & Solutions
### Challenge: State Management for Multiple Data Sources
**Problem:** Managing different types of data (market trends, user settings) efficiently without unnecessary re-fetching.
**Solution:** Used React Query for both client-side caching and server-state management, reducing API calls and improving performance.
---
### Challenge: Mobile & Web Synchronization
**Problem:** Ensuring consistency between the web and mobile versions was difficult due to API rate limits.
**Solution:** Implemented caching and data synchronization strategies with React Query to minimize redundant API calls across devices.
---
## Conclusion
This project successfully integrates cryptocurrency data visualization across web and mobile platforms while maintaining efficiency in API usage and state management. With React Query handling caching and synchronization, it provides an optimized user experience.