🪙 Cripto

A modern, full-stack cryptocurrency screener and dashboard built with Next.js 16 and the CoinGecko API. Cripto provides real-time market data, interactive candlestick charts, coin detail pages, a markets overview, a watchlist, and a simulated live-trading terminal — all in a sleek dark-themed UI.

---

✨ Features

• Home Dashboard — Coin overview stats, trending coins, and market categories with 24h performance metrics
• All Coins — Paginated table of top cryptocurrencies ranked by market cap with price, 24h change, and market cap data
• Markets — Live INR-denominated market data with 1h and 24h percentage changes for the top 50 coins
• Coin Detail Page — Deep-dive view per coin including:
  • Interactive OHLC candlestick chart (powered by lightweight-charts)
  • Market performance bar chart (1h / 24h / 7d / 30d / 1y)
  • Community sentiment meter
  • Circulating vs. max supply progress bar
  • Developer stats (stars, forks, commits, issues)
  • Exchange tickers table
• Live Trading Terminal — Simulated real-time candlestick chart with a 1-second price simulation engine and live OHLCV updates
• Watchlist — URL-driven watchlist — pass ?ids=bitcoin,ethereum,solana to track any set of coins
• Global Search — Instant coin search with trending coins fallback, accessible from the header

---

🛠 Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router, Server Actions)
UI Library	React 19
Language	TypeScript 5
Styling	Tailwind CSS v4
Charting	lightweight-charts v5 · Recharts v3
Icons	Lucide React
Data Source	CoinGecko REST API
HTTP / URL	Native fetch (Next.js ISR) · query-string
Date Utilities	date-fns
UI Primitives	Radix UI · class-variance-authority · clsx · tailwind-merge
Fonts	Geist Sans & Geist Mono (Google Fonts)

---

📁 Folder Structure

cripto-main/
├── app/
│   ├── page.tsx               # Home — trending, overview, categories
│   ├── layout.tsx             # Root layout with global Header
│   ├── globals.css            # Global styles & Tailwind base
│   ├── coins/
│   │   ├── page.tsx           # All Coins — paginated market list
│   │   └── [id]/page.tsx      # Coin Detail — charts, stats, tickers
│   ├── markets/page.tsx       # Markets — INR price table (50/page)
│   ├── live-trades/page.tsx   # Live Trading Terminal (simulated)
│   └── watchlist/page.tsx     # Watchlist — URL-param-driven coin tracker
├── components/
│   ├── CandlestickChart.tsx   # Reusable OHLC chart (lightweight-charts)
│   ├── CoinsPagination.tsx    # Smart pagination with ellipsis
│   ├── DataTable.tsx          # Generic, typed data table component
│   ├── Header.tsx             # Global nav + search trigger
│   ├── home/
│   │   ├── CoinOverview.tsx   # Market overview stats
│   │   ├── TrendingCoins.tsx  # Trending coin cards
│   │   ├── Categories.tsx     # Category performance grid
│   │   ├── Search.tsx         # Search modal with debounce
│   │   └── fallback.tsx       # Suspense skeleton fallbacks
│   ├── visuals/
│   │   ├── MarketPerformanceChart.tsx  # Recharts bar chart
│   │   ├── SentimentMeter.tsx          # Community sentiment display
│   │   └── SupplyProgressBar.tsx       # Supply visualisation
│   └── ui/
│       ├── button.tsx         # CVA-based Button primitive
│       ├── pagination.tsx     # Pagination link components
│       └── table.tsx          # Base table primitives
├── lib/
│   ├── coingecko.actions.ts   # Server Actions — fetcher, getPools, search
│   └── utils.ts               # formatCurrency, formatPercentage, cn, OHLC helpers
├── constants.ts               # Chart configs, period configs, nav items
├── type.d.ts                  # Global TypeScript interfaces and types
└── next.config.ts             # Image remote patterns for CoinGecko CDN

---

⚙️ Getting Started

Prerequisites

• Node.js 18+
• A CoinGecko API key (the free Demo key works)

1. Clone the repository

git clone https://github.com/your-username/cripto.git
cd cripto

2. Install dependencies

npm install

3. Configure environment variables

Create a .env.local file in the project root:

COINGECKO_BASE_URL=https://api.coingecko.com/api/v3
COINGECKO_API_KEY=your_coingecko_api_key_here

Note: The app will throw an error on startup if either variable is missing. Get your free Demo key at coingecko.com/en/api.

4. Run the development server

npm run dev

Open http://localhost:3000 in your browser.

5. Build for production

npm run build
npm start

---

🗺 Pages & Routes

Route	Description
/	Home — market overview, trending coins, categories
/coins	All Coins — paginated list (?page=N)
/coins/[id]	Coin Detail — e.g. /coins/bitcoin
/markets	Markets — 50 coins/page (?page=N&category=defi)
/watchlist	Watchlist — ?ids=bitcoin,ethereum,solana
/live-trades	Live Terminal — simulated real-time OHLCV chart

---

🔌 CoinGecko API Endpoints Used

Endpoint	Used For
GET /coins/markets	All Coins, Markets, Watchlist pages
GET /coins/{id}	Coin Detail — full data with developer stats
GET /coins/{id}/ohlc	Candlestick chart data (OHLCV)
GET /search/trending	Trending coins for home + search modal
GET /search	Live coin search in header modal
GET /onchain/networks/{network}/tokens/{address}/pools	On-chain pool data for Live page
GET /onchain/search/pools	Pool lookup by coin ID

All requests use Next.js ISR (next: { revalidate }) — market data is cached for 60 seconds by default and trending data for 5 minutes.

---

🔧 Environment Variables

Variable	Required	Description
COINGECKO_BASE_URL	✅	CoinGecko API base URL (e.g. https://api.coingecko.com/api/v3)
COINGECKO_API_KEY	✅	Your CoinGecko API key (sent as x-cg-demo-api-key header)

---

📸 Screenshots

Add screenshots here after deployment.

Home	Coin Detail	Markets

Live Terminal	Watchlist	Search Modal

---

🚀 Future Improvements

• Persist the watchlist to localStorage instead of relying on URL params
• Add real WebSocket live-price feeds using the CoinGecko WebSocket API (types already scaffolded in type.d.ts)
• Portfolio tracker with cost-basis and P&L calculations
• Currency toggle (USD / INR / EUR) stored in user preferences
• Mobile-optimised navigation drawer
• Dark/light theme toggle
• Price alert notifications via browser push or email
• Expand the search modal with NFT and exchange results

---

🤝 Contributing

Contributions are welcome! To get started:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/your-feature
3. Commit your changes: git commit -m 'feat: add your feature'
4. Push to the branch: git push origin feature/your-feature
5. Open a Pull Request

Please run npm run lint before submitting and ensure no TypeScript errors exist (tsc --noEmit).

---

📄 License

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

---

Built with ❤️ using Next.js and the CoinGecko API.