Building a DexScreener Clone

Learn how to create a comprehensive cryptocurrency terminal application with React, featuring real-time token data, price charts, transaction history, and portfolio tracking. This tutorial demonstrates how to build a modern crypto dashboard similar to DexScreener using Moralis APIs.

Prerequisites

• Basic knowledge of React
• Familiarity with Web3 concepts
• Moralis account
• Node.js installed on your computer

Video Tutorial

📺 Watch the step-by-step tutorial on YouTube

Features

• 📈 Trending Tokens - Track the most popular tokens across multiple blockchains
• 🔍 Token Details - In-depth information about any token including price charts and transactions
• 💼 Portfolio Tracking - Monitor your crypto holdings in one place
• 🚀 Pump.fun Integration - Discover new tokens from the Pump.fun ecosystem with our Pump Fun API
• 🔎 Advanced Search - Find tokens by name, symbol, or contract address
• ⛓️ Multi-Chain Support - Data from Ethereum, BSC, Polygon, Solana, and more

Tech Stack

• React - Frontend library
• React Router - Navigation and routing
• Tailwind CSS - Styling and UI components
• Chart.js - Data visualization
• Moralis API - Blockchain data provider

Project Structure

src/
├── components/ # Reusable UI components
│ ├── layout/ # Layout components (sidebar, topbar)
│ ├── token/ # Token-specific components
│ ├── trending/ # Trending page components
│ ├── portfolio/ # Portfolio tracking components
│ └── modals/ # Modal components (search, filters)
├── pages/ # Page components
├── services/ # API services and utilities
├── App.js # Main application component
└── index.js # Application entry point

Moralis APIs Used

This project leverages several Moralis APIs to fetch blockchain data:

Token Data APIs

Feature	API Endpoint	Description	Moralis Docs Link
Trending Tokens	GET /tokens/trending	Gets trending tokens across all supported chains	API Docs
Token Search	GET /tokens/search	Searches for tokens based on user queries	API Docs
Token Metadata (EVM)	GET /erc20/metadata	Fetches metadata for tokens (name, symbol, decimals)	API Docs
Token Metadata (Solana)	GET /token/mainnet/{tokenAddress}/metadata	Retrieves token metadata on Solana	API Docs

Pair/Liquidity Pool APIs

Feature	API Endpoint	Description	Moralis Docs Link
Token Pairs (EVM)	GET /erc20/{tokenAddress}/pairs	Gets trading pairs for a specific token	API Docs
Token Pairs (Solana)	GET /token/mainnet/{tokenAddress}/pairs	Gets trading pairs for a Solana token	API Docs
Pair Stats (EVM)	GET /pairs/{pairAddress}/stats	Retrieves stats for a trading pair (price, volume)	API Docs
Pair Stats (Solana)	GET /token/mainnet/pairs/{pairAddress}/stats	Gets stats for a Solana trading pair	API Docs
Pair Swaps (EVM)	GET /pairs/{pairAddress}/swaps	Gets transaction history for a trading pair	API Docs
Pair Swaps (Solana)	GET /token/mainnet/pairs/{pairAddress}/swaps	Gets Solana pair transaction history	API Docs
Pair Snipers (EVM)	GET /pairs/{pairAddress}/snipers	Identifies early buyers/snipers of a token	API Docs
Pair Snipers (Solana)	GET /token/mainnet/pairs/{pairAddress}/snipers	Identifies Solana token snipers	API Docs

Token Holder APIs

Feature	API Endpoint	Description	Moralis Docs Link
Token Holders	GET /erc20/{tokenAddress}/holders	Lists token holders and their balances	API Docs
Token Holder Stats	GET /erc20/{tokenAddress}/holder-stats	Provides analytics about token holders	API Docs

Wallet/Portfolio APIs

Feature	API Endpoint	Description	Moralis Docs Link
Wallet Net Worth	GET /wallets/{address}/net-worth	Calculates total value of a wallet across chains	EVM API
Wallet Tokens	GET /wallets/{address}/tokens	Lists all tokens held by a specific wallet	EVM API

Token Discovery/Filtering API

Feature	API Endpoint	Description	Moralis Docs Link
Token Filtering	GET /filtered-tokens	Finds tokens based on complex filtering criteria	API Docs

Pump.fun (Solana) APIs

Feature	API Endpoint	Description	Moralis Docs Link
Pump.fun New Tokens	GET /token/mainnet/exchange/pumpfun/new	Gets newly created tokens on Pump.fun	API Docs
Pump.fun Bonding Tokens	GET /token/mainnet/exchange/pumpfun/bonding	Gets tokens in the bonding phase on Pump.fun	API Docs
Pump.fun Graduated Tokens	GET /token/mainnet/exchange/pumpfun/graduated	Gets tokens that have graduated on Pump.fun	API Docs

Chart Widget

Feature	Source	Description	Moralis Docs Link
Moralis Chart Widget	https://moralis.com/static/embed/chart.js	Embeds interactive price charts for tokens	Widget Docs

Supported Blockchains

The application supports multiple blockchains with the following chain IDs:

Chain	Chain ID	Explorer
Ethereum	0x1	Etherscan
BSC	0x38	BscScan
Polygon	0x89	PolygonScan
Arbitrum	0xa4b1	Arbiscan
Optimism	0xa	Optimistic Etherscan
Base	0x2105	BaseScan
Avalanche	0xa86a	Snowtrace
Solana	solana	Solscan
Fantom	0xfa	FTMScan
Pulse	0x171	PulseScan
Ronin	0x7e4	Ronin Explorer

Getting Started

Prerequisites

• Node.js (v14 or later)
• npm or yarn
• Moralis API key (Get one here)

Installation

1. Clone the repository:

   git clone https://github.com/bharathbabu-moralis/dexscreener-clone.git
   cd dexscreener-clone

2. Install dependencies:

   npm install

3. Create a .env file in the root directory and add your Moralis API key:

   REACT_APP_MORALIS_API_KEY=your_api_key_here

4. Start the development server:

   npm start

5. Open http://localhost:3000 to view the application in your browser.

Styling

The application uses Tailwind CSS with custom variables for consistent theming:

:root {
  --color-bg-primary: #0e1118;
  --color-bg-secondary: #141722;
  --color-bg-tertiary: #1e2330;
  --color-bg-highlight: #252b3b;
  --color-text-primary: #fff;
  --color-text-secondary: #8a94a8;
  --color-text-tertiary: #636d83;
  --color-border: #2c3344;
  --color-green: #16c784;
  --color-red: #ea3943;
  --color-blue: #4878ff;
}