**Status:** Active

**Timeline:** January 2024 - present

**Visit site:** [azaleareport.com](https://azaleareport.com)

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

---

The Azalea Report is the official newsletter for the SGMC Health Internal Medicine Residency program. Built as a modern web application, it serves as a central hub for residency news, academic updates, and community highlights.

## Purpose

The newsletter was created to improve communication within the residency program and provide a professional platform for sharing accomplishments, upcoming events, and educational content with residents, faculty, and staff.

## Technical Details

### Architecture

The project is a **TypeScript monorepo** powered by **Turborepo**, containing two Next.js 14 applications and three shared packages:

- **`@azalea/web`** — Public-facing newsletter site (port 3000)
- **`@azalea/admin`** — Content management dashboard (port 3001)
- **`@azalea/ui`** — Shared UI component library
- **`@azalea/shared`** — Shared types, constants, and utilities
- **`@azalea/sections`** — Reusable content block components

### Backend & Database

The backend runs on **Convex**, a serverless backend platform providing a real-time cloud database. Key data include `issues`, `sections`, `media`, `users`, `birthdays`, and `locks` (for concurrent editing).

### Hosting & Deployment

- **Frontend:** Deployed on **Vercel** with continuous deployment
- **Backend:** Hosted on **Convex Cloud**
- **Custom deploy scripts** for production deployments and storage migrations

### Admin Dashboard

A full-featured content management dashboard built with Next.js, featuring:

- Issue creation, editing, publishing, and archiving
- 18+ content section types (spotlight, chief's corner, events, carousel, podcast, birthdays, etc.)
- Rich text editing via **Tiptap**
- Drag-and-drop section ordering via **dnd-kit**
- Media library with image uploads (via **react-dropzone**)
- User authentication and concurrent editing locks
- Dashboard stats overview (total issues, drafts, published)
- Light/dark theme toggle

### Styling

- **Tailwind CSS 3.4** with `@tailwindcss/typography` and `@tailwindcss/forms` plugins
- Custom Azalea brand palette (green `#016f53`, peach `#FFE6D6`)
- Fonts: Montserrat (sans) and Georgia (serif)
- Custom animations and CSS variable-based theming

### API & Integrations

- Convex real-time queries and mutations for all content operations
- OG image proxy API route for WhatsApp/social media link previews
- HTML sanitization (sanitize-html, DOMPurify) for XSS prevention

## Key Features

- Responsive newsletter layout
- Custom-built CMS with rich content editing
- 18+ flexible content section types
- Real-time database with concurrent editing support
- Media library and image management
- Fast delivery via Vercel CDN
- Mobile-friendly reading experience

**Status:** Active

**Timeline:** January 2022 - present

**Visit site:** [samueledusa.com](https://www.samueledusa.com)

**Technologies:** Next.js 12, React 17, TypeScript, Styled-Components, Netlify

---

My personal website and portfolio, built to showcase both my medical career and software engineering work. The site serves as a living resume, blog platform, and project showcase.

## Purpose

As a physician who also builds software, I needed a single platform that could present both sides of my professional life. This site bridges medicine and technology in a way that reflects my dual expertise.

## Technical Details

### Architecture

A **Next.js 12** application using static site generation (SSG) for performance. The project is structured as:

- **`src/pages/`** — Route-based pages (medicine, software, blog, presentations, projects, contact)
- **`src/components/`** — Reusable UI components (layout, header, resume sections, icons)
- **`src/posts/`** — Markdown blog posts with YAML front matter
- **`src/styles/`** — Global CSS and syntax highlighting theme
- **`src/utils/`** — Theme configuration, breakpoints, RSS generation
- **`src/data/`** — Site metadata and configuration
- **`siteconfig.json`** — Centralized content configuration for all resume data, projects, and navigation

### Frontend Stack

- **React 17** with **TypeScript 5.9**
- **Styled-Components 5.3** for CSS-in-JS with full theme provider
- **next/image** for optimized image loading
- **react-icons** for iconography

### Content & Markdown

- **gray-matter** for parsing YAML front matter from markdown files
- **react-markdown** with **rehype-raw** for rendering markdown to React components
- **react-syntax-highlighter** with a custom dark theme for code blocks
- **reading-time** for estimated reading time on blog posts
- **Feed** library for RSS feed generation (`/feed.xml`)

### Theming

- Full **light/dark mode** toggle with theme persistence
- Light theme: warm cream background (`#fff1e5`) with dark text
- Dark theme: pure black background (`#111`) with off-white text
- Accent color: tropical rainforest teal (`#0a5e66`)
- Fonts: **Lora** (serif titles), **Lato** (sans-serif body), **Yellowtail** (script header)

### Additional Features

- **PDF Viewer** — Built-in viewer using `@react-pdf-viewer` for presentation slides and certificates
- **Telegram Integration** — Serverless functions (Netlify Functions) for sending messages and files to Telegram
- **Progressive Web App** — PWA support via `next-pwa`
- **Analytics** — Privacy-focused tracking with `next-plausible`

### Hosting & Deployment

- **Netlify** with continuous deployment from Bitbucket
- Static export via `next export` for CDN delivery
- Serverless functions for Telegram API integration

## Key Features

- Light and dark theme toggle
- Markdown-powered blog with syntax highlighting and reading time
- Medical and software resume sections with expandable content
- Presentation slides gallery with PDF viewer
- Dedicated projects page with individual project detail pages
- Progressive Web App support
- RSS feed generation
- Telegram integration tools
- Responsive design across all device sizes

**Status:** Active

**Timeline:** November 2021 - present

**Visit site:** [samallaclinicltd.com](https://www.samallaclinicltd.com)

**Technologies:** StencilJS 2.14, Ionic Core 6, TypeScript, Markdown, Netlify, Bitbucket

---

The official website for Samalla Clinic Ltd., a healthcare facility located in New Gbawe, Accra, Ghana. The site provides information about the clinic's services, staff, health blog, and contact details for patients and visitors.

## Purpose

The clinic needed a professional web presence to reach patients in the community and provide essential information about available healthcare services, operating hours, health education through blog articles, and how to get in touch. The site also serves as a platform for sharing health-related articles on topics like hypertension, diabetes, malaria, and more.

## Technical Details

Built using StencilJS 2.14.2 with Ionic Core 6.0.1 components, the site compiles to standard Web Components for maximum compatibility and performance. The project uses TypeScript for type safety and stencil-router-v2 for client-side routing. Blog content is authored in Markdown and processed with the marked library.

- **Hosting:** Deployed on Netlify with serverless functions (e.g., getArticles.js for markdown processing)
- **Database:** No traditional database — content is managed through static TypeScript data files and Markdown blog articles
- **Dashboard:** No admin panel — content updates are made directly in code and redeployed
- **Source Control:** Managed in Bitbucket
- **Notifications:** Contact form submissions are sent via the Telegram Bot API to the clinic's Telegram channel
- **Live Chat:** Tawk.to integration for real-time visitor support
- **Styling:** Custom CSS with CSS variables, Playfair Display and Open Sans Google Fonts, and Ionic CSS utilities — no external CSS framework
- **PWA:** Configured with a web manifest and app icons (service worker disabled)

## Key Features

- Web Components architecture for fast load times
- Mobile-first responsive design with breakpoints at 480px, 768px, 1024px, and 1200px
- Clinic information, services listing (OPD, In-Patient Care, Ultrasound, Laboratory, Family Planning, Nutrition Counseling, Oncology)
- Health blog with Markdown-powered articles
- Staff profiles and Board of Directors with resumes
- Contact form with validation and Telegram notification
- Tawk.to live chat widget
- Contact and location details with Google Maps link
- Organization history and mission/vision pages
- Partners and remembrance sections

**Status:** Active

**Timeline:** September 2020 - present

**Visit site:** [samallabeachhouse.com](https://www.samallabeachhouse.com)

**Technologies:** StencilJS 2.14, Ionic Core 6, TypeScript, Telegram Bot API, Netlify

---

A website for a beachfront property rental in Prampram, Ghana. The site showcases the property with photos and booking information for guests looking for a coastal getaway.

## Purpose

The Samalla Beach House needed an online presence to attract visitors and provide details about the property, amenities, and how to book a stay at this beachfront location along the coast of Ghana.

## Technical Details

- **Framework:** StencilJS v2.14.2 — a Web Components compiler for building fast, reusable UI components
- **UI Library:** Ionic Core v6.0.11 — provides mobile-optimized UI components (slides, modals, buttons, icons, etc.)
- **Language:** TypeScript with JSX/TSX templating
- **Routing:** stencil-router-v2 for client-side navigation
- **Build & Tooling:** Stencil CLI (stencil build, stencil build --prerender for SSR/prerendering)
- **Testing:** Stencil's built-in spec and e2e test runner (Jest-based)
- **Hosting:** Static site output (www target), suitable for Netlify or similar static hosting
- **Notifications/Backend:** Telegram Bot API — reservation form submissions are sent as messages to a private Telegram channel, acting as a lightweight notification dashboard (no traditional database)
- **Contact Channels:** WhatsApp, Instagram, Facebook, Twitter, and email integrations for guest inquiries
- **Maps:** Embedded Google Maps iframe for property location
- **Architecture:** Component-based — 15 custom Web Components (app-hero, app-gallery, app-amenities, app-rooms, app-location, app-contact-modal, etc.)

## Key Features

- Property photo gallery with swipeable image slider and navigation controls
- Reservation form with Telegram Bot notification system (serves as a real-time booking dashboard)
- Sleeping arrangements overview (2 bedrooms with queen beds, 1 sofa bed)
- 17 listed amenities including kitchen, A/C, beachfront access, free parking, and more
- Embedded Google Maps with location details and directions
- House rules section
- Multi-channel contact options (WhatsApp, email, phone, social media)
- Mobile-optimized for travelers browsing on phones
- Fast-loading Web Components with optional prerendering support

A billing and invoicing application built specifically for Samalla Clinic Ltd. to manage patient billing, generate invoices, and track payments.

## Purpose

The clinic needed a dedicated billing system to streamline financial operations and move away from paper-based record keeping. This application handles the full billing workflow from patient registration through invoice generation and payment tracking.

## Technical Details

Built with Ionic framework for a cross-platform experience that works on desktop and mobile devices. The app is deployed on Netlify and managed through Bitbucket version control.

## Key Features

- Patient billing management
- Invoice generation
- Payment tracking
- Cross-platform (desktop and mobile)
- Cloud-hosted for access from any device

Samuel Edusa MD

Projects

Azalea Report

SamuelEdusaMD

Samalla Clinic Ltd.

Samalla Beach House Website

Samalla Clinic Ltd. Billing App