StorySpark ✨

StorySpark brings storytelling to life for children with an interactive web application featuring AI-narrated adventures. Designed for young users, the platform allows kids to choose a story, make decisions that shape the narrative, and listen as their unique tale is told through real-time, high-quality audio.

Live Link

---

Core Features

• Story Catalogue: A welcome screen presents users with a selection of available stories to begin their adventure.
• Interactive Narrative: The story progresses based on the user's choices, leading to different branches and outcomes.
• AI-Powered Narration: Leverages the Murf.ai API to convert story text into speech, providing an immersive audio experience.
• WebSocket Audio Streaming: Audio data is streamed directly to the client as it's generated, ensuring smooth and immediate playback.
• Responsive UI: A clean and simple interface built with React and Tailwind CSS that works on various screen sizes.

---

Technology Stack

The project is a monorepo containing two separate packages: a React frontend and a Node.js backend.

Backend (storyspark-server)

• Runtime: Node.js
• Server: Express.js
• Real-time Communication: ws (WebSockets)
• API Integration: Murf.ai for Text-to-Speech
• Environment Management: dotenv

Frontend (storyspark-client)

• Library: React
• Build Tool: Vite
• Styling: Tailwind CSS
• API Communication: Axios

---

Local Development Setup

To run this project on your local machine, please follow the steps below.

Prerequisites

• Node.js (version 18.x or higher)
• npm package manager
• A valid API key from Murf.ai

Installation

1. Clone the Repository

   git clone [https://github.com/257divyanshu/storyspark.git](https://github.com/257divyanshu/storyspark.git)
   cd storyspark

2. Configure the Backend

   • Navigate to the server directory:

     cd storyspark-server

   • Install the required dependencies:

     npm install

   • Create a new file named .env in this directory. Add your Murf.ai API key to this file:

     # storyspark-server/.env
     MURF_API_KEY="YOUR_API_KEY_HERE"

3. Configure the Frontend

   • Navigate to the client directory from the project root:

     cd storyspark-client

   • Install the required dependencies:

     npm install

Running the Application

You will need two separate terminal windows to run both the backend and frontend services.

1. Start the Backend Server (Terminal 1)

   # In the storyspark-server/ directory
   npm start

   The server will start on http://localhost:3001.

2. Start the Frontend Application (Terminal 2)

   # In the storyspark-client/ directory
   npm run dev

   The Vite development server will start. Open your web browser to the URL it provides (usually http://localhost:5173).

The frontend is configured with a proxy, so all API and WebSocket requests will be correctly forwarded to your local backend server.

---

Deployment

This application was successfully deployed on Render.

• The backend is deployed as a Web Service.
• The frontend is deployed as a Static Site.

Environment variables were configured in the Render dashboard to manage the Murf API key and the production URLs for the client and server to communicate.