React EPUB Reader with Highlights, Themes, Fonts, and Sticky Notes

A modern, modular EPUB book reader built with React and react-reader, featuring:

• EPUB reading with persistent location
• Light/Dark mode with theme persistence
• Custom font selection
• Text selection and multi-color highlights
• Highlight sidebar for managing highlights
• Sticky notes: draggable, editable, and persistent in the session
• Clean, modular code with isolated feature and style files

Features

• EPUB Viewer: Reads local EPUB files using react-reader.
• Themes: Toggle between light and dark mode. Theme is saved per user.
• Fonts: Choose from several fonts for comfortable reading.
• Highlights: Select text and highlight in multiple colors. Manage all highlights in a sidebar.
• Sticky Notes: Add, move (drag-and-drop), edit, and delete sticky notes anywhere in the reading area.
• Responsive UI: Modern, clean, and easy to use.

Getting Started

Prerequisites

• Node.js (v16+ recommended)
• npm

Install

1. Clone the repository:

   git clone (https://github.com/MohammedAmr04/React-EPUB-Reader)
   cd Bookreading

2. Install dependencies:

   npm install

Run the App

npm run dev

Open http://localhost:5173 in your browser.

Add Your EPUB

Place your .epub file in the public/ folder and update the url prop in App.jsx if needed.

Project Structure

src/
  App.jsx                # Main app logic
  App.css                # Main app styles
  BookReaderFeatures.jsx # Feature bar (theme, font, highlight color)
  BookReaderFeatures.css # Feature bar styles
  HighlightFeatures.jsx  # Highlight sidebar & color picker
  stickynotes/
    StickyNote.jsx       # Sticky note component (draggable)
    StickyNote.css       # Sticky note styles
  ...

Key Libraries

• react-reader
• @dnd-kit/core (for sticky note drag-and-drop)
• React, Vite

Usage

• Highlight text: Select text in the book, then choose a highlight color.
• Manage highlights: Open the sidebar to view, jump to, or remove highlights.
• Sticky notes: Double-click anywhere or use the "+ Add Sticky Note" button to add a note. Drag to move, edit text, or delete.
• Change theme or font: Use the feature bar at the top right.

Customization

• Add more fonts or highlight colors in App.jsx.
• Adjust sticky note styles in stickynotes/StickyNote.css.

Book Server (Optional)

This project includes a simple book-server (Node.js/Express) for serving EPUB files or handling downloads. Useful if you want to serve books dynamically or from a backend instead of the public/ folder.

Usage

1. Go to the book-server directory:

   cd book-server

2. Install dependencies:

   npm install

3. Start the server:

   node server.js

4. Place your EPUB files in book-server/downloads/.

You can then update the url prop in App.jsx to point to your backend, e.g.:

<ReactReader url="http://localhost:3000/downloads/book_76248.epub" ... />

License

MIT "# React-EPUB-Reader"