Coin Swap - Cryptocurrency Exchange Interface

A modern, responsive web application for swapping cryptocurrencies with real-time exchange rates and a beautiful user interface.

Features

• 🪙 Real-time Exchange Rates - Live cryptocurrency prices from CoinGecko API
• 📱 Responsive Design - Optimized for both desktop and mobile devices
• 🎨 Modern UI/UX - Clean, intuitive interface with smooth animations
• 🔄 Instant Calculations - Real-time conversion as you type
• 🌙 Dark Mode Support - Automatic theme switching
• ⚡ Fast & Lightweight - Built with Next.js and optimized for performance

Tech Stack

• Frontend: Next.js 14 with React 18
• Styling: Tailwind CSS
• State Management: Zustand
• API Integration: Axios
• Icons: Lucide React
• Deployment: Ubuntu 22.04 with PM2

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

git clone <your-repo-url>
cd pot

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

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

Project Structure

src/
├── app/                    # Next.js 14 app router
│   ├── layout.js          # Root layout
│   ├── page.js            # Main page
│   └── globals.css        # Global styles
├── components/
│   ├── SwapInterface.js   # Main swap component
│   ├── CoinSelector.js    # Coin selection dropdown
│   └── ui/                # Reusable UI components
├── lib/
│   ├── store.js           # Zustand state management
│   ├── api.js             # API integration
│   └── utils.js           # Utility functions
└── types/                 # Type definitions

API Integration

The application uses the CoinGecko API for:

• Real-time cryptocurrency prices
• Exchange rate calculations
• Available trading pairs

Deployment

Ubuntu 22.04 Server Setup

1. Install Node.js and PM2:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo npm install -g pm2

2. Clone and build:

git clone <your-repo-url>
cd pot
npm install
npm run build

3. Start with PM2:

pm2 start npm --name "coin-swap" -- start
pm2 save
pm2 startup

4. Configure Nginx (optional):

server {
    listen 80;
    server_name your-domain.com;
    
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Adding New Features

1. New Components: Add to src/components/
2. API Endpoints: Extend src/lib/api.js
3. State Management: Update src/lib/store.js
4. Utilities: Add to src/lib/utils.js

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License - see LICENSE file for details

Support

For questions or issues, please open an issue on GitHub.

---

Built with ❤️ using Next.js and Tailwind CSS