SafeSpeak

SafeSpeak is a kid-friendly, anonymous school safety web app that bridges student privacy with secure counselor triage.

Comment

Inspiration

Growing up, I experienced school bullying firsthand. Back then, I had no safe avenue or trusted system to speak up, and the isolation took a severe mental toll on me. That painful experience stayed with me, and it became the primary driving force behind SafeSpeak. I wanted to build the exact platform I needed back then—a safe, non-intimidating, and completely anonymous digital space where kids can seek help without fear of exposure or retaliation.

What it does

SafeSpeak is an anonymous, kid-friendly school safety web application designed to bridge the gap between student anonymity and secure counselor triage:

  • Zero-Friction Student Portal: Built with a playful, low-stress pastel UI designed for students aged 8–16. Kids can submit reports on cyberbullying, AI impersonation, or harmful content in seconds without needing an account or password.
  • Targeted Teacher Privacy Routing: Students can send their report to the "Fastest Available Counselor" or lock it specifically for a trusted teacher ("Mr. Alexis" or "Mr. Botto").
  • Counselor Triage Dashboard: Staff log in with secure multi-teacher credentials. Private reports stay locked so only the assigned teacher can access them, and uploaded evidence screenshots remain 100% unblurred and readable for accurate review.
  • Secret Safe Keys: Generates a unique 1-click token (e.g., SAFE-FRIEND-88) allowing students to return anonymously and communicate two-way with counselors.

How we built it

  • Frontend & UI: Next.js (App Router), React 19, Tailwind CSS, and shadcn/ui components.
  • Rapid Prototyping: Iterated the component structure and responsive layout using v0.dev.
  • Database & Messaging: Supabase (PostgreSQL) for persistence and 2-way anonymous messaging routing.

Challenges we ran into

  • Role-Based Privacy Logic: Implementing granular access controls so targeted reports remain locked when other counselors are logged in.
  • Child-Centric Accessibility: Designing a submission interface that feels approachable and supportive for young students while maintaining crisp visual clarity for evidence review on the counselor dashboard.

Accomplishments that we're proud of

  • Successfully built a complete, working dual-portal architecture with targeted teacher locking and role-based privacy rules.
  • Designed an end-to-end user experience where children can report incidents and track replies without ever having to create an account or risk revealing their identity.

What we learned

  • How to structure state management for multi-role environments (Student vs. Counselor) without compromising student privacy.
  • The importance of empathetic UI/UX design when building tools for vulnerable users like children.
  • How to rapidly design, resolve module dependencies, and build production-ready UI components using modern developer workflows.

What's next for SafeSpeak

  • Multi-school domain routing for entire school districts.
  • Real-time push notifications for urgent counselor alerts.
  • Localization support into multiple languages for international school environments.

Built With

Share this project:

Updates

Submission history