Projects

Devotion Dashboard

React
TypeScript
Supabase
TanStack Router
Tailwind

Administration dashboard for devotion content scheduling, contacts, and WhatsApp message dispatch.

Devotion Dashboard screenshot

A self-hosted administration dashboard and WhatsApp scheduling system built for NPC Chunikhel — replacing a legacy Glide App + Google Sheets setup with a modern, secure, all-in-one platform.

Serves a small internal church team (~20 members) who manage a daily devotional content pipeline and coordinate with speakers and voice-over artists via WhatsApp. Centralizes contact management, content scheduling, team permissions, and message dispatch — eliminating scattered spreadsheets and manual reminders.

Contacts Directory

Tabular listing of speakers, voice-over artists, and general contacts. Search, filter, upload photos, track phone status, and open WhatsApp deep links with one click.

Devotions Pipeline

End-to-end content workflow: schedule devotionals with topics, speaker assignments, voice-over assignments, due dates, and status tracking (Pending → In Progress → Completed → Message Sent → Failed → Received → Reupload).

Message Templates

Pre-built English and Romanized Nepali templates with {greeting_name} / {due_date} placeholders. Fully customizable per user.

Manual WhatsApp Dispatch

One-click WhatsApp deep link generation from the dashboard ("Send via WhatsApp" / "Trigger Now"). Opens a wa.me URL in the browser with a pre-filled message template, and automatically updates the devotion status and call log.

Dashboard Analytics

Summary cards (speakers, voice-overs, users, total/pending/monthly devotions) plus a monthly bar chart.

Team Management

Role-based access control (Admin, Editor, Viewer, Unapproved) with row-level security on all database tables. Invite, manage, and toggle favorites.

Additional

  • Dark/light mode with system preference detection
  • RTL layout support (Nepali language)
  • Responsive mobile design
  • Cmd+K global command palette
  • Real-time role sync (changes take effect instantly)
  • Error pages (401, 404, 500, maintenance)

Tech

Frontend: React 19, TypeScript, Vite 8, TanStack Router, TanStack Query, Tailwind CSS v4, Shadcn UI
Backend: Supabase (PostgreSQL 17, Auth, Storage)
Hosting: Cloudflare Pages
CI/CD: GitHub Actions (lint, test, build, security check)