Back to Projects

Filament Web3 Airdrop Platform

Decentralized Governance & Token Distribution

Overview

Built SvelteKit frontend with real-time WebSocket transaction tracking and optimistic UI updates. Responsive campaign dashboards with Tailwind CSS showing transaction status indicators (pending, confirmed, failed) across all components.

Key Features

  • SvelteKit frontend with real-time WebSocket transaction tracking
  • Optimistic UI updates across all components via event-driven subscriptions
  • Responsive campaign dashboards with Tailwind CSS
  • Real-time transaction status indicators (pending, confirmed, failed)
  • Campaign management interface with multi-phase voting UI
  • Clerk Auth user flows and protected routes

Tech Stack

Frontend

SvelteKitTailwind CSSTypeScript

Blockchain

Ethers.jsWebSocketClerk Auth

Backend

NestJSNode.jsPostgreSQLRedisTypeScript

Challenges & Solutions

Real-Time Transaction State Sync

Problem

Transaction status needs to be tracked across the campaign lifecycle (pending, confirmed, failed) with real-time UI updates.

Solution

WebSocket-based event-driven architecture — backend emits transaction lifecycle events, frontend subscribes for optimistic UI updates across all components.

Multi-Chain Transaction Handling

Problem

Ethereum and custom Hub blockchain have completely different transaction models, APIs, and signing mechanisms — UI needed to work with both without code duplication.

Solution

Adapter pattern with unified ITransaction interface — both EthereumTransaction and HubTransaction implement the same interface. Adding new blockchain = one new class, zero backend changes.

Key Achievements

SvelteKit
Real-time Web3 campaign dashboards
Optimistic UI
Real-time transaction state across components
Responsive
Tailwind CSS campaign management interface
WebSocket
Live transaction status tracking