📚 EPUB Reader

A modern, feature-rich web-based EPUB reader built with React and epub.js. Read your favorite books right in your browser with a beautiful, customizable interface.

✨ Features

📖 Reading Experience

• Multi-color Text Highlighting - Yellow, green, blue, and pink highlights
• Bookmarks - Save and navigate to your favorite passages
• Progress Tracking - Visual progress bar with percentage
• Table of Contents - Easy chapter navigation
• Single & Spread Modes - Read one page or two-page spread

🎨 Customization

• 3 Themes - Light, Dark, and Sepia modes
• Font Options - Sans-serif, Serif, and Monospace
• Adjustable Font Size - 80% to 150%
• Responsive Design - Works on desktop and tablet

💾 Storage

• Frontend-Only - No backend required, everything runs in your browser
• IndexedDB - Efficient local storage for books and reading data
• Persistent State - Your highlights, bookmarks, and reading position are saved

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm

Installation

# Clone the repository
git clone https://github.com/yourusername/epub-reader.git
cd epub-reader

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build
npm run preview

📖 Usage

1. Import Books - Click "Import EPUB" and select your .epub files
2. Start Reading - Click on any book cover to open it
3. Customize - Use the settings menu to adjust theme, fonts, and layout
4. Highlight Text - Select text to see highlight options
5. Navigate - Use arrow buttons, TOC, or click the edges to turn pages

🏗️ Architecture

src/
├── lib/
│   └── storage.js          # IndexedDB wrapper for data persistence
├── hooks/
│   ├── useTheme.js         # Theme management hook
│   └── useEpubReader.js    # Core epub.js integration
├── pages/
│   ├── Library.jsx         # Book library grid
│   └── Reader.jsx          # Reading interface
├── App.jsx                 # React Router setup
└── index.css               # Global styles with CSS variables

Key Technologies

• React 18 - UI framework
• epub.js - EPUB rendering engine
• React Router - Client-side routing
• localforage - IndexedDB wrapper
• Lucide React - Icon set

🎯 Features in Detail

Highlighting System

• Select any text in the book to see a context menu
• Choose from 4 highlight colors
• Highlights persist across sessions
• View all highlights in the sidebar

Reading Data Storage

All data is stored locally using IndexedDB:

• Book files (original EPUB)
• Metadata (title, author, cover)
• Reading progress and location
• Highlights with text and CFI ranges
• Bookmarks with custom labels

Navigation

• Arrow buttons - Fixed left/right navigation
• Click zones - Click edges to turn pages
• TOC - Jump to any chapter
• Keyboard - Arrow keys supported

🛠️ Development

# Run development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

📝 License

MIT License - feel free to use this project for personal or commercial purposes.

🙏 Acknowledgments

• epub.js - Amazing EPUB rendering library
• localforage - Simplified IndexedDB API
• Inspired by modern reading apps like O'Reilly Learning Platform

🐛 Known Issues

• Some complex EPUB layouts may not render perfectly
• Large books (>50MB) may take longer to load initially

🔮 Future Enhancements

• Full-text search within books
• Reading statistics
• Export highlights and notes
• Cloud sync support
• Annotation and note-taking
• Dictionary integration

---

Made with ❤️ for book lovers