In Process

In Process is a web application designed to enable creators—such as musicians, designers, and builders—to seamlessly document, showcase, and share their creative processes on the blockchain. The platform is built with a focus on accessibility, onboarding simplicity, and empowering users to bridge their creative outputs with blockchain technology.

Key Features:

1. Onchain Feed for Creative Showcases:

   • Creators can publish and share their projects and workflows on a public feed.
   • The feed is powered by art collections hosted on Zora Protocol and Base blockchain.
   • Each entry on the feed represents a step in the creator’s journey, helping audiences understand the evolution of their work.
   • Enables transparent documentation of the creative process, offering an authentic and chronological view of art, music, or design projects.

2. Progressive Onboarding:

   • Email-based Wallet Setup: Users can create a blockchain wallet simply by signing up with an email address, bypassing the traditional complexities of setting up a crypto wallet.
   • Credit Card Purchases: The app integrates credit card payment functionality, allowing users to buy blockchain-based assets like NFTs or tokens without requiring prior knowledge of cryptocurrencies.

3. Accessibility for Entry-Level Users:

   • The app is designed to be approachable for users who may have little to no technical experience with blockchain.
   • Features like guided workflows, user-friendly wallet management, and educational prompts are built into the experience to ease the learning curve.
   • By simplifying the jargon and technical barriers, it provides a smooth gateway for creators who are new to the world of Web3.

4. Tailored for Creative Professions:

   • Musicians: Showcase album artwork, release tracks as NFTs, or document the creation of a song step-by-step.
   • Designers: Display portfolios of artwork, share design concepts, or archive iterative changes of a project.
   • Builders: Log projects like software tools or physical creations, detailing the development journey onchain.

5. Blockchain Interoperability:

   • Built on Zora Protocol, a leading decentralized platform for creative assets, and Base blockchain, a secure and efficient layer-2 Ethereum solution.
   • Facilitates minting, sharing, and selling of onchain assets, making it simple for creators to monetize their work.

6. Educational and Supportive:

   • Integrates onboarding content and tutorials to help creators understand the benefits and mechanics of blockchain.
   • Provides resources for those interested in experimenting with onchain creations for the first time.

Why It Matters:

This app lowers the barriers to entry for creators who wish to adopt blockchain technology but find existing solutions intimidating or overly technical. It not only democratizes access to Web3 tools but also emphasizes showcasing the journey behind creations—a unique value that builds deeper connections between creators and their audience.

By enabling creators to merge their artistic journey with blockchain technology in an approachable way, the platform positions itself as a pioneering tool in the creator economy and onchain adoption space.

How It’s Made:

This project was built by combining a modern web development stack with cutting-edge onchain technologies to create a seamless experience for creators and their audiences. The architecture balances frontend usability, backend efficiency, and superchain interoperability.

---

Frontend:

• Framework: The frontend is built using Next.js, leveraging its server-side rendering (SSR) capabilities for fast and SEO-optimized pages.
• Styling: We used Tailwind CSS to achieve a highly customizable and responsive design while maintaining developer productivity through utility classes.
• UI Components: The UI includes modular, reusable components built with Radix UI and enhanced with shadcn, providing a polished, accessible user interface.

---

Backend:

• Next.js API Routes: These power the app’s server-side logic, including user onboarding, wallet creation, and asset minting processes.
• Database: We chose Supabase, an open-source alternative to Firebase, for managing relational data (e.g., user profiles, wallet states) and real-time event updates.
• Authentication: Supabase handles user authentication, offering both traditional email/password and Web3 wallet-based login for hybrid user access.
• Blockchain Interactions:
  • Viem and Wagmi Libraries: These libraries abstract blockchain interactions and enable us to fetch data efficiently, such as onchain art collections or transaction histories.
  • OnchainKit: Simplifies wallet integrations and asset transfers, especially for smart wallets like Coinbase Wallet.

---

Blockchain:

• Base Blockchain: The project runs on Base, a Layer 2 solution built on Ethereum, offering low-cost, high-speed transactions perfect for onboarding new users.
• Zora Protocol: Art collections and creator assets are stored and managed on Zora’s decentralized infrastructure, which specializes in NFTs and creative tools.
• ERC Standards:
  • The app supports ERC-721 for unique, non-fungible assets like music tracks or artwork.
  • ERC-6551 (Token-Bound Accounts): This allows creators to assign a wallet to an NFT, enabling ownership and interaction with other decentralized apps directly from the token.

---

Innovative Features:

1. Email-Based Wallet Setup:

   • We integrated an email-first wallet provider, such as Privy or Magic.Link, to eliminate onboarding friction for new users unfamiliar with private key management.
   • Wallets are non-custodial but abstract technical complexities to ensure a seamless experience.

2. Credit Card Integration:

   • Partnered with Stripe or similar payment gateways to enable direct purchases of NFTs or other onchain assets using traditional credit cards.
   • This feature bridges Web2 and Web3 payment systems, allowing users without cryptocurrency to participate.

3. Progressive Data Inclusion:

   • Supabase serves as a centralized relay for metadata while keeping the creative output itself decentralized on the blockchain.
   • Real-time data fetching from blockchain events ensures the feed remains up-to-date with user activity.

---

Hacky or Notable Implementations:

1. Optimized Data Loading:

   • Using Next.js’ getServerSideProps and incremental static regeneration (ISR), we significantly reduced page load times, even with frequent blockchain updates.
   • Cached onchain data is updated in near-real-time using WebSocket listeners for Base and Zora events.

2. Dynamic Asset Minting:

   • Creators can mint NFTs directly from the app. We dynamically generated metadata for assets using a serverless image processing pipeline powered by Sharp.

3. Custom Educational Flow:

   • We created a guided onboarding process that adapts based on the user’s familiarity with blockchain, ranging from novice (email-first wallet) to advanced (custom wallet connection).

4. DRY Code Philosophy:

   • Built reusable hooks for blockchain interactions (e.g., reading contract data, fetching user assets) to streamline developer workflows.
   • Centralized state management using React Query (TanStack Query) to handle server-side state and cache API responses efficiently.

---

Partnership Technologies:

• Base: Their low-cost blockchain infrastructure provided an ideal environment for progressive onboarding and scalable transactions.
• Zora Protocol: Enabled creators to tokenize and showcase their assets effortlessly, allowing a focus on user experience rather than building minting infrastructure from scratch.
• Supabase: Simplified real-time data and authentication setup, saving weeks of development time.
• Stripe/Privy: These integrations made onboarding and payments more accessible, particularly for non-crypto-native users.