Captune is a lightweight, AI-powered caption generator for Instagram, TikTok, and LinkedIn — built with React and deployed on Vercel.
It focuses on clean UX, accessibility, and safe server-side API handling.
Live Demo:
GitHub: LevinKooss/Captune
| Input Screen | Result Screen |
|---|---|
 |
 |
- Platform-specific tones for Instagram, TikTok, and LinkedIn
- Generate, regenerate (single or all), copy, and delete captions
- Clipboard feedback + toast message system
- Responsive dark UI (Poppins font, card layout)
- Accessible by design (
aria-live, keyboard navigation, color contrast) - Secure API key handling — never exposed in the client
- Frontend: React (Vite)
- Backend: Vercel Serverless Functions
- AI: OpenAI
gpt-4o-mini(JSON response mode) - Styling: CSS variables + responsive media queries
# 1. Install dependencies
npm install
# 2. Add your OpenAI API key (do NOT commit this file)
echo OPENAI_API_KEY=sk-... > .env.local
# 3. Start dev server
npm run dev
Optional (for Vercel testing):
npx vercel dev
---
🚀 Deployment on Vercel
Push the project to GitHub
Import the repo into Vercel
Framework: Vite
Add environment variable:
OPENAI_API_KEY → apply to both Preview and Production
Click Deploy
---
🧩 API Overview
Endpoint: POST /api/generate
Request body:
{
"platform": "instagram | tiktok | linkedin",
"description": "string",
"n": 5
}
Response:
{
"items": [
{
"hook": "string",
"caption": "string",
"hashtags": ["#tag1", "#tag2"]
}
]
}
Error handling:
405 → Wrong method (use POST)
500 → Missing or invalid API key
502 → OpenAI API error
---
🧱 Design Principles
Secure: API key and requests handled only on the server
Consistent: All OpenAI responses validated with response_format: json_object
Accessible: aria-live updates and keyboard focus states
User-friendly: Subtle animations, hover states, and smooth transitions
---
🗺️ Roadmap
Add custom tone adjustments per platform
Integrate icons for better visual feedback
Rate limit + API timeout UX handling
Multi-language (EN / DE)
Optional light theme
---
📄 License
MIT © 2025 Levin Kooss
---
This version reads cleanly to **recruiters or dev leads**, matches your actual stack, and positions the project as a **real, production-ready learning build**.
Would you like me to add a **short “About the Developer”** section at the end (for portfolio credibility)? That helps when people visit your GitHub.