< Back
Azalea Report logo

Azalea Report

Status: Active

Timeline: January 2024 - present

Visit site: azaleareport.com

Technologies: Next.js, TypeScript, Tailwind CSS, Convex & Vercel


The Azalea Report is the official newsletter of the SGMC Health Internal Medicine Residency program. I built it as a web app so residency news, academic updates, and community highlights all live in one place instead of getting buried in email threads.

The goal was straightforward: give the program a professional way to share accomplishments, upcoming events, and educational content with residents, faculty, and staff, and make it easy to keep current.

Architecture

It's a TypeScript monorepo run with Turborepo. Inside are two Next.js 14 apps and a handful of shared packages: the public newsletter site (@azalea/web), a content-management dashboard (@azalea/admin), a shared UI library (@azalea/ui), shared types and utilities (@azalea/shared), and a set of reusable content blocks (@azalea/sections).

The backend runs on Convex, a serverless platform with a real-time cloud database. It holds issues, sections, media, users, birthdays, and editing locks so two editors don't clobber each other's work. The frontend deploys to Vercel with continuous deployment, the backend lives on Convex Cloud, and a few custom scripts handle production deploys and storage migrations.

The admin dashboard

Most of the work went into the CMS. Editors create, edit, publish, and archive issues, and build each one from 18+ section types like spotlight, chief's corner, events, carousel, podcast, and birthdays. Rich text editing uses Tiptap, sections reorder with drag-and-drop via dnd-kit, and images come in through a media library built on react-dropzone. There's sign-in, concurrent-editing locks, a stats overview for issues and drafts, and a light or dark toggle.

Styling and integrations

Styling is Tailwind CSS 3.4 with the typography and forms plugins, a custom Azalea palette (green #016f53, peach #FFE6D6), and Montserrat paired with Georgia. Convex drives all the real-time queries and mutations. An OG image proxy route keeps links previewing correctly in WhatsApp and other apps, and anything user-facing is run through sanitize-html and DOMPurify to keep XSS out.