Keu Ekjon

Mobile-first anonymous messaging with private inboxes, deliberate publishing, and a calm Bengali experience.

Live Application | Product Vision | Design System | Repository Audit | Roadmap | Security

Overview

Keu Ekjon lets visitors find a person and send them a private anonymous message. Registered users manage a public identity and private inbox, then choose which messages become visible on the public wall. The product uses Bengali copy, tactile parchment paper surfaces, restrained motion, custom SVG iconography, Web Audio sound feedback, and mobile navigation to make the experience personal without making privacy promises the code cannot support.

Implemented Features

• Letter Art Gallery: Public exhibition wall with postbox recipient search lookup.
• Tactile Parchment Editor: Ruled cream paper stationery writing experience with salutation prompts.
• Envelope Unfolding Ritual: Intimate 3D paper opening animations with Web Audio sound cues and haptics.
• Personal Letter Desk: Authenticated dashboard with unread filters, stationery avatar selector, and quick share link card.
• Versioned Supabase Schema & RLS: Complete DDL (202608050001_base_schema.sql) for users, messages, and message_reactions.
• Atomic Reaction RPC: Concurrency-safe PostgreSQL PL/pgSQL function (toggle_reaction) for silent heart reactions.
• API Rate Limiting: Sliding-window request throttling on anonymous send and user search routes.
• Scalable Theme Engine: Theme system (lib/themes.ts) supporting Midnight, Rain, Romantic, Coffee, Nature, Minimal.
• Web Audio Sound Engine: Zero-asset audio Cues (lib/sound.ts) for click, paper unfold, wax seal, and send.
• PWA & Platform Guidance: Service worker offline fallback and platform-aware installation prompts (docs/PWA_DIAGNOSTICS.md).
• Playwright E2E Suite: Critical journey end-to-end and mobile viewport test suite.

Screenshot

The capture shows the public wall with no published letters. Private inbox content is intentionally excluded from repository assets.

Architecture

flowchart LR
    Visitor[Visitor] --> Next[Next.js App Router]
    Member[Authenticated member] --> Next
    Next --> Routes[Validated API routes]
    Next --> Auth[Supabase Auth]
    Routes --> DB[(Supabase Postgres + RLS)]
    DB --> Inbox[Private inbox]
    DB --> Wall[Published wall]
    Routes --> Push[Web Push delivery]
    Push --> Worker[Service worker]

Loading

The browser uses the public Supabase key, while service-role and VAPID private keys are restricted to server routes. Database policies are therefore mandatory application controls, not optional deployment configuration.

Technology Stack

Layer	Technology
Application	Next.js 16, React 19, TypeScript
Styling	Tailwind CSS 4, custom letter and mobile UI system
Data and auth	Supabase Auth and PostgreSQL
Notifications	Web Push, VAPID, service worker
Feedback	React Hot Toast, haptics, network-state UI
Delivery	Vercel

Repository Structure

app/                  Routes, layouts, boundaries, metadata, and API handlers
components/           Animation, layout, notification, PWA, and UI primitives
lib/                  Supabase clients, domain types, push, and haptics
public/               Service worker and static delivery assets
supabase/migrations/  Versioned notification schema and policies
assets/               Curated screenshots and social-preview artwork

Local Development

git clone https://github.com/itsmebillah/keu-ekjon.git
Set-Location keu-ekjon
npm ci
Copy-Item .env.example .env.local
npm run dev

Open http://localhost:3000.

Configuration

Variable	Exposure	Purpose
NEXT_PUBLIC_SUPABASE_URL	Browser-safe	Supabase project URL
NEXT_PUBLIC_SUPABASE_ANON_KEY	Browser-safe	Public key governed by RLS
NEXT_PUBLIC_VAPID_PUBLIC_KEY	Browser-safe	Push subscription public key
VAPID_PRIVATE_KEY	Server-only	Push signature key
VAPID_CONTACT_EMAIL	Server-only	VAPID operator contact
SUPABASE_SERVICE_ROLE_KEY	Server-only	Restricted administrative operations

Apply versioned migrations before enabling their corresponding UI. The full users, messages, and reaction schema plus RLS policies must match the contracts in PROJECT_AUDIT.md.

Verification

npm run lint
npm run typecheck
npm run build

Automated unit, API, browser, and accessibility tests are not yet present. Adding Playwright mobile flows and RLS integration tests is a current roadmap priority.

Known Limitations

• Core database schema and RLS policies are not fully versioned in the repository.
• Message submission, search, and reaction paths still need production-grade abuse controls and rate limits.
• Reaction counts require an atomic database operation for concurrency safety.
• The token message route is a bearer-secret design until recipient authorization is implemented.
• Wall and inbox queries need pagination for larger datasets.
• Observability and automated test coverage are missing.

Roadmap

Delivery phases, technical debt, and current priorities are tracked in ROADMAP.md. Completed changes are recorded in CHANGELOG.md, and durable product decisions in DECISIONS.md.

Contributing and Security

Read PROJECT_PRODUCT.md, PROJECT_AUDIT.md, and SECURITY.md before changing message visibility, identity, token, reaction, or push behavior. Use synthetic messages and accounts in all public fixtures and screenshots.

License

No open-source license is currently declared. The source is publicly visible, but reuse rights are not granted until a license is added by the repository owner.

---

Md. Masum Billah | Data Analyst, Automation Developer, and Business Intelligence Specialist

Portfolio | GitHub | Email | Live Demo | Documentation | Related: Company Hub