Echotok

• 

  Logo

• 

  Homepage

• 

  Feed

Inspiration

The inspiration for EchoTok came from a simple observation: so many people around us carry powerful stories, but have no safe outlet to share them. Whether it's navigating difficult family dynamics, facing injustice at work, or overcoming personal struggles, these experiences often remain unspoken due to social taboos or fear of repercussions.

We envisioned a platform where a person's story—not their face or name—is what truly matters. By focusing on audio and anonymity, we aimed to foster a unique form of empathy and connection, allowing users to find solidarity in the shared human experiences of others.

What it does

EchoTok is a modern web application built with a full-stack JavaScript/TypeScript approach, leveraging the power of Supabase as its backend.

1. User Authentication: Users sign up and log in using Supabase Auth, which securely manages user sessions.
2. Story Creation: A user writes their story. They have two main options:
   • Record & Upload: Upload an MP3 file directly.
   • AI Voice Generation: Type their story, and our application calls the ElevenLabs API via a secure Supabase Edge Function. This function acts as a proxy, protecting our API key and handling the request on the server.
3. File & Data Storage:
   • The generated audio Blob or uploaded MP3 file is sent to Supabase Storage and stored in a public audio-files bucket.
   • The story's metadata (title, categories, emotional tone, and the public URL of the audio file) is inserted as a new row in our PostgreSQL database, managed by Supabase.
4. The Feed: The main feed is a TikTok-style vertical scroller. It uses the StoriesContext to fetch paginated stories from the database, ensuring the app is scalable and doesn't load millions of stories at once. As the user scrolls, useEffect hooks in the StoryFeedItem component trigger the EnhancedAudioPlayer to autoplay the active story and pause the others, creating a seamless listening experience.
5. Profile & Story Pages: These pages fetch user-specific or story-specific data, including comments and support counts, directly from the database to display rich, interactive content.

The entire frontend is built with React and Vite, styled with Tailwind CSS, and animated with Framer Motion to create a fluid and modern user interface.

How we built it

• Languages: TypeScript, JavaScript, SQL
• Frameworks/Libraries: React, Vite, Framer Motion
• Styling: Tailwind CSS
• Backend & Database: Supabase (PostgreSQL, Auth, Storage, Edge Functions)
• APIs & Services: ElevenLabs API
• Icons: lucide-react

Challenges we ran into

• AI Voice Integration & Security: Initially, I tried calling the ElevenLabs API from the client-side, which immediately ran into CORS errors and exposed the API key. The solution was to build a Supabase Edge Function to act as a secure proxy. This was a major learning moment in API security.

• The Dreaded Infinite Loop: The most stubborn challenge was a series of infinite re-render loops. Debugging this taught me the importance of stable function references in React's useEffect dependency arrays and the power of the useCallback hook. The final fix for the Story page involved refactoring the data fetching logic to be completely self-contained within the useEffect hook, depending only on the stable id from the URL.

• Audio Playback Bugs: I encountered a bug where scrolling the feed would cause two stories to play at the same time. This forced me to re-architect the audio player, ensuring each story's audio element was properly created and destroyed as it entered and left the viewport, preventing any overlap.

• Scalability: My first version of the feed fetched all stories at once. I quickly realized this wouldn't scale. This led me to implement proper pagination in the Supabase service layer and building out the "load more" functionality in the StoriesContext.

Accomplishments that we're proud of

• Building a Full-Stack, Scalable Application: We successfully built more than just a frontend prototype. EchoTok is a complete application with a secure Supabase backend handling authentication, a PostgreSQL database, file storage, and serverless Edge Functions. Implementing a paginated, infinite-scroll feed from day one ensures the app is ready to scale.

• Securely Integrating a Third-Party AI Service: We didn't just call an API from the client. We built a secure proxy using a Supabase Edge Function to handle requests to the ElevenLabs API. This protects our API keys and is the professional standard for integrating external services, showcasing a deep understanding of application security.

• Creating a Modern, Engaging User Experience: We successfully implemented a complex, TikTok-style vertical feed with autoplay-on-scroll functionality. This required solving challenging state management and audio playback bugs to ensure a seamless and intuitive user experience.

• Overcoming Difficult Technical Hurdles: This project was a masterclass in real-world debugging. We successfully navigated and solved complex issues, including browser CORS policies, stubborn infinite re-render loops in React by stabilizing context functions with useCallback, and audio overlap bugs in the feed. These challenges pushed us to write cleaner, more robust, and architecturally sound code (thanks to bolt AI)

What we learned

Building EchoTok was an incredible learning journey, particularly in bridging the gap between a simple idea and a robust, full-stack application.

• The Power of a "Backend-as-a-Service" (BaaS): Using Supabase was a game-changer. It allowed me to build out complex features like user authentication, database management with row-level security, and file storage without having to manage a traditional server. This let me focus on the user experience and core application logic.

• Mastering Asynchronous JavaScript: The entire application relies on asynchronous operations—fetching data, uploading files, calling third-party APIs. I gained a much deeper understanding of Promises, async/await, and how to handle complex, chained operations like generating AI audio and then uploading it, all while providing real-time progress updates to the user.

• Solving Real-World Frontend Challenges: I learned firsthand how to debug and solve classic React issues like infinite re-render loops caused by unstable dependencies in useEffect hooks. Stabilizing functions with useCallback and isolating effects became critical skills.

• The Nuances of Web APIs: Working with the Web Share API and the Web Audio API taught me about browser security models, CORS policies, and the importance of user-initiated events for certain browser features. The challenges with cross-origin audio playback led me to a deeper appreciation for backend proxies and secure data handling.

What's next for Echotok

EchoTok is just getting started. Our vision is to build a thriving, supportive community, and our roadmap is focused on enhancing connection and discovery.

• Enhanced Community Features: We plan to introduce user-curated playlists of stories, and the ability to "follow" anonymous authors to see their future stories, fostering a deeper sense of community.

• Advanced Content Discovery: Our next goal is to implement a more powerful search and filtering system. In the long term, we aim to build a recommendation engine ("If you liked this story, you might also like...") to help users discover stories that resonate with them.

• Monetization and Sustainability: The "Upgrade" feature is the first step towards a sustainable platform. We are planning to offering features like a wider range of AI voices, higher character limits for text-to-speech generation, and special profile badges for supporters.

• Expanding Accessibility: To make EchoTok truly global, we plan to add support for multiple languages in both the user interface and the AI-generated voices, making the platform accessible to a worldwide audience.

• Native Mobile Apps: While the web app is fully responsive, our ultimate goal is to build native iOS and Android applications to provide the best possible mobile experience, complete with push notifications and device-native integrations.

Built With

• auth
• elevenlabs
• framer-motion-**styling:**-tailwind-css-**backend-&-database:**-supabase-(postgresql
• framermotion
• javascript
• lucide-react
• react
• sql
• sql-**frameworks/libraries:**-react
• storage
• supabase
• tailwind
• typescript
• vite