StoryTeller
Interactive choice-based storytelling with feature flags! Explore branching narratives, use AIStoryTeller with Grok API for custom tales with text-to-speech, and manage via Flagsmith.
Videos
Description
I set out to build StoryTeller, an interactive choice-based storytelling app, where I could weave tales with the magic of feature flags. Inspired by dynamic content delivery, I crafted a world where users shape their own narratives. Later, I unleashed AIStoryTeller, my proudest creation, powered by the Grok API, bringing custom stories to life with text-to-speech narration.
The Features I Forged
Interactive Stories: I designed branching paths for adventurers to choose their destiny.
Feature Flag Integration: I harnessed Flagsmith to toggle features in real-time.
Admin Dashboard: I built a control panel for admins to wield power over the experience.
Dynamic Theming: I added theme shifts tied to story moods, when enabled.
Responsive Design: I ensured the tale shines on desktops and mobiles.
AIStoryTeller: I crafted a floating chatbot that conjures unique stories with medieval, futuristic, or horror themes, read aloud with a voice.
The Tools I Wielded
I forged this with:
React and TypeScript, my languages of choice.
Vite, speeding my development and builds.
React Router, guiding the narrative paths.
Tailwind CSS, styling the realm’s beauty.
Shadcn UI, providing my component arsenal.
Flagsmith, managing my feature flag spells.
Grok API, fueling my AI storytelling magic.
My Quest to Bring It to Life
What I Needed
Node.js (v16 or higher), my coding elixir.
npm or yarn, my trusty tools.
How I Built It
I gathered my resources:
bash
CollapseWrapCopy
npm install # or yarn installI unlocked the secrets with a .env file:
VITE_FLAGSMITH_ENVIRONMENT_ID=your_flagsmith_environment_id VITE_GROQ_API_KEY=your_groq_api_key VITE_FLAGSMITH_PROJECT_ID= VITE_FLAGSMITH_API_KEY=I sparked the magic:
npm run dev # or yarn dev
The Flags I Mastered
I used Flagsmith to control these powers:
Flag Name | What It Does |
|---|---|
enable_dynamic_themes | Lets me shift themes with the story’s mood |
use_first_person_narrative | Puts the hero in their own voice |
enable_detective_story | Unlocks a mystery tale I crafted |
enable_story_sharing | Lets users share my tales |
is_admin | Grants access to my admin sanctum |
Setting Up My Flagsmith Realm
I joined flagsmith.com and claimed my account.
I created a project and environment.
I inscribed the feature flags above.
I sealed the environment ID in my .env file.
The Realm I Structured
/src
/components # My village of UI components
/admin # My admin’s keep
/feature-flags # My flagsmith’s forge
/layout # My castle walls
/stories # My tale-weaver’s hall
/ui # My artisan’s tools
/contexts # My sacred contexts
/lib # My wizard’s grimoire
/types # My scrolls of type
The Spells I Cast
npm run dev - I ignited my development flame
npm run build - I forged my production relic
npm run preview - I gazed upon my crafted world
Progress During Hackathon
90