A comprehensive React-based Bible study application with advanced message management capabilities.

The OBS Bible Application is a sophisticated Bible study tool that provides users with comprehensive verse navigation, display, and custom message management functionality. Built with React and powered by Vite, the application features a modular architecture designed for scalability and maintainability.

• Complete Bible Navigation: Full book, chapter, and verse navigation
• Verse Display: Rich verse display with context and cross-references
• History Management: Track and revisit previously viewed verses
• Cross-Tab Synchronization: Share verse selections across browser tabs

• Message Creation: Full-featured markdown-supported message editor with validation
• Message Library: Comprehensive message management with search, filter, and sorting
• Custom Message Display: Seamless integration with OBS overlay display system
• Cross-Tab Synchronization: Real-time message updates across browser tabs
• Data Persistence: Local storage with cross-tab synchronization
• Advanced UI: Responsive design with accessibility compliance
• Bulk Operations: Select, duplicate, and manage multiple messages

670+ Tests Passing across the entire application with 100% success rate:

• 23 Test Suites: Complete coverage of all components and utilities
• Messages Module: 450+ comprehensive tests with complete functionality coverage
• Display Integration: Enhanced cross-component testing for custom message display
• Quality Assurance: All edge cases, error conditions, and integration scenarios tested

• Modular Design: Clean separation of concerns with dedicated modules
• Component Library: Reusable, accessible React components
• Performance Optimized: Efficient rendering and memory management
• Cross-Browser Compatible: Works across all modern browsers
• Responsive Design: Mobile-first responsive interface

• MessagesTab: Main navigation and layout container
• MessageEditor: Advanced message creation with markdown support and validation
• MessageLibrary: Complete message management interface with search and filtering
• MessageCard: Individual message display, actions, and display button functionality
• MessageEditModal: In-place message editing capabilities
• SubTabs: Tabbed navigation within messages module
• Display Integration: Custom message display in OBS overlay system

• customMessages: Complete CRUD operations with validation
• markdownRenderer: Safe markdown parsing and rendering
• broadcastChannel: Cross-tab communication and synchronization
• verseSyncUtils: Enhanced cross-tab synchronization for custom message display
• verseHistory: Extended state management for custom message and verse handling
• markdownUtils: Markdown-to-plain-text conversion for display optimization

• Node.js 16+
• npm or yarn

npm install

npm run dev

# Run all tests
npm test

# Run Messages module tests specifically
npm test src/messages

npm run build

• React 18: Modern React with hooks and concurrent features
• Vite: Fast build tool and development server
• Jest: Comprehensive testing framework
• Testing Library: Component testing utilities
• ESLint: Code quality and consistency
• CSS3: Modern styling with custom properties

• Chrome 88+
• Firefox 78+
• Safari 14+
• Edge 88+

This project follows a milestone-driven development approach with comprehensive testing requirements. All contributions must maintain 100% test coverage and follow the established architectural patterns.

Support this project on Patreon

This project is licensed under the MIT License.

Latest Achievement: 🎉 MILESTONE 12 COMPLETE - Critical Bug Fix & UI Enhancement: Resolved custom message library sync issue and enhanced display format. Fixed missing local event dispatches in CRUD operations ensuring immediate message appearance, plus removed titles from displays for cleaner presentation. All 670+ tests passing with bulletproof reliability.