Frontend Architecture Explained

Modern React Implementation: The user interface is built with React 18 and TypeScript, providing a type-safe, performant experience. The architecture prioritizes real-time updates and smooth user interactions.

State Management Strategy:

// Centralized state management for real-time data
interface AppState {
  charities: Charity[];
  transactions: Transaction[];
  holders: Holder[];
  currentSpin: SpinState;
  realTimeConnection: EventSource;
}

// Real-time updates via Server-Sent Events
useEffect(() => {
  const eventSource = new EventSource('/api/events');
  
  eventSource.onmessage = (event) => {
    const update = JSON.parse(event.data);
    updateApplicationState(update);
  };
}, []);

Animation and User Experience: The spinning wheel uses Framer Motion for smooth, physics-based animations. The rotation algorithm ensures visually appealing spins while maintaining the integrity of the random selection process.

Responsive Design Philosophy: The interface adapts seamlessly across devices, with mobile-first design principles ensuring optimal performance on all screen sizes.

Backend Service Architecture

Express.js API Design: The backend follows RESTful principles with additional real-time capabilities through Server-Sent Events (SSE).

Database Schema Strategy:

-- Core data models designed for performance and integrity

-- Charity information with verification status
CREATE TABLE charities (
  id SERIAL PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  description TEXT NOT NULL,
  wallet_address VARCHAR(44) NOT NULL UNIQUE,
  website_url TEXT,
  category VARCHAR(100),
  verified BOOLEAN DEFAULT false,
  total_received_lamports BIGINT DEFAULT 0,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Spin events with winners and amounts
CREATE TABLE spins (
  id SERIAL PRIMARY KEY,
  winner_id INTEGER REFERENCES charities(id),
  total_lamports BIGINT NOT NULL,
  tx_signature VARCHAR(88) UNIQUE,
  status VARCHAR(20) DEFAULT 'pending',
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Individual transaction records for full transparency
CREATE TABLE transactions (
  id SERIAL PRIMARY KEY,
  spin_id INTEGER REFERENCES spins(id),
  from_address VARCHAR(44) NOT NULL,
  to_address VARCHAR(44) NOT NULL,
  amount_lamports BIGINT NOT NULL,
  tx_signature VARCHAR(88) NOT NULL UNIQUE,
  status VARCHAR(20) DEFAULT 'confirmed',
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Performance Optimization: The database includes strategic indexes on frequently queried fields, and the API implements caching strategies to minimize response times while maintaining data freshness.

Blockchain Integration Deep Dive

Solana Network Integration: BAGSpin leverages Solana's high-performance blockchain for fast, low-cost transactions. The integration handles wallet management, transaction creation, and confirmation tracking.

Transaction Processing Flow:

// Simplified example of transaction processing logic
async function processCharityDonation(winner: Charity, amount: number) {
  // 1. Create blockchain transaction
  const transaction = new Transaction().add(
    SystemProgram.transfer({
      fromPubkey: donationWallet.publicKey,
      toPubkey: new PublicKey(winner.wallet_address),
      lamports: amount
    })
  );
  
  // 2. Sign and broadcast transaction
  const signature = await connection.sendTransaction(transaction, [signer]);
  
  // 3. Wait for confirmation
  await connection.confirmTransaction(signature, 'confirmed');
  
  // 4. Log transaction in database
  await recordTransaction(winner, amount, signature);
  
  // 5. Broadcast update to connected clients
  broadcastUpdate('donation_completed', { winner, amount, signature });
}

BAGS Token Integration: The platform integrates with the BAGS token ecosystem to:

• Monitor trading activity and fee generation

• Maintain holder leaderboards with real-time updates

• Provide community governance features

• Enable social engagement and rewards