This project is a demo page showcasing a component that utilizes the RapidAPI's API and includes a Bitcoind exchange component. By interacting with the demos, users can get a better understanding of how these components work and how they can be integrated into their own projects. It is built using Next.js, a React component framework, and utilizes Axios for making API requests and Tailwind CSS for styling. Recharts, a powerful charting library, is utilized to create the Bitcoin price history chart. This chart allows users to explore the historical price data of Bitcoin in an interactive and visually appealing manner.
- Next.js Serverless Function: The website utilizes Next.js Serverless Functions to create a proxy that effectively hides the API key. This ensures that the API key is not exposed on the client-side and provides an additional layer of security.
- Integration with RapidAPI's API: The component in this demo page interacts with RapidAPI's API to fetch data and display it.
- Bitcoind Exchange Component: The demo page includes a Bitcoind exchange component that allows users to view and interact with Bitcoin exchange data.
- Next.js Framework: The project is built using Next.js, a popular React component framework that offers server-side rendering, static site generation, and other performance optimizations.
- Axios: Axios is used for making API requests to the RapidAPI's API, providing a simple and efficient way to fetch data.
- Tailwind CSS: The project utilizes Tailwind CSS for easy and responsive styling of the components.
- Recharts: Recharts is used to create the Bitcoin price history chart, allowing users to visualize the historical data in an interactive and intuitive manner.
To run this project locally, follow these steps:
- Clone the repository:
git clone https://github.com/smmk123/component-demos- Navigate to the project directory:
cd component-demos- Install the dependencies:
npm install- Create a
.envfile in the project root and add your RapidAPI key:
RAPIDAPI_KEY=your-rapidapi-key
The project requires an API key from CoinAPI.co to access the Bitcoin price data. If you don't have one, you can sign up at CoinAPI.co and obtain an API key. The API key should be added to the .env file in the project root as follows:
COINAPI_KEY=your-coinapi-key
- Start the development server:
npm run dev- Open your browser and visit
http://localhost:3000to view the demo page.
The project requires a RapidAPI key to make API requests. If you don't have one, you can sign up at RapidAPI and obtain an API key.
Once the project is set up and running, you can access the demo page by visiting http://localhost:3000 in your web browser. The page will display the component that interacts with RapidAPI's API and the Bitcoind exchange component.
Feel free to interact with the components and explore the functionality provided.
Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request to the GitHub repository.
This project is licensed under the MIT License.
- RapidAPI for providing the API used in this project.
- Next.js for the React component framework.
- Axios for making API requests.
- Tailwind CSS for the responsive styling.
- Recharts for creating the Bitcoin price history chart.