Before I Tell

• 

• 

• 

• 

• 

Inspiration

At my school the counsellor's office is about forty feet from the cafeteria usually it's empty.

That always seemed strange to me. It's free, it's right there, and plenty of people are having a hard time. So why does nobody walk in?

When I looked it up, the research says three-quarters of teens with a mental-health problem aren't in contact with any service, and the biggest reasons aren't cost or distance. They're stigma, worrying about who else finds out, and not knowing what happens next.

Here's the part that got me: that last question has a real answer. In Ontario, the short list of things an adult at school legally has to pass on is written down. Most of what you tell a counsellor stays between you. But nobody ever shows a fourteen-year-old that list before asking them to be brave.

So I built the thing that shows it to them first.

What it does

Before I Tell has three levels. You pick how far you go, and you can stop at any time. Every step forward is a button only you press.

Level 1) Ask. Type a real question: "Will they tell my parents?" You get a straight answer, and every answer shows the actual rule it came from, so you're not just taking my word for it. Nothing you type is saved or sent anywhere. If the site doesn't know something, it says so and points you to a real person instead of guessing.

Level 2) Codename. Sometimes you want to talk, just not as yourself yet. You write a message and the site gives you a codename like "Blue Heron 41." The message lands in your counsellor's actual school email, signed with the codename. They can reply, and their reply comes back to you inside the app. They never find out who you are unless you decide to tell them.

Level 3) Tell, on your terms. When you're ready to say it out loud, you set the rules first. Listen all the way through. Ask before calling home. Check in on Thursday. You can practise your first sentence on a full-screen card until it feels sayable. Then the site makes a page for the adult that explains how to listen and lists what you asked for. What you're actually going to tell them is never in that link. That part stays yours until you say it out loud.

It's free, there's no sign up, and Levels 1 and 3 run entirely inside your browser. After the first visit you can turn the wifi off and they still work.

How we built it

Plain HTML, CSS and JavaScript. No framework, no build step. You can open the files and read them.

The answers aren't written by an AI. This is the most important decision in the whole project. I wrote 23 answers by hand, each one tied to a real source: Ontario's child-protection agency, the College of Teachers, the privacy commissioner, Kids Help Phone. When you ask a question, the site matches your words against those answers and shows you the closest one with its source attached.

Why not use an AI to write the answers? Because of how each one fails. If a chatbot doesn't know something about child-protection law, it makes up something confident and wrong. My version, when it doesn't know, just says it doesn't know and hands you a phone number. For this subject that's the only acceptable way to be wrong.

Level 2 is a small email server I wrote in Node. It takes the student's message, gives them a codename, and emails it to the school address. When the counsellor hits reply, the server catches it and files it back under the codename. Neither the student's name nor their email is ever stored.

Claude helped me build the website to further improve its capabilities.

The site is on GitHub Pages, the email server is on Render. There are 148 automated tests on the server alone.

Challenges we ran into

The email feature looked like it worked, and had never once delivered a message. This was the big one. Everything reported success, the tests passed, the code was fine. I only found it by checking the server's logs directly and seeing "connection timeout" over and over. It turned out my free hosting blocks outgoing email entirely the standard way of sending mail is switched off on that plan. I had to rebuild the sending part to go over the web instead. Lesson: "the code ran without errors" and "the email arrived" are completely different claims.

The server was crashing every five minutes and deleting people's conversations. Same investigation, second discovery. The bit that checks for replies would lose its connection to the mail server, and that failure was crashing the whole thing. Because the free plan doesn't keep files between restarts, every crash wiped every conversation. A student could send a message, get a reply, and find an empty screen. Two problems: one missing line to catch the error, and moving storage to a real database.

Accomplishments that we're proud of

It actually works, with a real person on the other end. Not a demo, not a mock-up. I sent a message through it under a codename, a real reply came back, and it appeared in the app. The whole loop.

It refuses to guess. Ask it something outside its 23 answers and it tells you it's not sure and gives you Kids Help Phone. Building something that admits what it doesn't know felt more valuable than building something that always has an answer.

What we learned

The honest version is usually the better product. Every time I made the copy more honest by showing the legal limits instead of hiding them, saying "I don't know," admitting the safety detection can miss things because of that it got more trustworthy, not less. For a tool asking teenagers to take a risk, being trusted is the feature.

What's next for Before I Tell

A real school partnership. Right now a student can message any school address, but the counsellor gets an email from a service they've never heard of, which is easy to ignore or filter as spam. One school agreeing to it turns this from a clever tool into something that actually gets used.

Keeping it alive. The database I'm using is free and expires in October. If this is going to be real for actual students, it needs to not disappear.

Asking students, not guessing. Everything here comes from research and from people I know. The next real step is putting it in front of students who don't know me and finding out which parts are wrong.

Built With

• css
• html
• javascript
• render