AI Content Generator 📝
A content creation tool powered by Gemini 2.0 Flash that generates SEO-friendly text in different tones. Built with Next.js, TypeScript, and Tailwind CSS for smooth and responsive UX.
Next.jsTypeScriptTailwind CSSGemini APIshadcn/ui
Key Features
- Generates content dynamically using Google Gemini 2.0 Flash API.
- Supports multiple tones — Informative, Casual, Professional, and Fun.
- Copy-to-clipboard functionality with toast feedback using shadcn/ui.
- Modern and responsive UI built with Tailwind CSS and Framer Motion animations.
- Reusable component structure for easy scalability.
Challenges
- Designing a clean prompt flow for Gemini API while maintaining good UX.
- Managing dynamic tone selection and integrating it with real-time API calls.
- Creating a consistent and reusable UI component system using shadcn/ui.
What I Learned
- Learned how to connect Gemini API to custom UI elements in Next.js.
- Practiced modular component design and improved UI/UX skills.
- Enhanced understanding of user feedback systems (toasts, loaders, copy button).
- Gained deeper experience in structuring reusable frontend logic with TypeScript.