Project Info
This project did not submit a demo video on Devpost.
Inspiration
All our team members enjoy reading as a hobby across numerous genres. Unfortunately, reading comprehension and literacy overall have been declining, which poses a massive problem for future generations. There are countless factors at play here, and we can't solve all of them, but we can definitely work to kindle a spark that might just blossom into a love for reading. Many of these adjacent tools are made for classroom settings. On the contrary, we're built for students, by students, and by readers, for readers.
What it does
Storyscape is an application aimed at developing elementary and middle schoolers' grasp over the English language. Turn on your mic and get ready to read some words! To be specific, we have identified three core skills to be problematic: diction, sentence structure variety, and expressiveness. You will be given an unlimited amount of examples for each of these and the opportunity to practice and replicate these examples. With the help of our cat assistant, you can learn how to read passages expressively and eloquently!
How we built it
Storyscape is built on five major technologies: Google Gemini Flash -- speedy, cost-efficient, great at storytelling Hume AI -- personable, easy to integrate TTS, and great for sentiment analysis React/Next.js -- a popular JS framework that simplifies many best practices built for vercel Vercel -- easy deployment to the web Firebase -- a handy tool for auth, functions, storage and analytics
Challenges we ran into
One major problem we faced during the competition was the cold weather at night. We struggled to get some quality sleep due to the lack of comfortable sleeping arrangements :(
Accomplishments we're proud of
We would actually use this app ourselves after some minor improvements! Created a polished and aesthetically pleasing web app demonstrating AI technologies Stayed up 24 hours in a row
What we learned
This hackathon was a great opportunity to learn about all the different AI technologies that are out there and how we can implement them into our lives. We learned about sentiment analysis, some handy prompt engineering, and some techniques to interface with AI in a smart way.
What's next
We're still working on adding themes into the text adventures. With better prompt engineering and utilisation of the best models to foster a closer connection to the text, Storyscape can become a true companion for those who want to augment their English skills.
About
Storyscape is an application aimed at developing elementary and middle schoolers' grasp over the English language. Turn on your mic and get ready to read some words!
To be specific, we have identified three core skills to be problematic: diction, sentence structure variety, and expressiveness.
- Using Google Gemini's AI prompts, kids have an unlimited amount of themes to interact and learn from.
- Hume's Semantic AI technologies determine user's tone, expressiveness, and evaluates reader comprehension!
Inspiration
All our team members enjoy reading as a hobby across numerous genres, with some fond core memories about interactive "Choose your own adventure" type narratives. Unfortunately, reading comprehension and literacy overall have been declining, which poses a massive problem for future generations. There are countless factors at play here, and we can't solve all of them, but we can definitely work to kindle a spark that might just blossom into a love for reading. Many of these adjacent tools are made for classroom settings.
On the contrary, we're built for students, by students, and by readers, for readers. We aim to bring interactivity and excitement back to reading for any in need of an opportunity to better their reading skills.
How we built it
Storyscape is built on five major technologies:
- Google Gemini Flash -- speedy, cost-efficient, great at storytelling
- Hume AI -- personable, easy to integrate TTS, and great for sentiment analysis
- React/Next.js -- a popular JS framework that simplifies many best practices built for vercel
- Vercel -- easy deployment to the web
- Firebase -- a handy tool for auth, functions, storage and analytics
Challenges
The majority of our challenges were mostly due to the fact that this project was completely created during a hackathon. Best practices in code and version management were forgone in favor of speed and "hackiness". This resulted in some questionable merges and confusing version control. Another problem we faced during the competition was the cold weather at night. We struggled to get some quality sleep due to the lack of comfortable sleeping arrangements :(
Analysis
View
Metric
- 35
- 23
- 3
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
- FirebaseIn code
- Google GeminiIn code
- JavaScriptIn code
- Next.jsIn code
- ReactIn code
- Tailwind CSSIn code
- TypeScriptIn code
- HTMLClaimed
8 of 9 appear in the indexed code. 1 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.
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
68 KB
Source files
40
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
catfeeshing/storyscape
52 files · 1.0 MB · @ a058852
Structure
Interface
28 files · 54%Screens, components and styles rendered to the user.
+3 moreApplication logic
6 files · 12%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
- TypeScript93%
- Markdown5%
- JavaScript1%
- CSS0%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm · 47- @google/generative-ai
- @humeai/voice-react
- @nextui-org/button
- @nextui-org/card
- @nextui-org/code
- @nextui-org/input
- @nextui-org/kbd
- @nextui-org/link
- @nextui-org/listbox
- @nextui-org/navbar
- @nextui-org/react
- @nextui-org/snippet
- @nextui-org/switch
- @nextui-org/system
- @nextui-org/theme
- @react-aria/ssr
- @react-aria/visually-hidden
- clsx
- +29 more
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
Difficulty-scaled content matched to elementary vs middle-school reading levelVerified
Aimed at developing elementary and middle schoolers' grasp over the English language
Claimed on readmemedium confidenceapp/easy/page.tsx:30— Instruction specifies words for '4th-6th grader'app/hard/page.tsx:27— Instruction specifies '6th-8th grader' paragraphs with harder English
Firebase authentication (Google sign-in) and user profile storageVerified
Firebase -- a handy tool for auth, functions, storage and analytics
Claimed on readmehigh confidencecomponents/login.tsx:43— signInWithPopup with GoogleAuthProvider, and creates a Firestore user document with words/definitions/theme fields on first sign-infirebase/firebase.ts:20— Initializes Firebase app, exports auth (getAuth) and firestore (getFirestore)
Google Gemini-generated words/sentences/paragraphs for reading practiceVerified
Using Google Gemini's AI prompts, kids have an unlimited amount of themes to interact and learn from; Gemini Flash used for storytelling
Claimed on readmehigh confidencecomponents/gemini.ts:1— Calls @google/generative-ai gemini-1.5-flash model with a system instruction to generate age-appropriate wordscomponents/prompt.tsx:33— prompt.tsx calls gemini(proompt, instruction) and stores the resulting word/paragraphapp/hard/page.tsx:27— hard page prompts Gemini to generate a 20-30 word paragraph pulling from public-domain literature
Hume AI voice/TTS session for reading practice feedbackVerified
Hume AI -- personable, easy to integrate TTS, and great for sentiment analysis; determines user's tone, expressiveness, and evaluates reader comprehension
Claimed on readmemedium confidencecomponents/Controls.tsx:3— Uses @humeai/voice-react useVoice/connect to start a live Hume voice sessioncomponents/ClientComponent.tsx:2— Wraps children in Hume VoiceProvider with configId and sessionSettings containing word/mode/paragraph variables and instructions telling the AI to judge pronunciationapp/easy/page.tsx:12— fetchAccessToken from 'hume' package used server-side to authenticate the voice session
Personal glossary / 'shelf' of learned words with definitionsVerified
Personal glossary to track your adventures (implied learning-progress tracking)
Claimed on readmehigh confidenceapp/shelf/page.tsx:20— Shelf page reads the signed-in user's Firestore doc and renders their saved words/definitions tablecomponents/prompt.tsx:51— prompt.tsx writes newly generated words/definitions into the user's Firestore doc via arrayUnion
React/Next.js frontend deployed on VercelVerified
React/Next.js -- a popular JS framework... Vercel -- easy deployment to the web
Claimed on readmehigh confidencepackage.json— Next.js/React app structure with app/ router pages (page.tsx, layout.tsx) throughout the reponext.config.mjs— Standard Next.js config present; public/vercel.svg asset suggests intended Vercel deployment, though no vercel.json or deployment-specific config was found
Three core skills: diction, sentence structure variety, expressiveness (easy/medium/hard modes)Verified
We have identified three core skills to be problematic: diction, sentence structure variety, and expressiveness
Claimed on readmehigh confidenceapp/easy/page.tsx:1— Easy mode generates single vocabulary words (diction)app/medium/page.tsx:1— Medium mode ('Varied Valleys') targets sentence structureapp/hard/page.tsx:27— Hard mode ('Intense Infernos') generates paragraphs for expressive readingapp/levels/page.tsx:39— LevelCard entries map Word Wonderland/Varied Valleys/Intense Infernos to /easy, /medium, /hard
Choose-your-own-adventure style branching text adventuresCode-supported
We brought choose your own adventure back! In the form of guided text adventures... customize your text adventures
Claimed on Devpostlow confidenceapp/page.tsx:30— Landing page lists 'customize your text adventures' as a feature bullet, and levels page frames easy/medium/hard as thematic 'worlds', but the actual implementation only generates isolated words/sentences/paragraphs for pronunciation practice via Gemini+Hume — no branching narrative, choice points, or adventure state machine were found in the code
Microphone-based reading practice ('turn on your mic')Code-supported
Turn on your mic and get ready to read some words!
Claimed on readmemedium confidencecomponents/Controls.tsx:15— connect() from Hume's useVoice starts a voice session, which implies mic capture, but no explicit getUserMedia/mic permission code is visible in this repo (likely handled inside @humeai/voice-react library, not directly verifiable here)
Unlimited custom themes/topics for lessonsCode-supported
Using Google Gemini's AI prompts, kids have an unlimited amount of themes to interact and learn from
Claimed on readmemedium confidenceapp/levels/page.tsx:54— UI lets a signed-in user submit a free-text theme, saved via updateDoc to the user's Firestore 'theme' fieldcomponents/prompt.tsx:1— prompt.tsx and gemini.ts take a 'proompt'/instruction but the stored theme is not visibly wired into the Gemini prompt call in the excerpts reviewed, so end-to-end theme-to-generation flow is unconfirmed
Cat assistant guiding pronunciation/readingClaimed only
With the help of our cat assistant, you can learn how to read passages expressively and eloquently
Claimed on Devpostmedium 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.