Skip to content

Cloud-Tracker/candlestick-btc-chart

Repository files navigation

Cryptocurrency Price Chart

This project is a web application that uses the Coinbase API to display a cryptocurrency price chart. The chart shows the price changes of a selected cryptocurrency in a chosen time unit, such as minutes, hours, or days. The chart updates every minute to reflect the latest data.

Demo

You can see a live demo of the project here: Cryptocurrency Price Chart

Technologies

This project was built using the following technologies:

  • ReactJS: A JavaScript library for building user interfaces.
  • React Query: A library for fetching, caching, and updating data in React applications.
  • React Hooks: A feature that lets you use state and other React features without writing a class component.
  • Apex Charts: A modern charting library that helps to create interactive charts and visualizations.
  • CSS Modules: A CSS file in which all class names and animation names are scoped locally by default.
  • Vite: A fast and lightweight web development tool that supports React, Vue, and other frameworks.
  • Material UI: A popular React UI framework that provides a set of components and styles for building responsive and accessible web pages.

Screenshots

Light Mode

light-theme-screenshot

Dark Mode

dark-theme-screenshot

Installation

To run this project locally, you need to have Node.js and npm installed on your machine. Then, follow these steps:

  1. Clone this repository: git clone https://github.com/Studying-Workspace/candlestick-btc-chart.git
  2. Go to the project folder: cd btc-price-chart
  3. Install the dependencies: npm install
  4. Start the development server: npm run dev
  5. Open your browser and go to http://localhost:5173

Usage

The web application shows a cryptocurrency price chart that updates every minute. You can hover over the chart to see the exact price and time. You can also zoom in and out the chart by using the mouse wheel or the buttons on the top right corner.