Fake Chat Generator Project Report
1. The Concept
Fake Chat Generator is a mobile-first web application for creating fictional conversations. It is designed for storytelling, comedy, memes, and social media content for platforms such as TikTok and Facebook.
Users can select a chat template, edit character names and avatars, write messages, upload images, switch between speakers, and export conversations as vertical 9:16 images. Every exported image includes a FICTIONAL CONTENT label to clearly indicate that the conversation is not real.
2. The Stack
The Stack: HTML5, CSS3, Vanilla JavaScript, Canvas API, Local Storage, FileReader API, and Web Audio API.
The project does not use a framework or build tool, so it can run directly in a modern web browser. The Canvas API generates 1080 × 1920 images and exports them in WebP format.
The AI Assist: AI helped organize the product concept, define the UI/UX rules, create chat content in English and Khmer, and develop and review the logic for managing messages, characters, templates, and image exports.
3. The 1-Day Sprint
Morning (Hours 1–3): I started by defining the concept and user flow of Fake Chat Generator. I created the HTML structure for the title screen, template selection, chat studio, settings, and export screen. I then designed the mobile-first interface around a base resolution of 1080 × 1920 and added four chat templates: Meme, Drama, Romance, and School.
Afternoon (Hours 4–6): I developed the main features using JavaScript. These included selecting a template, switching speakers, editing names and avatars, adding or deleting messages, uploading images from the device, and using the included sample photos. I also added English and Khmer language support and used Local Storage to remember whether the first-time instructions had already been displayed.
The Finish Line (Hours 7–8): I completed the preview and export system using the Canvas API. Conversations are divided into multiple frames according to the number of messages and exported as 1080 × 1920 WebP images. I also added a PNG fallback for browsers that cannot encode WebP, a FICTIONAL CONTENT label, sound effects, and responsive scaling for different mobile screen sizes.
4. The Roadblocks
Roadblocks: One of the main challenges was making a fixed 1080 × 1920 interface display correctly across different screen sizes. Keeping the chat preview consistent with the exported image also required careful calculations for message dimensions, long-text wrapping, image placement, and bottom-up message positioning.
Khmer-language support was another challenge because the font and text needed to render correctly in both the interface and exported images. Some browsers do not reliably support WebP encoding through the Canvas API, so I added a PNG fallback and error handling.
Displaying many messages within one frame could also cause older messages to be clipped. To solve this, the export system divides longer conversations into multiple progressive frames.
5. Key Takeaways
HTML, CSS, and Vanilla JavaScript are powerful enough to build an interactive web application with image-export capabilities without relying on a large framework.
Giving each screen one clear purpose and following a mobile-first design approach made the user flow simple and easy to understand. Separating the data for templates, avatars, photos, and languages also made the project easier to maintain and expand.
Safety by design is an important part of the project. Adding a FICTIONAL CONTENT label to every exported image helps prevent misunderstandings and reinforces that the tool is intended for storytelling and entertainment.
My final thought: Fake Chat Generator demonstrates how a clearly defined prototype can become a functional web application within a short development sprint. The next steps could include saving and loading projects, undo and redo, message reactions, group conversations, PNG export, and animated video export to make it a more complete social media content-creation tool.