Crypto Price Tracker

A modern, real-time cryptocurrency price tracking application built with React, TypeScript, and Vite. Get instant quotes for top cryptocurrencies in multiple fiat currencies.

Check out the live application: https://astabile-react-typescript-crypto.netlify.app/

• Real-time Crypto Prices: Fetch current prices for top 20 cryptocurrencies by market cap
• Multi-Currency Support: View prices in USD, EUR, GBP, and ARS (Argentine Peso)
• Detailed Market Data: Display high/low prices, 24h price changes, and last update time
• Type-Safe: Built with TypeScript for enhanced developer experience and code reliability
• Form Validation: Zod schema validation for robust form handling
• State Management: Efficient global state management with Zustand
• Loading States: Smooth user experience with loading indicators
• Error Handling: Comprehensive error messages for failed requests
• Responsive Design: Clean, modern UI with custom CSS styling

• React 19 - UI library
• TypeScript - Type safety
• Vite - Fast build tool and dev server
• Zustand - Lightweight state management
• Zod - Schema validation
• Axios - HTTP client
• CryptoCompare API - Real-time cryptocurrency data

• Node.js (v16 or higher)
• npm or yarn

1. Clone the repository:

git clone <repository-url>
cd React-Typescript-Crypto

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

src/
├── components/
│   ├── CryptoSearchForm.tsx    # Search form component
│   ├── CryptoPriceDisplay.tsx  # Price display component
│   ├── Spinner.tsx             # Loading spinner
│   └── ErrorMessage.tsx        # Error message component
├── services/
│   └── CryptoService.ts        # API service layer
├── schema/
│   └── crypto-schema.ts        # Zod validation schemas
├── types/
│   └── index.ts                # TypeScript type definitions
├── data/
│   └── index.ts                # Static data (currencies)
├── store.ts                    # Zustand store
├── App.tsx                     # Main app component
├── main.tsx                    # App entry point
├── index.css                   # Global styles
└── spinner.css                 # Spinner styles

This application uses the CryptoCompare API to fetch:

• Top 20 cryptocurrencies by market cap
• Real-time price data and market statistics

No API key is required for basic usage.

1. Select a Cryptocurrency: Choose from the top 20 cryptocurrencies by market cap
2. Select a Currency: Pick your preferred fiat currency (USD, EUR, GBP, or ARS)
3. Get Quote: Click the button to fetch the current price and market data
4. View Results: See the current price, daily high/low, 24h change, and last update time

All API responses are validated using Zod schemas, ensuring data integrity and type safety throughout the application.

Zustand provides a minimal, hook-based API for managing global state without the boilerplate of traditional solutions.

Built with Vite for lightning-fast HMR (Hot Module Replacement) and optimized production builds.

Contributions, issues, and feature requests are welcome!

This project is open source and available under the MIT License.

• Cryptocurrency data provided by CryptoCompare
• Font: Outfit from Google Fonts