🎨 Testimonial Studio

Create beautiful testimonial cards for your clients in just a few clicks.

✨ Features

📝 Intuitive Editor

• Client Name — add the testimonial author name
• Role / Company — add position and company
• Review Text — full customer testimonial
• Rating — clickable 1–5 stars
• Profile Image — upload from device or paste an external URL

🎭 8 Graphic Templates

Template	Style	Best for
Minimal	Clean, white, accent bar	Business, corporate
Dark	Dark gradient with glow effects	Tech, SaaS
Social	Social-card style with badge	Instagram, Facebook
Gradient	Colorful gradient background	Brand-led, fashion
Elegant	Serif typography, luxury feel	Premium, luxury
Modern	Geometric shapes and accents	Startups, modern brands
Glass	Glassmorphism and blur effects	Modern UI design
Neon	Cyberpunk-style neon glow	Gaming, tech

📐 6 Social Formats

Format	Ratio	Use case
Auto	Adaptive	Default
Square	1:1	Instagram post
Portrait	4:5	Instagram feed
Story	9:16	Instagram / TikTok stories
Landscape	16:9	Twitter, LinkedIn, YouTube
Wide	2:1	Twitter header

🔤 Google Fonts

A wide selection of Google Fonts is available, including Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Playfair Display, Merriweather, Lora, Nunito, Quicksand, Rubik, Work Sans, DM Sans, Space Grotesk, Outfit, and Plus Jakarta Sans.

🌍 Multi-language Support

Flag	Language
🇮🇹	Italian
🇬🇧	English
🇪🇸	Spanish
🇫🇷	French
🇩🇪	German
🇧🇷	Portuguese
🇯🇵	Japanese
🇨🇳	Chinese

📥 Export Options

Format	Description
PNG	High-resolution export (3x pixel ratio)
SVG	Vector export, infinitely scalable
ZIP	Batch export of saved cards
JSON	Save / load full configuration

🔗 Sharing & API

• Shareable Link — generate a URL with all card parameters
• Web Share API — share directly to supported apps on mobile
• URL-based API — embed and generate cards through URL params
• JSON export/import — save/load configuration like a lightweight cloud backup

🎨 Customization

• Color picker — choose any accent color
• Preset colors — quick color palette options
• Live preview — instant visual feedback
• Responsive — works on desktop and mobile

---

🚀 Quick Start

# Clone the repository
git clone https://github.com/your-username/testimonial-studio.git
cd testimonial-studio

# Install dependencies
npm install

# Start dev server
npm run dev

# Production build
npm run build

---

📦 Main Dependencies

Package	Purpose
react	UI framework
vite	Build tool
tailwindcss	Styling
html-to-image	PNG/SVG export
jszip	ZIP batch export
file-saver	File downloads
lucide-react	Icons

---

🌐 Deploy on Vercel

Option 1: CLI (30 seconds)

npm i -g vercel
vercel

Option 2: Dashboard (1 minute)

1. Push the project to GitHub
2. Open vercel.com/new
3. Import the repository
4. Click Deploy ✅

---

🔌 URL-based API

You can generate cards using URL parameters:

https://your-domain.com/?name=Maria%20Rossi&role=CEO%2C%20TechCorp&text=Excellent%20service!&rating=5&template=dark&format=square&font=Poppins&color=ec4899&lang=en

Supported parameters

Param	Description	Example
name	Client name	Maria Rossi
role	Role / company	CEO, TechCorp
text	Review text	Excellent service!
rating	Stars (1–5)	5
image	Image URL	https://...
template	Template name	minimal, dark, etc.
format	Card format	auto, square, etc.
font	Google font	Inter, Poppins, etc.
color	Hex color (without #)	6366f1
lang	Language	it, en, es, etc.

---

📁 Project Structure

testimonial-studio/
├── src/
│   ├── components/
│   │   ├── Editor.tsx          # Full editing UI
│   │   ├── Preview.tsx         # 8 templates rendering
│   │   ├── TemplateSelector.tsx
│   │   ├── FormatSelector.tsx
│   │   ├── ImagePicker.tsx
│   │   ├── PresetManager.tsx
│   │   ├── SavedCardsManager.tsx
│   │   ├── KeyboardShortcutsModal.tsx
│   │   └── StarRating.tsx
│   ├── hooks/
│   │   ├── useHistory.ts
│   │   ├── useKeyboardShortcuts.ts
│   │   ├── useLocalStorage.ts
│   │   └── usePersistedState.ts
│   ├── i18n/
│   │   └── translations.ts     # 8 languages
│   ├── types/
│   │   └── index.ts            # Types + URL helpers
│   ├── utils/
│   │   ├── cn.ts
│   │   └── export.ts           # PNG/SVG/JSON/ZIP/share
│   ├── App.tsx                 # Main application
│   ├── main.tsx
│   └── index.css
├── index.html
├── package.json
├── README.md
└── DEVELOPMENT.md

---

📄 License

MIT License