Project Info
Inspiration
Our inspiration comes from one of our team member's bedtime story sessions with his little cousin. Whenever he reads him a picture book, his cousin always has questions like, "Why did Goldilocks walk into the house?"—and most of the time, we don’t have the answers. We wished there was a way for him to ask the characters directly, to hear their side of the story. That’s where the idea for LiveStory came from. We wanted to bring storybook characters to life and let kids interact with them directly to get answers to their questions in real time.
What it does
LiveStory is a children's storybook that comes alive! At ANY point in the story, interact with a character on the page and chat with them; how are they feeling about what just happened? With industry-leading AI voice-to-voice pipelines, readers can feel the emotion of their favourite characters.
How we built it
Our web application was built primarily using Reflex: Reflex for both frontend and backend React.js for managing the database of each page and character Custom assistants powered by Vapi, Groq, Deepgram, and 11Labs to simulate character interactions Reflex for Deploy
Challenges we ran into
We initially struggled with Reflex, but over time, it became our go-to tool for building the project. We had to prevent characters from spoiling the story by restricting their responses to what the reader had already seen. To solve this, we fed the accumulative story log into the voice API, ensuring characters only referenced the relevant parts of the story.
Accomplishments we're proud of
Completing the project on time and getting it fully functional!!! Learning Reflex and Lottie from scratch and successfully implementing them over the weekend. Collaborating with amazing Reflex engineers to create a solid product based on their platform. Committing 20+ hours and $1,000 on travel from Waterloo, Canada, to make this hackathon happen!
What we learned
Making a full-stack app in Reflex Implementing beautiful vector animations with Lottie Implementing voice-to-voice models in web apps
What's next
As time is the biggest limitation during a hackathon, we would have loved to pour more time into the art to make a more beautiful experience. More stories! More animations! Characters could, based on the emotions of their speech, have reactive animations Character Interaction Interface: a more advanced UI can note your emotions Choose your own adventures! With supported stories, the conversations with the characters could influence the story! Customization for reader! We can also try feeding reader's information such as name, hobby and academic interest to serve better user experience.
LiveStory - CalHacks 11.0 Winner!
Video Demo
Inspiration
Our inspiration comes from one of our team member's bedtime story sessions with his little cousin. Whenever he reads him a picture book, his cousin always has questions like, "Why did Goldilocks walk into the house?"—and most of the time, we don’t have the answers. We wished there was a way for him to ask the characters directly, to hear their side of the story. That’s where the idea for LiveStory came from. We wanted to bring storybook characters to life and let kids interact with them directly to get answers to their questions in real time.
What it does
LiveStory is a children's storybook that comes alive! At ANY point in the story, interact with a character on the page and chat with them; how are they feeling about what just happened? With industry-leading AI voice-to-voice pipelines, readers can feel the emotion of their favourite characters.
How we built it
Our web application was built primarily using Reflex:
- Reflex for both frontend and backend
- React.js for managing the database of each page and character
- Custom assistants powered by Vapi, Groq, Deepgram, and 11Labs to simulate character interactions
- Reflex for Deployment
Challenges we ran into
- We initially struggled with Reflex, but over time, it became our go-to tool for building the project.
- We had to prevent characters from spoiling the story by restricting their responses to what the reader had already seen. To solve this, we fed the accumulative story log into the voice API, ensuring characters only referenced the relevant parts of the story.
Accomplishments that we're proud of
- Completing the project on time and getting it fully functional!!!
- Learning Reflex and Lottie from scratch and successfully implementing them over the weekend.
- Collaborating with amazing Reflex engineers to create a solid product based on their platform.
- Committing 20+ hours and $1,000 on travel from Waterloo, Canada, to make this hackathon happen!
What we learned
- Making a full-stack app in Reflex
- Implementing beautiful vector animations with Lottie
- Implementing voice-to-voice models in web apps
What's next for LiveStory
As time is the biggest limitation during a hackathon, we would have loved to pour more time into the art to make a more beautiful experience.
- More stories!
- More animations! Characters could, based on the emotions of their speech, have reactive animations
- Character Interaction Interface: a more advanced UI can note your emotions
- Choose your own adventures! With supported stories, the conversations with the characters could influence the story!
- Customization for reader! We can also try feeding reader's information such as name, hobby and academic interest to serve better user experience.
Screenshots
Built by Connor Loi, Gen Ichihashi and Pranav Bedi
Analysis
View
Metric
- 16
- 13
- 4
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- CSSIn code
- JavaScriptIn code
- Next.jsIn code
- PythonIn code
- ReactIn code
- Tailwind CSSIn code
6 of 6 appear in the indexed code.
AI coding agents
No AI coding agent signals were found in this repository.
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
93 KB
Source files
34
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
pranavbedi/LiveStory
107 files · 18.5 MB · @ 12b28cc
Structure
Interface
15 files · 14%Screens, components and styles rendered to the user.
Application logic
26 files · 24%Domain rules, services and shared utilities.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- JavaScript65%
- Python31%
- Markdown3%
- CSS0%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
.web/package.json
npm · 22- @babel/standalone
- @emotion/react
- @radix-ui/themes
- @tailwindcss/typography
- axios
- json5
- lottie-react
- lottie-web
- lucide-react
- next
- next-sitemap
- next-themes
- react
- react-dom
- react-focus-lock
- socket.io-client
- sonner
- tailwindcss
- +4 more
requirements.txt
pypi · 2- hume
- reflex
app/requirements.txt
pypi · 1- reflex
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
Feature verification
Built with Reflex for full-stack frontend/backendVerified
Web application built primarily using Reflex for both frontend and backend, and Reflex for deployment
Claimed on readmehigh confidenceapp/app/app.py:1— imports reflex as rx, defines rx.State/rx.App, adds pages and API route via Reflexrxconfig.py— Reflex project configuration file present at repo root
Character reactive animations via LottieVerified
Learning Reflex and Lottie from scratch and successfully implementing them; beautiful vector animations with Lottie
Claimed on readmehigh confidenceapp/assets/CharacterComponent.js:216— Lottie component swaps between talking/thinking animationData based on isTalking statefrontend/lottie-animations/first-pig-talking.json— actual Lottie animation assets exist per character
Click a character on the page to chat with them at any pointVerified
At ANY point in the story, interact with a character on the page and chat with them
Claimed on readmehigh confidenceapp/app/pages/story_page.py:83— moveableCharacter renders InteractableCharacter per character position, clickable via character_clickedapp/assets/CharacterComponent.js:215— onClick toggles a Vapi voice call with the character
Interactive story reader with page navigationVerified
A children's storybook web app that lets readers navigate through story pages
Claimed on readmehigh confidenceapp/app/pages/story_page.py:57— next_page/previous_page and set_page_content drive page navigation and story text updatesapp/app/getPages.py:12— get_page returns per-page story text, context, and character data for 15 pages
Multiple stories beyond Three Little PigsVerified
More stories! (as a future goal), implying current build has at least one full story
Claimed on readmemedium confidenceapp/app/getPages.py:15— full 15-page Three Little Pigs story with per-page character data is implemented; README explicitly lists 'more stories' as future work, confirming only one story currently exists
Voice-to-voice AI conversations with characters (Vapi + Groq + Deepgram + 11Labs)Verified
Custom assistants powered by Vapi, Groq, Deepgram, and 11Labs to simulate character interactions with industry-leading voice-to-voice pipelines
Claimed on readmehigh confidenceapp/assets/CharacterComponent.js:5— VOICE_AND_ANIMATION_DATA wires deepgram transcriber, groq llama3-70b model, and 11labs voice IDs per character into vapi.start()app/assets/CharacterComponent.js:182— toggleCall starts a Vapi call with transcriber/model/voice config built from the above
Preventing characters from spoiling the story via accumulated story log/contextCode-supported
Fed the accumulative story log into the voice API so characters only reference parts of the story the reader has already seen
Claimed on readmemedium confidenceapp/app/getPages.py:24— each page's character message content and 'context' field is restricted to the story so far and instructs the character not to spoil what's aheadapp/assets/CharacterComponent.js:194— charData['characters'][character]['messages']['content'] (the per-page restricted context) is appended into the system prompt sent to the voice model, though the 'context' field itself is fetched into charData but not visibly concatenated
Choose-your-own-adventure: conversations influence story branchingClaimed only
With supported stories, the conversations with the characters could influence the story
Claimed on readmehigh confidenceEmotion-aware / reactive character animations based on speech emotionClaimed only
Characters could, based on the emotions of their speech, have reactive animations; a more advanced UI can note your emotions
Claimed on readmehigh confidenceReact.js used to manage database of pages and charactersClaimed only
React.js for managing the database of each page and character
Claimed on readmemedium confidenceReader customization (name, hobby, academic interest)Claimed only
Feeding reader's information such as name, hobby and academic interest to serve better user experience
Claimed on readmehigh confidence
An AI agent derived these features from the project’s Devpost page and readme, then searched the code for each one. Verified features are backed by cited code; claimed-only features had no supporting code, which is not by itself proof a feature is missing.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.