Quill - Modern Fullstack SaaS Platform

A production-ready SaaS application built to demonstrate modern web development practices and full-stack capabilities. This project showcases advanced Next.js development, AI integration, and scalable architecture patterns.

🚀 Key Features

• Complete SaaS Architecture - Built from scratch with authentication, payments, and user management
• AI-Powered PDF Chat - Upload PDFs and chat with them using OpenAI and vector embeddings
• Real-time Streaming - Live AI responses with optimistic UI updates
• Modern Tech Stack - Next.js 14, TypeScript, tRPC, Prisma, Tailwind CSS
• Payment Integration - Stripe subscription management with free and pro tiers
• Vector Database - Pinecone for semantic search and AI memory
• Authentication - Secure auth with Kinde
• File Management - Drag & drop uploads with UploadThing
• Responsive Design - Beautiful UI built with shadcn/ui components

🛠 Tech Stack

Frontend:

• Next.js 14 (App Router)
• TypeScript
• Tailwind CSS + shadcn/ui
• React Query + tRPC
• React PDF Viewer

Backend:

• tRPC API
• Prisma ORM
• MySQL Database
• Kinde Authentication
• Stripe Payments

AI & Vector Storage:

• OpenAI GPT
• LangChain
• Pinecone Vector Database
• PDF Processing

🏃‍♂️ Quick Start

Prerequisites

• Node.js 18+
• MySQL database (or PlanetScale)
• Required API keys (see Environment Variables)

Installation

1. Clone the repository

   git clone <repository-url>
   cd quill

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.example .env

   Fill in your environment variables:

   # Kinde Auth
   KINDE_CLIENT_ID=your_kinde_client_id
   KINDE_CLIENT_SECRET=your_kinde_client_secret
   KINDE_ISSUER_URL=your_kinde_issuer_url
   KINDE_SITE_URL=http://localhost:3000
   KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
   KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard
   
   # Database
   DATABASE_URL=your_mysql_connection_string
   
   # File Uploads
   UPLOADTHING_SECRET=your_uploadthing_secret
   UPLOADTHING_APP_ID=your_uploadthing_app_id
   
   # AI Services
   PINECONE_API_KEY=your_pinecone_api_key
   PINECONE_ENVIRONMENT=gcp-starter
   OPENAI_API_KEY=your_openai_api_key

4. Set up the database

   npx prisma generate
   npx prisma db push

5. Start the development server

   npm run dev

6. Open the application

   Navigate to http://localhost:3000

📁 Project Structure

quill/
├── app/                 # Next.js 14 App Router
├── components/          # Reusable UI components
├── lib/                 # Utilities and configurations
├── prisma/             # Database schema and migrations
├── public/             # Static assets
└── src/                # Additional source files

🔧 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

🌟 Why This Project?

This project demonstrates:

• Full-stack proficiency with modern React patterns and server-side architecture
• AI integration capabilities with vector databases and language models
• Production-ready code with proper error handling, loading states, and user experience
• Scalable architecture using industry-standard tools and patterns
• Payment processing and subscription management
• Real-time features and optimistic UI updates

Built as an exploration of Next.js capabilities and modern SaaS development patterns, this project showcases the ability to integrate complex technologies into a cohesive, user-friendly application.