Superfan Verified

Project Story: Superfan Verified

Inspiration

As a digital marketing strategist, I see firsthand the challenges that creators and brands face in a landscape polluted by bots and fake engagement. The value of a community is not in its size, but in its authenticity. I was inspired to build a protocol that creates a secure, verifiable bridge between a user's digital footprint and their on-chain identity. The goal was to redefine trust, moving from vanity metrics to tangible, cryptographic proof of loyalty.

The Building Process

My core objective was to build a mobile-first, server-side-rendered application that integrates seamlessly with XION and the Reclaim Protocol. I chose Next.js for its robust framework and Abstraxion SDK for its simplified wallet integration. The process followed a logical, phased approach:

• Initial Setup: I started by setting up the Next.js project in Termux, a unique mobile-native environment.

• Core Integration: I integrated the @burnt-labs/abstraxion SDK and the @reclaimprotocol/js-sdk to handle wallet connections and on-chain claims.

• UI/UX: A clean, minimal UI was designed using Tailwind CSS, focusing on a clear, three-step user flow: connect, verify, and confirm.

  • Submission Assets: I developed a detailed README, a video script, and a pitch deck to tell the project's story, document the codebase, and present a clear vision.

Lessons Learned

Building in a non-traditional environment like Termux taught me the importance of environment-specific debugging and solution architecture. My key takeaway is the value of flexibility and persistence when facing environmental limitations. A problem that appears to be a bug in the code can often be a limitation of the platform itself. For future projects, I'll prioritize a robust containerized development environment for a more predictable build process.

Challenges and Solutions

• Network Connectivity: My initial attempts to set up a public-facing server via ngrok failed due to mobile carrier restrictions. I solved this by using a MiFi device, which provided a stable local network for development and demoing.

  • Module Resolution Errors: The server initially failed to build due to missing C++ addons (bufferutil, utf-8-validate). This was a critical blocker for the wallet connection.

My solution was to use Webpack configuration in next.config.js to explicitly ignore these modules, forcing a pure JavaScript fallback that worked perfectly in the Termux environment.

• Application Initialization: Even after the server was running, the UI buttons were unresponsive. I discovered the core issue was that the app was not wrapped in the . A quick change to src/app/layout.tsx resolved this and brought the entire application to life.

• Version Control: I encountered several Git errors, including fatal: Need to specify how to reconcile divergent branches, which was caused by the local and remote repositories having different histories. I resolved this by using git pull --allow-unrelated-histories and a git push --force to establish a clean, unified codebase.

Built With

• abstraxion
• burntlab
• css
• git
• github
• javascript
• javascript-frameworks:-next.js
• next.js
• reclaim-protocol-libraries:-burnt-labs-abstraxion-sdk-tools:-git
• tailwind
• tailwind-css-platforms:-xion-(blockchain)
• termux
• typescript
• xion