Shofar App

Personal Operations System

Productivity

Shofar Tasks Task management & kanban board

Docs Open ↗ ▶

Frontend Static HTML + Vanilla JS Backend Express.js on Railway Data Airtable Hosting Railway Repo c7sharp9/shofar-dashboard

Express SortableJS Airtable API Lucide Icons

Drag-and-drop kanban with 8 status columns
AI-powered email triage & task creation
Domain filtering (Business, Personal, Ministry, Financial, Explore)
Column focus/minimize on double-click
Session-buffered discard workflow

Notes Notes, people & lists

Open ↗ ▶

Frontend React 19 + TypeScript + Vite Backend Netlify Functions Data Airtable + Cloudinary (images) Hosting Netlify Repo c7sharp9/notes

React TipTap Cloudinary Airtable API Lucide

Rich text editor with TipTap (links, images, formatting)
Multi-image upload via file picker, drag & drop, or paste
Image lightbox on double-click
People/contacts with Category, Group, Company, Title
Notebook organization with color coding

Project Management

IVM Production Dashboard Post-production tracker — projects, drives & tasks

Open ↗ ▶

Frontend React 18 + TypeScript + Vite + Tailwind Backend Netlify Functions (Airtable proxy) Data Airtable Hosting Netlify Repo c7sharp9/ivm-production-dashboard

React TanStack Query Radix UI Tailwind Zod Airtable API

Full CRUD for Master Projects, Projects, Tasks, Hard Drives
Drive reconciliation with staleness indicators
Drive-to-project relationship management
Airtable deep links on every record
Auto-refresh on window focus (60s stale time)
Discard workflow for non-destructive archiving

PFC Media Dashboard Church media workflow tracker

Open ↗ ▶

Frontend React 18 + TypeScript + Vite + Tailwind Backend Netlify Functions (Airtable proxy) Data Airtable Hosting Netlify Repo c7sharp9/pfc-media-dashboard

React TanStack Query Radix UI Tailwind Zod Airtable API

Sermon pipeline tracking (recorded → edited → published)
Service type management with shareable deep links
Status-based workflow with visual indicators

IVM Client Dashboard Client-facing video production portal

Open ↗ ▶

Frontend React 18 + Vite Backend Netlify Functions (feedback, tasks, deliverables) Data Airtable Hosting Netlify Repo c7sharp9/ivm-dashboard

React Vite Lucide Airtable API Netlify Functions

Client-facing portal for InnerView Media projects
Feedback submission and task creation
Deliverable status tracking and prep item updates

Production & Content

ReFrame Production Manager Production workflow management

Open ↗ ▶

Frontend React + TypeScript Hosting Netlify

React TypeScript Netlify

ReFrame Content Hub Client-facing content management & distribution platform

Open ↗ ▶

Frontend React 19 + Vite 8 Backend Airtable API + Netlify Functions Hosting Netlify (reframe-content-hub.netlify.app) Repo c7sharp9/reframe-content-hub Local ~/Code/content hub Auth Access code per client via Airtable — URL param or login form

React 19 Vite 8 Airtable Netlify Lucide React Markdown

Multi-client portal — each client sees only their branded content
Content types: video clips (Drive embeds), carousels, LinkedIn, Twitter, newsletters, mantras
Copy-to-clipboard, markdown rendering, transcript display
Client branding via Airtable Brand Primary Color field
Session persistence with localStorage

Virtual Set Library Reference library for virtual set designs

Open ⤴ ▶

Frontend React 18 + TypeScript + Vite Backend Express.js Data PostgreSQL (Drizzle ORM) Hosting Railway (Production) URL set-library-production.up.railway.app Repo c7sharp9/set-library Local ~/Code/set-library

React TypeScript Vite Express PostgreSQL Drizzle ORM Tailwind CSS Radix UI TanStack Query

Virtual set design reference management
Thumbnail carousel on set cards
Set cover selection & image downloads as zip
Image uploads via Multer
Framer Motion animations

HTML Design Workflow & Layer Exporter Pro HTML/CSS design system + Puppeteer-powered layer exporter for social media content

▶

Design Tool Claude Code + cowork-html-design skill (global) Splitter Tool carousel-splitter skill — Python (Pillow + NumPy) grid extraction Export Engine Layer Exporter Pro — Express.js + Puppeteer (headless Chrome) Image Processing Sharp (dual-pass alpha compositing for transparent text) Exporter Local ~/Code/layer-exporter-pro (npm start → localhost:3456) Design Files iCloud/Projects/reframe/Content Creation/HTML Design Layer Exporter Pro/ Skills ~/.claude/skills/cowork-html-design/ (global) + carousel-splitter (project) Status Operational — design + export + split pipeline complete

Claude Code HTML/CSS Cowork (.sb) Node.js Express Puppeteer Sharp Python Pillow NumPy Google Fonts

cowork-html-design skill — reusable component classes (da–dz, rf) for brand-locked social content
Platform presets: LinkedIn (1080×1350), Instagram (1080×1080), Twitter/X, Facebook
Native 1080px resolution with CSS transform: scale() for browser preview
4 export layers: Full Composite, Background Only, Text Transparent, Elements Only
Puppeteer renders background-clip:text, backdrop-filter, blend modes pixel-perfectly
Dual-pass alpha compositing — white + black pass → true transparency via Sharp
carousel-splitter skill — auto-detect grid boundaries and extract individual slides from composite images
Per-slide preview tabs in browser UI — preview any layer before exporting
SSE progress streaming during batch exports

ReFrame Business Overview Strategy doc — identity, product, pricing, ICP, team comp, agency program

Open ↗ ▶

Format Single-file HTML reference document URL c7sharp9.github.io/reframe-overview Source iCloud/Projects/reframe/strategy/ReFrame_Business_Overview.html Status Active strategy document

Strategy Pricing Sales ICP Agency Program

Identity & category — standardization as competitive moat
Product definition — corporate packages, events, partner studios, Content Hub, SmileStudio.tv
Pricing & unit economics — per-studio model, CAC guardrails, 5-10 year scale vision
ICP profiles — verticals, LA-local advantage, content gap approach
Team comp plans — AE commission-only milestones, AM hybrid role
Agency partner program structure
Strategic priority stack

Ministry

Setlist Worship setlist manager

Open ↗ ▶

Hosting Netlify

Prophetic Words Prophetic word journal

Open ↗ ▶

Hosting Netlify

Automation & Backend

Daily Planner AI-ranked daily email report

▶

Language Python AI Claude API (Anthropic) Data Airtable Runs GitHub Actions — daily at 7 AM ET Delivery Gmail SMTP Repo c7sharp9/shofar

Python Claude API Airtable GitHub Actions Gmail SMTP

Multi-stage task ranking with AI prioritization
Filters archived & discarded tasks automatically
Domain-aware task grouping

Email Classifier Universal inbox AI triage

▶

Language Python AI Claude API (Anthropic) Data Airtable Universal Inbox Repo c7sharp9/shofar

Python Claude API Airtable Browserless

Classifies emails, screenshots, PDFs into tasks or ideas
Extracts creator info and routes to pipeline tables
Media processing for images and documents

Financial Monitor Obligations, debt payoff & snapshots

▶

Language Python Data Airtable (Accounts, Obligations, Debt Payoff, Income, Snapshots, Tithe) Repo c7sharp9/shofar

Python Airtable

MCP Server Claude AI integration layer

▶

Language TypeScript Runtime Cloudflare Workers + Durable Objects Protocol Model Context Protocol (MCP) Data Airtable (16+ tables) Repo c7sharp9/shofar

TypeScript Cloudflare Workers MCP SDK Zod Durable Objects

Remote MCP server for Claude.ai and Claude Code
Read/write access to all Shofar system data
Tools for tasks, financial, inbox, ideas, and more

Core Platform Features

Airtable-First Architecture

Every app reads and writes to Airtable as the central data layer. This means data is always accessible via Airtable's native UI, API, automations, and integrations — even outside the custom apps.

AI-Powered Task Intelligence

Claude API powers the daily planner (task ranking), email classifier (inbox triage), and the MCP server (conversational system access). AI is layered on top of structured data, not replacing it.

Model Context Protocol (MCP)

A remote MCP server on Cloudflare Workers gives Claude direct access to tasks, finances, inbox, ideas, and more. Enables natural language interaction with the entire system via Claude.ai or Claude Code.

Universal Inbox

Emails, screenshots, PDFs, and ideas all flow into a single Airtable inbox. The AI classifier routes them to the right pipeline — tasks, ideas, or creators — with extracted metadata.

Daily Email Report

GitHub Actions triggers a Python pipeline every morning at 7 AM ET. Claude ranks tasks by urgency and context, generating a prioritized email delivered via Gmail SMTP.

Auto-Refresh & Real-Time Feel

React Query with 60-second stale time and refetch-on-window-focus means switching back to any dashboard always shows fresh data without manual refresh.

Non-Destructive Workflows

Discard instead of delete. Session-buffered card removal on kanban. Confirmation dialogs on destructive actions. Data is preserved, not destroyed.

Deep Links Everywhere

Every record links back to its Airtable source. PFC services have shareable URLs. Projects, tasks, and drives are all cross-linked and navigable.

System Architecture

Data Layer

Primary Database

Airtable — serves as both database and admin UI. Multiple bases organize data by domain (personal ops, production, ministry).

Image Storage

Cloudinary — handles image uploads for Notes app with auto-optimization.

Frontend Stack

Framework

React + TypeScript + Vite across all major dashboards. Tailwind CSS + Radix UI for consistent component library.

State Management

TanStack React Query for server state. Zod for runtime schema validation on all API boundaries.

Exception

Shofar Tasks uses vanilla JS + SortableJS for maximum drag-and-drop performance on the kanban board.

Backend & API

Serverless

Netlify Functions proxy Airtable API calls, keeping PAT tokens server-side. Used by IVM, PFC, and Notes.

Traditional Server

Express.js on Railway for Shofar Tasks — serves static frontend + API proxy in one process.

Edge

Cloudflare Workers for MCP server and kanban API proxy. Durable Objects for stateful AI sessions.

AI Integration

Claude API

Daily planner ranking, email classification, meeting note triage. Python scripts call the Anthropic API directly.

MCP Server

TypeScript on Cloudflare Workers. Exposes 20+ tools for reading and writing system data through natural language.

Hosting & CI/CD

Netlify

IVM Dashboard, Notes, PFC Media, Setlist, Prophetic Words, shofar.app hub — auto-deploy from GitHub main branch.

Railway

Shofar Tasks dashboard — auto-deploy from GitHub master branch.

Cloudflare

MCP server and kanban API proxy on Workers.

GitHub Actions

Daily planner, email classifier, financial monitor — scheduled Python workflows.