ATLAS - Crypto Price Tracker

A modern, responsive cryptocurrency price tracking application built with Next.js 15, featuring real-time data, portfolio management, and price conversion tools.

Features

• Real-time Price Tracking: Live cryptocurrency prices with 24h changes and market data
• Portfolio Management: Track your crypto holdings with automatic value calculations
• Price Converter: Convert between cryptocurrencies and fiat currencies
• Watchlist: Star your favorite coins for quick access
• Multi-currency Support: USD, PHP, EUR support with live conversion rates
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Fear & Greed Index: Market sentiment indicator
• Global Market Stats: Total market cap, volume, and BTC dominance

Project Structure

crypto-price-tracker/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   │   ├── fear-greed/    # Fear & Greed Index endpoint
│   │   ├── global/        # Global market data endpoint
│   │   └── markets/       # Cryptocurrency data endpoint
│   ├── globals.css        # Global styles and animations
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Homepage
├── components/            # React components
│   ├── BootSequence.tsx   # Startup animation
│   ├── CoinTable.tsx      # Main crypto table with sorting
│   ├── CurrencyToggle.tsx # Currency selector
│   ├── CustomSelect.tsx   # Custom dropdown component
│   ├── DashboardHeader.tsx # Navigation header
│   ├── FearGreedGauge.tsx # Market sentiment gauge
│   ├── GlobalStats.tsx    # Market statistics
│   ├── NumberInput.tsx    # Number input with steppers
│   ├── PortfolioTracker.tsx # Portfolio management
│   ├── PriceCalculator.tsx # Currency converter
│   ├── SparklineChart.tsx # 7-day price charts
│   ├── StatusBar.tsx      # Connection status
│   └── WatchlistPanel.tsx # Favorite coins panel
├── hooks/                 # Custom React hooks
│   ├── useCryptoData.ts   # Crypto data fetching
│   ├── useFearGreed.ts    # Fear & Greed data
│   ├── useGlobalData.ts   # Global market data
│   └── useLocalStorage.ts # Local storage management
├── lib/                   # Utility libraries
│   ├── api.ts            # API configuration
│   ├── constants.ts      # App constants
│   ├── formatters.ts     # Data formatting utilities
│   └── utils.ts          # General utilities
├── types/                # TypeScript type definitions
│   └── index.ts          # Shared interfaces and types
├── public/               # Static assets
│   └── atlas_logo.png    # App logo
└── package.json          # Dependencies and scripts

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/yourusername/crypto-price-tracker.git
   cd crypto-price-tracker

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open your browser Navigate to http://localhost:3000

Production Build

npm run build
npm start

Technology Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Icons: Lucide React
• Charts: Recharts
• Data Source: CoinGecko API
• State Management: React hooks + Local Storage
• Deployment: Vercel Ready

Responsive Design

ATLAS is designed with a mobile-first approach:

• Mobile: Optimized card layouts, touch-friendly controls
• Tablet: Adaptive grid systems, collapsible sidebars
• Desktop: Full-width tables, multi-column layouts

Key Features Breakdown

Real-time Data

• Live price updates every minute
• 24h price change indicators with color coding
• Market cap and volume tracking
• 7-day price sparkline charts

Portfolio Management

• Add/edit/remove crypto holdings
• Automatic value calculations in multiple currencies
• 24h portfolio change tracking
• Smooth deletion animations

Price Converter

• Crypto-to-crypto conversion
• Crypto-to-fiat conversion (bidirectional)
• Real-time rate calculations
• Smooth swap animations

User Experience

• Boot sequence for returning users
• Persistent data with localStorage
• Smooth micro-interactions
• Hardware-accelerated animations

Data Sources

• Cryptocurrency Data: CoinGecko API
• Fear & Greed Index: Alternative.me API
• Exchange Rates: Static rates (can be extended to live APIs)

Performance Optimizations

• Memoization: React.memo and useMemo for expensive calculations
• Code Splitting: Dynamic imports for route-based splitting
• Image Optimization: Next.js Image component
• CSS Optimization: Tailwind CSS purging
• Animation Performance: GPU-accelerated transforms

Contributing

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

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• CoinGecko for cryptocurrency data
• Alternative.me for Fear & Greed Index
• Lucide for beautiful icons
• Tailwind CSS for utility-first styling

---

Built using Next.js 15 and TypeScript