SpeakUp Heroes

Inspiration

I got the idea for SpeakUp Heroes because I wanted an app which was a mix of elements from Duolingo (XP, Avatars) and Calm (Mindfulness, Diary/feelings journal). I am 12 years old and built this with the support of my dad!

What it does

SpeakUp Heroes is a multi-functional app built for teens and children. Parents can set challenges for their child to complete, and when the child completes a challenge, they earn XP and coins. This functionality is built to motivate users into stepping outside their comfort zone. The app also includes features for mindfulness and reflection. The Mindfulness section provides audio guided steps to help children calm down or relax. In the diary section, you can reflect on your day and your feelings.

How we built it

SpeakUp Heroes is built entirely with Bolt generative code. Because of some of the rather complex features built to support SpeakUp Heroes I've leveraged a number of other services to help.

Mindfulness Within my Mindfulness section I wanted to provide the user with audio guided lessons to help other children learn how to do these exercises. I also wanted to be sure that the guiding voice was relaxing and supportive to the user. The ElevenLabs service provided exactly what I needed! I was able to search all of the different voices to find the right voice and generate all the audio content I needed straight away. The audio prompts are all ElevenLabs generated, included as static files within the project and called by the application whenever a user runs a mindfulness exercise.

Avatar System SpeakUp Heroes has a built-in gamification engine that not only provides real-world rewards (as configured by the childs parent) but also a virtual reward system where the child can purchase new accessories for a digital avatar. I really enjoy having Digital Avatars in other games such as Animal Crossing and as a result I thought other kids would enjoy having the chance to express their own creativity building an avatar that reflects their unique personality. To build this functionality I used the library of avataar pieces provided at link.

Challenges we ran into

Bolt There were a few common issues that came up with Bolt which caused me a bit of problems during the build.

Code in Chat Window A number of times Bolt would randomly switch to putting the code related to a new development into the chat window, rather than actually adding the code into the files and it would be convinced that it did make the changes.

Changes without Changes Sometimes Bolt thinks it made changes but hasn't, this comes up sporadically. One example of this was when I was trying to update the interface design on my pages to match a new design Bolt had come up with. When Bolt was instructed to generally update all the pages of the application it did a lot of work but no changes were actually made. I then instructured Bolt on a page-by-page basis to do the same thing, this worked.

Mindfulness I found it really tricky to manage the build of the audio files for each of my mindfulness exercises. In the end I had to manually go to ElevenLabs, generate the file, import to my Bolt project and instruct Bolt to link the code to use the file. Though this worked, it was time intensive and consumed a lot of my tokens for each file I wanted to link through. I have looked a little bit at making this dynamic or perhaps making a mindfulness audio editor directly in the parents interface but this will be for my next version of the application.

Avatar System Building the Avatar system was difficult. I have previously tried to use Bolt and ChatGPT to generate Avatar images for me however these always ended up being a little silly looking. The system from GetAvataaars was perfect for what I needed, however, I did not know how to integrate it with my application. In this case I was able to use the discussion mode with Bolt to give me step by step instructions on how to use this online Avatar library seamlessly with our Bolt application.

Accomplishments that we're proud of

I'm proud of the Avatar System, it works so much better than my previous version. I am also proud of the Diary section, it is easy to use and very useful. One more thing I am proud of is the Mindfulness. Its really important to be able to be calm and relaxed, and I think having the mindfulness, the diary and the other major features in one easy-to-use app is so useful.

What we learned

We learned that Bolt creates better apps with the help of other websites like ElevenLabs and GitHub.

What's next for SpeakUp Heroes

The next feature to add to SpeakUp Heroes would be to be able to get a notification that your parent has added a new challenge, or your child has completed all the available challenges.

Built With

• bolt
• elevenlabs
• framermotion
• getavataaars
• github
• lucide
• react
• supabase
• tailwind
• typescript