ArsaNova

Own a unique piece of the digital Earth with ArsaNova. We've mapped the globe into land plots (Arsas), each a unique NFT on Algorand. Claim your Arsa today on our interactive map.

Comment

Inspiration

Our inspiration began with a classic piece of internet history: The Million Dollar Homepage. It proved that digital space, even simple pixels, could have immense value through scarcity and community attention. We asked ourselves: What would the Million Dollar Homepage look like if it were built for Web3, on a map of the actual Earth, and with true, permanent ownership?

ArsaNova is our answer. It's an evolution of that idea—transforming a static pixel grid into a dynamic, 3D, and user-owned digital twin of our planet.

What it does

ArsaNova is a decentralized application (dApp) that allows users to own a unique piece of the digital Earth. Here’s what it does:

  • Visualizes the World: It presents a stunning, interactive 3D globe built with deck.gl, partitioned into a grid of hexagonal cells using Uber's H3 system.
  • Defines Digital Land: Each hexagonal cell is a unique digital plot we call an "Arsa."
  • Enables True Ownership: Users can purchase any available Arsa. Upon purchase, the Arsa is minted as a unique, permanent NFT on the fast and eco-friendly Algorand blockchain.
  • Offers Personalization: To mint an Arsa, the new owner must upload a custom image, making their plot truly personal from the moment of creation.
  • Provides a Seamless Experience: Users connect their Pera or Defly wallet, browse the globe, and complete the entire purchase and minting process in a single, fluid workflow, seeing the NFT appear in their wallet moments later.

How we built it

We combined a powerful set of modern web and Web3 technologies to bring ArsaNova to life:

  • Frontend: Built with React and bootstrapped with Vite for a fast and modern development experience.
  • Visualization: The core of our user experience is powered by deck.gl for high-performance 3D rendering of the H3 grid, running on top of MapLibre for the base map.
  • Backend & Database: We used Supabase as our all-in-one backend.
    • PostgreSQL Database: Stores all Arsa ownership records and metadata. We use Row Level Security (RLS) to ensure users can only modify data related to the Arsas they own.
    • Supabase Auth: We implemented a secure "Sign-In with Algorand" (SIWA) flow.
    • Supabase Storage: Securely stores the original and optimized images uploaded by users for their Arsas.
    • Edge Functions: Handles all server-side logic, including processing image uploads and preparing blockchain transactions.
  • Blockchain: We chose Algorand for its speed, incredibly low transaction fees, and carbon-neutral footprint, which is essential for a project of this scale.
  • Wallet Integration: We used the @txnlab/use-wallet-react library to provide a smooth connection experience for Pera, Defly, and any other WalletConnect-compatible Algorand wallet.
  • Geospatial Logic: h3-js was used for all client-side calculations, such as determining an Arsa's location and boundaries. We also used @turf/js to define and check against our regional "sale campaign" polygons.

Challenges we ran into

  1. The Rendering Trap: Displaying Custom Images Inside Hexagons

    Our biggest technical challenge was not just displaying the H3 grid, but rendering each user's custom image inside its respective hexagon on the globe. My initial instinct was that this required deep, low-level rendering logic, so I dived into writing custom OpenGL Shaders (GLSL).

    This proved to be an incredibly steep climb. Resources for this specific use case are scarce, and despite days of trial and error with various AI models, the best I could achieve was a partially working shader that, amusingly, rendered the images upside down! More importantly, I discovered a critical flaw in the approach: performance. Even with a working shader, the client-side rendering approach began to suffer with as few as 100 images on screen, making it completely unscalable for a global map.

    This struggle led me to understand the correct, professional-grade architecture: using a TileLayer. The truly scalable solution involves a backend process to pre-render map tiles at various zoom levels (0-20). This process would identify the H3 cells falling within each tile's boundary, fetch the corresponding images from Supabase Storage, and compose them into a single image tile. This was by far the most demanding technical challenge, shifting my perspective from client-side rendering to a scalable, server-side tiling strategy.

  2. The Smart Contract Misconception: An Algorand "Aha!" Moment

    The second major hurdle was conceptual and came from my unfamiliarity with the nuances of the Web3 world. My initial, firm assumption was that any on-chain asset sale would require a complex smart contract. I invested considerable time researching Algorand's TEAL (Transaction Execution Approval Language), which represented a significant learning curve.

    The project's breakthrough moment came from a surprising source: an AI assistant. It pointed out that for our specific use case—a fixed-price sale with a clear set of operations—a full smart contract was overkill.

    This led to our "Aha!" moment: discovering Algorand Atomic Transactions. We learned that this native feature allows grouping multiple, distinct operations (e.g., a payment from User A to B, an NFT creation by B, and an NFT transfer from B to A) into a single, "all-or-nothing" transaction. It provided the exact security and atomicity we needed without the complexity of writing, auditing, and deploying a smart contract. This discovery fundamentally unblocked our development process and allowed us to build our core logic with much greater speed and confidence.

Accomplishments that we're proud of

  • A Seamless End-to-End Flow: We successfully built a complete user journey, from connecting a wallet to exploring the globe, uploading a personal image, minting an NFT, and seeing that NFT in their wallet. It’s the "magic moment" of Web3, made intuitive.
  • A Visually Stunning Interface: The deck.gl globe is not just functional; it's beautiful. We're proud of creating an experience that feels futuristic and engaging.
  • A Robust Security Model: The combination of our custom SIWA flow and Supabase's Row Level Security means our platform is secure by design. Users have full control over their assets and data.
  • A Solid Architectural Foundation: We built a system with a clean separation of concerns: a reactive frontend, a powerful BaaS (Supabase), and a decentralized blockchain layer. This architecture is robust and ready to scale.

What we learned

  • The Power of Algorand Atomic Transactions: We learned that for many use cases like ours (a fixed-price sale), we don't need complex smart contracts. Algorand's ability to group transactions atomically provides the same "all or nothing" security in a much simpler and more efficient way.
  • Supabase is a Web3 Superpower: We were blown away by how effectively we could build a full-stack dApp backend. The synergy between the Database, Auth, Storage, and Edge Functions allowed us to move incredibly fast without compromising on security or features.
  • User Experience is Paramount in Web3: Getting a user to sign a transaction requires trust. We learned to be very explicit in our UI, explaining what each step does and making the process feel safe and predictable.
  • The Nuances of Geospatial Data: We gained a much deeper appreciation for the complexities of working with geospatial data at a global scale and the power of libraries like H3 and Turf.

What's next for ArsaNova

The hackathon is just the beginning. We have a clear vision for the future:

  • Secondary Market Integration: Our immediate next step is to integrate an Algorand Indexer. This will allow our platform to track ownership changes that happen on external NFT marketplaces (like Rand Gallery), ensuring our map is always a true reflection of the on-chain reality.
  • Expanding the World (Sale Campaigns): We plan to roll out new "collections" by launching sales in new regions (e.g., "Chapter 2: The European Collection") and at different H3 resolutions, creating exciting new opportunities for collectors.
  • Utility for Arsas (The Data Layer): True ownership is just the start. We envision Arsa owners being able to attach data layers, display content, or even use their Arsa as a form of decentralized address or login for other applications, turning each plot into a productive digital asset.
  • DAO & Community Governance: Our ultimate goal is for ArsaNova to be governed by its users. We plan to introduce a governance model where Arsa owners can vote on the future of the platform, from new feature development to treasury management, creating a truly decentralized and user-owned digital world.

Built With

  • algorand
  • bolt.new
  • deck.gl
  • github
  • h3geo
  • maplibre
  • netlify
  • react
  • shadcn
  • supabase
  • tailwindcss
  • vite
Share this project:

Updates