PROJECT OVERVIEW:
You are tasked with creating a single-page responsive web application called 'MetaVarlık Zihin Haritası' (MetaAsset Mind Map). This application aims to address the growing complexity and fragmentation of digital asset ownership within metaverses and Web3 ecosystems. Users often struggle to understand the true value, potential, and interconnections of their digital assets, which include NFTs, virtual land, digital collectibles, and more. Our application will provide an AI-powered platform for users to connect, visualize, analyze, and manage their meta-assets, offering insights into market trends, value estimations, and investment potential. The core value proposition is to demystify digital asset ownership in the metaverse, enabling users to make more informed decisions and optimize their portfolios.
TECH STACK:
- Frontend Framework: React (using Vite for fast development)
- Styling: Tailwind CSS for rapid UI development and utility-first styling.
- State Management: Zustand for efficient and scalable global state management.
- Routing: React Router DOM for client-side navigation.
- Data Fetching: Axios for making HTTP requests to potential backend APIs or third-party data sources.
- UI Components: Utilize headless UI components like Headless UI or Radix UI for accessibility and customizability, styled with Tailwind CSS.
- Icons: React Icons for a wide variety of icons.
- Potentially: Chart.js or Recharts for data visualization.
CORE FEATURES:
1. **Asset Connection & Dashboard:**
* **User Flow:** Upon first visit, the user is greeted with a dashboard. They can connect their Web3 wallet (e.g., MetaMask) via a button. After successful connection, the application fetches the user's owned NFTs and other relevant digital assets from the blockchain (e.g., Ethereum, Polygon, Solana) using APIs like Alchemy, Infura, or OpenSea's API. The dashboard displays a summary of connected assets, including total count, estimated total value, and recent activity.
* **Details:** The connection process should be seamless and secure, prioritizing user privacy. The dashboard will be the central hub showing key metrics.
2. **Asset Visualization & Details:**
* **User Flow:** Users can click on an asset from their dashboard or a dedicated 'My Assets' list to view its detailed page. This page shows the asset's image/media, name, description, traits/properties, current market price, historical price data (if available), ownership history, and links to its marketplace listing.
* **Details:** Each asset type (e.g., PFP NFT, virtual land, gaming item) might have specific display requirements. The page should be interactive, allowing users to zoom into images or preview 3D models if applicable.
3. **AI-Powered Valuation & Trend Analysis:**
* **User Flow:** On the asset detail page or a dedicated 'Analysis' section, users can see AI-generated insights. This includes a predicted value range based on current market data, comparable assets, rarity, and historical performance. It will also highlight emerging trends related to the asset's collection or metaverse.
* **Details:** The AI model (simulated in MVP with sophisticated logic) will consider factors like collection popularity, creator reputation, recent sales volume, floor price movements, and external news sentiment (if integrated).
4. **Watchlist & Alerts:**
* **User Flow:** Users can add specific assets or entire collections to a 'Watchlist'. They can configure custom alerts for price changes (e.g., notify me if the floor price drops by 10%), new listings below a certain threshold, or significant sales within a collection.
* **Details:** Alerts can be displayed within the app (toast notifications) and potentially via email or push notifications in future iterations.
5. **Portfolio Summary:**
* **User Flow:** A dedicated 'Portfolio' page provides an aggregated view of all assets, categorized by metaverse, asset type, or custom tags. It shows overall portfolio value, performance over time (e.g., 24h, 7d, 30d change), and asset allocation breakdown.
* **Details:** This section offers a high-level overview for quick assessment.
UI/UX DESIGN:
- **Layout:** Single-page application (SPA) layout. A persistent sidebar or top navigation for main sections (Dashboard, My Assets, Watchlist, Portfolio, Settings). Main content area dynamically updates based on the selected section.
- **Color Palette:** A futuristic and sophisticated palette. Primary: Dark charcoal (#1a1a1a) or deep navy (#0f172a). Accent: Electric blue (#3b82f6) or vibrant purple (#8b5cf6) for interactive elements, highlights, and charts. Secondary: Subtle grays (#4b5563, #6b7280) for text and borders. White/light gray for text on dark backgrounds.
- **Typography:** Clean, modern sans-serif font like Inter or Poppins. Clear hierarchy using font weights and sizes (e.g., H1 for titles, H2 for section headers, body text, captions).
- **Responsive Design:** Mobile-first approach. Sidebar collapses into a hamburger menu on smaller screens. Grids adjust column count. Ensure all elements are touch-friendly and readable across devices (mobile, tablet, desktop).
- **Visuals:** Use subtle gradients, abstract background patterns, and clean icons. Focus on clarity and data presentation.
COMPONENT BREAKDOWN:
- `App.jsx`: Main application component, sets up routing and global layout.
- `Header.jsx`: Top navigation bar or logo area.
- `Sidebar.jsx`: Persistent navigation menu (collapsible).
- `DashboardPage.jsx`: Main landing page. Fetches and displays summary data, recent activity cards.
- `WalletConnector.jsx`: Button and logic for connecting a Web3 wallet.
- `AssetSummaryCard.jsx`: Displays key metric (e.g., Total Value, Asset Count).
- `RecentActivityFeed.jsx`: Lists recent transactions or market movements.
- `MyAssetsPage.jsx`: Displays a list or grid of the user's connected assets.
- `AssetCard.jsx`: Represents a single asset in a list/grid view (image, name, price).
- `AssetDetailPage.jsx`: Displays detailed information for a selected asset.
- `AssetImageViewer.jsx`: Displays the asset's visual representation.
- `AssetInfoTable.jsx`: Shows metadata, traits, and properties.
- `MarketDataDisplay.jsx`: Shows current price, floor price, historical chart.
- `AIAnalysisPanel.jsx`: Displays AI-generated insights and predictions.
- `WatchlistPage.jsx`: Manages the user's watchlist items.
- `WatchlistItem.jsx`: Displays an asset/collection in the watchlist with relevant data and alert options.
- `PortfolioPage.jsx`: Shows the aggregated portfolio overview.
- `PortfolioChart.jsx`: Visualizes portfolio performance and allocation.
- `AssetAllocationPieChart.jsx`: Pie chart showing asset distribution.
- `SettingsPage.jsx`: User preferences and connection management.
- `AlertConfigModal.jsx`: Modal for setting up custom alerts.
DATA MODEL:
- `UserState` (Zustand store):
- `isConnected: boolean`
- `userAddress: string | null`
- `assets: Asset[]`
- `watchlist: WatchlistItem[]`
- `portfolio: PortfolioSummary`
- `isLoading: boolean`
- `error: string | null`
- `Asset` object:
- `id: string` (Unique identifier, e.g., contractAddress:tokenId)
- `name: string`
- `description: string`
- `imageUrl: string`
- `collectionName: string`
- `contractAddress: string`
- `tokenId: string`
- `chainId: number`
- `currentPrice: { value: number, currency: string }`
- `floorPrice: { value: number, currency: string }`
- ` różnice: { '24h': number, '7d': number, '30d': number }`
- `traits: { trait_type: string, value: string }[]`
- `metadataUrl: string`
- `marketplaceUrl: string`
- `ownershipHistory: OwnershipEvent[]`
- `AIAnalysis` object:
- `predictedValue: { min: number, max: number, currency: string }`
- `confidenceScore: number`
- `trendFactors: string[]`
- `insights: string`
- `Mock Data Format Examples:`
```json
// Example Asset
{
"id": "0xabc...:123",
"name": "Bored Ape #1234",
"description": "A bored ape with sunglasses.",
"imageUrl": "https://example.com/images/ape1234.png",
"collectionName": "Bored Ape Yacht Club",
"contractAddress": "0xabc...",
"tokenId": "123",
"chainId": 1,
"currentPrice": {"value": 75.5, "currency": "ETH"},
"floorPrice": {"value": 70.0, "currency": "ETH"},
"różnice": {"24h": -2.5, "7d": 5.0, "30d": 15.0},
"traits": [{"trait_type": "Eyes", "value": "Sunglasses"}, {"trait_type": "Background", "value": "Gray"}],
"metadataUrl": "https://example.com/metadata/123",
"marketplaceUrl": "https://opensea.io/assets/0xabc.../123"
}
```
ANIMATIONS & INTERACTIONS:
- **Page Transitions:** Subtle fade-in/fade-out transitions between pages using `Framer Motion` or similar library for a smooth SPA experience.
- **Button Hovers:** Slight scale-up or background color change on interactive elements (buttons, links).
- **Card Interactions:** Subtle shadow lift or scale-up effect when hovering over `AssetCard` or `WatchlistItem`.
- **Loading States:** Use skeleton loaders or spinners (e.g., from `react-spinners`) while data is being fetched. Display a subtle pulsing animation on cards during initial load.
- **Micro-interactions:** Add subtle animations for adding/removing items from watchlist, confirmation messages, etc.
- **Chart Animations:** Animate chart loading and updates for better data perception.
EDGE CASES:
- **Wallet Not Connected:** Display a clear call-to-action to connect the wallet. If connection fails, show an informative error message.
- **No Assets Owned:** Display an empty state message with guidance on how to connect assets or explore public collections.
- **API Errors:** Gracefully handle errors from blockchain explorers or NFT marketplace APIs. Show user-friendly error messages (e.g., "Could not fetch asset data. Please try again later."). Implement retry mechanisms.
- **Invalid Data:** Implement validation for any user-input fields (e.g., alert thresholds). Handle cases where asset metadata might be missing or malformed.
- **Zero Value Assets:** Ensure assets with zero or very low floor prices are displayed correctly without causing layout shifts.
- **Accessibility (a11y):** Use semantic HTML, ensure sufficient color contrast, provide keyboard navigation support, and use ARIA attributes where necessary. All interactive elements should have focus states.
SAMPLE DATA (More detailed examples within Data Model section):
1. **Asset 1 (PFP NFT):** Bored Ape Yacht Club #1234, High rarity traits, Current Price: 75 ETH, Floor Price: 70 ETH.
2. **Asset 2 (Virtual Land):** Decentraland Estate (Coordinates: X:123, Y:456), Size: 1x1 parcel, Current Price: 5000 MANA.
3. **Asset 3 (Gaming Item):** Legendary Sword from 'MetaQuest' game, Traits: +10 Attack, +5 Speed, Current Price: 2.5 SOL.
4. **Asset 4 (Art NFT):** Abstract Art by ArtistX, Limited Edition 1/10, Current Price: 15 ETH.
5. **Asset 5 (ENS Domain):** myname.eth, Premium domain, Current Price: 0.5 ETH.
6. **Watchlist Item:** User added 'CryptoPunks' collection to watchlist.
7. **Alert Config:** User set alert for 'Bored Ape #1234' if price drops below 65 ETH.
8. **Portfolio State:** Total value: $150,000 USD, Allocation: 60% NFTs, 30% Virtual Land, 10% Other.
DEPLOYMENT NOTES:
- **Build Tool:** Vite is recommended for its speed. `npm run build` command.
- **Environment Variables:** Use `.env` files for API keys (e.g., `VITE_ALCHEMY_API_KEY`, `VITE_OPENSEA_API_KEY`) and other configurations. Ensure sensitive keys are not committed to version control.
- **Performance Optimizations:** Code splitting using React.lazy and Suspense. Image optimization. Efficient state management to prevent unnecessary re-renders. Memoization (`React.memo`, `useMemo`, `useCallback`).
- **Hosting:** Platforms like Vercel, Netlify, or GitHub Pages are suitable for static site deployment. Ensure CORS is handled correctly if using external APIs directly.
- **HTTPS:** Always deploy over HTTPS. Configure SSL certificates.
- **PWA:** Consider adding PWA capabilities for offline access and mobile-like experience (installability).
- **Error Tracking:** Integrate a service like Sentry for monitoring runtime errors in production.