Project अर्थ (Artha) - Next.js Migration

This is the Next.js version of Project Artha, migrated from FastAPI/Python to provide a modern, performant web application for browsing ancient Indian texts.

🚀 Quick Start

Prerequisites

• Node.js 18+
• PostgreSQL database (same as original project)
• Redis (optional, for caching)

Development Commands

# Install dependencies (already done)
npm install

# Start development server
npm run dev

# Open http://localhost:3000 in your browser

Production Commands

# Build for production
npm run build

# Start production server
npm start

# Check types
npm run type-check

# Run linter
npm run lint

Database Commands

# Generate database migrations
npm run db:generate

# Push schema to database
npm run db:push

# Open Drizzle Studio (database GUI)
npm run db:studio

📁 Project Structure

src/
├── app/                    # Next.js App Router
│   ├── page.tsx           # Main SPA entry point (Server Component)
│   ├── layout.tsx         # Root layout
│   └── api/               # API routes (minimal - only for client interactions)
│       └── search/route.ts # Search endpoint for client components
├── components/            # React components
│   ├── ArthaSPA.tsx       # Main SPA logic (Client Component)
│   ├── SearchBar.tsx      # Search with results (Client Component)
│   ├── EntryView.tsx      # Entry display (Client Component)
│   └── ShlokaView.tsx     # Shloka display (Client Component)
├── lib/                   # Utilities and database
│   ├── db/               # Database configuration
│   │   ├── index.ts      # Database connection
│   │   └── schema.ts     # Drizzle schema
│   ├── data.ts           # Server-side data functions
│   ├── language.ts       # Transliteration logic
│   └── cache.ts          # Caching utilities (future)
├── types/                # TypeScript type definitions
│   └── index.ts          # All type definitions
└── styles/               # Global styles

🔧 Configuration

Environment Variables (.env.local)

# Database Configuration - Use your actual database credentials
ARTHA_DB_URL="postgresql://username:password@localhost:5432/artha"

# Fallback database URLs (for compatibility)
DATABASE_URL="postgresql://username:password@localhost:5432/artha"
POSTGRES_URL="postgresql://username:password@localhost:5432/artha"

# Redis (for caching) - Optional
REDIS_URL="redis://localhost:6379"

# App Configuration
NEXT_PUBLIC_APP_URL="http://localhost:3000"
ARTHA_CACHE_TTL_TOTAL_SHLOKA=300
ARTHA_CACHE_TTL_TOTAL_ENTRY=300
ARTHA_CACHE_SIZE_SEARCH=500
ARTHA_CACHE_SIZE_ENTRY=1000
ARTHA_CACHE_SIZE_SHLOKA=1000

# Production settings
ARTHA_PROD=false

Note: The primary database connection uses ARTHA_DB_URL. The system will automatically set POSTGRES_URL (used by Vercel Postgres) from ARTHA_DB_URL if needed.

Database Setup

1. Use your existing PostgreSQL database
2. The schema is defined in src/lib/db/schema.ts
3. Run migrations: npm run db:push

🔄 Migration Status

✅ Completed

• Next.js project setup with TypeScript
• TailwindCSS configuration with custom colors
• Database schema definition with Drizzle ORM
• Basic project structure
• Environment configuration
• Static assets migration
• Basic home page layout
• Search bar component

🚧 In Progress

• Complete API routes implementation
• Entry and Shloka page components
• Language/transliteration utilities
• Caching implementation
• Navigation components

📝 Todo

• Flag/reporting functionality
• Error handling and loading states
• SEO optimization
• Performance optimization
• Mobile responsiveness
• Testing setup

🔗 Keeping Python Scripts

Your existing Python database loading scripts are preserved in the python-scripts/ directory. You can continue using them to populate the PostgreSQL database:

# From the project root, you can still run your Python scripts
cd python-scripts
python main.py  # or whatever your data loading script is

🚀 Deployment

Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy to Vercel
vercel

# Set environment variables in Vercel dashboard
# DATABASE_URL, REDIS_URL, etc.

Other Platforms

The app is configured to work with any platform that supports Node.js:

• Railway
• Render
• AWS Lambda
• Digital Ocean App Platform

🎯 Key Differences from Python Version

1. Framework: FastAPI → Next.js App Router (SPA)
2. Templates: Jinja2 → React/JSX components
3. Interactivity: HTMX → React state management
4. Database: SQLAlchemy → Drizzle ORM
5. Data Loading: API routes → Server Components + direct database calls
6. Architecture: Multi-page → Single-page application

✅ Next.js Best Practices Applied:

• Server Components for initial data loading (statistics, etc.)
• Client Components only where interactivity is needed
• Direct database calls in server functions instead of unnecessary API routes
• Minimal API surface - only /api/search for client-side search
• Server-side data fetching for better performance and SEO
• Type safety throughout the application

📚 Resources

• Next.js Documentation
• Drizzle ORM Documentation
• TailwindCSS Documentation
• TypeScript Documentation

🤝 Contributing

This is a migration of the original Project Artha. The goal is to maintain feature parity while leveraging modern web technologies for better performance and developer experience.