https://github.com/brmendez/crypto-lens
Real-time cryptocurrency market tracker built with React, TypeScript, and Vite. Fetches live data from CoinGecko API with light/dark theme toggle.
https://github.com/brmendez/crypto-lens
coingecko-api cryptocurrency css-modules frontend react typescript vite
Last synced: 3 months ago
JSON representation
Real-time cryptocurrency market tracker built with React, TypeScript, and Vite. Fetches live data from CoinGecko API with light/dark theme toggle.
- Host: GitHub
- URL: https://github.com/brmendez/crypto-lens
- Owner: brmendez
- Created: 2026-01-30T20:54:31.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-03-12T19:22:09.000Z (3 months ago)
- Last Synced: 2026-04-04T00:54:52.260Z (3 months ago)
- Topics: coingecko-api, cryptocurrency, css-modules, frontend, react, typescript, vite
- Language: CSS
- Homepage: https://crypto-lens.onrender.com/
- Size: 59.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CryptoLens
🔗 **Live Demo:** https://crypto-lens.onrender.com/
CryptoLens is a minimal, real-time cryptocurrency market tracker built with Vite, React, and TypeScript. It fetches live market data from CoinGecko and displays key metrics for top coins in a clean, theme-switchable interface.
## Features
- **Live Market Data:** Fetches up-to-date prices and 24h changes for major cryptocurrencies using the CoinGecko API.
- **Minimal UI:** No icons, images, or extra styling—just the essentials for fast, distraction-free tracking.
- **Theme Toggle:** Switch between light and dark modes. Theme preference is saved in localStorage.
- **TypeScript & React:** Built with modern React and TypeScript for reliability and maintainability.
- **Vite Powered:** Fast development and build times with Vite.
## Getting Started
### Prerequisites
- Node.js (v18 or newer recommended)
- npm or yarn
### Installation
```bash
# Clone the repository
$ git clone https://github.com/your-username/crypto-lens.git
$ cd crypto-lens
# Install dependencies
$ npm install
# or
yarn install
```
### Running Locally
```bash
# Start the development server
$ npm run dev
# or
yarn dev
```
Open [http://localhost:5173](http://localhost:5173) in your browser to view the app.
## Project Structure
```
crypto-lens/
├── public/
├── src/
│ ├── components/
│ │ ├── CoinListItem.tsx
│ │ ├── CryptoTracker.tsx
│ │ ├── fetchCoinGeckoMarkets.ts
│ │ ├── LoadingSkeleton.tsx
│ │ ├── ThemeContext.tsx
│ │ ├── types.ts
│ │ └── styles/
│ │ ├── CoinCard.module.css
│ │ ├── CryptoTracker.module.css
│ │ ├── LoadingSkeleton.module.css
│ │ └── theme.module.css
│ ├── App.tsx
│ ├── main.tsx
│ └── index.css
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md
```
## API Reference
- [CoinGecko Markets API](https://www.coingecko.com/en/api/documentation)
## Customization
### Adding More Coins
To add more coins or change the data source, update the API URL in `src/components/fetchCoinGeckoMarkets.ts`.
### Styling
Component styles are organized using CSS Modules in `src/components/styles/`:
- `theme.module.css` - Shared theme variables and color palette
- Component-specific `.module.css` files are colocated with their components
- Global styles (resets, fonts, base elements) are in `src/index.css`
To customize colors or theme, edit the CSS variables in `src/components/styles/theme.module.css`.
## License
This project is MIT licensed.
---
*CryptoLens: Fast, simple, and open-source crypto market tracking.*
```