Professional business quotes in seconds, not hours.
Quoteshift is an AI-powered quote generation platform that transforms client requests into beautifully formatted, customizable quotes. Built for freelancers, small business owners, and service providers who want to save time and maintain consistency.
- ⚡ One-Click Generation — Paste what the client wants, get a professional quote instantly
- 🎨 4 Format Templates — Clean, Itemized, Corporate, or Quick Card formats
- 💾 Custom Branding — Set your base price, timeline, footer message, and design preferences
- 📤 Multi-Export — Download as plain text, styled HTML, or print-ready PDF
- 🔐 Free & Pro Plans — 3 free quotes monthly, unlimited access with Pro
- 🌐 Cloud-Backed — Supabase authentication and profile storage
- 📱 Desktop-Optimized — Beautiful typography and responsive design
- Node.js 18+ (with npm, yarn, or pnpm)
- Groq API Key (for LLM quote generation)
- Supabase Project (for auth and database)
# Clone the repository
git clone https://github.com/vyixor/quoteshift.git
cd quoteshift
# Install dependencies
npm install
# or
yarn install
# or
pnpm install
# Create .env.local file
touch .env.localAdd the following to .env.local:
NEXT_PUBLIC_GROQ_API_KEY=your_groq_api_key_here
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_keyObtain API keys from:
- Groq: https://console.groq.com (for
llama-3.3-70b-versatile) - Supabase: https://app.supabase.com
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 in your browser.
quoteshift/
├── app/
│ ├── (auth)/ # Authentication pages
│ ├── api/ # Backend API routes
│ ├── pro/ # Pro plan page
│ ├── favicon.ico # App icon
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main quote generator
├── components/
│ ├── auth/ # Auth components
│ ├── Navbar.tsx # Top navigation bar
│ ├── InputPanel.tsx # Quote input form
│ ├── OutputPanel.tsx # Quote display & export
│ ├── SettingsModal.tsx # User preferences
│ └── BottomBar.tsx # Footer with usage stats
├── lib/
│ ├── auth.ts # Authentication utilities
│ └── supabase/ # Supabase client config
├── public/
│ ├── logo.svg # Brand logo
│ └── *.svg # Icons
├── package.json # Dependencies
├── tsconfig.json # TypeScript config
├── next.config.ts # Next.js config
├── tailwind.config.ts # Tailwind CSS setup
└── eslint.config.mjs # Code linting rules
- User enters client request in natural language
- Settings (base price, timeline, rules) are applied as context
- Groq LLM (
llama-3.3-70b-versatile) generates a professional quote - Format is randomly selected or user-configured
- Built-in prompt templates ensure consistency
- Respects user preferences for pricing, messaging, and layout
- Four professional formats to match any business type
- Text — Copy to clipboard instantly
- HTML — AI-styled with professional typography and layout
- PDF — Print-ready document via html2pdf
- Supabase auth with email or third-party SSO
- Free plan: 3 quotes/month
- Pro plan: Unlimited quotes + premium features
Main application entry point. Handles:
- Quote generation via Groq API
- User authentication & plan management
- Settings persistence to localStorage
- HTML/PDF export workflows
| Component | Purpose |
|---|---|
| Navbar | Top navigation, plan badge, settings toggle |
| InputPanel | Text input form with generate button |
| OutputPanel | Quote display with copy/export buttons |
| SettingsModal | User preferences (price, timeline, footer, design) |
| BottomBar | Usage counter (free: 3 quotes, pro: unlimited) |
- Next.js — React framework with SSR, routing, API routes
- Supabase — Auth, real-time database, user profiles
- Tailwind CSS — Utility-first styling
- Groq — LLM API for quote generation
- html2pdf.js — Client-side PDF generation
- Lucide React — Icon library
Best for freelancers, creatives, consultants
- Simple, one-page layout
- Essential details only
- Great for portfolios
Best for tradespeople, multi-service jobs
- Line-item breakdown
- Qty/price columns
- Formal sections
Best for agencies, B2B, high-value contracts
- Numbered sections
- Detailed T&C
- VAT/registration fields
Best for quick jobs, on-site estimates
- Card-based layout
- Mobile-friendly
- Minimal but professional
Users can customize:
{
"basePrice": "150",
"defaultTimeline": "2-3 days",
"pricingRules": "Add 20% for rush jobs",
"footerMessage": "Thank you for choosing us!",
"customLooks": "Use blue accents, modern font"
}These are stored in browser localStorage and injected into quote prompts.
- Provider: Supabase (Auth v2)
- Methods: Email/password, OAuth (Google, GitHub, etc.)
- Session: Stored securely with JWT tokens
- Profile Data: User settings, plan tier, quote usage
profiles {
id UUID PRIMARY KEY
plan VARCHAR ('free' | 'pro')
quotes_remaining INT
number_of_quotes_used INT
created_at TIMESTAMP
}- next@16.1.7 — React framework
- react@19.2.3, react-dom@19.2.3 — UI library
- typescript@5 — Type safety
- @supabase/ssr@0.9.0 — Supabase integration
- @whop/sdk@0.0.35 — Payments (optional)
- tailwindcss@4 — CSS framework
- @tailwindcss/postcss@4 — PostCSS plugin
- lucide-react@0.577.0 — Icons
- html2pdf.js@0.14.0 — PDF generation
- eslint@9 — Code linting
- @types/react@19, @types/node@20 — TypeScript definitions
- babel-plugin-react-compiler@1.0.0 — React optimization
npm run build- Push to GitHub
- Import in Vercel Dashboard
- Add environment variables
- Deploy with one click
- Build:
npm run build - Start:
npm run start - Ensure Node 18+ is available
- Endpoint:
https://api.groq.com/openai/v1/chat/completions - Model:
llama-3.3-70b-versatile - Purpose: Quote generation & HTML styling
- Auth: Bearer token in headers
- Auth: Session management, user profiles
- Database: Quote history, user settings
- Endpoints: REST API with RLS policies
// Generate a quote
const inputText = "I need a website redesign for my e-commerce store";
// Settings are loaded from localStorage
const settings = {
basePrice: "500",
defaultTimeline: "2-3 weeks",
pricingRules: "Rush jobs +30%, complex sites +50%",
footerMessage: "Payment due 50% upfront, balance on launch"
};
// Quote is generated via Groq LLM
// User can export as text, HTML, or PDF| Issue | Solution |
|---|---|
| "No quotes generated" | Check Groq API key & rate limits |
| Session expired | Log out and back in to refresh token |
| Settings not saved | Ensure localStorage is enabled in browser |
| PDF export fails | Try HTML export first; check browser console |
| "Upgrade to Pro" alert | Free tier exhausted; purchase Pro or wait for monthly reset |
This project is open source. Feel free to use, modify, and distribute.
Contributions are welcome! Please:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
Have questions or found a bug? Please open an issue or reach out to the maintainer.
Built with:
Made with ❤️ by vyixor