Sports History Reels

An AI-powered application that generates short history reels for sports celebrities using OpenAI and presents them in a TikTok-style UI.

Features

• AI-generated scripts using OpenAI GPT-4
• Text-to-speech conversion using Amazon Polly
• Video generation with FFmpeg
• AWS S3 storage for videos
• TikTok-style vertical scroll UI
• Mobile-friendly design

Prerequisites

• Node.js 18+ and npm
• OpenAI API key
• AWS account with S3 access
• FFmpeg installed locally

Environment Variables

Create a .env.local file in the root directory with the following variables:

# OpenAI
OPENAI_API_KEY=your_openai_api_key

# AWS
AWS_REGION=your_aws_region
AWS_ACCESS_KEY_ID=your_aws_access_key_id
AWS_SECRET_ACCESS_KEY=your_aws_secret_access_key
AWS_S3_BUCKET=your_s3_bucket_name

Setting Up OpenAI API Key

1. Go to OpenAI's API Key Page.
2. Create a new API key.
3. Copy the key and paste it into your .env.local file as the value for OPENAI_API_KEY.

Installation

1. Clone the repository:

git clone <repository-url>
cd ai-sports

2. Install dependencies:

npm install

3. Set up environment variables:

• Copy .env.example to .env.local
• Fill in your API keys and credentials

4. Run the development server:

npm run dev

Project Structure

src/
├── app/                 # Next.js app directory
│   ├── api/            # API routes
│   └── page.tsx        # Main page
├── components/         # React components
│   ├── Reel.tsx       # Individual reel component
│   └── ReelFeed.tsx   # Reel feed component
└── utils/             # Utility functions
    └── videoGenerator.ts  # Video generation utilities

API Routes

• GET /api/reels - Get list of available reels
• POST /api/reels/generate - Generate a new reel

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a new Pull Request

License

MIT

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

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

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.