Build a Story Time is an interactive, AI-powered personalized storybook platform designed to bring stories to life. It allows users to create unique storybooks where they can narrate the story with their own voice and feature themselves or their loved ones as characters in the illustrations. This platform empowers imagination, making storytelling a personal and magical experience.

• AI-Powered Generation: Create stories based on customizable preferences including genre, style, language, and character names.
• Voice Cloning & Recording: Record your own voice to narrate the story.
• Face Personalization: Upload a photo to map your face onto the story's characters, creating a truly immersive experience.
• EPUB Generation: Generate and download storybooks in EPUB format for offline reading.

• Ghibli-Style Illustrations: Beautiful, high-quality illustrations generated in a whimsical Ghibli art style.
• Interactive Viewer: A page-by-page story viewer with integrated voice playback for a read-along experience.
• Real-time Preview: See your story come to life as you create it.

• My Orders: Track your purchased books and order history.
• Product Catalog: View available storybook products and formats.
• Secure Payments: Integrated payment processing for seamless transactions.

• User Dashboard: Manage your profile, view order history, and access your created stories.
• Admin Dashboard: Comprehensive control panel for administrators.
  • Overview: View total users, orders, revenue, and story statistics.
  • Management: Manage users, orders, and content.
  • Revenue Tracking: Visual charts and data tables to monitor business performance.

The core of the platform is the Create Your Book feature, a sophisticated multi-step wizard that leverages AI to generate personalized storybooks.

1. Story Configuration

   • Users define the Title, Language, Genre, and Writing Style.
   • These parameters guide the LLM in generating a culturally and stylistically appropriate narrative.

2. Character Design & Visualization

   • Users add characters to the story.
   • Reference Image: Users can upload a photo of themselves or a loved one.
   • Vision Analysis: The backend uses Grok Vision (/image/ghibli endpoint) to analyze the uploaded photo and extract facial features, hair style, and clothing.
   • Generative AI: A custom prompt is built to preserve identity while applying a Ghibli-inspired art style, ensuring characters look consistent and magical.

3. Story Generation

   • Endpoint: POST /story/generate
   • The backend accepts the configuration and character list.
   • LLM Integration: An LLM generates the full story text.
   • Chapter Splitting: The system automatically parses the generated text into distinct chapters (default: 4 chapters) for pagination.

4. Automated Illustration (Async)

   • Once the story is saved, a background process triggers image generation for each chapter.
   • Contextual Prompts: Prompts are dynamically constructed using the chapter summary and character descriptions to ensure scene consistency.
   • Style consistency: The "Ghibli" style token is enforced across all illustrations.

5. Voice Cloning & Narration (Optional)

   • Endpoint: POST /voice/clone (implied)
   • Users can record a short sample of their voice.
   • The system clones the voice and generates audio narration for each chapter, allowing the book to be "read" by the user even when they aren't there.

6. Final Compilation

   • The book is compiled into an interactive digital format.
   • Users can also generate an EPUB file for download.

This project is built with a modern, high-performance technology stack:

• Frontend Framework: Next.js 16 (App Router)
• Language: TypeScript
• UI Library: React 19
• Styling: Tailwind CSS 4 & Shadcn UI
• State Management: TanStack Query (React Query)
• Form Handling: React Hook Form & Zod
• Authentication: NextAuth.js
• HTTP Client: Axios
• File Generation: epub-gen-memory (EPUB creation)
• Icons: Lucide React & React Icons

src/
├── app/                 # Next.js App Router pages and layouts
│   ├── (auth)/          # Authentication routes (login, register, etc.)
│   ├── (website)/       # Public website routes (home, create-book, search-book, etc.)
│   ├── dashboard/       # Protected user/admin dashboard routes
│   └── api/             # API route handlers
├── components/          # Reusable UI components
│   ├── ui/              # Shadcn UI primitive components
│   ├── dashboard/       # Dashboard-specific components
│   └── website/         # Website-specific components
├── lib/                 # Utility functions and configurations
│   ├── api.ts           # API service layer
│   ├── utils.ts         # Helper functions
│   └── types.ts         # TypeScript type definitions
└── hooks/               # Custom React hooks

Follow these steps to set up the project locally.

• Node.js: Version 20 or higher is recommended.
• npm or yarn: Package manager.

1. Clone the repository:

   git clone <repository-url>
   cd sahara_53

2. Install dependencies:

   npm install
   # or
   yarn install

3. Environment Setup: Create a .env.local file in the root directory and configure the necessary environment variables.

   NEXT_PUBLIC_API_URL=http://localhost:3000/api
   # Add other necessary variables (e.g., NextAuth secret)

4. Run the development server:

   npm run dev

   Open http://localhost:3000 with your browser to see the result.

• npm run dev: Starts the development server.
• npm run build: Builds the application for production.
• npm run start: Starts the production server.
• npm run lint: Runs ESLint to check for code quality issues.

Contributions are welcome! Please feel free to submit a Pull Request.

This project is licensed under the MIT License.