CoinScope - Next.js Cryptocurrency Tracker

CoinScope is a modern cryptocurrency tracker built with Next.js, TypeScript, and Tailwind CSS. It gives users a fast way to browse market data, inspect individual coins, and monitor trends with a clean, responsive interface.

Overview

CoinScope is designed for users who want a focused crypto dashboard with live market context, coin-specific insights, and practical tools for day-to-day research.

• Browse a ranked market list with pagination so large datasets stay usable.
• Search coins from a modal experience and jump directly to a matching asset.
• Open a detailed coin view with price context, market stats, and chart data.
• Track live pricing and market movement through server-driven data refreshes.
• Convert between crypto and fiat values without leaving the app.
• Review trending coins, category groupings, and overview panels for quick discovery.
• Handle empty, fallback, and not-found states gracefully so the interface stays predictable.

Features

• Live cryptocurrency market tracking with CoinGecko-backed market data and route-level revalidation.
• Paginated coin listings that keep the market table responsive even when the dataset grows.
• Search-driven navigation that quickly resolves a symbol or name to its coin detail page.
• Coin detail pages with market cap, volume, links, and chart-oriented price history data.
• A converter tool that lets users estimate values between crypto and fiat pairs.
• Trending coin and category modules that surface relevant assets for quick discovery.
• Top gainer and loser highlighting to make short-term market movement easier to scan.
• Responsive layouts and reusable UI primitives built for both desktop and mobile workflows.
• Robust empty, fallback, and not-found states so the app stays usable when data is missing.

Tech Stack

• Next.js (App Router)
• TypeScript
• Tailwind CSS
• CoinGecko API
• React
• ESLint

Environment Variables

Create a .env.local file in the project root and add the variables below.

Variable	Required	Description
COINGECKO_API_BASE_URL	Yes	Base URL for CoinGecko API requests, for example https://api.coingecko.com/api/v3.
COINGECKO_API_KEY	Yes	Server-side CoinGecko API key used for authenticated requests.

Getting Started

1. Clone the Repository

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

2. Install Dependencies

Using pnpm:

pnpm install

Using npm:

npm install

3. Configure Environment Variables

Use the environment variables listed above. A typical local setup looks like this:

COINGECKO_API_BASE_URL=https://api.coingecko.com/api/v3
COINGECKO_API_KEY=your_coingecko_api_key

Note:

• Keep sensitive keys server-side whenever possible.
• Public variables should only be exposed if a client-side use case requires them.

4. Run the Development Server

Using pnpm:

pnpm dev

Using npm:

npm run dev

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

Deployment (Vercel)

Deploy Steps

1. Push the repository to GitHub, GitLab, or Bitbucket.
2. Import the project into Vercel.
3. Keep the default Next.js build settings unless your deployment requires custom handling.
4. Add the required environment variables in the Vercel project settings.
5. Deploy and confirm that the home page, coin list, and coin detail pages load correctly.

Required Environment Variables on Vercel

Add the same values used locally:

• COINGECKO_API_BASE_URL
• COINGECKO_API_KEY

After deployment, verify that data loads correctly on:

• Home page
• All Coins page
• Coin details page

Screenshots

All Coins Page

Coin Details Page

Home Page

Usage and Screenshots

The screenshots above illustrate the main user journeys: market discovery, deep coin inspection, and graceful fallback handling for invalid routes or missing data.

Contributing

Contributions are welcome. Please keep changes focused, consistent with the existing code style, and backed by validation where practical.

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Open a pull request with a clear description of the change and its impact

Before submitting, verify the app builds cleanly and that the affected routes behave as expected.

Roadmap

• Portfolio tracker with saved holdings and performance summaries.
• Price alerts and watchlist notifications for selected coins.
• Dark and light mode toggle with persisted user preference.
• PWA support for installable mobile and desktop access.
• Expanded chart controls with more time ranges and technical overlays.

License

This project is licensed under the MIT License. Add a LICENSE file before public distribution if one is not already present.