CryptoVerse - Rapid API Crypto App
Table of Contents
- Description
- Tech Stack
- Features
- Rapid API
- Format Configuration
- Folder Structure
- Environment Variables
Description
The Cryptocurrency Application is a comprehensive platform that provides in-depth information about the crypto world, including markets, exchanges, and the latest news. The application is built using React and utilizes Ant Design for the user interface design and Styled Components for styling the components. The APIs used in the application are provided by RapidAPI and include both Coinranking and Bing News Search APIs.
The application makes use of Redux Toolkit for managing API calls and retrieving data from the APIs. The data retrieved from the Coinranking API is used to provide real-time market data and price updates, allowing users to stay up-to-date with the latest trends and fluctuations in the crypto market. This information is presented to users in a clear and concise manner, making it easy for them to quickly understand the current state of the market.
In addition to market data, the application also provides access to the latest news and updates from the world of cryptocurrency. This is achieved through the integration of the Bing News Search API, which allows users to search for news articles related to specific cryptocurrencies, exchanges, or other relevant topics. The news articles are presented in a clean and readable format, making it easy for users to stay informed about the latest developments in the crypto world.
The use of Chart.js allows for the visual representation of the market data, making it easy for users to understand and analyze trends and fluctuations in the crypto market. The combination of Redux Toolkit, Chart.js, and the RapidAPI APIs helps to ensure a fast and responsive user experience, allowing users to easily interact with the application and retrieve the information they need.
Overall, the cryptocurrency application provides a comprehensive and up-to-date understanding of the crypto world, making it an invaluable tool for anyone interested in investing in or following the world of cryptocurrency.
Tech Stack
Features (wait until GIFs load)
- View Dashboard.
- List of Crypto currency info.
- Searchable list by crypto currencies.
- List of Crypto News.
- Filter Crypto News by category.
- View Crypto News.
- List of Exchanges rates Info
- Details of a Cryptocurrency.
- Links to list for a Cryptocurrency.
- Chart view and filter by duration
- Responsive Support
Rapid API
CoinRanking
cryptoApi.js
The code defines four endpoints for the cryptocurrency application's API: getCryptos, getCryptoDetails, getCryptoHistory, and getExchanges. These endpoints are used to retrieve data from the Coinranking API, which provides real-time market data and price updates for various cryptocurrencies.
The getCryptos endpoint retrieves a list of cryptocurrencies, with the number of cryptocurrencies being limited by the count parameter. The getCryptoDetails endpoint retrieves details for a specific cryptocurrency, identified by its coinId. The getCryptoHistory endpoint retrieves historical data for a specific cryptocurrency, identified by its coinId, over a specified timeperiod. The getExchanges endpoint retrieves a list of exchanges. Note that this endpoint requires a premium plan. These endpoints are defined using the builder.query method, which allows for making GET requests to the API. The hooks exported by the API can be used in React components to access the data returned by these endpoints, providing a way to retrieve the latest information about the crypto market.
export const cryptoApi = createApi({
reducerPath: "cryptoApi",
baseQuery: fetchBaseQuery({ baseUrl: process.env.REACT_APP_CRYPTO_API_URL }),
endpoints: (builder) => ({
getCryptos: builder.query({
query: (count) => createRequest(`/coins?limit=${count}`),
}),
getCryptoDetails: builder.query({
query: (coinId) => createRequest(`/coin/${coinId}`),
}),
getCryptoHistory: builder.query({
query: ({ coinId, timeperiod }) =>
createRequest(`coin/${coinId}/history?timePeriod=${timeperiod}`),
}),
// Note: To access this endpoint you need premium plan
getExchanges: builder.query({
query: () => createRequest("/exchanges"),
}),
}),
});
Bing News Search
cryptoNewsApi.js
The code defines a Redux Toolkit API for retrieving cryptocurrency news from the Bing News Search API. The API is used to fetch news articles related to a specific cryptocurrency, specified by the newsCategory parameter. The number of articles returned by the API is limited by the count parameter.
export const cryptoNewsApi = createApi({
reducerPath: "cryptoNewsApi",
baseQuery: fetchBaseQuery({ baseUrl: process.env.REACT_APP_NEWS_API_URL }),
endpoints: (builder) => ({
getCryptoNews: builder.query({
query: ({ newsCategory, count }) =>
createRequest(
`/news/search?q=${newsCategory}&safeSearch=Off&textFormat=Raw&freshness=Day&count=${count}`
),
}),
}),
});
Format Configuration
{
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 100,
"bracketSpacing": true
}
Folder Structure
.
|-- CrytoExchangeMockData.json
|-- README.md
|-- package-lock.json
|-- package.json
|-- public
| |-- cryptoCurrency.png
| |-- demoImage.webp
| |-- favicon.ico
| |-- index.html
| |-- logo192.png
| `-- manifest.json
`-- src
|-- App.css
|-- App.js
|-- app
| `-- store.js
|-- components
| |-- CryptoCurrencies.jsx
| |-- CryptoDetails.jsx
| |-- Exchanges.jsx
| |-- Homepage.jsx
| |-- LineChart.jsx
| |-- Loader.jsx
| |-- Navbar.jsx
| |-- News.jsx
| `-- index.js
|-- images
| `-- cryptoCurrency.png
|-- index.js
|-- logo.svg
`-- services
|-- cryptoApi.js
`-- cryptoNewsApi.js
Environment Variables
- Generated key availiable in CoinRanking under section "Endpoint".
REACT_APP_RAPIDAPI_KEY =
REACT_APP_CRYPTO_RAPIDAPI_HOST =
REACT_APP_CRYPTO_API_URL =
- Generated key availiable in Bing News Search under section "Endpoint".
REACT_APP_NEWS_API_URL = '
REACT_APP_NEWS_RAPIDAPI_HOST =