shipd 0.1.0

package/template/.env.example

@@ -0,0 +1,45 @@
+# Environment Variables
+# Copy this file to .env.local and customize the values
+
+# ⚠️  REQUIRED FOR BASIC FUNCTIONALITY:
+#    - DATABASE_URL (for data storage)
+#    - BETTER_AUTH_SECRET (for authentication)
+#    - GOOGLE_CLIENT_ID & GOOGLE_CLIENT_SECRET (for Google login)
+
+# ℹ️  OPTIONAL SERVICES:
+#    - POLAR_* variables (only needed for subscription payments)
+#    - RESEND_API_KEY (only needed for transactional emails)
+#    - OPENAI_API_KEY (only needed for AI chat features)
+#    - R2_* variables (only needed for file uploads)
+#    - POSTHOG_* variables (only needed for analytics)
+
+# The app will launch with these placeholder values, but configure real services for production
+
+# Application
+NEXT_PUBLIC_APP_URL=http://localhost:3000
+
+# Auth (Required)
+BETTER_AUTH_SECRET=please-change-this-to-a-random-32-character-string-or-longer
+GOOGLE_CLIENT_ID=your-google-client-id.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=your-google-client-secret
+
+# Database (Required)
+DATABASE_URL=postgresql://user:password@localhost:5432/mydb
+
+# Payments (Optional - only needed if using this feature)
+# Get your access token from https://polar.sh/dashboard/settings/api
+# Required scopes: subscriptions:read, products:read, customers:read, checkouts:write, orders:read
+POLAR_ACCESS_TOKEN=your-polar-access-token
+POLAR_SUCCESS_URL=success
+POLAR_WEBHOOK_SECRET=your-polar-webhook-secret
+NEXT_PUBLIC_STARTER_TIER=your-starter-tier-id
+NEXT_PUBLIC_STARTER_SLUG=your-organization-slug
+
+# Email (Optional - only needed if using this feature)
+# Get your API key from https://resend.com/api-keys
+RESEND_API_KEY=re_your-resend-api-key
+EMAIL_FROM=SaaS Scaffold <noreply@yourdomain.com>
+
+# Analytics (Optional - only needed if using this feature)
+NEXT_PUBLIC_POSTHOG_KEY=phc_your-posthog-project-key
+NEXT_PUBLIC_POSTHOG_HOST=https://app.posthog.com

package/template/README.md

@@ -0,0 +1,239 @@
+# {{PROJECT_NAME}}
+
+{{PROJECT_DESCRIPTION}}
+
+## ✨ Features
+
+### 🔐 Authentication & User Management
+- **Better Auth v1.2.8** - Modern authentication system
+- Google OAuth integration
+- Session management with database persistence
+- User profile management with image uploads
+- Account linking for multiple providers
+
+### 💳 Subscription & Billing
+- **Polar.sh** integration for subscription management
+- Two-tier pricing: Starter ($99/month) & Professional ($499/month)
+- Real-time webhook processing
+- Customer portal for self-service billing
+- Subscription status tracking (active, canceled, expired)
+- Payment gating with elegant overlays
+
+### 🤖 AI Integration
+- **OpenAI** powered chatbot
+- React Markdown rendering for rich responses
+- Multi-step conversation support
+- Integrated chat widget in dashboard
+
+### 🎨 Modern UI/UX
+- **Tailwind CSS v4** - Latest utility-first styling
+- **shadcn/ui** components - Accessible, customizable
+- **Radix UI** primitives - Unstyled, accessible components
+- Dark/light theme support with smooth transitions
+- Responsive design with mobile-first approach
+- Loading skeletons and optimistic UI updates
+
+### 🗄️ Database & Storage
+- **Neon PostgreSQL** - Serverless database
+- **Drizzle ORM** - Type-safe database toolkit
+- **Cloudflare R2** - Scalable file storage with zero egress fees
+- Database migrations with Drizzle Kit
+- Drag & drop file uploads with progress tracking
+
+### 📊 Analytics & Monitoring
+- **PostHog** integration for product analytics
+- User behavior tracking
+- Custom event monitoring
+- Error tracking and insights
+
+## 🚀 Tech Stack
+
+- **Framework**: Next.js 15.3.1 with App Router
+- **Language**: TypeScript with strict mode
+- **Styling**: Tailwind CSS v4 + shadcn/ui
+- **Database**: Neon PostgreSQL + Drizzle ORM
+- **Authentication**: Better Auth v1.2.8
+- **Payments**: Polar.sh
+- **AI**: OpenAI SDK
+- **Storage**: Cloudflare R2
+- **Analytics**: PostHog
+- **Deployment**: Vercel (recommended)
+
+## 📁 Project Structure
+
+```
+├── app/
+│   ├── (auth)/              # Authentication pages
+│   ├── dashboard/           # Protected dashboard area
+│   │   ├── _components/     # Dashboard components
+│   │   ├── chat/           # AI chat interface
+│   │   ├── upload/         # File upload with R2
+│   │   ├── payment/        # Subscription management
+│   │   └── settings/       # User settings & billing
+│   ├── pricing/            # Public pricing page
+│   └── api/                # API routes
+├── components/
+│   ├── ui/                 # shadcn/ui components
+│   └── homepage/           # Landing page sections
+├── lib/
+│   ├── auth/              # Authentication config
+│   ├── subscription.ts    # Subscription utilities
+│   └── upload-image.ts    # R2 file upload utilities
+└── db/
+    ├── schema.ts          # Database schema
+    └── drizzle.ts         # Database connection
+```
+
+## 🛠️ Quick Start
+
+### Prerequisites
+- Node.js 18+
+- PostgreSQL database (Neon recommended)
+- Cloudflare R2 bucket for file storage
+- Polar.sh account for subscriptions
+- OpenAI API key for AI features
+- Google OAuth credentials (optional)
+
+### Installation
+
+1. **Clone the repository**
+```bash
+git clone <repository-url>
+cd {{PROJECT_NAME}}
+```
+
+2. **Install dependencies**
+```bash
+npm install
+```
+
+3. **Environment Setup**
+Create a `.env.local` file with:
+```env
+# Database
+DATABASE_URL="your-neon-database-url"
+
+# Authentication
+BETTER_AUTH_SECRET="your-secret-key"
+GOOGLE_CLIENT_ID="your-google-client-id"
+GOOGLE_CLIENT_SECRET="your-google-client-secret"
+
+# Polar.sh
+POLAR_ACCESS_TOKEN="your-polar-access-token"
+POLAR_WEBHOOK_SECRET="your-webhook-secret"
+
+# OpenAI
+OPENAI_API_KEY="your-openai-api-key"
+
+# Cloudflare R2 Storage
+CLOUDFLARE_ACCOUNT_ID="your-cloudflare-account-id"
+R2_UPLOAD_IMAGE_ACCESS_KEY_ID="your-r2-access-key-id"
+R2_UPLOAD_IMAGE_SECRET_ACCESS_KEY="your-r2-secret-access-key"
+R2_UPLOAD_IMAGE_BUCKET_NAME="your-r2-bucket-name"
+
+# Polar.sh Pricing Tiers
+NEXT_PUBLIC_STARTER_TIER="your-starter-product-id"
+NEXT_PUBLIC_STARTER_SLUG="your-starter-slug"
+```
+
+4. **Database Setup**
+```bash
+# Generate and run migrations
+npx drizzle-kit generate
+npx drizzle-kit push
+```
+
+5. **Cloudflare R2 Setup**
+- Create a Cloudflare account and set up R2 storage
+- Create a bucket for file uploads
+- Generate API tokens with R2 permissions
+- Configure CORS settings for your domain
+
+6. **Polar.sh Setup**
+- Create products for your pricing tiers
+- Set up webhook endpoints for subscription events
+- Configure your pricing structure
+
+7. **Start Development Server**
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to see your application.
+
+## 🎯 Key Features Explained
+
+### Subscription Management
+- Automatic subscription status checking
+- Payment gating for premium features
+- Integration with Polar.sh customer portal
+- Webhook handling for real-time updates
+
+### AI Chat Integration
+- Built-in chatbot with OpenAI
+- Markdown rendering for rich responses
+- Conversation history and context
+
+### File Upload System
+- **Cloudflare R2 integration** with S3-compatible API
+- **Drag & drop interface** with visual feedback
+- **File validation** - Type checking and size limits
+- **Progress tracking** - Real-time upload progress
+- **Image gallery** - View uploaded files with metadata
+- **Copy URLs** - Easy sharing and integration
+
+### Analytics & Tracking
+- PostHog event tracking
+- User behavior monitoring
+- Custom analytics dashboard
+
+## 🔧 Customization
+
+### Adding New Features
+1. Create components in `components/`
+2. Add API routes in `app/api/`
+3. Update database schema in `db/schema.ts`
+4. Run `npx drizzle-kit generate` and `npx drizzle-kit push`
+
+### Styling
+- Modify `app/globals.css` for global styles
+- Use Tailwind classes for component styling
+- Customize theme in `tailwind.config.ts`
+
+### Authentication
+- Configure providers in `lib/auth/auth.ts`
+- Add new OAuth providers as needed
+- Customize user profile fields in database schema
+
+## 📚 Learn More
+
+- [Next.js Documentation](https://nextjs.org/docs)
+- [Better Auth Documentation](https://better-auth.com)
+- [Polar.sh Documentation](https://docs.polar.sh)
+- [Drizzle ORM Documentation](https://orm.drizzle.team)
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+
+## 🚀 Deployment
+
+### Vercel (Recommended)
+1. Connect your GitHub repository to Vercel
+2. Add environment variables in Vercel dashboard
+3. Deploy automatically on every push
+
+### Manual Deployment
+```bash
+npm run build
+npm start
+```
+
+## 📄 License
+
+This project is licensed under the MIT License.
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+---
+
+Built with ❤️ using Next.js and modern web technologies.

package/template/app/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { auth } from "@/lib/auth"; // path to your auth file
+import { toNextJsHandler } from "better-auth/next-js";
+
+export const { POST, GET } = toNextJsHandler(auth);

package/template/app/api/chat/route.ts

@@ -0,0 +1,16 @@
+import { openai } from "@ai-sdk/openai";
+import { streamText } from "ai";
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const result = streamText({
+    model: openai.responses("gpt-4o"),
+    messages,
+    tools: {
+      web_search_preview: openai.tools.webSearchPreview(),
+    },
+  });
+
+  return result.toDataStreamResponse();
+}

package/template/app/api/subscription/route.ts

@@ -0,0 +1,25 @@
+import { auth } from "@/lib/auth";
+import { getSubscriptionDetails } from "@/lib/subscription";
+import { headers } from "next/headers";
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  try {
+    const result = await auth.api.getSession({
+      headers: await headers(),
+    });
+
+    if (!result?.session?.userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const subscriptionDetails = await getSubscriptionDetails();
+    return NextResponse.json(subscriptionDetails);
+  } catch (error) {
+    console.error("Error fetching subscription details:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch subscription details" },
+      { status: 500 }
+    );
+  }
+}

package/template/app/api/upload-image/route.ts

@@ -0,0 +1,64 @@
+import { uploadImageAssets } from "@/lib/upload-image";
+import { NextRequest, NextResponse } from "next/server";
+
+export const config = {
+  api: { bodyParser: false }, // Disable default body parsing
+};
+
+export async function POST(req: NextRequest) {
+  try {
+    // Parse the form data
+    const formData = await req.formData();
+    const file = formData.get("file") as File | null;
+
+    if (!file) {
+      return NextResponse.json({ error: "No file provided" }, { status: 400 });
+    }
+
+    // Validate MIME type - only allow image files
+    const allowedMimeTypes = [
+      "image/jpeg",
+      "image/jpg",
+      "image/png",
+      "image/gif",
+      "image/webp",
+      "image/svg+xml",
+    ];
+
+    if (!allowedMimeTypes.includes(file.type)) {
+      return NextResponse.json(
+        { error: "Invalid file type. Only image files are allowed." },
+        { status: 400 },
+      );
+    }
+
+    // Validate file size - limit to 10MB
+    const maxSizeInBytes = 10 * 1024 * 1024; // 10MB
+    if (file.size > maxSizeInBytes) {
+      return NextResponse.json(
+        { error: "File too large. Maximum size allowed is 10MB." },
+        { status: 400 },
+      );
+    }
+
+    // Convert file to buffer
+    const arrayBuffer = await file.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+
+    // Generate a unique filename with original extension
+    const fileExt = file.name.split(".").pop() || "";
+    const timestamp = Date.now();
+    const filename = `upload-${timestamp}.${fileExt || "png"}`;
+
+    // Upload the file
+    const url = await uploadImageAssets(buffer, filename);
+
+    return NextResponse.json({ url });
+  } catch (error) {
+    console.error("Upload error:", error);
+    return NextResponse.json(
+      { error: "Failed to process upload" },
+      { status: 500 },
+    );
+  }
+}