Soundao - Web3 Music Token Investment Platform

A modern web3-based music token investment platform built with React and Tailwind CSS, inspired by Magic Eden's UI design.

Features

🎵 Music Discovery & Investment

• Featured Songs: Discover trending music tokens with real-time price data
• Song Detail Pages: Comprehensive information about songs including tokenomics
• Investment Options: Buy and sell music tokens with integrated trading modal
• Portfolio Management: Track your music token investments and performance

📊 Trading & Analytics

• Advanced Trading Interface: Full-featured trading page with sorting and filtering
• Real-time Price Charts: Visual price history and market data
• Market Statistics: Volume, market cap, and trading activity metrics
• Top Gainers/Losers: Track best and worst performing tokens

👤 User Profile & Portfolio

• Comprehensive Profile: User stats, earnings, and portfolio overview
• My Songs: For artists to track their released songs and earnings
• Trading History: Complete activity log of all transactions
• Wallet Integration: Connect your crypto wallet to start trading

🎨 Design Features

• Dark Mode: Sleek dark theme optimized for trading
• Magic Eden-inspired UI: Clean, professional interface similar to popular NFT marketplace
• Responsive Design: Works seamlessly on desktop and mobile devices
• Interactive Components: Smooth animations and hover effects

Tech Stack

• React 18 with TypeScript
• Tailwind CSS for styling
• Headless UI for accessible components
• Heroicons for consistent iconography
• React Router for navigation

Project Structure

src/
├── components/
│   ├── Layout/
│   │   ├── Header.tsx          # Main navigation header
│   │   ├── Sidebar.tsx         # Left sidebar navigation
│   │   └── Layout.tsx          # Main layout wrapper
│   └── UI/
│       ├── SongCard.tsx        # Reusable song display card
│       └── TradingModal.tsx    # Trading interface modal
├── pages/
│   ├── MainPage.tsx            # Home page with featured content
│   ├── SongDetailPage.tsx      # Individual song details
│   ├── TradingPage.tsx         # Trading interface
│   └── UserProfilePage.tsx     # User profile and portfolio
├── types/
│   └── index.ts               # TypeScript type definitions
├── App.tsx                    # Main app component
├── index.tsx                  # Application entry point
└── index.css                  # Global styles and Tailwind imports

Key Components

Song Data Structure

interface SongData {
  id: string;
  title: string;
  artist: string;
  album: string;
  genre: string;
  releaseDate: string;
  audioUrl: string;
  coverUrl: string;
  streams: number;
  tokenPrice: number;
  tradeVolume: number;
  priceChange24h: number;
}

User Information

interface User {
  username: string;
  profileImage: string;
  tokensOwned: number;
  nftsOwned: number;
  joinDate: string;
  songsReleased: Song[];
  walletAddress: string;
  totalPortfolioValue: number;
  totalEarnings: number;
}

Getting Started

1. Install Dependencies

   npm install

2. Start Development Server

   npm start

3. Build for Production

   npm run build

Design Philosophy

The UI follows Magic Eden's design principles:

• Clean & Minimal: Focus on content with minimal distractions
• Dark Theme: Optimized for long trading sessions
• Data-Dense: Efficient display of trading information
• Mobile-First: Responsive design that works on all devices
• Accessible: Using Headless UI for keyboard navigation and screen readers

Future Enhancements

• Real blockchain integration with Solana
• Advanced charting with technical indicators
• Social features (following artists, sharing playlists)
• NFT marketplace integration
• Advanced portfolio analytics
• Artist launchpad for token creation

License

This project is for demonstration purposes and showcases modern React development practices for web3 applications.# frontend