I wanted to gain more experience in collaborative coding with AI, where architectural decisions are guided by large language models and implementation details pass through an AI assisted code editor. I also wanted to grow my experience working with Amazon Web Service host, deployment, and monitoring.
The result is the digital flyer application I recently coded, containerized, and deployed to mozum.com,
The app combines user input with AI-powered design, Now live at mozum.com with a snapshot of the source code available on GitHub.
Project Overview
The application addresses a common challenge faced by amateur event organizers: creating promotional materials without low overhead. Users input basic event details through a simple form interface, and the application generates custom flyers using AI image generation combined with precise text rendering. This project served as both a practical solution to a real-world problem and an exploration of modern AI-augmented models for image and text processing.
AI-Assisted Development Workflow
This project served as an exploration of AI-augmented programming practices. Using Anthropic’s Claude Opus 4 for architectural decisions and Windsurf with SWE-1 for implementation details, the development process demonstrated again to me how AI can amplify developer productivity.
The workflow involved expressing architectural intent to AI systems, then iteratively refining the generated code – a process that’s becoming increasingly common in modern software development. This collaborative approach enabled me to build a sophisticated application that would traditionally require a larger development team.
Technical Architecture
Frontend and Backend Stack
The application uses React with Redux Toolkit for state management on the frontend, while the backend runs on Node.js with Fastify – chosen for its performance benchmarks and schema-based validation capabilities.
Product Innovation: Hybrid Image Generation
The application employs a two-phase generation process:
- AI Background Generation: Leverages a FLUX.1 [schnell] model to create contextual backgrounds based on user inputs
- Canvas Text Rendering: Applies typography using the Canvas API for pixel-perfect text clarity
This separation solves the common problem of poor text quality in AI-generated images by combining AI creativity for backgrounds with programmatic precision for text elements.
Key Technical Features
The font management system uses fonteditor-core for robust typography handling. Dynamic layout algorithms automatically adjust content positioning based on input density.
The color contrast system employs the color-contrast npm package to ensure text readability by analyzing luminance values and applying WCAG-compliant contrast ratios. This system works in conjunction with the @uiw/react-color-compact component for user color selection, creating a comprehensive color management solution.
Deployment Infrastructure
Production deployment leverages containerization and AWS services for scalability and reliability. The pipeline includes:
- Multi-stage Docker builds that separate build and runtime dependencies
- AWS ECS (Elastic Container Service), running on AWS Fargate, orchestrating with zero-downtime deployments with the best cost structure for my use case.
- Deployment through AWS CLI, using a local make file or manual commands.
- Monitoring and health checks through AWS CloudWatch, with constant health checks and automated failure protocols.
- CloudFront CDN (Content Delivery Network) integration for global asset delivery.
The deployment process handles everything from building platform-specific images to orchestrating rolling updates that maintain service availability.
Key Learnings
The project validated several architectural decisions:
- Separating AI generation from text rendering dramatically improved output quality
- Fastify’s performance characteristics and robust methods justified the framework choice
- Comprehensive fallback for the AI prompting and image composition strategies prevented edge-case failures
- Container-based deployment simplified complex dependency management for image generation,
Code Repository
A snapshot of the codebase from the first date it was deployed is available to view on GitHub. The repository provides insight into the implementation details and architectural patterns used in building a production AI-powered application.
Conclusion
The digital flyer demonstrates that AI-assisted development enables individual developers to build sophisticated applications that would traditionally require larger teams. By combining modern web technologies with AI capabilities, we can democratize access to professional design tools while maintaining quality standards.
The future of software development lies in this human-AI collaboration, where developers leverage AI to handle routine tasks while focusing on architecture, user experience, and business logic. Visit mozum.com to experience the application, or explore the initial codebase on GitHub.