Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/basedhound/cryptodb_app_react

React application that integrates RapidAPI for features such as Bing News and Crypto Ranking. Includes: Redux Toolkit for state management, AntDesign for UI, and Chart.js for data visualization.
https://github.com/basedhound/cryptodb_app_react

ant-design antd app axios bootstrap chartjs millify moment rapid-api react react-redux react18 redux-toolkit

Last synced: 4 days ago
JSON representation

React application that integrates RapidAPI for features such as Bing News and Crypto Ranking. Includes: Redux Toolkit for state management, AntDesign for UI, and Chart.js for data visualization.

Awesome Lists containing this project

README 

        


    

      Project Banner

    

  
Cryptocurrency DB





##  
 đź“‹ Table of Contents



- ✨ [Introduction](#introduction)

- ⚙️ [Tech Stack](#tech-stack)

- đź“ť [Features](#features)

- 🚀 [Quick Start](#quick-start)



##  
 ✨ Introduction



**[EN]** CryptoDB is a React application that integrates RapidAPI for features such as Bing News Search and Crypto Ranking. It utilizes Redux Toolkit for efficient state management, Ant Design for polished UI components, and Chart.js for dynamic data visualization.



**[FR]** CryptoDB est une application React qui intègre RapidAPI pour des fonctionnalités telles que la recherche d'actualités Bing et le classement des cryptomonnaies. Elle utilise Redux Toolkit pour une gestion efficace de l'état, Ant Design pour des composants d'interface utilisateur élégants, et Chart.js pour la visualisation dynamique des données.



##  
 ⚙️ Tech Stack



- [**React**](https://react.dev/reference/react)* is a popular JavaScript library for building user interfaces, particularly single-page applications where data changes over time. React's component-based architecture allows developers to create reusable UI components, making development more efficient and the codebase easier to maintain. 



- [**React Redux**](https://react-redux.js.org/introduction/getting-started) is an official Redux library for integrating Redux state management with React applications. It simplifies the process of managing application state by providing predictable state containers and enabling efficient data flow between React components, making it easier to maintain large-scale applications.



- [**Axios**](https://axios-http.com/docs/intro) is a popular JavaScript library used for making HTTP requests from the browser or Node.js. It simplifies the process of sending asynchronous HTTP requests and handling responses, making it easier to interact with APIs and fetch data in web applications.



- [**Chart.js**](https://www.chartjs.org/docs/latest/getting-started/) is a versatile JavaScript library for creating responsive and interactive charts and graphs. It offers a wide range of chart types, customization options, and supports dynamic data updates, making it suitable for visualizing data in web applications with ease.



- [**Ant Design**](https://ant.design/docs/react/getting-started) is a comprehensive UI library for React applications, offering a set of polished and customizable components. It follows design principles for creating modern and accessible user interfaces, providing ready-to-use components like buttons, forms, and layouts that enhance development efficiency and maintain consistency in UI design.



- [**Millify**](https://www.npmjs.com/package/millify) is a lightweight JavaScript library for formatting numbers into readable strings, particularly useful for converting large numbers (such as cryptocurrency values or statistics) into abbreviated formats. It provides functions to convert numbers into million, billion, or trillion formats, improving readability and user experience in data-heavy applications.



- [**Moment**](https://www.npmjs.com/package/moment) is a widely used JavaScript library for parsing, validating, manipulating, and formatting dates and times. It simplifies working with dates and times in web applications by providing an extensive set of functions for operations like parsing dates from strings, formatting dates for display, and calculating durations between dates.



## 
 🚀 Quick Start



Follow these steps to set up the project locally on your machine.




**Prerequisites**



Make sure you have the following installed on your machine:



- [Git](https://git-scm.com/)

- [Node.js](https://nodejs.org/en)

- [npm](https://www.npmjs.com/) (Node Package Manager)




**Cloning the Repository**



```bash

git clone {git remote URL}

```




**Installation**



Let's install the project dependencies, from your terminal, run:



```bash

npm install

# or

yarn install

```




**Set Up Environment Variables**



Create a new file named `.env` in the root of your project and add the following content:



```env

# Rapid API 

REACT_APP_RAPIDAPI_KEY=



# Coin Ranking

REACT_APP_CRYPTO_RAPIDAPI_HOST=coinranking1.p.rapidapi.com

REACT_APP_CRYPTO_API_URL=https://coinranking1.p.rapidapi.com



# Bing News Search

REACT_APP_NEWS_RAPIDAPI_HOST=bing-news-search1.p.rapidapi.com

REACT_APP_NEWS_API_URL=https://bing-news-search1.p.rapidapi.com

 

ESLINT_NO_DEV_ERRORS=true

```



Replace the placeholder values with your actual respective account credentials:



- [Rapid API](https://rapidapi.com/hub)

- [Coin Ranking](https://rapidapi.com/Coinranking/api/coinranking1)

- [Bing News Search](https://rapidapi.com/microsoft-azure-org-microsoft-cognitive-services/api/bing-news-search1 )




**Running the Project**



Installation will take a minute or two, but once that's done, you should be able to run the following command:



```bash

npm start

# or

yarn start

```



Open [`http://localhost:3000`](http://localhost:3000) in your browser to view the project.