https://github.com/keihanaf/crypto_app
Crypto App is a React-based web application that displays up-to-date information about cryptocurrencies. Using the CoinGecko API, it presents a list of top cryptocurrencies along with their prices, price changes, and trading volumes.
https://github.com/keihanaf/crypto_app
css cssmodules-react javascript reactjs vite
Last synced: 3 months ago
JSON representation
Crypto App is a React-based web application that displays up-to-date information about cryptocurrencies. Using the CoinGecko API, it presents a list of top cryptocurrencies along with their prices, price changes, and trading volumes.
- Host: GitHub
- URL: https://github.com/keihanaf/crypto_app
- Owner: keihanaf
- Created: 2024-10-20T20:13:20.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-10-20T20:21:07.000Z (8 months ago)
- Last Synced: 2025-01-23T06:45:00.028Z (5 months ago)
- Topics: css, cssmodules-react, javascript, reactjs, vite
- Language: JavaScript
- Homepage: https://crypto-app-plum-mu.vercel.app
- Size: 54.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Crypto App
## Description
Crypto App is a React-based web application that displays up-to-date information about cryptocurrencies. Using the CoinGecko API, it presents a list of top cryptocurrencies along with their prices, price changes, and trading volumes.
View Crypto App
## Features
- Display a list of top cryptocurrencies
- Search for specific cryptocurrencies
- Show price charts for each cryptocurrency
- Option to change currency (USD, EUR, JPY)
- Pagination to view more cryptocurrencies
- Responsive and attractive user interface
## Technologies
- React.js
- CSS Modules
- Recharts (for chart display)
- CoinGecko API
## Installation and Setup
Follow these steps to run the project on your local machine:
1. Clone the repository:
```
git clone https://github.com/keihanaf/Crypto_App.git
```
2. Navigate to the project directory:
```
cd Crypto_App
```
3. Install dependencies:
```
npm install
```
4. Run the project:
```
npm run dev
```
5. Open your browser and go to `http://localhost:5173`.
## Project Structure
- `src/components/modules`: Contains detailed components like Chart, Pagination, Search, and TableCoin
- `src/components/templates`: Contains main page components like HomePage
- `src/layouts`: Contains the Layout component for overall page structure
- `src/services`: Contains functions related to API requests
- `src/helpers`: Contains helper functions like data conversion
- `src/assets`: Contains static files such as images
## How to Use
1. On the main page, you'll see a list of top cryptocurrencies.
2. Use the search box to find a specific cryptocurrency.
3. Click on a cryptocurrency's symbol to view its price chart.
4. You can switch the currency between USD, EUR, and JPY.
5. Use the pagination buttons at the bottom of the page to view more cryptocurrencies.
## API Used
This project uses the CoinGecko API, one of the largest and most reliable sources of cryptocurrency data.
API Link: [https://www.coingecko.com/en/api/documentation](https://www.coingecko.com/en/api/documentation)
### CoinGecko API Features:
- Access to data for over 10,000 cryptocurrencies
- Real-time updates of prices and market information
- Ability to retrieve historical data
- Support for multiple fiat currencies
- Rate limit: 10-50 requests per minute (depending on account type)
### Important Notes:
- An API key is required to use this API, which is set in the `src/services/cryptoApi.js` file.
- Please be mindful of the API usage limits and use it responsibly.
- For commercial projects or high-volume requests, it's recommended to use paid versions of the API.
### Main API Functions in the Project:
- `getCoinList`: Retrieve the list of cryptocurrencies
- `searchCoin`: Search for cryptocurrencies
- `marketChart`: Get price chart data
For more information and complete API details, please refer to the official CoinGecko documentation.
## Languages and Tools
## Developer
This project was developed with love by Keihan.
## License
This project is released under the MIT License.