Text-a-Mess: A one-day app build challenge

Text-a-Mess is a basic web app that does one thing: It mess­es up the text you enter by adding dia­crit­i­cal marks through­out to obscure it while keep­ing it some­what read­able visu­al­ly.

It does not encrypt the text in any way.

A sim­ple text search will still find the orig­i­nal text. How­ev­er, it will severe­ly mess up any text-to-speech soft­ware because it will use dia­crit­i­cal marks to alter text pro­nun­ci­a­tions. Please use it with that in mind.

Why did I do this?

I got the idea for this lit­tle app a few days ago while going through my Bluesky feed. I saw some­one using dia­crit­i­cal marks in their sta­tus update in a fun­ny way, and I thought it would be fun to have an app that lets you mess up your text as much or as lit­tle as you want­ed.

On March 23, 2025, I had a free Sun­day, so I built it as fast as pos­si­ble using some tech­niques I want­ed to test.

Text-a-Mess is the result of that day’s work.

What did I learn?

This project was a lit­tle test I gave myself.

After focus­ing on Vue JS for most of my client work, I’ve recent­ly been explor­ing React again out of curios­i­ty. I under­stand the basics of React, but I haven’t built a client app with it in sev­er­al years. I’m not an expert in React, but I’m not com­ing to it with zero knowl­edge.

I’ve also been exper­i­ment­ing with the con­cept of ​“Vibe cod­ing” with AI tools. I used Chat­G­PT with its o3-mini-high mod­el while build­ing this app.

I want­ed to see how much I could build with React and Chat­G­PT in a sin­gle day. If I had more time, I could have done more, but I’m sat­is­fied with what I did.

Vibe coding impressions

The ​“vibe cod­ing” idea inter­ests me, but the AI tools we have now are not per­fect. How­ev­er, I came away from this app-build­ing exer­cise think­ing that I under­stood how the app works because I had foun­da­tion­al knowl­edge and knew how to ask the AI tool for spe­cif­ic requests.

The AI often made mis­takes and intro­duced bugs in my code. To fix those errors, I had to under­stand why the bugs were hap­pen­ing so that I could describe to the AI how I want­ed to fix them. Some­times, I just gave up and fixed the bug myself.

Obvi­ous­ly, AI will con­tin­ue to improve, but to exe­cute a project and main­tain the vision of what you want to achieve, you need to under­stand the code you’re writ­ing. AI tools can help you get there faster, but they do not replace under­stand­ing how your app’s code works.

What’s next?

I might update this app over time, but as it stands now, it does basi­cal­ly what I want­ed. The Mon­day morn­ing after I pub­lished it, I noticed a visu­al bug in Safari: the out­put text dia­crit­i­cal marks did not update when they were out­side the line of tex­t’s X height. I fixed that bug in ver­sion 1.0.1. That fix still hap­pened with­in the 24-hour win­dow I gave myself to build this app, so I’ll count that as being with­in the time­frame of the orig­i­nal build.

Source code

You can view the source code for the project at https://​github​.com/​j​o​h​n​f​m​o​r​t​o​n​/​t​e​x​t​-​a​-mess.