⚡ Real-time Cryptocurrency Tracker

A sleek, fast, and modern crypto dashboard built with Next.js 16 & React 19

---

✨ Features

• 📊 Live Bitcoin Overview — Real-time price tracking with interactive candlestick charts
• 🔥 Trending Coins — Stay updated with the hottest cryptocurrencies
• 📈 Category Analytics — Track top crypto categories by market cap and volume
• 💹 All Coins Explorer — Browse paginated list of all cryptocurrencies with key metrics
• 🎨 Beautiful UI — Dark-themed, modern design with smooth animations
• ⚡ Blazing Fast — Server-side rendering with smart caching strategies

---

📸 Pages Overview

🏠 Home Page (/)

The dashboard's landing page featuring:

Section	Description
Coin Overview	Bitcoin spotlight with live price and interactive candlestick chart (1D, 7D, 30D, 1Y periods)
Trending Coins	Top 6 trending cryptocurrencies with 24h price changes
Top Categories	Top 10 crypto categories ranked by market cap

💰 All Coins Page (/coins)

A comprehensive paginated table showing:

• Rank — Market cap ranking
• Token — Name, symbol, and logo
• Price — Current USD price
• 24h Change — Daily price movement (color-coded)
• Market Cap — Total market capitalization

🔍 Coin Detail Page (/coins/[id]) — Coming Soon

Detailed view for individual cryptocurrencies.

🔎 Search Modal — Coming Soon

Quick search functionality to find any cryptocurrency.

---

🛠️ Tech Stack

Category	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript 5
Styling	Tailwind CSS 4
Charts	Lightweight Charts
Icons	Lucide React
Data Source	CoinGecko API
UI Components	Radix UI + Custom components

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun
• CoinGecko API Key (Get one here)

Installation

1. Clone the repository

   git clone https://github.com/yourusername/trackfast.git
   cd trackfast

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Set up environment variables

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

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

4. Run the development server

   npm run dev

5. Open your browser

   Navigate to http://localhost:3000 🎉

---

📁 Project Structure

trackfast/
├── app/
│   ├── layout.tsx          # Root layout with Header
│   ├── page.tsx             # Home page
│   ├── globals.css          # Global styles
│   └── coins/
│       └── page.tsx         # All coins listing page
├── components/
│   ├── CandlestickChart.tsx # Interactive price chart
│   ├── CoinsPagination.tsx  # Pagination component
│   ├── DataTable.tsx        # Reusable data table
│   ├── Header.tsx           # Navigation header
│   ├── home/
│   │   ├── Categories.tsx   # Top categories section
│   │   ├── CoinOverview.tsx # Bitcoin overview section
│   │   ├── TrendingCoin.tsx # Trending coins section
│   │   └── fallback.tsx     # Loading skeletons
│   └── ui/                  # Reusable UI primitives
├── lib/
│   ├── coingecko.actions.ts # API fetcher with caching
│   └── utils.ts             # Utility functions
├── constants.ts             # Chart configs & constants
└── type.d.ts                # TypeScript type definitions

---

📜 Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint
npm run lint:fix	Fix ESLint issues
npm run format	Format code with Prettier
npm run format:check	Check code formatting

---

🎯 Roadmap

• Home dashboard with coin overview
• Trending coins section
• Top categories table
• All coins paginated listing
• Interactive candlestick charts
• Individual coin detail page
• Search modal with instant results
• Watchlist functionality
• Portfolio tracker
• Price alerts

---

🤝 Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

---

📄 License

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

---

Built with ❤️ using Next.js & CoinGecko API

⭐ Star this repo if you find it helpful!