Skip to main content

​
Technology Overview

Your Bible is built with a carefully selected stack of modern, production-ready technologies that prioritize type safety, developer experience, and real-time capabilities.

​
Frontend Technologies

TanStack Start

Version: 1.121.4Full-stack React framework with built-in SSR, file-based routing, and server actions.Why chosen:
  • Unified full-stack solution
  • Type-safe routing and data fetching
  • Excellent developer experience
  • Built-in deployment optimizations
  • Seamless integration with TanStack ecosystem

React 19

Version: 19.1.0Latest version of React with concurrent features and improved hooks.Why chosen:
  • Industry-standard UI library
  • Concurrent rendering for better UX
  • Rich ecosystem of components
  • Enhanced performance
  • Built-in suspense and transitions

TypeScript

Version: 5.8.3Strongly typed superset of JavaScript for type-safe development.Why chosen:
  • Catch errors at compile time
  • Superior IDE support and autocomplete
  • Self-documenting code
  • Safer refactoring
  • Better collaboration

Tailwind CSS v4

Version: 4.1.10Utility-first CSS framework for rapid UI development.Why chosen:
  • Rapid prototyping and development
  • Consistent design system
  • Minimal CSS bundle size
  • Excellent customization
  • Great mobile-responsive utilities

​
State Management & Data Fetching

TanStack Query

Version: 5.80.7Powerful server state management with caching, background updates, and optimistic mutations.Features:
  • Automatic caching and invalidation
  • Background refetching
  • Optimistic updates
  • Pagination and infinite scroll
  • Query devtools for debugging

TanStack Router

Version: 1.121.2Type-safe, file-based routing with built-in data loading.Features:
  • File-based routing convention
  • Type-safe navigation and params
  • Route-level data loading
  • Nested layouts
  • Search param validation with Zod

TanStack Form

Version: 1.12.0Powerful form handling with validation.Features:
  • Type-safe form state
  • Field-level validation
  • Async validation support
  • Complex nested forms
  • Integration with Zod schemas

Convex React Query

Version: 0.0.0-alpha.8Bridge between Convex and TanStack Query for real-time data.Features:
  • Real-time query subscriptions
  • Automatic invalidation
  • Optimistic updates
  • Familiar Query API

​
UI Components & Design

Shadcn/ui

High-quality, accessible component library built on Radix UI.Components used:
  • Dialogs and modals
  • Dropdown menus
  • Form inputs and labels
  • Tabs and accordions
  • Popovers and tooltips
  • Scroll areas
  • Avatars and alerts

Radix UI

Unstyled, accessible component primitives.Why chosen:
  • Full accessibility (ARIA)
  • Keyboard navigation
  • Focus management
  • Unstyled (easy customization)
  • High-quality primitives

Lucide React

Version: 0.514.0Beautiful, customizable icon library.Features:
  • 1000+ consistent icons
  • Tree-shakeable
  • Customizable size and color
  • Stroke width control

Plate.js

Version: 49.0.6Rich text editor framework for notes feature.Features:
  • Plugin-based architecture
  • Markdown shortcuts
  • Formatting tools (bold, italic, lists)
  • Mentions and emojis
  • Customizable toolbar

​
Utilities & Helpers

  • class-variance-authority: Component variant styling
  • clsx: Conditional className composition
  • tailwind-merge: Smart Tailwind class merging
  • @udecode/cn: Class name utility for Plate components
  • next-themes: Dark mode support
  • sonner: Beautiful toast notifications
  • zod: Schema validation for forms and API data
  • html-react-parser: Parse HTML strings into React
  • date-fns: Date manipulation and formatting
  • react-player: Video player component
  • react-lite-youtube-embed: Lightweight YouTube embeds
  • react-tweet: Embed tweets
  • @emoji-mart/data: Emoji picker data

​
Backend Technologies

Convex

Version: 1.24.8Real-time backend-as-a-service with automatic sync.Why chosen:
  • Real-time data synchronization
  • Type-safe database queries
  • Serverless functions
  • Built-in caching and optimization
  • Excellent TypeScript support
  • Zero-config deployment
Used for:
  • Collections storage
  • User notes
  • AI-generated stories
  • Verse collections

Better Auth

Version: 1.2.9Modern authentication library for full-stack apps.Why chosen:
  • Easy integration with TanStack Start
  • Multiple auth strategies
  • Session management
  • Type-safe API
  • Built-in security features
Features:
  • Email/password authentication
  • Session persistence
  • Protected routes
  • OAuth support (GitHub configured)

PostgreSQL + Drizzle

Drizzle ORM: 0.44.2Type-safe PostgreSQL ORM for authentication data.Why chosen:
  • Type-safe queries
  • SQL-like syntax
  • Great TypeScript inference
  • Minimal overhead
  • Easy migrations
Database: Neon serverless PostgreSQL

Redis (Upstash)

@upstash/redis: 1.35.0
@upstash/ratelimit: 2.0.5Serverless Redis for rate limiting.Why chosen:
  • Serverless (pay-per-request)
  • Global edge network
  • Built-in rate limiting
  • No connection pooling needed
Used for:
  • Story generation rate limiting
  • API cost management

​
External APIs & Services

API.Bible

Bible content provider with multiple translations.Features:
  • 50+ Bible translations
  • Verse and chapter retrieval
  • Full-text search
  • Cross-references
  • REST API
Integration: Axios HTTP client in server actions

Google Gemini AI

SDK: @google/genai 1.6.0Generative AI for story creation.Model: gemini-1.5-flashFeatures:
  • Creative text generation
  • Customizable prompts
  • Fast response times
  • Cost-effective
Used for: AI-powered story generation from Bible passages

UploadThing

Version: 7.7.2File upload service.Features:
  • Serverless uploads
  • Image optimization
  • CDN delivery
  • Easy React integration

​
Development Tools

Vite

Version: 6.3.5Fast build tool and dev server.Features:
  • Lightning-fast HMR
  • Native ESM support
  • Optimized builds
  • Plugin ecosystem
  • TypeScript support

vite-tsconfig-paths

Version: 5.1.4Path alias resolution for Vite.Enables: @/* imports mapped to src/*

TSX

Version: 4.20.3TypeScript execution for scripts.Used for: Running TypeScript build scripts and utilities

Drizzle Kit

Version: 0.31.1Database migration tool for Drizzle ORM.Features: Schema generation and migrations

​
Package Management

The project uses pnpm as the recommended package manager for:
  • Faster installations
  • Disk space efficiency
  • Stricter dependency resolution
  • Better monorepo support

​
Runtime & Deployment

Node.js

Minimum Version: 18+Runtime environment for server-side code.

Vercel

Target Platform: Configured in vite.config.ts
  • Serverless deployment
  • Edge network CDN
  • Automatic HTTPS
  • Environment variables
  • Preview deployments

​
Type Safety Stack

The entire stack is built with type safety as a core principle:
  1. TypeScript - Type-safe JavaScript
  2. Zod - Runtime type validation
  3. Drizzle ORM - Type-safe database queries
  4. TanStack Router - Type-safe routing
  5. TanStack Query - Type-safe API calls
  6. Convex - Type-safe backend functions
This comprehensive type safety prevents runtime errors and provides excellent IDE autocomplete and error checking throughout the development process.