The Real-Time Ramadan: Unpacking tdrsmy

How a solo developer combined WebSockets, strict server-first rules, and the Canvas API to digitize a communal spiritual tradition.

6 min read • View on GitHub • More from khrnchn

A classic mechanical pocket watch on a carved wooden book stand, displaying a glowing progress bar instead of hands, connected by wires to other watches. This represents the real-time syncing of the traditional reading practice. — Pusher WebSockets transform a solitary spiritual practice into a live synchronized event.

Key Takeaways

tdrsmy transforms the solitary act of reading the Quran into a real-time multiplayer experience using Pusher WebSockets.
The architecture enforces strict server actions over traditional API routes to minimize client-side JavaScript.
A custom Tadarus Wrapped feature leverages the Canvas API and Postgres snapshots to generate shareable viral trading cards.
The project demonstrates how hackathons serve as testing grounds for bleeding-edge tools like Next.js 15, Bun, and Tailwind 4.0.

The Live-Synced Tradition

Tadarus is the communal practice of reading the Quran, usually accelerated during the month of Ramadan. Traditionally, groups gather in person to share the 604 pages of the text. The tdrsmy project takes this ancient practice and rebuilds it for the distributed web.

Users form private circles called "Gengs" using invite codes. When a user logs a completed page, the system does not just update a database. It broadcasts a real-time event via Pusher, instantly moving the collective progress bar for every other member of the circle. This turns a solitary act into a multiplayer experience.

tadarus.my (tdrsmy) tadarus.my is a web app for Malaysian Muslims to track group Quran reading (tadarus) during Ramadan.

Project README, Repository documentation · khrnchn/tdrsmy README

The Anti-Enum Architecture

The codebase reveals a highly opinionated approach to Next.js 15. The developer's AI instructions explicitly ban the use of traditional API routes in favor of server actions. This architectural mandate forces data mutation to happen entirely on the server, drastically reducing the client-side JavaScript payload.

The database layer, powered by Drizzle ORM and Vercel Postgres, follows equally strict rules. TypeScript enums are explicitly forbidden due to their known friction with database migrations. Instead, the project relies on strict object constants. This reflects a seasoned engineering mindset prioritizing maintainability over syntactic sugar.

Bypassing traditional REST APIs, Next.js Server Actions handle mutations and trigger real-time Pusher broadcasts in a single server-side execution step.

Engineering the Wrapped Experience

The most clever growth mechanism in tdrsmy is its end-of-month summary. Taking a page from Spotify's playbook, the application generates a "Tadarus Wrapped" graphic for each user. This is not just a CSS trick. It requires heavy backend coordination.

A specialized Postgres table stores snapshot data of a user's rank and percentage contribution. The application then uses the Canvas API to render this data into a downloadable PNG trading card. By outputting a flat image, the app guarantees perfect formatting when users share their progress on WhatsApp or X.

An antique cast-iron printing press stamping out identical, rigid playing cards with geometric patterns and ribbon seals. A mechanical arm stacks the cards. This represents the Canvas API generating shareable snapshot images. — The Canvas API acts as a digital printing press, turning database snapshots into perfectly formatted social media artifacts.

Bleeding Edge by Default

Hackathons are frequently the proving grounds for tomorrow's enterprise stacks. Built for the #GodamSahur 2025 event, tdrsmy runs on Bun instead of Node.js. It leverages Next.js 15 and React 19, pushing the boundaries of what is considered stable in the frontend ecosystem.

The styling approach is equally modern. The project drops traditional Tailwind configuration in favor of Tailwind CSS 4.0's new import syntax. The global theme is defined entirely in the OKLCH color space, ensuring perceptually uniform contrast across all 40+ atomic UI components.