RapiDall•E

A modern, full-stack AI-powered image generation platform built with React Router 7, BetterAuth, Trigger.dev, and Prisma.

✨ Features

🎨 AI Typography & Art Generation - Create stunning typography designs and artistic compositions with OpenAI's DALL-E 3
🔐 Complete Authentication - Secure user accounts with BetterAuth
⚡ Real-time Updates - Live task monitoring with Trigger.dev
💳 Credit System - User-based credit management for generation limits
🌙 Dark Mode - Comprehensive light/dark theme support
📱 Responsive Design - Beautiful UI that works on all devices
🚀 Server-Side Rendering - Fast, SEO-friendly React Router 7
🗃️ Type-Safe Database - Prisma ORM with PostgreSQLA modern, full-stack AI-powered image generation platform built with React Router 7, BetterAuth, Trigger.dev, and Prisma.

✨ Features

🎨 AI Image Generation - Create stunning images with OpenAI's DALL-E 3
🔐 Complete Authentication - Secure user accounts with BetterAuth
⚡ Real-time Updates - Live task monitoring with Trigger.dev
💳 Credit System - User-based credit management for generation limits
🌙 Dark Mode - Comprehensive light/dark theme support
📱 Responsive Design - Beautiful UI that works on all devices
🚀 Server-Side Rendering - Fast, SEO-friendly React Router 7
�️ Type-Safe Database - Prisma ORM with PostgreSQL

🛠️ Tech Stack

Frontend

React Router 7 - Modern SSR framework with file-based routing
React 19 - Latest React with concurrent features
TypeScript - Type-safe development
TailwindCSS v4 - Utility-first styling with automatic dark mode
Lucide React - Beautiful, customizable icons

Backend

Prisma - Type-safe database ORM
PostgreSQL - Robust relational database
BetterAuth - Modern authentication with Prisma adapter
Trigger.dev v3 - Background task processing and monitoring

AI & APIs

OpenAI DALL-E 3 - State-of-the-art typography and art generation
OpenAI GPT-4o - Enhanced prompt processing and artistic captions

🚀 Getting Started

Prerequisites

Node.js 18+
PostgreSQL database
OpenAI API key
Trigger.dev account

Installation

Clone the repository

git clone https://github.com/sethdavis512/tws-trigger-dev.git
cd tws-trigger-dev

Install dependencies
```
npm install
```

Set up environment variables

cp .env.example .env

Fill in your environment variables:

DATABASE_URL="postgresql://user:password@localhost:5432/rapidalle"
OPENAI_API_KEY="your_openai_api_key"
TRIGGER_SECRET_KEY="your_trigger_secret_key"

Set up the database

npx prisma migrate dev
npx prisma generate

Development

Start the development servers:

# Terminal 1: React Router dev server
npm run dev

# Terminal 2: Trigger.dev dev server  
npm run trigger:dev

Your application will be available at http://localhost:5173.

📁 Project Structure

├── app/
│   ├── lib/              # Auth configuration and utilities
│   ├── models/           # Database operations (Prisma)
│   ├── routes/           # Pages and API endpoints
│   │   ├── authenticated.tsx  # Protected route layout
│   │   ├── api/          # API routes
│   │   └── ...
│   ├── components/       # Reusable UI components
│   └── ...
├── trigger/
│   └── generateContent.ts    # Background image generation task
├── prisma/
│   ├── schema.prisma     # Database schema
│   └── migrations/       # Database migrations
└── ...

🔐 Authentication

The app uses BetterAuth with email/password authentication:

Session-based auth with 7-day expiry
Prisma adapter for database integration
Layout-based protection for authenticated routes
Custom user fields including credit system

Key Auth Files

app/lib/auth.server.ts - BetterAuth server configuration
app/lib/auth.client.ts - Client-side auth setup
app/lib/session.server.ts - Auth helper functions
app/routes/authenticated.tsx - Protected route wrapper

🎨 Image Generation Workflow

User creates prompt in the responsive prompt card interface
Credit validation ensures user has sufficient credits
Background task triggered via Trigger.dev for async processing
Real-time updates show generation progress to user
Image persistence saves results to database with metadata
Gallery display shows generated images in responsive grid

Key Generation Files

trigger/generateContent.ts - Main generation task
app/routes/api/dalle.ts - Generation API endpoint
app/components/PromptCard.tsx - Generation interface
app/routes/library.tsx - Image gallery

🗄️ Database Schema

Core Models

User - Authentication and credits management
Prompt - Reusable generation prompts
Image - Generated images with metadata
Auth Tables - Account, Session, Verification for BetterAuth

Key Features

Cascading deletes for data integrity
Credit system with atomic operations
Relationship mapping between users, prompts, and images

🚀 Deployment

Environment Setup

Ensure these environment variables are set:

DATABASE_URL=your_production_postgres_url
OPENAI_API_KEY=your_openai_key
TRIGGER_SECRET_KEY=your_trigger_key

Build for Production

npm run build
npm run start

Docker Deployment

docker build -t rapidalle .
docker run -p 3000:3000 rapidalle

Compatible with: AWS ECS, Google Cloud Run, Azure Container Apps, Railway, Fly.io

🧪 Development Commands

npm run dev          # Start React Router dev server
npm run trigger:dev  # Start Trigger.dev dev server
npm run build        # Build for production
npm run typecheck    # TypeScript validation
npx prisma studio    # Visual database browser
npx prisma migrate dev    # Apply database migrations

🎯 Key Features Deep Dive

Credit System

Users start with 10 free credits
Each image generation costs 1 credit
Atomic credit deduction prevents race conditions
Extensible for future payment integration

Real-time Monitoring

Live task status updates via Trigger.dev hooks
Progress indicators during generation
Error handling and retry logic
No polling - efficient WebSocket connections

Dark Mode

System preference detection
Comprehensive component coverage
Smooth transitions and proper contrast ratios
TailwindCSS media strategy implementation

🤝 Contributing

Fork the repository
Create a 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

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

React Router - Modern React framework
BetterAuth - Simple, powerful authentication
Trigger.dev - Background job processing
Prisma - Next-generation ORM
OpenAI - AI-powered image generation

Built with ❤️ using React Router 7, BetterAuth, Trigger.dev, and Prisma.

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
.github		.github
app		app
docs		docs
prisma		prisma
public		public
trigger		trigger
.dockerignore		.dockerignore
.gitignore		.gitignore
Dockerfile		Dockerfile
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
react-router.config.ts		react-router.config.ts
tailwind.config.js		tailwind.config.js
trigger.config.ts		trigger.config.ts
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

RapiDall•E

✨ Features

✨ Features

🛠️ Tech Stack

Frontend

Backend

AI & APIs

🚀 Getting Started

Prerequisites

Installation

Development

📁 Project Structure

🔐 Authentication

Key Auth Files

🎨 Image Generation Workflow

Key Generation Files

🗄️ Database Schema

Core Models

Key Features

🚀 Deployment

Environment Setup

Build for Production

Docker Deployment

🧪 Development Commands

🎯 Key Features Deep Dive

Credit System

Real-time Monitoring

Dark Mode

🤝 Contributing

📄 License

🙏 Acknowledgments

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages