Screenshot showing code from code editor

I built the Azalea Report, SGMC Health's Internal Medicine Residency Newsletter, as a web app. Here's how I put it together using Next.js and Decap CMS.

Project overview

The Azalea Report is an online newsletter for the SGMC Health Internal Medicine Residency program. It needed to look good on any device and be easy for non-technical staff to update.

Tech stack

• Next.js for the framework and static site generation
• Github for the repository (link here)
• Decap CMS so non-developers can edit content
• CSS Modules for styling
• Netlify for deployment and hosting

Built in a weekend

I put this together over a weekend. Using LLM tools integrated into VSCode sped things up considerably. Tasks like scaffolding components and writing boilerplate that would normally eat up hours got done in minutes.

Setup

1. Created a new Next.js project and installed dependencies
2. Set up public/admin with HTML and config files for Decap CMS
3. Defined content models in public/admin/config.yml for resident spotlights, events, and program stats
4. Built the homepage in pages/index.js, pulling content from Markdown files
5. Styled everything with CSS Modules in styles/Home.module.css
6. Configured next.config.js for static site generation and image optimization

Features

• Dynamic content sections: The homepage renders sections like "Resident Spotlight," "Chat With Our Chiefs," and "Things to Do in Valdosta" from Markdown files
• Responsive design: Mobile-first layout that works on phones, tablets, and desktops
• Image carousel: A simple carousel for the "Photos of the Month" section
• CMS editing: Non-technical staff update content through Decap CMS without touching code

What I ran into

• Image handling: I used Next.js's Image component configured for static exports to keep load times fast
• Content structure: Balancing flexibility with simplicity in the CMS content model took a few iterations
• Responsive layout: CSS Grid, Flexbox, and media queries got the layout working across screen sizes

Wrapping up

The newsletter is live and the residency program staff can update it on their own. Domain was purchased through Namecheap. The whole thing went from idea to production in a weekend.