NFT Marketplace

A modern, real-time NFT marketplace built with Next.js, Supabase, and Ethereum.

Features

• Real-time Updates: Live data synchronization for NFT listings, bids, and transactions
• Responsive Design: Fully responsive UI that works on all devices
• Smart Contract Integration: Seamless interaction with Ethereum blockchain
• User Authentication: Secure wallet-based authentication
• Advanced Filtering: Search and filter NFTs by various criteria
• Optimized Performance: Fast loading times and efficient data fetching

Tech Stack

• Frontend: Next.js 14, React, TypeScript, Tailwind CSS, shadcn/ui
• Backend: Supabase (PostgreSQL with real-time subscriptions)
• Blockchain: Ethereum, Solidity, OpenZeppelin, Ethers.js
• Data Fetching: SWR for optimized data fetching with caching
• Deployment: Vercel

Getting Started

Prerequisites

• Node.js 18+ and npm/yarn
• Supabase account
• Ethereum wallet (MetaMask recommended)

Installation

1. Clone the repository: ```bash git clone https://github.com/yourusername/nft-marketplace.git cd nft-marketplace ```

2. Install dependencies: ```bash npm install

   or

   yarn install ```

3. Set up environment variables: Create a .env.local file in the root directory with the following variables: ``` NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key ```

4. Run the development server: ```bash npm run dev

   or

   yarn dev ```

5. Open http://localhost:3000 in your browser to see the application.

Database Schema

The application uses the following database tables:

• users: Store user information and wallet addresses
• collections: NFT collections with metadata
• nfts: Individual NFTs with their properties
• bids: Bids placed on NFTs
• transactions: Record of all NFT transactions
• favorites: User's favorite NFTs
• views: Track NFT views for analytics

Optimization Features

• Real-time Subscriptions: Instant updates using Supabase's real-time capabilities
• Infinite Scrolling: Load NFTs as the user scrolls for better performance
• Image Optimization: Next.js Image component for optimized image loading
• SWR Caching: Smart caching strategy to minimize API calls
• Pagination: Efficient data loading with pagination
• Debounced Search: Optimized search functionality
• Lazy Loading: Components and data are loaded only when needed

Smart Contract Integration

The marketplace integrates with Ethereum smart contracts for:

• Minting new NFTs
• Buying and selling NFTs
• Transferring ownership
• Placing and accepting bids
• Royalty payments to original creators

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

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