LinkedIn Content Creator

An AI-powered application for generating and scheduling engaging LinkedIn posts. Built with React, TypeScript, and powered by Google's Gemini AI.

Features

• AI Content Generation - Generate professional LinkedIn posts using Gemini AI
• Multiple Content Types - Create text posts, image posts, and carousel/document posts
• Smart Research - AI researches topics and best practices before generating content
• Content Calendar - Schedule and manage your posts with an intuitive calendar view
• AI Planner - Plan multiple posts at once with intelligent scheduling
• Batch Generation - Generate multiple post variations simultaneously
• Profile Customization - Configure your brand voice, target audience, and content preferences
• Dark/Light Mode - Full theme support for comfortable viewing
• LinkedIn Integration - Direct posting to LinkedIn via OAuth

Tech Stack

• Frontend: React 18, TypeScript, Tailwind CSS
• AI: Google Gemini API
• Build: Vite
• Testing: Playwright (E2E)
• Backend: Express.js (OAuth proxy server)

Installation

1. Clone the repository

   git clone https://github.com/AgriciDaniel/linkedin-content-creator.git
   cd linkedin-content-creator
   

2. Install dependencies

   npm install
   

3. Configure environment variables

   Copy .env.example to .env and fill in your API keys:

   cp .env.example .env
   

4. Required API Keys

   Service	Required	Purpose	Get it from
   Gemini API	Yes	AI content generation	Google AI Studio
   LinkedIn OAuth	Yes	Post to LinkedIn	LinkedIn Developers
   Firecrawl API	Optional	Web research	Firecrawl

Configuration

Gemini API Key

Add your Gemini API key in the app's Settings panel, or set it in .env.local:

GEMINI_API_KEY=your_gemini_api_key

LinkedIn OAuth Setup

1. Create an app at LinkedIn Developers
2. Add these OAuth 2.0 redirect URLs:
   • http://localhost:5000 (main app)
   • http://localhost:5001 (OAuth proxy server)
3. Request the following permissions:
   • openid
   • profile
   • w_member_social
4. Copy your Client ID and Client Secret to .env

Usage

Development

# Start the development server
npm run dev

# Start with OAuth proxy server (for LinkedIn posting)
npm run dev:full

Production Build

npm run build
npm run preview

Testing

# Run all E2E tests
npm run test:e2e

# Run tests with UI
npx playwright test --headed

# Run specific test file
npx playwright test e2e/app.spec.ts

Project Structure

├── components/        # React components
├── services/          # API and business logic services
├── e2e/              # Playwright E2E tests
├── server/           # OAuth proxy server
├── public/           # Static assets
└── types/            # TypeScript type definitions

Testing Coverage

The app includes comprehensive E2E tests:

• 100 integration tests covering UI, storage, calendar, and scheduling
• 3 live generation tests for real API testing (requires API keys)

---

Attribution

App created by Agrici Daniel

Community

Join our community for tips, updates, and support:

AI Marketing Hub Pro

License

MIT License - see LICENSE for details.

---

Author

Built by Agrici Daniel - AI Workflow Architect.

• Blog - Deep dives on AI marketing automation
• AI Marketing Hub - Free community, 2,800+ members
• YouTube - Tutorials and demos
• All open-source tools