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:

npx create-next-app@latest --typescript

2. Install NextUI:

To install NextUI in your project, run the following command:

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.