Logo

🎭 VibeWrite - AI Content Studio

Inspiration

The inspiration for VibeWrite came from a simple yet universal struggle: finding the right tone in written communication. Whether it's a student crafting a professional email, a marketer writing social media posts, or a professional drafting a formal proposal—we've all spent too much time staring at a blank screen, trying to "sound right."

I wanted to build a tool that democratizes tone transformation—making professional, casual, funny, or any style accessible to everyone with just a click. The name "VibeWrite" captures the essence: writing with the perfect vibe, every time.

"Communication is not about what you say, but how you say it."

What it does

VibeWrite is an AI-powered content studio that rewrites any text into your desired tone or style.

Core Features:

Feature	Description
6 Preset Tones	Professional, Casual, Funny, Inspirational, Formal, Friendly
Custom Persona	Write your own instruction (e.g., "like a pirate", "as Elon Musk")
Auto-Detect	AI automatically detects the tone of your input text
Multi-Language	Support for 10+ languages (English, Spanish, French, Hindi, Japanese, etc.)
Diff Highlighter	Visual comparison: 🟢 green = added words, 🔴 red strikethrough = removed words
Export Formats	Download as .txt or polished PDF
Read Aloud	Text-to-speech for accessibility
History	Saves last 20 rewrites locally (privacy-first)
Keyboard Shortcuts	`Ctrl+Enter` to rewrite, `Escape` to clear

How It Works:

Paste your text
Choose a tone or define a custom persona
Click Rewrite — AI transforms your text
Copy, Download, or Share your polished content

How I built it

🛠️ Tech Stack

Layer	Technology
Frontend	Next.js 15 (App Router) + TypeScript
Styling	Tailwind CSS + Glassmorphism
AI/LLM	Google Gemini API (2.0 Flash)
Deployment	Vercel
Icons	Lucide React
PDF Export	html2pdf.js
Diff Library	`diff` for word-by-word comparison
Notifications	react-hot-toast

🏗️ Architecture

┌─────────────────────────────────────────────────────────────┐
│                    User Browser                            │
│                                                           │
│  ┌─────────────────────┐      ┌──────────────────────┐   │
│  │   Landing Page      │ ──→ │   /rewrite Page      │   │
│  │   (app/page.tsx)    │      │   (app/rewrite/page.tsx)│   │
│  └─────────────────────┘      └──────────────────────┘   │
│                                          │               │
│                                          ▼               │
│  ┌─────────────────────────────────────────────────────┐  │
│  │              API Route (app/api/rewrite/route.ts)  │  │
│  │         ┌─────────────────────────────────┐        │  │
│  │         │  Prompt Engineering Logic       │        │  │
│  │         │  • Preset Tones                 │        │  │
│  │         │  • Custom Persona               │        │  │
│  │         │  • Auto-Detect                  │        │  │
│  │         │  • Multi-Language               │        │  │
│  │         └─────────────────────────────────┘        │  │
│  └─────────────────────────────────────────────────────┘  │
│                                          │               │
│                                          ▼               │
│  ┌─────────────────────────────────────────────────────┐  │
│  │              Google Gemini API                     │  │
│  │         (gemini-2.0-flash-exp)                    │  │
│  └─────────────────────────────────────────────────────┘  │
│                                                           │
│  ┌─────────────────────────────────────────────────────┐  │
│  │              localStorage (Browser)                │  │
│  │         • History of rewrites                      │  │
│  │         • Dark mode preference                     │  │
│  └─────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────┘

🔬 Key Technical Highlights

1. Custom Persona Injection Instead of being limited to preset tones, users can inject any custom instruction. The API dynamically builds prompts:

// Prompt Engineering Logic
if (isCustom) {
  prompt = `Rewrite the following text ${tone}...`;
} else if (tone === 'auto') {
  prompt = `Analyze and detect tone...`;
} else {
  prompt = `Rewrite in a ${tone} tone...`;
}

2. Diff Highlighter Algorithm Uses the diff library for word-by-word comparison:

const diffResult = Diff.diffWords(original, rewritten);
// Returns array of parts: { value: string, added?: boolean, removed?: boolean }

3. Privacy-First Design All history is stored in localStorage — no data is sent to any server except the Gemini API.

Challenges I ran into

1. 🧪 Gemini API Integration

Challenge: Getting the API to consistently return well-formatted responses, especially for "Auto-Detect" mode.

Solution: Designed robust prompt templates with explicit formatting instructions. Implemented error handling with fallback messages.

2. 🎨 Diff Highlighter Accuracy

Challenge: Making the diff view clean and readable, especially with punctuation and special characters.

Solution: Used the diff library's diffWords method and designed a visual system with color highlights:

🟢 Green = Added words
🔴 Red strikethrough = Removed words

3. 🌍 Multi-Language Support

Challenge: Ensuring prompts work correctly across 10+ languages without breaking.

Solution: Created a language mapping system and modified prompts dynamically based on selected language.

4. 🚀 Vercel Deployment

Challenge: Build failing due to missing next in package.json.

Solution: Added next to dependencies and configured vercel.json for explicit settings.

5. 📱 Mobile Responsiveness

Challenge: Making the complex UI work on small screens while maintaining functionality.

Solution: Used Tailwind's mobile-first approach with responsive breakpoints (xs:, sm:, md:, lg:).

Accomplishments that I'm proud of

🏆 Technical Achievements

14+ Features seamlessly integrated
- 6 Tones + Custom Persona + Auto-Detect
- Multi-Language + Diff Highlighter
- Export (TXT + PDF) + Read Aloud
- History + Keyboard Shortcuts + Dark Mode
Production-Ready Code
- TypeScript for type safety
- ESLint for code quality
- Tailwind CSS for responsive design
- Vercel for seamless deployment
Beautiful Apple-Inspired Design
- Glassmorphism UI
- Smooth animations
- Dark/Light mode
- Full responsiveness

🎯 User Experience Achievements

Metric	Result
Time to first rewrite	< 5 seconds
Feature discovery	Intuitive bento grid layout
Accessibility	Read Aloud + Keyboard Shortcuts
Privacy	Zero data stored on servers

📊 Project Scale

📁 25+ files
📝 ~500 lines of code (TypeScript + TSX)
⚡ ~1,000 lines of Tailwind CSS
🔌 8+ npm dependencies
🌐 Live on Vercel (99.9% uptime)

What I learned

💡 Technical Learnings

Prompt Engineering is an Art
- Small tweaks in prompts dramatically affect AI output quality
- Custom instructions must be clear and structured
Next.js App Router is Powerful
- Server components + API routes in one framework
- Seamless routing with dynamic imports
Vercel Deployment is a Game-Changer
- One command deployment: vercel --prod
- Environment variables make API keys secure
Accessibility Matters
- Keyboard shortcuts improve productivity
- Read Aloud makes tools inclusive
Responsive Design is Non-Negotiable
- Hackathon judges review on mobile devices
- Every feature must work on all screen sizes

🧠 Personal Learnings

"Vibe Coding" is Real
- AI-assisted development accelerates building
- Combining AI with human creativity creates better products
Planning > Hacking
- The 6-hour time-block strategy worked perfectly
- Preparation (pre-caching dependencies) saved 20+ minutes
Constraints Drive Creativity
- Limited time forced smart decisions
- Focused on MVP + high-impact features
Solo Development is Possible
- With the right tools and approach, one person can build a complete product
- Leverage AI, libraries, and cloud platforms

What's next for VibeWrite

🚀 Future Features (Post-Hackathon)

Feature	Description	Status
🔗 Social Sharing	Direct share to Twitter/LinkedIn	Planned
📊 Readability Score	Flesch-Kincaid readability analysis	Planned
🎨 More Tones	Sarcastic, Emotional, Technical, etc.	Planned
🔁 Bulk Processing	Rewrite multiple texts at once	Planned
🧠 Style Learning	Learn user's writing style	Future
🏢 Team Plan	Collaborative workspace	Future
📱 Mobile App	React Native / Flutter	Future

🔧 Technical Roadmap

Performance Optimization
- Implement React Server Components
- Lazy load heavy libraries (html2pdf.js)
Analytics
- Anonymous usage tracking (opt-in)
- Understand user behavior
API Key Rotation
- User-provided API keys for high-volume usage
- Rate limiting and quota management
Testing
- Add unit tests (Jest + React Testing Library)
- Add E2E tests (Playwright)

🌟 Vision

VibeWrite aims to become the go-to tool for instant tone transformation — helping students, professionals, and creatives communicate effectively across all contexts.

"Writing with the perfect vibe, every time."

🎯 Final Thoughts

Building VibeWrite in 4 days, under the constraints of an exam and bus travel, has been an incredible journey. This project demonstrates that AI-native "vibe coding" can produce production-ready applications in record time.

Key Takeaways: