AI-Powered Statement of Purpose Generator for International Students
Features • Tech Stack • Architecture • Getting Started • API • Deployment
SOPWriter.pk is a full-stack SaaS application that leverages AI to generate visa-ready Statements of Purpose tailored for students applying to universities abroad. Built with modern web technologies, it features a multi-step form wizard, AI-powered document generation, real-time payment processing, and a comprehensive admin dashboard.
📊 98% Visa Success Rate • 🎓 2,000+ Students Served • 🌍 6+ Countries Supported
- Country-Specific Templates — Dynamic prompts calibrated for USA, UK, Canada, Australia, Germany & more
- IELTS Score Integration — Adjusts writing complexity (B2/C1 English) based on student's proficiency
- Visa-Focused Content — Automatically includes "Intent to Return" statements for visa compliance
- Smart Gap Year Handling — Professionally addresses employment gaps in the narrative
- Progressive Disclosure — 5-step guided flow with animated transitions (Framer Motion)
- Real-Time Validation — Schema-based validation using Zod with instant feedback
- Auto-Save — Draft progress persisted to Supabase in real-time
- Responsive Design — Optimized for mobile, tablet, and desktop viewports
- Multiple Plans — Standard & Expert packages with tiered pricing
- Payment Confirmation — Real-time status updates and receipt generation
- Admin Payment Dashboard — Track transactions, approve payments, manage user credits
- PDF Export — Generate professional PDF documents with jsPDF
- Copy to Clipboard — One-click copy for easy sharing
- Version History — Track edits and regenerate documents as needed
- Document Library — View all generated SOPs in user dashboard
- Supabase Auth — Email/password authentication with session management
- Protected Routes — Role-based access control for user and admin routes
- Row-Level Security — Database policies ensuring users only access their data
- Sensitive Data Handling — Separate secure table for PII (addresses, phone numbers)
- Real-Time Assistant — Floating chat widget for instant help
- Context-Aware — Understands user's application status and documents
| Technology | Purpose |
|---|---|
| React 18 | Component-based UI with Suspense & lazy loading |
| TypeScript | Type-safe development with strict mode |
| Vite | Lightning-fast HMR and optimized production builds |
| Tailwind CSS | Utility-first styling with custom design system |
| Framer Motion | Fluid animations and page transitions |
| shadcn/ui | Accessible, customizable component library (Radix UI) |
| React Router v6 | Client-side routing with nested layouts |
| React Query | Server state management with caching |
| React Hook Form | Performant forms with Zod validation |
| Technology | Purpose |
|---|---|
| Supabase | PostgreSQL database, Auth, Storage, Edge Functions |
| Deno Edge Functions | Serverless AI generation with low latency |
| Gemini 1.5 Flash | LLM for intelligent document generation (Google AI) |
| Technology | Purpose |
|---|---|
| Vercel | Zero-config deployments with edge caching |
| ESLint | Code quality enforcement |
| PostCSS | CSS processing with Autoprefixer |
┌─────────────────────────────────────────────────────────────────────┐
│ CLIENT (React SPA) │
├─────────────────────────────────────────────────────────────────────┤
│ Pages/ Components/ Hooks/ Integrations/ │
│ ├── Index ├── Navbar ├── use-toast └── supabase/ │
│ ├── Dashboard ├── HeroSection └── use-mobile ├── client │
│ ├── CreateSOP ├── PaymentModal └── types │
│ ├── SOPResult ├── AIChatWidget │
│ └── Admin* └── ui/ (shadcn) │
└──────────────────────────────┬──────────────────────────────────────┘
│ REST / Realtime
▼
┌─────────────────────────────────────────────────────────────────────┐
│ SUPABASE BACKEND │
├─────────────────────────────────────────────────────────────────────┤
│ Auth Database (PostgreSQL) Edge Functions │
│ ├── JWT ├── users ├── generate-sop │
│ └── Sessions ├── sops └── ai-support-chat │
│ ├── sop_sensitive_details │
│ ├── payments │
│ └── profiles │
└──────────────────────────────┬──────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────────────┐
│ AI GATEWAY │
│ (Gemini 2.5 Flash LLM) │
└─────────────────────────────────────────────────────────────────────┘
- Edge Functions for AI — Serverless Deno functions minimize cold starts and enable streaming responses
- Separate Sensitive Table — PII stored in
sop_sensitive_detailswith stricter RLS policies - Schema Validation — Zod schemas shared between client and server for consistent validation
- Lazy Loading — Strategic code splitting reduces initial bundle size
- Design System — Custom Tailwind config with CSS variables for theming
- Node.js 18+ or Bun
- Supabase account (free tier works)
- Gemini API key from Google AI Studio
# Clone the repository
git clone https://github.com/yourusername/sopwriter.git
cd sopwriter
# Install dependencies
npm install
# or
bun install
# Set up environment variables
cp .env.example .envVITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_keyFor Supabase Edge Functions (add these as secrets in Supabase Dashboard):
SUPABASE_URL=your_supabase_project_url
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
GEMINI_API_KEY=your_gemini_api_key# Start development server
npm run dev
# Run linter
npm run lint
# Build for production
npm run build
# Preview production build
npm run previewRun the migrations in supabase/migrations/ to set up your database schema:
supabase db pushGenerates an AI-powered Statement of Purpose based on user input.
Endpoint: POST /functions/v1/generate-sop
Headers:
Authorization: Bearer <user_jwt>
Content-Type: application/json
Request Body:
{
"sopId": "uuid-of-sop-record"
}Response:
{
"success": true,
"content": "Generated SOP content..."
}Error Codes:
| Code | Description |
|---|---|
| 400 | Invalid sopId format |
| 401 | Unauthorized (invalid/missing JWT) |
| 404 | SOP not found or access denied |
| 429 | Rate limit exceeded |
| 402 | AI credits exhausted |
sopwriter/
├── public/ # Static assets
├── src/
│ ├── components/
│ │ ├── ui/ # shadcn/ui components (49 components)
│ │ └── ... # Feature components
│ ├── pages/ # Route pages (14 pages)
│ ├── hooks/ # Custom React hooks
│ ├── integrations/ # External service clients
│ ├── layouts/ # Page layouts
│ └── lib/ # Utility functions
├── supabase/
│ ├── functions/ # Edge Functions (Deno)
│ └── migrations/ # Database schema
├── tailwind.config.ts # Design system configuration
└── vite.config.ts # Build configuration
- Connect your GitHub repository to Vercel
- Add environment variables in Vercel dashboard
- Deploy automatically on push to
main
# Deploy all functions
supabase functions deploy
# Deploy specific function
supabase functions deploy generate-sop- Code Splitting — React.lazy() for route-level splitting
- Image Optimization — WebP format with lazy loading
- Bundle Analysis — Vite's built-in analyzer for monitoring
- Caching Strategy — React Query's stale-while-revalidate
- Font Loading — Preconnect + display:swap for web fonts
Contributions are welcome! Please read our contributing guidelines before submitting a PR.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is proprietary software. All rights reserved.
Built with ❤️ in Pakistan