https://github.com/anabartos/crypto-rates-react

Crypto Rates is a React, TypeScript web application that allows users to track cryptocurrency prices in real time. Built with Vite, Zustand, and Axios, this app provides real-time quotes for cryptocurrencies.
https://github.com/anabartos/crypto-rates-react

app axios crypto cryptocurrency javascript react typescript zustand

Last synced: 25 days ago
JSON representation

Crypto Rates is a React, TypeScript web application that allows users to track cryptocurrency prices in real time. Built with Vite, Zustand, and Axios, this app provides real-time quotes for cryptocurrencies.

• Host: GitHub
• URL: https://github.com/anabartos/crypto-rates-react
• Owner: anabartos
• Created: 2024-11-26T22:27:32.000Z (28 days ago)
• Default Branch: main
• Last Pushed: 2024-11-29T11:29:48.000Z (26 days ago)
• Last Synced: 2024-11-29T12:29:04.283Z (26 days ago)
• Topics: app, axios, crypto, cryptocurrency, javascript, react, typescript, zustand
• Language: TypeScript
• Homepage: https://crypto-rates-app.netlify.app/
• Size: 740 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Crypto Rates

 

## Crypto Rates is a React, TypeScript web application that allows users to track cryptocurrency prices in real time. Built with Vite, Zustand, and Axios, this app provides real-time quotes for cryptocurrencies, including price changes, the highest and lowest prices of the day, and more.

## Features

- **Reactive Interface**: Users can select cryptocurrencies and fiat currencies to view real-time prices.

- **Async Loading**: A spinner is displayed while the app fetches data from the API.

- **State Management with Zustand**: Zustand is used for global state management.

- **Data Validation with Zod**: Zod validates cryptocurrency data and prices.

- **Modern Styling**: Clean, sleek styling optimized for a great user experience.

## Installation

Follow these steps to install and run the project locally:

1. **Clone the repository**  

``bash

git clone https://github.com/anabartos/crypto-rates-react

cd crypto-tracker

``

2. **Install dependencies**

This project uses npm. Install all the necessary dependencies with the following command:

``bash

npm install

``

3. **Run the project**

To run the project locally on the Vite development server:

``bash

npm run dev

This will start the application at http://localhost:3000.

``

## Project Structure

src/

├── components/

│   ├── CryptoPriceDisplay.tsx    # Component that displays the selected cryptocurrency's info

│   ├── Error.tsx                 # Component for displaying error messages

│   ├── FormSearch.tsx            # Form for selecting currency and cryptocurrency

│   ├── Spinner.tsx               # Spinner component to indicate data loading

├── services/

│   ├── CryptoService.ts          # Services for making API requests

├── store/

│   ├── index.ts                  # Zustand store configuration for global state

├── types/

│   ├── index.ts                  # TypeScript types used in the application

└── App.tsx                       # Main component that integrates everything

## Usage

The application allows users to select a fiat currency (e.g., USD) and a cryptocurrency (e.g., Bitcoin) to retrieve the current price. Here's how you can use it:

- **Select the coin (e.g., USD).

- **Select the cryptocurrency (e.g., Bitcoin).

- **Click Track to fetch and display the cryptocurrency's data.

- **While the data is being fetched, a spinner will be displayed. Once the data is ready, the app will show the current price, the high and low of the day, the 24-hour price change, and more.

## Dependencies

This project uses the following dependencies:

- **React: Library for building user interfaces.

- **TypeScript: A superset of JavaScript that provides type safety and development benefits.

- **Zustand: A small state management library.

- **Axios: HTTP client for making requests to the CryptoCompare API.

- **Zod: For schema validation of data.

- **Vite: A fast build tool and development server for React projects.

### Development dependencies:

- **@types/react: TypeScript types for React.

- **typescript: TypeScript compiler for the project.

## Contributing

If you'd like to contribute to this project, feel free to open a pull request or issue. Contributions are always welcome!

## Fork the repository.

- **Create a new branch for your changes.

- **Make your modifications.

- **Open a pull request explaining your changes.