Gebruik de Gemini 3 vibe coding om on-chain adressen te zoeken & social tracking pagina De functie is dat je door het invoeren van een EVM-adres on-chain informatie en sociale identiteit kunt volgen, zoals x handle (net als de populaire social graph van een paar jaar geleden) Het kostte 25 minuten en resulteerde in de volgende frontend pagina Eigenlijk is vibe coding heel eenvoudig, het is handiger dan een paar maanden geleden toen ik nog GPT-4o met Cloudflare gebruikte Geef Gemini de instructies, het belangrijkste punt is dat de instructies in gewone taal anders zijn dan de prompts in AI coding, dus je moet AI gebruiken om je een prompt te geven die LLM kan begrijpen Bijvoorbeeld, mijn prompt is Help me een single-page Web3 sociale grafiek tracker te maken met React en Tailwind CSS Ontwerpvereisten: . Stijl: geeky, Matrix-stijl. De achtergrond moet diep zwart zijn, met tekst die een beetje neonblauw of paarse gloed heeft. . Indeling: de pagina moet gecentreerd zijn met een zoekvak voor het invoeren van een ETH-adres. . Animatie: na het klikken op zoeken moet er een coole "data aan het scannen" laadanimatie zijn. Resultaatweergave: . Links toont het "identiteitskaart" van deze persoon: inclusief een avatar (met een willekeurige Web3-avatar), ENS-domeinnaam, en het belangrijkste Twitter-account (in het oog springend). . Rechts toont het "interactienetwerk": een lijst van 3-5 adressen waarmee hij interactie heeft gehad. Gegevenslogica: . Aangezien ik geen backend heb, help me wat mock data te schrijven. Ongeacht welk adres ik invoer, doe alsof je gegevens hebt gevonden. Bijvoorbeeld, de standaard persoon die je vindt heet "Vitalik", Twitter @VitalikButerin Bestandsstructuur: . Schrijf alle code direct in een App.jsx en App.css, zodat ik het effect direct kan zien. De meeste tijd was ik bezig met debuggen, omdat de coding tool vanwege allerlei kleine details niet direct kon herkennen, moet ik nog steeds met Gemini debuggen, de code kopiëren, precies vertellen waar het probleem zich voordoet en hem laten oplossen...