StoryWeaver is a full-stack web application built with Next.js, Tailwind CSS, Firebase, and Google Generative AI that preserves dying local dialects and oral histories by transforming spoken stories into translated, culturally explained, searchable digital archives.
🧵 “When languages fade, stories shouldn’t.”
- Problem Statement
- Solution Overview
- Key Features
- Tech Stack
- System Architecture
- Application Workflow
- Project Structure
- Database Design
- AI & Prompting Strategy
- Privacy & Ethics
- Installation & Setup
- Future Scope
Many regional dialects and folk traditions exist only in spoken form, passed down orally through elders.
Due to globalization, migration, and lack of documentation, these voices are disappearing rapidly.
Current tools:
- Translate words, not cultural meaning
- Ignore idioms, emotions, and traditions
- Do not preserve oral storytelling
Once these voices are lost, cultural heritage disappears forever.
StoryWeaver provides a simple and inclusive platform where users can:
- Record stories in their native dialect
- Convert speech to text using AI
- Translate dialects into English/Hindi
- Generate cultural explanations & summaries
- Store stories in a searchable digital archive
The result is a living, community-driven cultural library.
- 🎙️ Browser-based Audio Recording
- 📝 Dialect Speech-to-Text Transcription
- 🌐 Context-Aware Translation
- 🧠 Cultural & Idiom Explanation (Gemini AI)
- 📚 Searchable Story Archive
- 🎨 Clean UI with Tailwind CSS
- 🔒 Secure Storage with Firebase
- Next.js (App Router)
- React
- Tailwind CSS
- Web Audio API
- Next.js API Routes (no separate server)
- Firebase Firestore – story metadata & text
- Firebase Cloud Storage – audio files
- Google Cloud Speech-to-Text API (v2)
- Gemini 1.5 Pro (Vertex AI)
User (Browser)
↓
Next.js Frontend (React + Tailwind)
↓
Next.js API Routes
├── Firebase Storage (Audio Files)
├── Firestore (Story Data)
├── Speech-to-Text API
└── Gemini AI (Translation + Cultural Context)
- User records a story via the browser
- Audio is uploaded to the backend
- Audio is stored in Firebase Cloud Storage
- Speech-to-Text converts dialect speech to text
- Gemini AI:
- Translates the story
- Explains idioms & traditions
- Generates a summary
- Processed data is saved in Firestore
- Story becomes searchable and viewable
storyweaver/
├── app/
│ ├── api/ # Backend (Next.js API routes)
│ │ ├── upload/
│ │ │ └── route.js # Upload audio + AI processing
│ │ │
│ │ ├── stories/
│ │ │ └── route.js # Get all stories
│ │ │
│ │ └── story/
│ │ └── [id]/
│ │ └── route.js # Get single story
│ │
│ ├── record/
│ │ └── page.js # Record story page
│ │
│ ├── stories/
│ │ ├── page.js # Stories list page
│ │ └── [id]/
│ │ └── page.js # Story details page
│ │
│ ├── layout.js # Root layout (Navbar, Tailwind)
│ ├── page.js # Home / landing page
│ └── globals.css # Tailwind base styles
│
├── components/
│ ├── ui/ # Reusable Tailwind UI components
│ │ ├── Button.jsx
│ │ ├── Card.jsx
│ │ └── Badge.jsx
│ │
│ ├── AudioRecorder.jsx # Mic recording logic + UI
│ ├── StoryCard.jsx # Story preview card
│ ├── StoryPlayer.jsx # Audio playback
│ ├── Navbar.jsx # Top navigation bar
│ └── Loader.jsx # Loading spinner
│
├── lib/ # Core logic & integrations
│ ├── firebase.js # Firebase initialization
│ ├── firestore.js # Firestore CRUD helpers
│ ├── storage.js # Firebase Storage helpers
│ ├── speechToText.js # Google Speech-to-Text logic
│ └── gemini.js # Gemini AI logic
│
├── hooks/
│ └── useRecorder.js # Custom audio recording hook
│
├── public/
│ └── logo.png # Static assets
│
├── .env.local # Environment variables
├── tailwind.config.js
├── postcss.config.js
├── next.config.js
├── package.json
└── README.md
Collection: stories
| Field | Type | Description |
|---|---|---|
| title | string | Story title |
| dialectText | string | Original transcription |
| translatedText | string | English/Hindi translation |
| culturalNotes | string | Cultural explanations |
| summary | string | AI-generated summary |
| region | string | Region of origin |
| language | string | Dialect/language |
| audioUrl | string | Firebase Storage URL |
| createdAt | timestamp | Upload time |
Gemini is used for reasoning, not just translation.
Prompt Example:
You are a cultural linguist and historian.
Translate the following dialect story into English.
Preserve emotional tone.
Explain idioms, traditions, and cultural references.
Provide a short summary.
This enables meaning-preserving translations, not literal ones.
- Explicit consent before recording
- Option to keep stories private
- No biometric identification
- Secure cloud storage
- Community ownership of content
- Node.js (v18+)
- Firebase Project
- Google Cloud Project with:
- Speech-to-Text API enabled
- Vertex AI (Gemini) enabled
git clone https://github.com/Diksha8-db/StoryWeaver.git
npm install
npm run dev
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
GOOGLE_APPLICATION_CREDENTIALS=
GEMINI_API_KEY=- Offline-first PWA support
- Mobile app version
- School curriculum integration
- Dialect learning modules
- Government cultural archives
- Multi-language subtitles
- Real-world social impact
- Strong Generative AI integration
- Clean full-stack architecture
- Easy live demonstration
- Scalable and inclusive design
StoryWeaver — Preserving culture, one story at a time.