Tinglr

64% of people under 50 worldwide have HSV-1, and yet, almost nobody talks about it

Comment

Inspiration

When I got my first cold sore in 4th grade, my teacher asked me what it was, and I had no idea. It was a big, painful blister that would swell up my whole lip, and for six years, I didn't understand what was happening to me. I hid it from my classmates and felt ashamed every time it showed up randomly.

By 8th grade, I had figured out what it actually was: HSV-1, herpes. My first thought was: how? I'd never had any sexual contact. It turns out HSV-1 spreads non-sexually too, often through something as small as a kiss as a kid, and it's not curable, it just stays with you. But knowing the word for it didn't make things easier. If anything, it made me more embarrassed. I used to lie about it constantly, telling people I got scratched, or that it was a sunburn, or that a bee bit me. Sometimes I'd just wear a mask to hide it entirely.

It wasn't until later, when I actually understood what to do and learned how common it was (an estimated 64% of people under 50 worldwide have HSV-1) that I finally started to feel better. I built Tinglr because somewhere out there is someone just like me, lying about a bee sting, and I want them to have the guide I never had. The stigma around herpes and STIs is still very real, and a lot of people are embarrassed to even admit they have it. That stigma isn't unique to me, and it's exactly what inspired Tinglr.

What it does

Tinglr is an interactive, choice-driven web game that walks players through the real stages of a cold sore (HSV-1) outbreak: Tingling, Blister, Weeping, Crusting, Healing, and Clear. At each stage, players face a realistic choice, see a consequence, and learn a fact grounded in real medical research. Every stage features hand-drawn artwork showing exactly how that stage looks and feels. The journey ends with practical tools (like Abreva, cold sore patches, and lip SPF) and a reassuring message grounded in real numbers, including that an estimated 64% of people under 50 worldwide carry HSV-1.

How I built it

Tinglr was built in Replit using React and Tailwind CSS, with Replit's AI Agent generating and iterating on the core app structure, state logic, and styling based on detailed prompts. All six stage illustrations were hand-drawn from scratch to accurately reflect each real stage of a cold sore, then integrated into the app and wired to change dynamically as the player progresses. Content and facts were researched from WHO, CDC, and medical sources, then rewritten in a calm, judgment-free tone suited for teens and adults. After reaching the AI Agent's credit limit, I continued building by manually editing code directly, guided step-by-step by an AI assistant explaining what each fix needed to do.

Challenges I ran into

Before I even started building, I had to narrow down which idea to actually pursue. I came in with a lot of ideas I was passionate about (from cybersecurity education to financial literacy), and had to realistically weigh my limited time and my actual technical skill level as a first-time coder against what I could realistically finish in 48 hours. Once I landed on Tinglr, the game itself went through major iteration: the first version was purely informational, just facts with no interactivity, and it didn't feel engaging or personal. I rebuilt it into a choice-driven experience with real consequences instead. Partway through, I also hit my AI Agent's monthly credit limit with the deadline still ahead, forcing me to debug and edit the code manually for the first time, tracing issues like broken image import paths and missing CSS classes with AI-assisted guidance instead of the Agent's automated workflow. On top of that, I iterated multiple times on the stage artwork itself, since early AI-generated attempts didn't read as an actual cold sore (looking too much like a flower, then a pimple cluster, then a soccer ball) before I hand-drew my own medically accurate versions.

Accomplishments that I am proud of

I am super proud that every stage illustration was hand-drawn by me, specifically designed to reflect what a real cold sore looks like at each stage, based on real medical descriptions, not AI-generated. As a complete beginner to coding and drawing at the start of this hackathon, I'm proud I pushed through a real credit-limit setback by learning to navigate and troubleshoot our own code instead of giving up. Most of all, I'm proud that Tinglr turned out simple to use, informative, and genuinely felt like something that could help someone the way I wished I'd been helped.

What I learned

I learned how to write clear, structured prompts to get better results from AI coding tools (prompt engineering), how to think through visual design choices intentionally instead of guessing, and how to iterate: testing something, noticing what didn't feel right, and refining it rather than settling for the first result. I also learned a lot about HSV-1 itself beyond our own experience, including how common it actually is worldwide and how early treatment timing (within 72 hours of symptoms) can make a real difference.

What's next for Tinglr

Next, I want to clean up the visual polish of each stage illustration (removing background artifacts), and add a translation feature so the game is accessible in more languages. I'd also like to build out a personal tracking feature, letting users save their progress across visits and log details like possible triggers (dry lips, sun exposure, stress, illness, or a weakened immune system) so they can start noticing their own patterns over time. Down the line, I want to explore a model that could let a user upload a photo to help identify which stage they're in, and expand the choice options at each stage so the experience can curate more personalized guidance. Eventually, I'd like to share Tinglr with peers and other students beyond this hackathon, since the stigma around HSV-1 isn't unique to me, and I'd like this to actually reach people who need it.

Built With

Share this project:

Updates

Submission history