Forever Message - Client

Decentralized message-in-a-bottle application built on Base blockchain with Supabase Storage.

Overview

Forever Message is a Next.js 14 application that combines blockchain technology, Supabase Storage, and modern web3 tools to create an immersive experience where users can cast messages into a shared digital ocean.

Key Features

• Interactive Ocean Canvas: 2D bottle visualization with Konva
• Web3 Authentication: Sign-in with Ethereum (SIWE) via Reown AppKit
• Message Storage: Messages stored on Supabase Storage (bucket: forever-message-bottles)
• Blockchain Immutability: Bottles minted as NFTs on Base Sepolia
• Real-time Updates: Queue-based async processing with live notifications
• Professional Animations: anime.js timeline orchestration
• Glass-morphism UI: Modern ocean-themed design system

Tech Stack

• Next.js 14 (App Router)
• React 18 + TypeScript
• Konva (2D canvas)
• Reown AppKit + wagmi + viem
• Supabase (PostgreSQL + Real-time)
• Supabase Storage (message media)
• Tailwind CSS + anime.js

Quick Start

# Install dependencies
yarn install

# Copy environment variables
cp .env.example .env.local

# Run development server
yarn dev

Open http://localhost:3000

Documentation

For complete documentation including architecture, data flows, tech stack details, and development guides, see:

forever-message-docs

• Getting Started Guide
• Architecture Overview
• Data Flow Diagrams
• Tech Stack Details

Testing

yarn test              # Unit tests (Jest)
yarn test:e2e          # E2E tests (Cypress)
yarn ci                # Full CI pipeline

See TESTING.md for details.

Deployment

Deployed on Netlify with automatic deployments from main branch.

Environment variables are configured in the Netlify dashboard. See the Getting Started Guide for required variables.

License

See LICENSE