Content Repurposer

A modern web application that helps users repurpose their content across different social media platforms using AI. Built with Next.js, TypeScript, and Tailwind CSS.

Features

• Multi-Platform Content Generation: Create content optimized for various platforms including LinkedIn, Twitter, TikTok, and YouTube
• Custom Input Methods: Support for direct text input and URL-based content extraction
• Smart Content Adaptation: AI-powered content transformation that maintains the core message while adapting to platform-specific requirements
• Interactive UI: Modern, responsive interface with real-time feedback and loading states
• Content Management: Easy copy and regeneration of content with custom instructions
• Metadata Display: View important content metadata including source, language, and content type

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: Tailwind CSS 4
• UI Components: Radix UI primitives with custom styling
• Icons: Lucide React
• State Management: React Hooks
• Build Tool: Turbopack

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/content-ai-demo.git
   cd content-ai-demo

2. Install dependencies:

   npm install
   # or
   yarn install

3. Create a .env file in the root directory and add your environment variables:

   NEXT_PUBLIC_API_URL=your_api_url_here
   

4. Start the development server:

   npm run dev
   # or
   yarn dev

The application will be available at http://localhost:3000.

Project Structure

src/
├── app/                 # Next.js app router pages
├── components/          # Reusable UI components
│   ├── ui/             # Base UI components
│   └── ...             # Feature-specific components
├── hooks/              # Custom React hooks
├── types/              # TypeScript type definitions
├── config/             # Configuration files
└── lib/                # Utility functions

Key Components

• ContentDisplay: Main component for displaying and managing repurposed content
• InputMethodSelector: Component for selecting input method (text, URL, etc.)
• useContentRepurposer: Custom hook for managing content repurposing logic
• Toaster: Toast notification system for user feedback

Development

Available Scripts

• npm run dev: Start development server with Turbopack
• npm run build: Build the application for production
• npm run start: Start the production server
• npm run lint: Run ESLint for code linting

Code Style

• Follows ESLint configuration for code quality
• Uses TypeScript for type safety
• Implements responsive design principles
• Follows component-based architecture

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Built with Next.js and React
• Styled with Tailwind CSS
• Icons by Lucide
• UI components by Radix UI

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.