Nouns Auction Gallery

A React application showcasing NounsDAO real-time auctions and historical data, fully meeting the project requirements.

🎯 Project Goals

Implementing the core functionality required by the project:

Mission: Display today's live auction countdown AND render a gallery of 5 past Nouns with their winning bid history.

✨ Core Features

🔥 Live Auction Display

• Real-time Countdown: Precise display of remaining auction time
• Dynamic Bid Updates: Simulated real-time bid stream
• Auction Status Monitoring: Automatic detection of auction end
• Urgency Indicators: Red warning for final 5 minutes

🖼️ Historical Auction Gallery

• 5 Recent Auctions: Display of most recently completed Noun auctions
• Winning Bid History: Complete bidding records for each Noun
• Participant Statistics: Bid counts, participant numbers, and other data
• Transaction Price Display: Final transaction amounts and winners

🎨 Noun Image System

• Seed-driven Generation: SVG image generation based on 5 traits
• Pixel Art Style: Maintains Nouns' unique visual style
• Responsive Sizing: Supports small/medium/large three sizes
• Trait Information Display: Shows background, body, accessory, and other traits

🛠️ Tech Stack

• React 18 + TypeScript - Modern frontend framework
• Vite - Fast build tool
• Tailwind CSS - Utility-first CSS framework
• Apollo Client - GraphQL data management (architecture support)
• Date-fns - Date manipulation library

🚀 Quick Start

Install Dependencies

npm install
# or
yarn install
# or
pnpm install

Start Development Server

npm run dev
# or
yarn dev
# or
pnpm dev

Build for Production

npm run build
# or
yarn build
# or
pnpm build

📁 Project Structure

src/
├── components/          # React components
│   ├── NounImage.tsx       # Noun image component
│   ├── AuctionCountdown.tsx # Auction countdown
│   ├── CurrentAuction.tsx   # Current auction display
│   ├── HistoricalGallery.tsx # Historical gallery
│   ├── AuctionCard.tsx     # Auction card
│   ├── BidHistory.tsx      # Bid history
│   └── LoadingSpinner.tsx  # Loading states
├── hooks/               # Custom hooks
│   └── useAuctionData.ts   # Auction data hooks
├── lib/                 # Utility libraries
│   ├── constants.ts        # Constants configuration
│   ├── graphql.ts         # GraphQL queries
│   └── utils.ts           # Utility functions
├── types/               # Type definitions
│   └── index.ts           # Core types
└── App.tsx              # Main application component

🎨 Design Features

Visual Design

• Nouns Brand Colors: Using official yellow, red, blue, green
• Gradient Background: Cool/Warm dual-color gradient background
• Card-based Layout: Modern card design
• Pixel Art Support: Dedicated CSS classes for pixel art rendering

Interactive Experience

• Real-time Updates: Simulated WebSocket real-time data updates
• Animation Effects: Card hover, loading animations, etc.
• Responsive Design: Perfect adaptation for mobile and desktop
• Loading States: Graceful skeleton loading effects

📊 Data Simulation

Since this is a demonstration project, it uses simulated data:

Current Auction

• Dynamically generated active auction
• Simulated real-time bid updates
• Real countdown logic

Historical Data

• 5 simulated historical auctions
• Randomly generated bid records
• Real timestamps and block information

Noun Images

• Seed-based SVG generation
• 5 traits: background, body, accessory, head, glasses
• Simplified pixel art rendering

🔧 Configuration Options

Network Configuration (src/lib/constants.ts)

export const CURRENT_NETWORK = NETWORKS.MAINNET; // Currently using mainnet

UI Configuration

export const UI = {
  GALLERY_SIZE: 5,                    // Gallery display count
  COUNTDOWN_UPDATE_INTERVAL: 1000,    // Countdown update interval
  AUCTION_QUERY_INTERVAL: 30000,      // Data query interval
};

🎯 Project Highlights

✅ Fully Meets Requirements

• ✅ Display today's live auction countdown
• ✅ Render gallery of 5 historical Nouns
• ✅ Show winning bid history
• ✅ Real-time data updates

🚀 Technical Highlights

• TypeScript Support: Complete type safety
• Modular Design: Reusable component architecture
• Performance Optimization: Reasonable state management and update strategies
• Error Handling: Complete error boundaries and fallback strategies

🎨 User Experience

• Intuitive Interface: Clear information hierarchy
• Real-time Feedback: Dynamic status updates
• Mobile Friendly: Responsive design
• Loading Optimization: Graceful loading states

🔗 Future Extensions

Real Data Integration

• Connect to official NounsDAO subgraph
• Implement WebSocket real-time updates
• Add Web3 wallet connectivity

Feature Enhancements

• Auction participation functionality
• Advanced filtering and search
• Data export features
• Price trend charts

📝 Development Notes

This project is a practical application for Course 3, demonstrating all technologies learned from Units 3.1-3.5:

1. API Architecture - Modular data query design
2. Indexing System - Simulating Ponder.sh data structures
3. Real-time Queries - WebSocket simulation and state management
4. Historical Queries - Pagination and batch data processing
5. Image System - Noun SVG generation and caching

🤝 Contributing

This is an educational project. Suggestions for improvements and feature extensions are welcome!

📄 License

MIT License - Feel free to use this project for learning and development purposes.

🔗 Links

• NounsDAO Official
• The Graph Protocol
• React Documentation
• Tailwind CSS