Mirracle

• 

• 

• 

Inspiration: ElevenLabs presentation — I realised it enables training 'as you speak'.

I've been working on my startup Reputy.io, for more than a year and couldn't find a strong technical solution for mentoring in real time. Our mission is to illuminate and grow talent through social skills, such as critical thinking. Job seekers enhance their skills and showcase them to employers.

What it does:

Mirracle is an AI-powered mobile and web application designed to magnify your critical thinking skills as you speak. Users can record their thoughts, discussions, or practice sessions, and the app instantly transcribes the audio using ElevenLabs' advanced Speech-to-Text technology. Following transcription, a sophisticated AI model analyses the spoken content for key critical thinking patterns across categories like Critical Reasoning, Perspective Taking, Source Evaluation, Problem Solving, and Question Formation.

'Mirracle' refers to a mirror effect and a miracle promising the user to tell the truth about their skills and magnify them in a miraculously easy way. Mirracle will become the main entry point for all other skills (empathy, communication, problem-solving) as a voice input and feedback output at a later stage.

The app provides:

Real-time Analysis: Immediate feedback on your critical thinking performance.

Detailed Insights: Breakdowns of your strengths and areas for improvement, complete with actionable suggestions and helpful resources.

Overall Scoring: A comprehensive score reflecting your critical thinking proficiency.

"Best Snips": Automatically identifies and saves your highest-scoring critical thinking moments (insights with scores of 80% or higher) as shareable highlights, creating a dynamic portfolio of your analytical excellence.

Progress Tracking: Visual analytics and historical data to monitor your growth over time.

Achievements System: Gamified milestones to motivate and celebrate your development.

Live Mentoring Tips: Rotating tips on the recording screen to guide your thinking during sessions.

How I built it

Mirracle was built on Bolt.new as a cross-platform application using React Native with Expo Router, ensuring a consistent and performant experience across iOS, Android, and Web.

The core architecture involves:

Frontend: Developed with React Native and Expo, leveraging Expo Router for intuitive tab-based navigation and deep linking. The UI is crafted with a clean, minimalist design, professional typography using Inter fonts from @expo-google-fonts, and thoughtful micro-interactions to provide a beautiful and engaging user experience.

Audio Recording: Utilises expo-av for robust audio capture capabilities. Speech-to-Text & AI Analysis: The recorded audio is sent to a custom Expo API Route (app/api/elevenlabs+api.ts). This server-side function securely handles the integration with ElevenLabs Speech-to-Text API to transcribe the audio. Subsequently, a custom AI analysis function processes the transcribed text to identify critical thinking patterns, assign scores, and generate improvement suggestions.

Data Persistence: All recordings, insights, and best snips are securely stored in a Supabase PostgreSQL database. Supabase also handles user authentication and provides real-time capabilities for data synchronisation.

State Management: Context API is used for managing global application state, such as analysis results and history.

Styling: All components are styled using StyleSheet.create for optimised performance and maintainability.

Deployment: The application is designed for deployment to platforms supporting Expo's server output, such as Vercel or Netlify, ensuring secure handling of API keys and server-side logic.

Challenges I ran into

One significant challenge was ensuring seamless cross-platform audio recording and processing, especially with the nuances of handling audio blobs and FormData across web and native environments for the ElevenLabs API. I had to implement platform-specific logic within the analyseRecording function in app/(tabs)/index.tsx to correctly prepare the audio file for the API route.

Another challenge involved optimising the AI analysis logic within the API route to provide meaningful and accurate critical thinking insights based on spoken text. Crafting effective regular expressions and scoring mechanisms that genuinely reflect critical thinking patterns required iterative refinement.

Finally, managing and displaying complex data structures from Supabase, including historical recordings, categorised insights, and "best snips," while maintaining a smooth and responsive UI, presented its own set of challenges, particularly in the AnalyticsScreen and SnipsScreen components.

I struggled to deploy it to the web within the given time, as I've never properly coded in my life and lacked time to learn new tools.

Accomplishments that I'm proud of

I'm most proud of successfully integrating AI-powered critical thinking analysis into a user-friendly mobile and web application. The ability to provide immediate, personalised feedback on such a nuanced skill is a significant achievement.

I'm also proud of the "Best Snips" feature, which automatically curates and highlights a user's top critical thinking moments, creating a tangible and shareable portfolio of their analytical growth. This feature transforms abstract data into concrete evidence of improvement.

The clean, intuitive, and beautiful user interface is another accomplishment. I focused on creating a production-worthy design that is both aesthetically pleasing and highly functional, making the complex process of self-analysis feel accessible and engaging.

What I learned

It was my first engrossing vibe coding experience! I gained valuable experience in building full-stack, cross-platform applications with Bolt and integrating external AI services like ElevenLabs. I deepened my understanding of Supabase for robust backend data management, including schema design, data fetching, and real-time updates. The project also reinforced the importance of meticulous cross-platform compatibility testing and adaptive UI design to ensure a consistent user experience across different environments.

What's next for Mirracle

Audio Segmentation: Implement functionality to extract and play actual 10-20 second audio clips for "best snips," providing richer context.

Advanced Analytics: Develop more sophisticated trend analysis and progress tracking visualisations, potentially incorporating machine learning for predictive insights.

Social Features: Enable users to easily share their "best snips" and critical thinking portfolios with employers or friends.

Offline Support: Implement local storage for recordings and basic analysis when offline, with synchronisation once connectivity is restored.

Voice Training: Explore personalised feedback based on speaking patterns, such as clarity, pace, and tone, to further enhance communication skills.

Subscription Model or Pay-as-You-Go: design premium features and test subscription options.

Built With

• and-lucide-react-native-for-icons.-server-side-logic-is-handled-via-expo-api-routes-(+api.ts)
• and-preferring-react-native-reanimated-and-react-native-gesture-handler.-for-payments
• android
• android)-development.-it-uses-a-tab-based-primary-navigation
• cross-platform-(web-first
• elevenlabs
• expo.io
• integrating-with-supabase-for-the-database-and-elevenlabs-for-speech-to-text.-key-constraints-include-maintaining-the-useframeworkready-hook
• ios
• postgresql
• react-native
• revenuecat-is-the-recommended-solution-for-subscriptions
• router-4.0.17)-designed-for-production-quality
• stylesheet.create-for-styling
• supabase
• typescript
• using-expo's-managed-workflow
• web