https://github.com/trups39/ai-story-builder
AI powered story builder SaaS app to create and share imaginative stories with AI-driven content and real-time image generation.
https://github.com/trups39/ai-story-builder
gemini-api nextjs react replicate-api typescript
Last synced: 4 months ago
JSON representation
AI powered story builder SaaS app to create and share imaginative stories with AI-driven content and real-time image generation.
- Host: GitHub
- URL: https://github.com/trups39/ai-story-builder
- Owner: Trups39
- Created: 2024-11-06T18:49:16.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-11-06T21:44:28.000Z (8 months ago)
- Last Synced: 2025-01-04T19:21:34.889Z (6 months ago)
- Topics: gemini-api, nextjs, react, replicate-api, typescript
- Language: TypeScript
- Homepage:
- Size: 17.2 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AI Kids Story Generator App
## Overview
The **AI Kids Story Generator** app enables users to create kids' stories with the help of AI. It integrates technologies such as React, Next.js, NextUI, TypeScript, and provides a seamless experience for generating stories and images based on user inputs. The app incorporates a credit system to manage story creation.
## Features
- **Landing Page**: Login/signup screen with Clerk authentication.
- **Dashboard**: View and manage stories, track credits, and user statistics.
- **Story Creation**: Form to input story details like subject, type, age group, and image style.
- **AI Integration**: Generates stories using the Gemini AI API and images using the Replicate API.
- **Credit System**: Allows for the limitation of story generation and the option to purchase more credits.
## Prerequisites
- Knowledge of JavaScript and React.
- Node.js and npm installed.
- Familiarity with TypeScript (optional).
- GitHub account.
## Setup
### 1. Create Next.js Project:
```bash
npx create-next-app@latest --typescript
```
### 2. Install NextUI:
To install NextUI in your project, run the following command:
```bash
npm install @nextui-org/react
```
### 3. Initialize Clerk Authentication:
Follow the Clerk documentation for setting up authentication in your app.
## Designing the App
### Landing Page
- **Description**: A login/signup screen to authenticate users.
- **Technology**: Clerk for user authentication.
### Dashboard
- **Description**: View stories, credits, and user statistics.
- **Features**:
- Track user credits.
- View list of generated stories.
- See personal user statistics.
### Story Creation Form
- **Inputs for**:
- **Subject**: The main theme of the story.
- **Type**: Type of the story (e.g., adventure, fantasy).
- **Age Group**: Intended age range for the story (e.g., 3-5, 6-8).
- **Image Style**: Style of images to accompany the story (e.g., cartoon, realistic).
### Story Viewer
- **Description**: Display generated stories for the user to read and view.
- **Features**:
- Display the text story generated by the Gini AI API.
- Show related images generated by the Replicate API.
## AI Integration
### Gemini AI API
- **Description**: Use Gemini AI to generate text stories based on user input.
- **Integration**: The AI generates stories using subject, type, age group, and image style.
### Replicate API
- **Description**: Generate images that correspond to the stories using Replicate API.
- **Integration**: Use the story data (subject, type) to generate appropriate images using Replicate.
## User Authentication
- **Description**: Use Clerk for user sign-in and registration.
- **Features**:
- Protect routes and check authentication status in your app.
- Ensure that only authenticated users can create stories.
## Dashboard
- **Description**: Display story statistics, credits, and a list of generated stories.
- **Features**:
- Implement pagination for easy navigation through the user's created stories.
- Show credits balance and usage history.
## Story Creation Workflow
### Input
- **Description**: The user provides details such as:
- Subject
- Type
- Age group
- Image style
### Credit Check
- **Description**: Verify the user's available credits to generate a new story.
- **Logic**: Ensure that users have sufficient credits before initiating story generation.user can buy credits with paypal
### Story Generation
- **Description**: Generate the story using AI and deduct credits from the user account.
- **Process**:
- Call the Gemini API to create a story.
- Call Replicate API to generate an image.
- Deduct credits after successful generation.