// TOOLING

ChurchPosterMaker

church-poster-maker.sh
▊
screenshot.png
Church Poster Maker
performance_metrics.log
0
Accounts needed
0
Minutes per poster
0
Template designs
0
Canvas scale for print
/* |

Church volunteers were creating event posters in Word or basic image editors, producing inconsistent, unprofessional-looking flyers. Canva was suggested, but the account requirement and learning curve were barriers for older volunteers.

// |

A zero-account, zero-installation browser tool with five distinct poster template designs (Radiant, Cathedral, Harvest, Herald, Dawn), a mood-based template router, and an AI button powered by Claude that suggests a template from a natural language event description. Volunteers fill in the form, upload a photo, and export. All images are converted to base64 data URLs on upload to avoid CORS failures in html2canvas.

=> |

Volunteers of all ages produce consistently branded posters in under five minutes. The church's printed materials have a unified visual identity for the first time.

$ list features

# 5 features found

+Five Template Designs

Radiant (navy band, modern), Cathedral (jewel tones, diagonal geometry, gold #F0C040), Harvest (terracotta, botanical), Herald (typographic broadsheet, spot red), Dawn (sky-to-blush gradient, airy). A mood-based router also handles aliases like festive, reverent, and welcoming.

+AI Template Suggestion

claudeService.ts accepts a natural language event description and suggests the matching template mood and accent colour, so a volunteer who types "joyful Easter celebration" gets the Dawn template suggested automatically.

+Proportional Scale Function

makeN(W) scales all layout dimensions proportionally from the A4 base (595px). Switching from A4 to A3 or A5 maintains identical visual proportions across formats.

+PDF + PNG Export at 2× Scale

html2canvas captures the poster at scale:2 for retina-quality output. jsPDF embeds the canvas as a print-ready A4/A5/A3 PDF. PNG export via canvas.toDataURL targets social media and screen use.

+Base64 Image Upload

react-dropzone converts images to base64 data URLs immediately on drop via FileReader.readAsDataURL. Templates receive data URLs, html2canvas never makes cross-origin requests.

$ npm list --depth=0

package.json · dependencies

$ git log --oneline

$ debug --issues

FIX:

Custom fonts loaded via @fontsource need to be fully loaded before html2canvas captures the element. The ExportPanel awaits document.fonts.ready before triggering capture, skipping this produces exports with fallback system fonts.

FIX:

Uploaded images from file:// URLs or certain origins block html2canvas without explicit CORS headers. Converting every uploaded file to a base64 data URL immediately on drop ensures the canvas never attempts a cross-origin image fetch.

LET'S BUILD SOMETHING TOGETHER

I'm always open to discussing new projects, partnerships, or just a good idea.

SAY HELLOMORE PROJECTS