Browse & Read Verses

Overview

GitaChat provides a comprehensive reading experience for exploring the entire Bhagavad Gita. Browse all 18 chapters sequentially, search across all verses, or jump to specific teachings.

18 Chapters

Complete collection with chapter summaries

703 Verses

Every verse with translation and commentary

Client-Side Search

Instant filtering across all verses

Sequential Navigation

Previous/Next buttons for continuous reading

Browse All Chapters

The chapter index at /read provides an overview of all 18 chapters of the Bhagavad Gita.

Features

Chapter Listings: Each chapter displays:

Chapter number and Sanskrit name
English chapter title
Brief chapter summary
Verse count

Quick Search: Client-side search that filters verses in real-time:

Searches across all 703 verses
Matches keywords in translations
Highlights search terms in results
Shows context snippets with matches
Instant filtering as you type

Smart Highlighting: Search results show:

Chapter and verse reference
Matching portion of the verse
Context around the match
Click to view full verse

Implementation

Source: frontend/app/read/page.tsx The page uses client-side search for instant results:

// Fetch all verses on page load
const { data } = useQuery({
  queryKey: ['all-verses'],
  queryFn: async () => {
    const res = await fetch('/api/all-verses');
    return res.json();
  }
});

// Filter verses based on search query
const filteredVerses = verses.filter(verse =>
  verse.translation.toLowerCase().includes(search.toLowerCase())
);

Read by Chapter

Navigate to /read/[chapter] to read verses sequentially within a specific chapter.

Features

Sequential Reading:

Display one verse at a time
Previous/Next buttons for navigation
Progress indicator (Verse X of Y)
Direct URL support (/read/2?verse=47)

Verse Content:

Full verse translation
Expandable commentary
Bookmark and share options
Link to canonical verse page

Keyboard Navigation: Use arrow keys to navigate:

Left arrow: Previous verse
Right arrow: Next verse

URL Structure

/read/1           → Start at Chapter 1, Verse 1
/read/2           → Start at Chapter 2, Verse 1
/read/2?verse=47  → Jump to Chapter 2, Verse 47

Implementation

Source: frontend/app/read/[chapter]/page.tsx The chapter reader maintains state for the current verse:

const [currentVerse, setCurrentVerse] = useState(initialVerse);

const handleNext = () => {
  if (currentVerse < verses.length) {
    setCurrentVerse(currentVerse + 1);
  }
};

const handlePrevious = () => {
  if (currentVerse > 1) {
    setCurrentVerse(currentVerse - 1);
  }
};

Canonical Verse Pages

Each verse has a dedicated page at /verse/[chapter]/[verse] for direct linking and SEO.

Features

Static Generation: Verse pages are server-side rendered for:

Fast loading times
SEO optimization
Social media previews
Direct deep linking

Content Display:

Chapter and verse reference
Full verse translation
Expandable dual commentary
Related verses section
Previous/Next verse navigation

Metadata: Each page includes:

Title: “Bhagavad Gita Chapter X, Verse Y”
Description: First 150 characters of verse
Open Graph tags for social sharing
Canonical URL

Caching: Pages are cached for 24 hours for optimal performance.

URL Structure

/verse/2/47  → Bhagavad Gita Chapter 2, Verse 47
/verse/18/78 → Bhagavad Gita Chapter 18, Verse 78

Implementation

Source: frontend/app/verse/[chapter]/[verse]/page.tsx Canonical pages use Next.js static generation:

export async function generateMetadata({ params }) {
  const { chapter, verse: verseNum } = params;
  
  const data = await fetch(`/api/verse`, {
    method: 'POST',
    body: JSON.stringify({ chapter, verse: verseNum })
  }).then(r => r.json());
  
  return {
    title: `Bhagavad Gita Chapter ${chapter}, Verse ${verseNum}`,
    description: data.translation.slice(0, 150),
    openGraph: {
      title: `Chapter ${chapter}, Verse ${verseNum}`,
      description: data.translation
    }
  };
}

Search Implementation

Client-Side Search

The browse page uses client-side search for instant results without server requests: Algorithm:

Fetch all 703 verses on page load (cached)
Convert search query and verse text to lowercase
Filter verses containing the search term
Extract context around matches (±50 characters)
Highlight matching terms in results

Performance:

Initial load: ~500ms (fetch all verses)
Subsequent searches: Under 10ms (client-side filtering)
No server requests after initial load

Search Tips

Use specific keywords for better results. For example, “duty” finds verses about dharma, while “fear” finds teachings on overcoming anxiety.

Effective Searches:

Single keywords: “duty”, “mind”, “karma”
Phrases: “steadfast wisdom”, “supreme being”
Concepts: “self-control”, “devotion”, “renunciation”

Chapter Organization

The Bhagavad Gita consists of 18 chapters:

Chapter	Sanskrit Name	English Title	Verses
1	Arjuna Vishada Yoga	The Yoga of Arjuna’s Dejection	47
2	Sankhya Yoga	The Yoga of Knowledge	72
3	Karma Yoga	The Yoga of Action	43
4	Jnana Karma Sanyasa Yoga	The Yoga of Wisdom and Action	42
5	Karma Sanyasa Yoga	The Yoga of Renunciation	29
6	Dhyana Yoga	The Yoga of Meditation	47
7	Jnana Vijnana Yoga	The Yoga of Knowledge and Wisdom	30
8	Aksara Brahma Yoga	The Yoga of the Imperishable Brahman	28
9	Raja Vidya Raja Guhya Yoga	The Yoga of Royal Knowledge	34
10	Vibhuti Yoga	The Yoga of Divine Glories	42
11	Vishvarupa Darshana Yoga	The Yoga of the Universal Form	55
12	Bhakti Yoga	The Yoga of Devotion	20
13	Kshetra Kshetrajna Vibhaga Yoga	The Yoga of the Field and Knower	35
14	Gunatraya Vibhaga Yoga	The Yoga of the Three Gunas	27
15	Purushottama Yoga	The Yoga of the Supreme Being	20
16	Daivasura Sampad Vibhaga Yoga	The Yoga of Divine and Demonic Natures	24
17	Shraddhatraya Vibhaga Yoga	The Yoga of Three Kinds of Faith	28
18	Moksha Sanyasa Yoga	The Yoga of Liberation and Renunciation	78

From Search Results

Search for a keyword on /read
Click any matching verse
View full verse with commentary
Navigate to previous/next verses
Return to search results

Sequential Reading

Navigate to /read/[chapter]
Read verse-by-verse with Next button
Previous button to revisit verses
Chapter navigation to switch chapters
Bookmark important verses

Direct Access

Use URL format: /verse/[chapter]/[verse]
Share specific verses via URL
Deep link from external sources
SEO-optimized for search engines

While browsing and reading verses, users can: Bookmark Verses: Click the lotus icon to save verses (requires authentication) Add Notes: Add personal reflections to any verse (requires authentication) Share Verses: Copy verse URL to share with others Generate Images: Create AI-powered visualizations (requires authentication) Explore Related Verses: Click through to similar teachings

Performance Optimizations

Client-Side Caching:

All verses cached after first load
Search operates on cached data
No repeated server requests

Static Generation:

Canonical verse pages are pre-rendered
24-hour cache for static content
Instant page loads

Lazy Loading:

Chapter summaries load on demand
Commentary expands when clicked
Images load progressively

Accessibility

Keyboard Navigation:

Arrow keys for verse navigation
Tab key for focus management
Enter key to expand commentary

Screen Readers:

Semantic HTML structure
ARIA labels for interactive elements
Descriptive link text

Responsive Design:

Mobile-optimized layout
Touch-friendly buttons
Readable text at all sizes

Semantic Search

Ask questions and find relevant verses using AI

Daily Verse

Receive personalized daily verses

Bookmarks

Save verses for future reference

Notes

Add personal reflections to verses

Implementation Reference

Source Files:

Chapter index: frontend/app/read/page.tsx
Chapter reader: frontend/app/read/[chapter]/page.tsx
Canonical pages: frontend/app/verse/[chapter]/[verse]/page.tsx
All verses API: frontend/app/api/all-verses/route.ts

Get Started

Core Features

User Features

Integrations

Browse & Read Verses

Overview

18 Chapters

703 Verses

Client-Side Search

Sequential Navigation

Browse All Chapters

Features

Implementation

Read by Chapter

Features

URL Structure

Implementation

Canonical Verse Pages

Features

URL Structure

Implementation

Search Implementation

Client-Side Search

Search Tips

Chapter Organization

Navigation Patterns

From Search Results

Sequential Reading

Direct Access

User Actions

Performance Optimizations

Accessibility

Semantic Search

Daily Verse

Bookmarks

Notes

Implementation Reference

Build docs developers (and LLMs) love

Get Started

Core Features

User Features

Integrations

​Overview

18 Chapters

703 Verses

Client-Side Search

Sequential Navigation

​Browse All Chapters

​Features

​Implementation

​Read by Chapter

​Features

​URL Structure

​Implementation

​Canonical Verse Pages

​Features

​URL Structure

​Implementation

​Search Implementation

​Client-Side Search

​Search Tips

​Chapter Organization

​Navigation Patterns

​From Search Results

​Sequential Reading

​Direct Access

​User Actions

​Performance Optimizations

​Accessibility

​Related Features

Semantic Search

Daily Verse

Bookmarks

Notes

​Implementation Reference

Build docs developers (and LLMs) love

Overview

Browse All Chapters

Features

Implementation

Read by Chapter

Features

URL Structure

Implementation

Canonical Verse Pages

Features

URL Structure

Implementation

Search Implementation

Client-Side Search

Search Tips

Chapter Organization

Navigation Patterns

From Search Results

Sequential Reading

Direct Access

User Actions

Performance Optimizations

Accessibility

Related Features

Implementation Reference