refactor: consolidate backend/frontend, remove api/web duplicates

- backend/ kept as canonical, api/ features merged (EBook, ReadingProgress, ReadingSettings)
- frontend/ kept as canonical, web/ pages merged (Library, Reader, AddBook, Auth, Settings)
- Added Dockerfiles for backend/ and frontend/
- Updated docker-compose.yml for consolidated services
- Updated README, package.json workspaces
- api/ and web/ directories removed

.github/workflows/backend-ci.yml

@@ -1,72 +0,0 @@
-name: Backend CI
-
-on:
-  push:
-    branches: [main, develop]
-    paths:
-      - "backend/**"
-      - ".github/workflows/backend-ci.yml"
-  pull_request:
-    paths:
-      - "backend/**"
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-
-    services:
-      postgres:
-        image: postgres:16
-        env:
-          POSTGRES_DB: cloud_reader
-          POSTGRES_USER: cloud_reader
-          POSTGRES_PASSWORD: cloud_reader
-        ports:
-          - 5432:5432
-        options: >-
-          --health-cmd pg_isready
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-
-    defaults:
-      run:
-        working-directory: backend
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Set up Python 3.12
-        uses: actions/setup-python@v5
-        with:
-          python-version: "3.12"
-          cache: "pip"
-          cache-dependency-path: backend/requirements/dev.txt
-
-      - name: Install dependencies
-        run: |
-          python -m pip install --upgrade pip
-          pip install -r requirements/dev.txt
-
-      - name: Lint
-        run: ruff check .
-
-      - name: Run migrations
-        run: python manage.py migrate
-        env:
-          DB_HOST: localhost
-          DB_NAME: cloud_reader
-          DB_USER: cloud_reader
-          DB_PASSWORD: cloud_reader
-          DB_PORT: 5432
-          SECRET_KEY: ci-test-secret-key-do-not-use-in-production
-
-      - name: Run tests
-        run: pytest
-        env:
-          DB_HOST: localhost
-          DB_NAME: cloud_reader
-          DB_USER: cloud_reader
-          DB_PASSWORD: cloud_reader
-          DB_PORT: 5432
-          SECRET_KEY: ci-test-secret-key-do-not-use-in-production

.github/workflows/frontend-ci.yml

@@ -1,42 +0,0 @@
-name: Frontend CI
-
-on:
-  push:
-    branches: [main, develop]
-    paths:
-      - "frontend/**"
-      - "shared/**"
-      - ".github/workflows/frontend-ci.yml"
-  pull_request:
-    paths:
-      - "frontend/**"
-      - "shared/**"
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Set up Node.js 20
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-          cache: "yarn"
-          cache-dependency-path: yarn.lock
-
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-
-      - name: Type check shared
-        run: yarn workspace @cloud-reader/shared typecheck
-
-      - name: Build shared
-        run: yarn workspace @cloud-reader/shared build
-
-      - name: Type check frontend
-        run: yarn workspace @cloud-reader/frontend typecheck
-
-      - name: Build frontend
-        run: yarn workspace @cloud-reader/frontend build

.github/workflows/mobile-ci.yml

@@ -1,39 +0,0 @@
-name: Mobile CI
-
-on:
-  push:
-    branches: [main, develop]
-    paths:
-      - "mobile/**"
-      - "shared/**"
-      - ".github/workflows/mobile-ci.yml"
-  pull_request:
-    paths:
-      - "mobile/**"
-      - "shared/**"
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Set up Node.js 20
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-          cache: "yarn"
-          cache-dependency-path: yarn.lock
-
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-
-      - name: Type check shared
-        run: yarn workspace @cloud-reader/shared typecheck
-
-      - name: Build shared
-        run: yarn workspace @cloud-reader/shared build
-
-      - name: Type check mobile
-        run: yarn workspace @cloud-reader/mobile typecheck

.gitignore

@@ -1,48 +0,0 @@
-# Python
-__pycache__/
-*.py[cod]
-*.egg-info/
-dist/
-build/
-.eggs/
-*.egg
-.env
-venv/
-.venv/
-*.sqlite3
-
-# Node
-node_modules/
-.pnp
-.pnp.js
-yarn-error.log*
-
-# Build artifacts
-dist/
-build/
-*.tsbuildinfo
-
-# IDE
-.vscode/
-.idea/
-*.swp
-*.swo
-.DS_Store
-
-# Django
-backend/media/
-backend/staticfiles/
-backend/**/migrations/
-
-# Expo / React Native
-mobile/.expo/
-mobile/ios/Pods/
-mobile/android/.gradle/
-mobile/android/app/build/
-mobile/android/build/
-mobile/*.hprof
-
-# Environment
-.env.local
-.env.production
-.env.development

README.md

@@ -1,195 +1,57 @@
 # Cloud Reader
 
-A modern eBook reader with web and mobile clients, powered by Django REST Framework.
+A full-stack e-book reader application with cross-device sync. Upload EPUB/PDF files, track reading progress, bookmark passages, take notes, and customize your reading experience.
 
-## Monorepo Structure
+## Architecture
 
 ```
 cloud-reader/
-├── backend/            # Django API server (Python 3.12 + DRF)
+├── backend/         # Django REST API (canonical backend)
 │   ├── config/      # Django project settings
-│   ├── apps/           # Django applications
+│   ├── apps/
-│   │   ├── accounts/   # User authentication & profiles
+│   │   ├── users/       # User auth (JWT)
-│   │   ├── documents/  # Document management & uploads
+│   │   ├── books/       # Books, e-books, reading progress, settings
-│   │   ├── collections/# Document collections
+│   │   └── annotations/ # Bookmarks and notes
-│   │   └── reading/    # Bookmarks, highlights, reading progress
+│   ├── manage.py
-│   ├── requirements/   # pip dependency files
+│   └── requirements.txt
-│   ├── Dockerfile
+├── frontend/        # React + Vite + TypeScript (canonical frontend)
-│   └── manage.py
-├── frontend/           # React web app (TypeScript + Vite)
 │   ├── src/
-│   │   ├── pages/      # Route pages (lazy-loaded)
+│   │   ├── api/         # API client (axios with JWT refresh)
-│   │   ├── hooks/      # Custom React hooks
+│   │   ├── components/  # Reusable components
-│   │   ├── services/   # API client & auth service
+│   │   ├── context/     # Auth and annotations context
-│   │   ├── types/      # Frontend-specific types
+│   │   ├── hooks/       # Custom hooks
-│   │   └── styles/     # Global CSS
+│   │   ├── pages/       # Route pages (Library, Reader, AddBook, Auth, Settings)
-│   ├── Dockerfile
+│   │   └── types/       # TypeScript type definitions
-│   └── vite.config.ts
+│   └── package.json
-├── mobile/             # Expo/React Native mobile app
+└── docker-compose.yml
-│   ├── app/            # Expo Router pages
-│   ├── src/            # Mobile source code
-│   ├── app.json
-│   └── Dockerfile
-├── shared/             # Shared TypeScript types & utilities
-│   └── src/
-│       └── index.ts    # API response types, constants
-├── .github/workflows/  # CI/CD pipelines
-└── package.json        # Yarn workspace root
 ```
 
-## Prerequisites
+## Quick Start
 
-- **Python** 3.12+
+### Docker (recommended)
-- **Node.js** 20 LTS
+```bash
-- **Yarn** 4.x
+docker compose up --build
-- **PostgreSQL** 16
+```
-- **Expo CLI** (for mobile development)
+- **Frontend:** http://localhost:5173
-
+- **Backend API:** http://localhost:8000/api/
----
-
-## Backend Setup
 
+### Backend (standalone)
 ```bash
 cd backend
-
+pip install -r requirements.txt
-# Create virtual environment
-python -m venv .venv
-source .venv/bin/activate  # Linux/macOS
-# .venv\Scripts\activate   # Windows
-
-# Install dependencies
-pip install -r requirements/dev.txt
-
-# Configure environment
-cp .env.example .env
-# Edit .env with your PostgreSQL credentials
-
-# Run migrations
 python manage.py migrate
-
-# Create admin user
-python manage.py createsuperuser
-
-# Start development server
 python manage.py runserver
 ```
 
-The API will be available at `http://localhost:8000/`. Browse the API at `http://localhost:8000/api/schema/swagger-ui/`.
+### Frontend (standalone)
-
-### Backend Tests
-
 ```bash
-cd backend
+cd frontend
-pytest
-```
-
----
-
-## Frontend Setup
-
-```bash
-# From monorepo root
 yarn install
-
+yarn dev
-# Start dev server (with API proxy)
-yarn frontend:dev
 ```
 
-The frontend will be available at `http://localhost:5173/`. API requests under `/api/` are proxied to `http://localhost:8000/`.
+## Migration Notes
-
+Consolidated from duplicate `api/` + `web/` into single `backend/` + `frontend/` canonical structure.
-### Frontend Build
+- `backend/` kept as canonical; `api/` features (e-book uploads, reading progress, reading settings) merged in.
-
+- `frontend/` kept as canonical; `web/` pages (Library, Reader, AddBook, Auth, Settings) merged in.
-```bash
+- `api/` and `web/` directories removed.
-yarn frontend:build
-```
-
----
-
-## Mobile Setup
-
-```bash
-# From monorepo root
-yarn install
-
-# Start Expo dev server
-yarn mobile:start
-
-# Run on Android
-yarn mobile:android
-
-# Run on iOS (macOS only)
-yarn mobile:ios
-```
-
-> The mobile API client defaults to `http://localhost:8000/`. For physical devices, update the `API_BASE` in `mobile/src/services/api.ts` to your machine's local IP.
-
----
-
-## Shared Package
-
-The `shared/` package contains TypeScript types and constants used by both the frontend and mobile apps.
-
-```bash
-# Build shared package
-yarn shared:build
-```
-
----
-
-## CI/CD
-
-Three independent CI pipelines run on pushes and PRs:
-
-| Pipeline | Trigger Path | What It Does |
-|----------|-------------|--------------|
-| **Backend CI** | `backend/**` | Installs Python deps, runs Ruff linter, applies migrations, runs pytest |
-| **Frontend CI** | `frontend/**`, `shared/**` | Installs Node deps, type-check & build shared, type-check & build frontend |
-| **Mobile CI** | `mobile/**`, `shared/**` | Installs Node deps, type-check shared & mobile |
-
-Pipeline configs are in `.github/workflows/`.
-
-### Docker Deployments
-
-Each app has its own Dockerfile for independent deployment:
-
-```bash
-# Build backend image
-docker build -t cloud-reader-backend backend/
-
-# Build frontend image
-docker build -t cloud-reader-frontend frontend/
-
-# Build mobile image (web export)
-docker build -t cloud-reader-mobile mobile/
-```
-
----
-
-## API Endpoints
-
-| Endpoint | Description |
-|----------|-------------|
-| `POST /api/v1/auth/register/` | Create a new account |
-| `POST /api/v1/auth/token/` | Obtain JWT tokens |
-| `POST /api/v1/auth/token/refresh/` | Refresh JWT token |
-| `GET /api/v1/auth/me/` | Get current user profile |
-| `GET/POST /api/v1/documents/` | List / upload documents |
-| `GET/PUT/DELETE /api/v1/documents/:id/` | Document detail |
-| `GET/POST /api/v1/collections/` | List / create collections |
-| `GET/PUT/DELETE /api/v1/collections/:id/` | Collection detail |
-| `POST /api/v1/collections/:id/add_documents/` | Add docs to collection |
-| `POST /api/v1/collections/:id/remove_documents/` | Remove docs from collection |
-| `GET/POST /api/v1/reading/bookmarks/` | List / create bookmarks |
-| `GET/POST /api/v1/reading/highlights/` | List / create highlights |
-| `GET/POST /api/v1/reading/progress/` | Track reading progress |
-
----
-
-## Tech Stack
-
-- **Backend:** Django 5, Django REST Framework, SimpleJWT, PostgreSQL, drf-spectacular
-- **Frontend:** React 18, TypeScript, Vite, React Router, Axios
-- **Mobile:** Expo SDK 51, React Native 0.74, Expo Router
-- **Shared:** TypeScript types, Zod schemas
-- **CI/CD:** GitHub Actions
-- **Container:** Docker (separate images per app)

backend/.env.example

@@ -1,15 +1,8 @@
-# Cloud Reader Backend — Environment Variables
+# Backend environment (example – never commit real secrets)
-# Copy to .env and fill in your values.
+DJANGO_SECRET_KEY=django-insecure-change-me-in-production
-
+DJANGO_DEBUG=True
-SECRET_KEY=django-insecure-change-me-in-production
-DEBUG=True
-
-DB_ENGINE=django.db.backends.postgresql
 DB_NAME=cloud_reader
-DB_USER=cloud_reader
+DB_USER=postgres
-DB_PASSWORD=cloud_reader
+DB_PASSWORD=postgres
 DB_HOST=localhost
 DB_PORT=5432
-
-CORS_ALLOWED_ORIGINS=http://localhost:5173,http://localhost:3000
-ALLOWED_HOSTS=localhost,127.0.0.1

backend/Dockerfile

@@ -1,18 +1,18 @@
 FROM python:3.12-slim
 
-ENV PYTHONDONTWRITEBYTECODE=1 \
-    PYTHONUNBUFFERED=1 \
-    DJANGO_SETTINGS_MODULE=config.settings
-
 WORKDIR /app
 
-COPY requirements/production.txt /app/requirements/
+RUN apt-get update && apt-get install -y --no-install-recommends \
-RUN pip install --no-cache-dir -r requirements/production.txt
+    libpq-dev gcc && \
+    rm -rf /var/lib/apt/lists/*
 
-COPY . /app
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
 
-RUN python manage.py collectstatic --noinput
+COPY . ./
+
+RUN mkdir -p media
 
 EXPOSE 8000
 
-CMD ["gunicorn", "config.wsgi:application", "--bind", "0.0.0.0:8000", "--workers", "4"]
+CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

backend/apps/accounts/admin.py

@@ -1,10 +0,0 @@
-from django.contrib import admin
-
-from .models import User
-
-
-@admin.register(User)
-class UserAdmin(admin.ModelAdmin):
-    list_display = ["email", "display_name", "is_verified", "is_active", "date_joined"]
-    search_fields = ["email", "display_name"]
-    list_filter = ["is_verified", "is_active"]

backend/apps/accounts/models.py

@@ -1,29 +0,0 @@
-from django.contrib.auth.models import AbstractUser
-from django.db import models
-
-
-class User(AbstractUser):
-    """Custom user model for Cloud Reader."""
-
-    email = models.EmailField(unique=True)
-    display_name = models.CharField(max_length=150, blank=True)
-    avatar = models.ImageField(upload_to="avatars/", blank=True, null=True)
-    is_verified = models.BooleanField(default=False)
-    reading_preferences = models.JSONField(default=dict, blank=True)
-
-    USERNAME_FIELD = "email"
-    REQUIRED_FIELDS = ["username"]
-
-    class Meta:
-        db_table = "accounts_user"
-        verbose_name = "User"
-        verbose_name_plural = "Users"
-
-    def __str__(self) -> str:
-        return self.email
-
-    @property
-    def avatar_url(self) -> str | None:
-        if self.avatar:
-            return self.avatar.url
-        return None

backend/apps/accounts/serializers.py

@@ -1,53 +0,0 @@
-from django.contrib.auth import get_user_model
-from rest_framework import serializers
-
-from .models import User
-
-UserModel = get_user_model()
-
-
-class RegisterSerializer(serializers.ModelSerializer[User]):
-    password = serializers.CharField(write_only=True, min_length=8)
-    password_confirm = serializers.CharField(write_only=True, min_length=8)
-
-    class Meta:
-        model = User
-        fields = ["email", "username", "display_name", "password", "password_confirm"]
-
-    def validate(self, attrs):
-        if attrs["password"] != attrs.pop("password_confirm"):
-            raise serializers.ValidationError({"password_confirm": "Passwords do not match."})
-        return attrs
-
-    def create(self, validated_data):
-        password = validated_data.pop("password")
-        user = UserModel(**validated_data)
-        user.set_password(password)
-        user.save()
-        return user
-
-
-class UserSerializer(serializers.ModelSerializer[User]):
-    avatar_url = serializers.SerializerMethodField()
-
-    class Meta:
-        model = User
-        fields = [
-            "id", "email", "username", "display_name", "avatar_url",
-            "date_joined", "is_verified", "reading_preferences",
-        ]
-        read_only_fields = ["id", "email", "date_joined", "is_verified"]
-
-    def get_avatar_url(self, obj: User) -> str | None:
-        return obj.avatar_url
-
-
-class ChangePasswordSerializer(serializers.Serializer):
-    old_password = serializers.CharField(required=True)
-    new_password = serializers.CharField(required=True, min_length=8)
-
-    def validate_old_password(self, value: str) -> str:
-        user = self.context["request"].user
-        if not user.check_password(value):
-            raise serializers.ValidationError("Current password is incorrect.")
-        return value

backend/apps/accounts/urls.py

@@ -1,14 +0,0 @@
-from django.urls import path
-from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView
-
-from . import views
-
-app_name = "accounts"
-
-urlpatterns = [
-    path("register/", views.RegisterView.as_view(), name="register"),
-    path("me/", views.UserDetailView.as_view(), name="user-detail"),
-    path("change-password/", views.ChangePasswordView.as_view(), name="change-password"),
-    path("token/", TokenObtainPairView.as_view(), name="token-obtain"),
-    path("token/refresh/", TokenRefreshView.as_view(), name="token-refresh"),
-]

backend/apps/accounts/views.py

@@ -1,36 +0,0 @@
-from django.contrib.auth import get_user_model
-from rest_framework import generics, permissions, status
-from rest_framework.response import Response
-from rest_framework.views import APIView
-
-from .serializers import ChangePasswordSerializer, RegisterSerializer, UserSerializer
-
-UserModel = get_user_model()
-
-
-class RegisterView(generics.CreateAPIView):
-    """Create a new user account."""
-    queryset = UserModel.objects.all()
-    serializer_class = RegisterSerializer
-    permission_classes = [permissions.AllowAny]
-
-
-class UserDetailView(generics.RetrieveUpdateAPIView):
-    """Get or update the authenticated user's profile."""
-    serializer_class = UserSerializer
-    permission_classes = [permissions.IsAuthenticated]
-
-    def get_object(self):
-        return self.request.user
-
-
-class ChangePasswordView(APIView):
-    """Change the authenticated user's password."""
-    permission_classes = [permissions.IsAuthenticated]
-
-    def post(self, request):
-        serializer = ChangePasswordSerializer(data=request.data, context={"request": request})
-        serializer.is_valid(raise_exception=True)
-        request.user.set_password(serializer.validated_data["new_password"])
-        request.user.save()
-        return Response({"detail": "Password changed successfully."}, status=status.HTTP_200_OK)

backend/apps/annotations/admin.py

@@ -0,0 +1,19 @@
+from django.contrib import admin
+
+from apps.annotations.models import Bookmark, Note
+
+
+@admin.register(Bookmark)
+class BookmarkAdmin(admin.ModelAdmin):
+    list_display = ("user", "book", "page", "created_at")
+    list_select_related = ("user", "book")
+    search_fields = ("user__email", "book__title", "location_text")
+    list_filter = ("created_at",)
+
+
+@admin.register(Note)
+class NoteAdmin(admin.ModelAdmin):
+    list_display = ("user", "book", "page", "created_at", "updated_at")
+    list_select_related = ("user", "book")
+    search_fields = ("user__email", "book__title", "content", "location_text")
+    list_filter = ("created_at",)

backend/apps/annotations/apps.py

@@ -0,0 +1,7 @@
+from django.apps import AppConfig
+
+
+class AnnotationsConfig(AppConfig):
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "apps.annotations"
+    label = "annotations"

backend/apps/annotations/models.py

@@ -0,0 +1,84 @@
+import uuid
+
+from django.conf import settings
+from django.db import models
+
+
+class Bookmark(models.Model):
+    """A saved location in a book that the user can return to."""
+
+    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
+    user = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="bookmarks",
+        db_index=True,
+    )
+    book = models.ForeignKey(
+        "books.Book",
+        on_delete=models.CASCADE,
+        related_name="bookmarks",
+        db_index=True,
+    )
+    page = models.PositiveIntegerField()
+    location_text = models.TextField(
+        blank=True,
+        default="",
+        help_text="The selected passage text at this location",
+    )
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    class Meta:
+        db_table = "annotations_bookmark"
+        verbose_name = "Bookmark"
+        verbose_name_plural = "Bookmarks"
+        ordering = ["-created_at"]
+        constraints = [
+            models.UniqueConstraint(
+                fields=["user", "book", "page"],
+                name="uq_bookmark_user_book_page",
+            )
+        ]
+
+    def __str__(self) -> str:
+        return f"{self.user} @ {self.book} p.{self.page}"
+
+
+class Note(models.Model):
+    """A user-written note attached to a specific location in a book."""
+
+    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
+    user = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="notes",
+        db_index=True,
+    )
+    book = models.ForeignKey(
+        "books.Book",
+        on_delete=models.CASCADE,
+        related_name="notes",
+        db_index=True,
+    )
+    page = models.PositiveIntegerField()
+    location_text = models.TextField(
+        blank=True,
+        default="",
+        help_text="The selected passage text this note refers to",
+    )
+    content = models.TextField(
+        help_text="The note body content"
+    )
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    class Meta:
+        db_table = "annotations_note"
+        verbose_name = "Note"
+        verbose_name_plural = "Notes"
+        ordering = ["-created_at"]
+
+    def __str__(self) -> str:
+        preview = self.content[:50]
+        return f"{self.user} @ {self.book} p.{self.page}: {preview}"

backend/apps/annotations/permissions.py

@@ -0,0 +1,8 @@
+from rest_framework import permissions
+
+
+class IsOwner(permissions.BasePermission):
+    """Grant access only if the requesting user owns the object."""
+
+    def has_object_permission(self, request, view, obj) -> bool:
+        return obj.user == request.user

backend/apps/annotations/serializers.py

@@ -0,0 +1,108 @@
+from rest_framework import serializers
+
+from apps.annotations.models import Bookmark, Note
+
+
+class BookmarkSerializer(serializers.ModelSerializer):
+    """Serialize Bookmark data with full details."""
+
+    book_title = serializers.CharField(source="book.title", read_only=True)
+
+    class Meta:
+        model = Bookmark
+        fields = [
+            "id",
+            "book",
+            "book_title",
+            "page",
+            "location_text",
+            "created_at",
+            "updated_at",
+        ]
+        read_only_fields = ["id", "created_at", "updated_at", "book_title"]
+
+    def validate_page(self, value: int) -> int:
+        if value < 1:
+            raise serializers.ValidationError("Page must be a positive integer.")
+        return value
+
+
+class BookmarkCreateSerializer(serializers.ModelSerializer):
+    """Serializer used for creating bookmarks. Sets user from request context."""
+
+    class Meta:
+        model = Bookmark
+        fields = ["book", "page", "location_text"]
+
+    def validate_page(self, value: int) -> int:
+        if value < 1:
+            raise serializers.ValidationError("Page must be a positive integer.")
+        return value
+
+    def validate(self, attrs):
+        user = self.context["request"].user
+        if Bookmark.objects.filter(
+            user=user, book=attrs["book"], page=attrs["page"]
+        ).exists():
+            raise serializers.ValidationError(
+                {"page": "A bookmark already exists at this page for this book."}
+            )
+        return attrs
+
+    def create(self, validated_data):
+        validated_data["user"] = self.context["request"].user
+        return super().create(validated_data)
+
+
+class NoteSerializer(serializers.ModelSerializer):
+    """Serialize Note data with full details."""
+
+    book_title = serializers.CharField(source="book.title", read_only=True)
+
+    class Meta:
+        model = Note
+        fields = [
+            "id",
+            "book",
+            "book_title",
+            "page",
+            "location_text",
+            "content",
+            "created_at",
+            "updated_at",
+        ]
+        read_only_fields = ["id", "created_at", "updated_at", "book_title"]
+
+    def validate_page(self, value: int) -> int:
+        if value < 1:
+            raise serializers.ValidationError("Page must be a positive integer.")
+        return value
+
+    def validate_content(self, value: str) -> str:
+        stripped = value.strip()
+        if not stripped:
+            raise serializers.ValidationError("Note content cannot be empty.")
+        return stripped
+
+
+class NoteCreateSerializer(serializers.ModelSerializer):
+    """Serializer used for creating notes. Sets user from request context."""
+
+    class Meta:
+        model = Note
+        fields = ["book", "page", "location_text", "content"]
+
+    def validate_page(self, value: int) -> int:
+        if value < 1:
+            raise serializers.ValidationError("Page must be a positive integer.")
+        return value
+
+    def validate_content(self, value: str) -> str:
+        stripped = value.strip()
+        if not stripped:
+            raise serializers.ValidationError("Note content cannot be empty.")
+        return stripped
+
+    def create(self, validated_data):
+        validated_data["user"] = self.context["request"].user
+        return super().create(validated_data)

backend/apps/annotations/tests.py

@@ -0,0 +1,331 @@
+"""Tests for the annotations app – Bookmarks & Notes API."""
+
+import pytest
+from django.urls import reverse
+from rest_framework import status
+from rest_framework.test import APIClient
+
+from apps.annotations.models import Bookmark, Note
+from apps.books.models import Book
+from apps.users.models import User
+
+
+# ---------------------------------------------------------------------------
+# Fixtures
+# ---------------------------------------------------------------------------
+
+@pytest.fixture
+def api_client() -> APIClient:
+    return APIClient()
+
+
+@pytest.fixture
+def user() -> User:
+    return User.objects.create_user(
+        username="testuser",
+        email="test@example.com",
+        password="testpass123",
+    )
+
+
+@pytest.fixture
+def other_user() -> User:
+    return User.objects.create_user(
+        username="other",
+        email="other@example.com",
+        password="testpass123",
+    )
+
+
+@pytest.fixture
+def auth_client(api_client: APIClient, user: User) -> APIClient:
+    api_client.force_authenticate(user=user)
+    return api_client
+
+
+@pytest.fixture
+def book() -> Book:
+    return Book.objects.create(
+        title="Test Book",
+        author="Test Author",
+        total_pages=300,
+    )
+
+
+@pytest.fixture
+def bookmark(auth_client, user: User, book: Book) -> Bookmark:
+    return Bookmark.objects.create(
+        user=user,
+        book=book,
+        page=42,
+        location_text="important passage",
+    )
+
+
+@pytest.fixture
+def note(auth_client, user: User, book: Book) -> Note:
+    return Note.objects.create(
+        user=user,
+        book=book,
+        page=15,
+        location_text="highlighted section",
+        content="This is my note about this section.",
+    )
+
+
+# ---------------------------------------------------------------------------
+# Bookmark tests
+# ---------------------------------------------------------------------------
+
+class TestBookmarkList:
+    url = reverse("bookmark-list")
+
+    def test_unauthenticated_user_cannot_list(self, api_client: APIClient):
+        response = api_client.get(self.url)
+        assert response.status_code == status.HTTP_401_UNAUTHORIZED
+
+    def test_list_returns_user_bookmarks_only(
+        self, auth_client: APIClient, user: User, other_user: User, book: Book
+    ):
+        Bookmark.objects.create(user=user, book=book, page=1)
+        Bookmark.objects.create(user=other_user, book=book, page=2)
+
+        response = auth_client.get(self.url)
+        assert response.status_code == status.HTTP_200_OK
+        results = response.data["results"]
+        assert len(results) == 1
+        assert results[0]["page"] == 1
+
+    def test_list_returns_empty_when_no_bookmarks(
+        self, auth_client: APIClient
+    ):
+        response = auth_client.get(self.url)
+        assert response.status_code == status.HTTP_200_OK
+        assert response.data["count"] == 0
+
+    def test_list_orders_by_newest_first(
+        self, auth_client: APIClient, user: User, book: Book
+    ):
+        b1 = Bookmark.objects.create(user=user, book=book, page=1)
+        b2 = Bookmark.objects.create(user=user, book=book, page=2)
+        response = auth_client.get(self.url)
+        results = response.data["results"]
+        assert results[0]["page"] == 2
+        assert results[1]["page"] == 1
+
+    def test_list_includes_book_title(
+        self, auth_client: APIClient, bookmark: Bookmark
+    ):
+        response = auth_client.get(self.url)
+        assert response.status_code == status.HTTP_200_OK
+        assert response.data["results"][0]["book_title"] == "Test Book"
+
+
+class TestBookmarkCreate:
+    url = reverse("bookmark-list")
+
+    def test_create_bookmark(self, auth_client: APIClient, book: Book):
+        data = {"book": str(book.id), "page": 10, "location_text": "key insight"}
+        response = auth_client.post(self.url, data, format="json")
+        assert response.status_code == status.HTTP_201_CREATED
+        assert response.data["page"] == 10
+
+    def test_create_bookmark_without_location_text(
+        self, auth_client: APIClient, book: Book
+    ):
+        data = {"book": str(book.id), "page": 5}
+        response = auth_client.post(self.url, data, format="json")
+        assert response.status_code == status.HTTP_201_CREATED
+        assert response.data["page"] == 5
+
+    def test_duplicate_bookmark_page_is_rejected(
+        self, auth_client: APIClient, bookmark: Bookmark
+    ):
+        data = {"book": str(bookmark.book.id), "page": bookmark.page}
+        response = auth_client.post(self.url, data, format="json")
+        assert response.status_code == status.HTTP_400_BAD_REQUEST
+
+    def test_unauthenticated_user_cannot_create(
+        self, api_client: APIClient, book: Book
+    ):
+        data = {"book": str(book.id), "page": 10}
+        response = api_client.post(self.url, data, format="json")
+        assert response.status_code == status.HTTP_401_UNAUTHORIZED
+
+    def test_invalid_page_rejected(
+        self, auth_client: APIClient, book: Book
+    ):
+        data = {"book": str(book.id), "page": 0}
+        response = auth_client.post(self.url, data, format="json")
+        assert response.status_code == status.HTTP_400_BAD_REQUEST
+
+
+class TestBookmarkDetail:
+    def test_get_bookmark(
+        self, auth_client: APIClient, bookmark: Bookmark
+    ):
+        url = reverse("bookmark-detail", args=[str(bookmark.id)])
+        response = auth_client.get(url)
+        assert response.status_code == status.HTTP_200_OK
+        assert response.data["page"] == bookmark.page
+
+    def test_cannot_access_other_users_bookmark(
+        self, api_client: APIClient, other_user: User, bookmark: Bookmark
+    ):
+        api_client.force_authenticate(user=other_user)
+        url = reverse("bookmark-detail", args=[str(bookmark.id)])
+        response = api_client.get(url)
+        assert response.status_code == status.HTTP_404_NOT_FOUND
+
+
+class TestBookmarkDelete:
+    def test_delete_bookmark(
+        self, auth_client: APIClient, bookmark: Bookmark
+    ):
+        url = reverse("bookmark-detail", args=[str(bookmark.id)])
+        response = auth_client.delete(url)
+        assert response.status_code == status.HTTP_204_NO_CONTENT
+        assert Bookmark.objects.count() == 0
+
+    def test_cannot_delete_other_users_bookmark(
+        self, api_client: APIClient, other_user: User, bookmark: Bookmark
+    ):
+        api_client.force_authenticate(user=other_user)
+        url = reverse("bookmark-detail", args=[str(bookmark.id)])
+        response = api_client.delete(url)
+        assert response.status_code == status.HTTP_404_NOT_FOUND
+
+
+class TestBookmarkFilterByBook:
+    def test_filter_by_book(
+        self, auth_client: APIClient, user: User, book: Book
+    ):
+        other_book = Book.objects.create(title="Other", author="Other")
+        Bookmark.objects.create(user=user, book=book, page=1)
+        Bookmark.objects.create(user=user, book=other_book, page=2)
+
+        url = reverse("bookmark-list")
+        response = auth_client.get(url, {"book": str(book.id)})
+        assert response.status_code == status.HTTP_200_OK
+        assert response.data["count"] == 1
+        assert response.data["results"][0]["page"] == 1
+
+
+# ---------------------------------------------------------------------------
+# Note tests
+# ---------------------------------------------------------------------------
+
+class TestNoteList:
+    url = reverse("note-list")
+
+    def test_unauthenticated_user_cannot_list(self, api_client: APIClient):
+        response = api_client.get(self.url)
+        assert response.status_code == status.HTTP_401_UNAUTHORIZED
+
+    def test_list_returns_user_notes_only(
+        self, auth_client: APIClient, user: User, other_user: User, book: Book
+    ):
+        Note.objects.create(user=user, book=book, page=1, content="My note")
+        Note.objects.create(user=other_user, book=book, page=2, content="Other's note")
+
+        response = auth_client.get(self.url)
+        assert response.status_code == status.HTTP_200_OK
+        results = response.data["results"]
+        assert len(results) == 1
+        assert results[0]["content"] == "My note"
+
+    def test_list_includes_book_title(
+        self, auth_client: APIClient, note: Note
+    ):
+        response = auth_client.get(self.url)
+        assert response.status_code == status.HTTP_200_OK
+        assert response.data["results"][0]["book_title"] == "Test Book"
+
+
+class TestNoteCreate:
+    url = reverse("note-list")
+
+    def test_create_note(self, auth_client: APIClient, book: Book):
+        data = {
+            "book": str(book.id),
+            "page": 20,
+            "location_text": "interesting part",
+            "content": "This is a thoughtful note.",
+        }
+        response = auth_client.post(self.url, data, format="json")
+        assert response.status_code == status.HTTP_201_CREATED
+        assert response.data["content"] == "This is a thoughtful note."
+
+    def test_create_note_without_location_text(
+        self, auth_client: APIClient, book: Book
+    ):
+        data = {"book": str(book.id), "page": 20, "content": "A note."}
+        response = auth_client.post(self.url, data, format="json")
+        assert response.status_code == status.HTTP_201_CREATED
+
+    def test_empty_content_rejected(
+        self, auth_client: APIClient, book: Book
+    ):
+        data = {"book": str(book.id), "page": 20, "content": "   "}
+        response = auth_client.post(self.url, data, format="json")
+        assert response.status_code == status.HTTP_400_BAD_REQUEST
+
+    def test_unauthenticated_user_cannot_create(
+        self, api_client: APIClient, book: Book
+    ):
+        data = {"book": str(book.id), "page": 20, "content": "Note"}
+        response = api_client.post(self.url, data, format="json")
+        assert response.status_code == status.HTTP_401_UNAUTHORIZED
+
+
+class TestNoteUpdate:
+    def test_update_note_content(
+        self, auth_client: APIClient, note: Note
+    ):
+        url = reverse("note-detail", args=[str(note.id)])
+        data = {"content": "Updated note content."}
+        response = auth_client.patch(url, data, format="json")
+        assert response.status_code == status.HTTP_200_OK
+        assert response.data["content"] == "Updated note content."
+
+    def test_cannot_update_other_users_note(
+        self, api_client: APIClient, other_user: User, note: Note
+    ):
+        api_client.force_authenticate(user=other_user)
+        url = reverse("note-detail", args=[str(note.id)])
+        data = {"content": "Hacked!"}
+        response = api_client.patch(url, data, format="json")
+        assert response.status_code == status.HTTP_404_NOT_FOUND
+
+
+class TestNoteDelete:
+    def test_delete_note(self, auth_client: APIClient, note: Note):
+        url = reverse("note-detail", args=[str(note.id)])
+        response = auth_client.delete(url)
+        assert response.status_code == status.HTTP_204_NO_CONTENT
+        assert Note.objects.count() == 0
+
+    def test_batch_delete_notes(
+        self, auth_client: APIClient, user: User, book: Book
+    ):
+        n1 = Note.objects.create(user=user, book=book, page=1, content="A")
+        n2 = Note.objects.create(user=user, book=book, page=2, content="B")
+        url = reverse("note-batch-delete")
+        response = auth_client.delete(url, {"ids": [str(n1.id), str(n2.id)]}, format="json")
+        assert response.status_code == status.HTTP_200_OK
+        assert response.data["deleted"] == 2
+
+
+class TestNoteFilterByBook:
+    def test_filter_by_book(
+        self, auth_client: APIClient, user: User, book: Book
+    ):
+        other_book = Book.objects.create(title="Other", author="Other")
+        Note.objects.create(user=user, book=book, page=1, content="In book")
+        Note.objects.create(user=user, book=other_book, page=2, content="In other")
+
+        url = reverse("note-list")
+        response = auth_client.get(url, {"book": str(book.id)})
+        assert response.status_code == status.HTTP_200_OK
+        assert response.data["count"] == 1
+        assert response.data["results"][0]["content"] == "In book"

backend/apps/annotations/urls.py

@@ -0,0 +1,12 @@
+from django.urls import include, path
+from rest_framework.routers import DefaultRouter
+
+from apps.annotations.views import BookmarkViewSet, NoteViewSet
+
+router = DefaultRouter()
+router.register(r"bookmarks", BookmarkViewSet, basename="bookmark")
+router.register(r"notes", NoteViewSet, basename="note")
+
+urlpatterns = [
+    path("", include(router.urls)),
+]

backend/apps/annotations/views.py

@@ -0,0 +1,93 @@
+from django_filters.rest_framework import DjangoFilterBackend
+from rest_framework import status, viewsets
+from rest_framework.decorators import action
+from rest_framework.filters import OrderingFilter, SearchFilter
+from rest_framework.permissions import IsAuthenticated
+from rest_framework.response import Response
+
+from apps.annotations.models import Bookmark, Note
+from apps.annotations.permissions import IsOwner
+from apps.annotations.serializers import (
+    BookmarkCreateSerializer,
+    BookmarkSerializer,
+    NoteCreateSerializer,
+    NoteSerializer,
+)
+
+
+class BookmarkViewSet(viewsets.ModelViewSet):
+    """CRUD for user bookmarks. Users can only manage their own bookmarks."""
+
+    permission_classes = [IsAuthenticated, IsOwner]
+    filter_backends = [DjangoFilterBackend, SearchFilter, OrderingFilter]
+    filterset_fields = ["book"]
+    search_fields = ["location_text"]
+    ordering_fields = ["created_at", "page"]
+    ordering = ["-created_at"]
+
+    def get_serializer_class(self):
+        if self.action == "create":
+            return BookmarkCreateSerializer
+        return BookmarkSerializer
+
+    def get_queryset(self):
+        return Bookmark.objects.filter(user=self.request.user).select_related(
+            "book"
+        )
+
+    def perform_create(self, serializer):
+        serializer.save(user=self.request.user)
+
+    @action(detail=False, methods=["delete"], url_path="batch-delete")
+    def batch_delete(self, request):
+        """Delete multiple bookmarks by id list."""
+        ids = request.data.get("ids", [])
+        if not ids:
+            return Response(
+                {"detail": "No ids provided."}, status=status.HTTP_400_BAD_REQUEST
+            )
+        deleted, _ = Bookmark.objects.filter(
+            id__in=ids, user=request.user
+        ).delete()
+        return Response(
+            {"deleted": deleted}, status=status.HTTP_200_OK
+        )
+
+
+class NoteViewSet(viewsets.ModelViewSet):
+    """CRUD for user notes. Users can only manage their own notes."""
+
+    permission_classes = [IsAuthenticated, IsOwner]
+    filter_backends = [DjangoFilterBackend, SearchFilter, OrderingFilter]
+    filterset_fields = ["book"]
+    search_fields = ["content", "location_text"]
+    ordering_fields = ["created_at", "page"]
+    ordering = ["-created_at"]
+
+    def get_serializer_class(self):
+        if self.action == "create":
+            return NoteCreateSerializer
+        return NoteSerializer
+
+    def get_queryset(self):
+        return Note.objects.filter(user=self.request.user).select_related(
+            "book"
+        )
+
+    def perform_create(self, serializer):
+        serializer.save(user=self.request.user)
+
+    @action(detail=False, methods=["delete"], url_path="batch-delete")
+    def batch_delete(self, request):
+        """Delete multiple notes by id list."""
+        ids = request.data.get("ids", [])
+        if not ids:
+            return Response(
+                {"detail": "No ids provided."}, status=status.HTTP_400_BAD_REQUEST
+            )
+        deleted, _ = Note.objects.filter(
+            id__in=ids, user=request.user
+        ).delete()
+        return Response(
+            {"deleted": deleted}, status=status.HTTP_200_OK
+        )

backend/apps/books/admin.py

@@ -0,0 +1,9 @@
+from django.contrib import admin
+
+from apps.books.models import Book
+
+
+@admin.register(Book)
+class BookAdmin(admin.ModelAdmin):
+    list_display = ("title", "author", "total_pages", "created_at")
+    search_fields = ("title", "author")

backend/apps/books/apps.py

@@ -0,0 +1,7 @@
+from django.apps import AppConfig
+
+
+class BooksConfig(AppConfig):
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "apps.books"
+    label = "books"

backend/apps/books/migrations/0001_initial.py

@@ -0,0 +1,96 @@
+# Generated by Django 5.1.7 on 2026-05-26 03:33
+
+import django.db.models.deletion
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Book',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.CharField(db_index=True, max_length=512)),
+                ('author', models.CharField(blank=True, db_index=True, default='', max_length=256)),
+                ('genre', models.CharField(blank=True, db_index=True, default='', max_length=128)),
+                ('description', models.TextField(blank=True, default='')),
+                ('reading_status', models.CharField(choices=[('want_to_read', 'Want to Read'), ('reading', 'Reading'), ('finished', 'Finished'), ('dnf', 'Did Not Finish')], db_index=True, default='want_to_read', max_length=20)),
+                ('total_pages', models.PositiveIntegerField(default=0)),
+                ('cover_image', models.URLField(blank=True, default='')),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+            ],
+            options={
+                'verbose_name': 'Book',
+                'verbose_name_plural': 'Books',
+                'db_table': 'books_book',
+                'ordering': ['title'],
+                'indexes': [models.Index(fields=['title', 'author', 'genre'], name='books_book_title_9fddc2_idx')],
+            },
+        ),
+        migrations.CreateModel(
+            name='EBook',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.CharField(max_length=512)),
+                ('author', models.CharField(blank=True, default='', max_length=256)),
+                ('file', models.FileField(upload_to='ebooks/%Y/%m/%d/')),
+                ('cover_image', models.ImageField(blank=True, null=True, upload_to='ebook_covers/%Y/%m/%d/')),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='ebooks', to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                'verbose_name': 'E-Book',
+                'verbose_name_plural': 'E-Books',
+                'db_table': 'books_ebook',
+                'ordering': ['-created_at'],
+            },
+        ),
+        migrations.CreateModel(
+            name='ReadingProgress',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('current_position', models.FloatField(default=0.0)),
+                ('last_page', models.IntegerField(default=0)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+                ('ebook', models.OneToOneField(on_delete=django.db.models.deletion.CASCADE, related_name='reading_progress', to='books.ebook')),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='reading_progress', to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                'verbose_name_plural': 'reading progress',
+                'db_table': 'books_reading_progress',
+            },
+        ),
+        migrations.CreateModel(
+            name='ReadingSettings',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('font_size', models.IntegerField(default=18)),
+                ('font_style', models.CharField(choices=[('sans-serif', 'Sans Serif'), ('serif', 'Serif'), ('monospace', 'Monospace')], default='sans-serif', max_length=20)),
+                ('background_color', models.CharField(choices=[('#ffffff', 'White'), ('#f4e4c1', 'Sepia'), ('#1a1a2e', 'Dark'), ('#c7edcc', 'Green')], default='#ffffff', max_length=7)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+                ('user', models.OneToOneField(on_delete=django.db.models.deletion.CASCADE, related_name='reading_settings', to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                'verbose_name_plural': 'reading settings',
+                'db_table': 'books_reading_settings',
+            },
+        ),
+        migrations.AddIndex(
+            model_name='ebook',
+            index=models.Index(fields=['user', '-created_at'], name='books_ebook_user_id_0b6bdb_idx'),
+        ),
+        migrations.AlterUniqueTogether(
+            name='readingprogress',
+            unique_together={('user', 'ebook')},
+        ),
+    ]

backend/apps/books/models.py

@@ -0,0 +1,109 @@
+from django.conf import settings
+from django.db import models
+from django.db.models.signals import post_delete
+from django.dispatch import receiver
+from pathlib import Path
+
+
+class ReadingStatus(models.TextChoices):
+    WANT_TO_READ = "want_to_read", "Want to Read"
+    READING = "reading", "Reading"
+    FINISHED = "finished", "Finished"
+    DNF = "dnf", "Did Not Finish"
+
+
+class FontStyle(models.TextChoices):
+    SANS_SERIF = "sans-serif", "Sans Serif"
+    SERIF = "serif", "Serif"
+    MONOSPACE = "monospace", "Monospace"
+
+
+class BackgroundColor(models.TextChoices):
+    WHITE = "#ffffff", "White"
+    SEPIA = "#f4e4c1", "Sepia"
+    DARK = "#1a1a2e", "Dark"
+    GREEN = "#c7edcc", "Green"
+
+
+class Book(models.Model):
+    title = models.CharField(max_length=512, db_index=True)
+    author = models.CharField(max_length=256, blank=True, default="", db_index=True)
+    genre = models.CharField(max_length=128, blank=True, default="", db_index=True)
+    description = models.TextField(blank=True, default="")
+    reading_status = models.CharField(max_length=20, choices=ReadingStatus.choices, default=ReadingStatus.WANT_TO_READ, db_index=True)
+    total_pages = models.PositiveIntegerField(default=0)
+    cover_image = models.URLField(blank=True, default="")
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    class Meta:
+        db_table = "books_book"
+        verbose_name = "Book"
+        verbose_name_plural = "Books"
+        ordering = ["title"]
+        indexes = [models.Index(fields=["title", "author", "genre"])]
+
+    def __str__(self):
+        return self.title
+
+
+class EBook(models.Model):
+    user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="ebooks")
+    title = models.CharField(max_length=512)
+    author = models.CharField(max_length=256, blank=True, default="")
+    file = models.FileField(upload_to="ebooks/%Y/%m/%d/")
+    cover_image = models.ImageField(upload_to="ebook_covers/%Y/%m/%d/", blank=True, null=True)
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    class Meta:
+        db_table = "books_ebook"
+        verbose_name = "E-Book"
+        verbose_name_plural = "E-Books"
+        ordering = ["-created_at"]
+        indexes = [models.Index(fields=["user", "-created_at"])]
+
+    def __str__(self):
+        return self.title
+
+    def filename(self):
+        return Path(self.file.name).name if self.file else ""
+
+
+@receiver(post_delete, sender=EBook)
+def _auto_delete_ebook_file(sender, instance, **kwargs):
+    if instance.file:
+        instance.file.delete(save=False)
+    if instance.cover_image:
+        instance.cover_image.delete(save=False)
+
+
+class ReadingProgress(models.Model):
+    user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="reading_progress")
+    ebook = models.OneToOneField(EBook, on_delete=models.CASCADE, related_name="reading_progress")
+    current_position = models.FloatField(default=0.0)
+    last_page = models.IntegerField(default=0)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    class Meta:
+        db_table = "books_reading_progress"
+        verbose_name_plural = "reading progress"
+        unique_together = [("user", "ebook")]
+
+    def __str__(self):
+        return f"{self.ebook.title} - {self.current_position:.1f}%"
+
+
+class ReadingSettings(models.Model):
+    user = models.OneToOneField(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="reading_settings")
+    font_size = models.IntegerField(default=18)
+    font_style = models.CharField(max_length=20, choices=FontStyle.choices, default=FontStyle.SANS_SERIF.value)
+    background_color = models.CharField(max_length=7, choices=BackgroundColor.choices, default=BackgroundColor.WHITE.value)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    class Meta:
+        db_table = "books_reading_settings"
+        verbose_name_plural = "reading settings"
+
+    def __str__(self):
+        return f"Settings for {self.user}"

backend/apps/books/serializers.py

@@ -0,0 +1,120 @@
+from rest_framework import serializers
+
+from apps.books.models import Book, EBook, FontStyle, BackgroundColor, ReadingProgress, ReadingSettings, ReadingStatus
+
+
+class BookListSerializer(serializers.ModelSerializer):
+    reading_status_display = serializers.CharField(source="get_reading_status_display", read_only=True)
+
+    class Meta:
+        model = Book
+        fields = ["id", "title", "author", "genre", "reading_status", "reading_status_display", "cover_image"]
+
+
+class BookDetailSerializer(serializers.ModelSerializer):
+    reading_status_display = serializers.CharField(source="get_reading_status_display", read_only=True)
+
+    class Meta:
+        model = Book
+        fields = ["id", "title", "author", "genre", "description", "reading_status", "reading_status_display", "cover_image", "total_pages", "created_at", "updated_at"]
+        read_only_fields = ["id", "created_at", "updated_at"]
+
+
+class BookSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Book
+        fields = ["id", "title", "author", "genre", "description", "reading_status", "cover_image", "total_pages", "created_at", "updated_at"]
+        read_only_fields = ["id", "created_at", "updated_at"]
+
+
+class EBookListSerializer(serializers.ModelSerializer):
+    filename = serializers.CharField(read_only=True)
+    progress = serializers.SerializerMethodField()
+
+    class Meta:
+        model = EBook
+        fields = ["id", "title", "author", "filename", "cover_image", "created_at", "progress"]
+
+    def get_progress(self, obj):
+        try:
+            return obj.reading_progress.current_position
+        except ReadingProgress.DoesNotExist:
+            return None
+
+
+class EBookDetailSerializer(serializers.ModelSerializer):
+    filename = serializers.CharField(read_only=True)
+    file_url = serializers.SerializerMethodField()
+    progress = serializers.SerializerMethodField()
+
+    class Meta:
+        model = EBook
+        fields = ["id", "title", "author", "filename", "file_url", "cover_image", "created_at", "updated_at", "progress"]
+
+    def get_file_url(self, obj):
+        request = self.context.get("request")
+        if request and obj.file:
+            return request.build_absolute_uri(obj.file.url)
+        return ""
+
+    def get_progress(self, obj):
+        try:
+            rp = obj.reading_progress
+            return {"current_position": rp.current_position, "last_page": rp.last_page}
+        except ReadingProgress.DoesNotExist:
+            return None
+
+
+class EBookUploadSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = EBook
+        fields = ["title", "author", "file", "cover_image"]
+        extra_kwargs = {"title": {"required": True}, "file": {"required": True}}
+
+    def validate_file(self, value):
+        import os
+        if value is None:
+            return value
+        ext = os.path.splitext(str(getattr(value, "name", "")))[1].lower()
+        if ext not in (".epub", ".pdf"):
+            raise serializers.ValidationError("Only EPUB and PDF files are supported.")
+        return value
+
+    def create(self, validated_data):
+        validated_data["user"] = self.context["request"].user
+        return super().create(validated_data)
+
+
+class ReadingProgressSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = ReadingProgress
+        fields = ["current_position", "last_page"]
+        extra_kwargs = {"current_position": {"required": True, "min_value": 0.0, "max_value": 100.0}}
+
+    def validate_current_position(self, value):
+        if value < 0.0 or value > 100.0:
+            raise serializers.ValidationError("Position must be between 0.0 and 100.0.")
+        return value
+
+
+class ReadingSettingsSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = ReadingSettings
+        fields = ["font_size", "font_style", "background_color"]
+
+    def validate_font_size(self, value):
+        if value < 12 or value > 36:
+            raise serializers.ValidationError("Font size must be between 12 and 36.")
+        return value
+
+    def validate_font_style(self, value):
+        valid = [s.value for s in FontStyle]
+        if value not in valid:
+            raise serializers.ValidationError(f"Font style must be one of: {', '.join(valid)}")
+        return value
+
+    def validate_background_color(self, value):
+        valid = [c.value for c in BackgroundColor]
+        if value not in valid:
+            raise serializers.ValidationError(f"Background color must be one of: {', '.join(valid)}")
+        return value

backend/apps/books/urls.py

@@ -0,0 +1,16 @@
+from django.urls import include, path
+from rest_framework.routers import DefaultRouter
+
+from apps.books.views import BookViewSet, EBookViewSet, ReadingSettingsViewSet
+
+router = DefaultRouter()
+router.register(r"", BookViewSet, basename="book")
+
+ebook_router = DefaultRouter()
+ebook_router.register(r"ebooks", EBookViewSet, basename="ebook")
+
+urlpatterns = [
+    path("", include(router.urls)),
+    path("", include(ebook_router.urls)),
+    path("settings/", ReadingSettingsViewSet.as_view({"get": "list", "patch": "partial_update"}), name="reading-settings"),
+]

backend/apps/books/views.py

@@ -0,0 +1,103 @@
+from typing import Any
+
+from django.db.models import QuerySet, Q
+from django_filters.rest_framework import DjangoFilterBackend
+from rest_framework import parsers, permissions, status, viewsets
+from rest_framework.decorators import action
+from rest_framework.filters import OrderingFilter, SearchFilter
+from rest_framework.permissions import AllowAny, IsAuthenticated
+from rest_framework.request import Request
+from rest_framework.response import Response
+
+from apps.books.models import Book, EBook, ReadingProgress, ReadingSettings
+from apps.books.serializers import (
+    BookDetailSerializer, BookListSerializer, BookSerializer,
+    EBookDetailSerializer, EBookListSerializer, EBookUploadSerializer,
+    ReadingProgressSerializer, ReadingSettingsSerializer,
+)
+
+
+class BookViewSet(viewsets.ModelViewSet):
+    queryset = Book.objects.all()
+    permission_classes = [IsAuthenticated]
+    filter_backends = [DjangoFilterBackend, SearchFilter, OrderingFilter]
+    filterset_fields = ["author", "genre", "reading_status"]
+    search_fields = ["title", "author", "genre"]
+    ordering_fields = ["title", "author", "genre", "created_at"]
+    ordering = ["title"]
+
+    def get_serializer_class(self):
+        if self.action == "retrieve":
+            return BookDetailSerializer
+        if self.action == "list":
+            return BookListSerializer
+        return BookSerializer
+
+    def get_queryset(self) -> QuerySet[Book]:
+        qs = super().get_queryset()
+        query = self.request.query_params.get("q", "").strip()
+        if query:
+            qs = qs.filter(Q(title__icontains=query) | Q(author__icontains=query) | Q(genre__icontains=query))
+        return qs
+
+    @action(detail=False, methods=["get"], permission_classes=[AllowAny])
+    def genres(self, request: Request) -> Response:
+        genre_list = Book.objects.values_list("genre", flat=True).distinct().order_by("genre")
+        return Response([g for g in genre_list if g])
+
+    @action(detail=False, methods=["get"], permission_classes=[AllowAny])
+    def authors(self, request: Request) -> Response:
+        author_list = Book.objects.values_list("author", flat=True).distinct().order_by("author")
+        return Response([a for a in author_list if a])
+
+
+class IsEBookOwner(permissions.BasePermission):
+    def has_object_permission(self, request: Request, view: object, obj: EBook) -> bool:
+        return obj.user == request.user
+
+
+class EBookViewSet(viewsets.ModelViewSet):
+    parser_classes = [parsers.MultiPartParser, parsers.FormParser, parsers.JSONParser]
+    permission_classes = [IsAuthenticated, IsEBookOwner]
+
+    def get_serializer_class(self):
+        if self.action == "create":
+            return EBookUploadSerializer
+        if self.action == "list":
+            return EBookListSerializer
+        return EBookDetailSerializer
+
+    def get_queryset(self):
+        return EBook.objects.filter(user=self.request.user).select_related("reading_progress", "user")
+
+    @action(detail=True, methods=["get", "patch"])
+    def progress(self, request: Request, pk: int | None = None) -> Response:
+        ebook = self.get_object()
+        progress_obj, _created = ReadingProgress.objects.get_or_create(user=request.user, ebook=ebook)
+        if request.method == "GET":
+            serializer = ReadingProgressSerializer(progress_obj)
+            return Response(serializer.data)
+        serializer = ReadingProgressSerializer(progress_obj, data=request.data, partial=True)
+        serializer.is_valid(raise_exception=True)
+        serializer.save()
+        return Response(serializer.data)
+
+
+class ReadingSettingsViewSet(viewsets.GenericViewSet):
+    permission_classes = [IsAuthenticated]
+    serializer_class = ReadingSettingsSerializer
+
+    def get_queryset(self):
+        return ReadingSettings.objects.filter(user=self.request.user)
+
+    def list(self, request: Request) -> Response:
+        settings_obj, _created = ReadingSettings.objects.get_or_create(user=request.user)
+        serializer = self.get_serializer(settings_obj)
+        return Response(serializer.data)
+
+    def partial_update(self, request: Request) -> Response:
+        settings_obj, _created = ReadingSettings.objects.get_or_create(user=request.user)
+        serializer = self.get_serializer(settings_obj, data=request.data, partial=True)
+        serializer.is_valid(raise_exception=True)
+        serializer.save()
+        return Response(serializer.data)

backend/apps/collections/admin.py

@@ -1,10 +0,0 @@
-from django.contrib import admin
-
-from .models import Collection
-
-
-@admin.register(Collection)
-class CollectionAdmin(admin.ModelAdmin):
-    list_display = ["name", "owner", "document_count", "is_public", "created_at"]
-    list_filter = ["is_public"]
-    search_fields = ["name", "description"]

backend/apps/collections/models.py

@@ -1,39 +0,0 @@
-from django.conf import settings
-from django.db import models
-
-
-class Collection(models.Model):
-    """A user-created collection of documents."""
-    name = models.CharField(max_length=300)
-    description = models.TextField(blank=True, default="")
-    cover = models.ImageField(upload_to="collection_covers/", blank=True, null=True)
-    documents = models.ManyToManyField(
-        "documents.Document",
-        related_name="collections",
-        blank=True,
-    )
-    is_public = models.BooleanField(default=False)
-    owner = models.ForeignKey(
-        settings.AUTH_USER_MODEL,
-        on_delete=models.CASCADE,
-        related_name="collections",
-    )
-    created_at = models.DateTimeField(auto_now_add=True)
-    updated_at = models.DateTimeField(auto_now=True)
-
-    class Meta:
-        db_table = "collections_collection"
-        ordering = ["-updated_at"]
-
-    def __str__(self) -> str:
-        return self.name
-
-    @property
-    def document_count(self) -> int:
-        return self.documents.count()
-
-    @property
-    def cover_url(self) -> str | None:
-        if self.cover:
-            return self.cover.url
-        return None

backend/apps/collections/serializers.py

@@ -1,33 +0,0 @@
-from rest_framework import serializers
-
-from .models import Collection
-
-
-class CollectionSerializer(serializers.ModelSerializer[Collection]):
-    cover_url = serializers.SerializerMethodField()
-    document_count = serializers.IntegerField(read_only=True)
-
-    class Meta:
-        model = Collection
-        fields = [
-            "id", "name", "description", "cover_url", "document_count",
-            "is_public", "created_at", "updated_at",
-        ]
-        read_only_fields = ["id", "document_count", "created_at", "updated_at"]
-
-    def get_cover_url(self, obj: Collection) -> str | None:
-        return obj.cover_url
-
-
-class CollectionDetailSerializer(CollectionSerializer):
-    documents = serializers.PrimaryKeyRelatedField(many=True, read_only=True)
-
-    class Meta(CollectionSerializer.Meta):
-        fields = CollectionSerializer.Meta.fields + ["documents", "owner"]
-
-
-class CollectionDocumentActionSerializer(serializers.Serializer):
-    document_ids = serializers.ListField(
-        child=serializers.IntegerField(),
-        allow_empty=False,
-    )

backend/apps/collections/urls.py

@@ -1,13 +0,0 @@
-from django.urls import include, path
-from rest_framework.routers import DefaultRouter
-
-from . import views
-
-router = DefaultRouter()
-router.register("", views.CollectionViewSet, basename="collection")
-
-app_name = "collections"
-
-urlpatterns = [
-    path("", include(router.urls)),
-]

backend/apps/collections/views.py

@@ -1,50 +0,0 @@
-from rest_framework import permissions, status, viewsets
-from rest_framework.decorators import action
-from rest_framework.response import Response
-
-from apps.documents.models import Document
-
-from .models import Collection
-from .serializers import (
-    CollectionDetailSerializer,
-    CollectionDocumentActionSerializer,
-    CollectionSerializer,
-)
-
-
-class CollectionViewSet(viewsets.ModelViewSet):
-    """CRUD for user collections."""
-    permission_classes = [permissions.IsAuthenticated]
-
-    def get_serializer_class(self):
-        if self.action in ("retrieve", "update", "partial_update"):
-            return CollectionDetailSerializer
-        return CollectionSerializer
-
-    def get_queryset(self):
-        return Collection.objects.filter(owner=self.request.user).prefetch_related("documents")
-
-    def perform_create(self, serializer):
-        serializer.save(owner=self.request.user)
-
-    @action(detail=True, methods=["post"])
-    def add_documents(self, request, pk=None):
-        """Add documents to a collection."""
-        collection = self.get_object()
-        serializer = CollectionDocumentActionSerializer(data=request.data)
-        serializer.is_valid(raise_exception=True)
-        docs = Document.objects.filter(
-            id__in=serializer.validated_data["document_ids"],
-            owner=request.user,
-        )
-        collection.documents.add(*docs)
-        return Response({"detail": f"Added {docs.count()} document(s)."}, status=status.HTTP_200_OK)
-
-    @action(detail=True, methods=["post"])
-    def remove_documents(self, request, pk=None):
-        """Remove documents from a collection."""
-        collection = self.get_object()
-        serializer = CollectionDocumentActionSerializer(data=request.data)
-        serializer.is_valid(raise_exception=True)
-        collection.documents.remove(*serializer.validated_data["document_ids"])
-        return Response({"detail": "Documents removed."}, status=status.HTTP_200_OK)

backend/apps/documents/admin.py

@@ -1,11 +0,0 @@
-from django.contrib import admin
-
-from .models import Document
-
-
-@admin.register(Document)
-class DocumentAdmin(admin.ModelAdmin):
-    list_display = ["title", "author", "file_type", "file_size", "is_public", "owner", "uploaded_at"]
-    list_filter = ["file_type", "is_public"]
-    search_fields = ["title", "author", "description"]
-    date_hierarchy = "uploaded_at"

backend/apps/documents/models.py

@@ -1,48 +0,0 @@
-from django.conf import settings
-from django.db import models
-
-
-class Document(models.Model):
-    """A digital document (ebook, PDF, etc.) uploaded by a user."""
-
-    class FileType(models.TextChoices):
-        PDF = "pdf", "PDF"
-        EPUB = "epub", "EPUB"
-        MOBI = "mobi", "MOBI"
-        TXT = "txt", "Plain Text"
-        DOCX = "docx", "Word Document"
-
-    title = models.CharField(max_length=500)
-    author = models.CharField(max_length=300, blank=True, null=True)
-    description = models.TextField(blank=True, default="")
-    cover = models.ImageField(upload_to="covers/", blank=True, null=True)
-    file = models.FileField(upload_to="documents/")
-    file_type = models.CharField(max_length=10, choices=FileType.choices)
-    file_size = models.PositiveIntegerField(help_text="File size in bytes")
-    page_count = models.PositiveIntegerField(blank=True, null=True)
-    tags = models.JSONField(default=list, blank=True)
-    is_public = models.BooleanField(default=False)
-    owner = models.ForeignKey(
-        settings.AUTH_USER_MODEL,
-        on_delete=models.CASCADE,
-        related_name="documents",
-    )
-    uploaded_at = models.DateTimeField(auto_now_add=True)
-    updated_at = models.DateTimeField(auto_now=True)
-
-    class Meta:
-        db_table = "documents_document"
-        ordering = ["-uploaded_at"]
-        indexes = [
-            models.Index(fields=["owner", "-uploaded_at"]),
-            models.Index(fields=["file_type"]),
-        ]
-
-    def __str__(self) -> str:
-        return self.title
-
-    @property
-    def cover_url(self) -> str | None:
-        if self.cover:
-            return self.cover.url
-        return None

backend/apps/documents/serializers.py

@@ -1,41 +0,0 @@
-from rest_framework import serializers
-
-from .models import Document
-
-
-class DocumentListSerializer(serializers.ModelSerializer[Document]):
-    cover_url = serializers.SerializerMethodField()
-
-    class Meta:
-        model = Document
-        fields = [
-            "id", "title", "author", "cover_url", "description",
-            "file_type", "file_size", "page_count", "tags",
-            "is_public", "uploaded_at", "updated_at",
-        ]
-        read_only_fields = ["id", "uploaded_at", "updated_at"]
-
-    def get_cover_url(self, obj: Document) -> str | None:
-        return obj.cover_url
-
-
-class DocumentDetailSerializer(DocumentListSerializer):
-    owner = serializers.PrimaryKeyRelatedField(read_only=True)
-
-    class Meta(DocumentListSerializer.Meta):
-        fields = DocumentListSerializer.Meta.fields + ["owner", "file"]
-
-
-class DocumentUploadSerializer(serializers.ModelSerializer[Document]):
-    class Meta:
-        model = Document
-        fields = [
-            "title", "author", "description", "cover", "file",
-            "file_type", "file_size", "page_count", "tags", "is_public",
-        ]
-
-    def validate_file_size(self, value: int) -> int:
-        max_size = 100 * 1024 * 1024  # 100 MB
-        if value > max_size:
-            raise serializers.ValidationError("File size must not exceed 100 MB.")
-        return value

backend/apps/documents/urls.py

@@ -1,13 +0,0 @@
-from django.urls import include, path
-from rest_framework.routers import DefaultRouter
-
-from . import views
-
-router = DefaultRouter()
-router.register("", views.DocumentViewSet, basename="document")
-
-app_name = "documents"
-
-urlpatterns = [
-    path("", include(router.urls)),
-]

backend/apps/documents/views.py

@@ -1,35 +0,0 @@
-from rest_framework import permissions, viewsets
-
-from .models import Document
-from .serializers import DocumentDetailSerializer, DocumentListSerializer, DocumentUploadSerializer
-
-
-class IsOwnerOrPublic(permissions.BasePermission):
-    """Allow access if user is owner or the document is public."""
-
-    def has_object_permission(self, request, view, obj: Document) -> bool:
-        if request.method in permissions.SAFE_METHODS:
-            return obj.is_public or obj.owner == request.user
-        return obj.owner == request.user
-
-
-class DocumentViewSet(viewsets.ModelViewSet):
-    """CRUD for documents with owner-scoping."""
-    permission_classes = [permissions.IsAuthenticated, IsOwnerOrPublic]
-
-    def get_serializer_class(self):
-        if self.action == "create":
-            return DocumentUploadSerializer
-        if self.action in ("retrieve", "update", "partial_update"):
-            return DocumentDetailSerializer
-        return DocumentListSerializer
-
-    def get_queryset(self):
-        user = self.request.user
-        qs = Document.objects.select_related("owner")
-        if self.action == "list":
-            return qs.filter(owner=user) | qs.filter(is_public=True)
-        return qs
-
-    def perform_create(self, serializer):
-        serializer.save(owner=self.request.user)

backend/apps/reading/admin.py

@@ -1,21 +0,0 @@
-from django.contrib import admin
-
-from .models import Bookmark, Highlight, ReadingProgress
-
-
-@admin.register(Bookmark)
-class BookmarkAdmin(admin.ModelAdmin):
-    list_display = ["document", "user", "page", "label", "created_at"]
-    list_filter = ["created_at"]
-
-
-@admin.register(Highlight)
-class HighlightAdmin(admin.ModelAdmin):
-    list_display = ["document", "user", "page", "color", "created_at"]
-    list_filter = ["color", "created_at"]
-
-
-@admin.register(ReadingProgress)
-class ReadingProgressAdmin(admin.ModelAdmin):
-    list_display = ["document", "user", "percentage", "last_read_at"]
-    date_hierarchy = "last_read_at"

backend/apps/reading/models.py

@@ -1,84 +0,0 @@
-from django.conf import settings
-from django.db import models
-
-
-class Bookmark(models.Model):
-    """A user bookmark at a specific page in a document."""
-    document = models.ForeignKey(
-        "documents.Document",
-        on_delete=models.CASCADE,
-        related_name="bookmarks",
-    )
-    user = models.ForeignKey(
-        settings.AUTH_USER_MODEL,
-        on_delete=models.CASCADE,
-        related_name="bookmarks",
-    )
-    page = models.PositiveIntegerField()
-    label = models.CharField(max_length=300, blank=True, default="")
-    created_at = models.DateTimeField(auto_now_add=True)
-
-    class Meta:
-        db_table = "reading_bookmark"
-        ordering = ["page"]
-        unique_together = [["document", "user", "page"]]
-
-    def __str__(self) -> str:
-        return f"{self.document.title} p.{self.page}"
-
-
-class Highlight(models.Model):
-    """A highlighted passage in a document."""
-    document = models.ForeignKey(
-        "documents.Document",
-        on_delete=models.CASCADE,
-        related_name="highlights",
-    )
-    user = models.ForeignKey(
-        settings.AUTH_USER_MODEL,
-        on_delete=models.CASCADE,
-        related_name="highlights",
-    )
-    page = models.PositiveIntegerField()
-    color = models.CharField(max_length=20, default="yellow")
-    text = models.TextField()
-    note = models.TextField(blank=True, null=True)
-    created_at = models.DateTimeField(auto_now_add=True)
-
-    class Meta:
-        db_table = "reading_highlight"
-        ordering = ["-created_at"]
-
-    def __str__(self) -> str:
-        return f"Highlight on {self.document.title} p.{self.page}"
-
-
-class ReadingProgress(models.Model):
-    """Tracks the user's reading progress through a document."""
-    document = models.ForeignKey(
-        "documents.Document",
-        on_delete=models.CASCADE,
-        related_name="reading_progress",
-    )
-    user = models.ForeignKey(
-        settings.AUTH_USER_MODEL,
-        on_delete=models.CASCADE,
-        related_name="reading_progress",
-    )
-    current_page = models.PositiveIntegerField(default=1)
-    total_pages = models.PositiveIntegerField(default=0)
-    percentage = models.FloatField(default=0.0)
-    last_read_at = models.DateTimeField(auto_now=True)
-
-    class Meta:
-        db_table = "reading_progress"
-        unique_together = [["document", "user"]]
-        verbose_name_plural = "Reading progress"
-
-    def __str__(self) -> str:
-        return f"{self.document.title} — {self.percentage:.0f}%"
-
-    def save(self, *args, **kwargs):
-        if self.total_pages > 0:
-            self.percentage = round((self.current_page / self.total_pages) * 100, 1)
-        super().save(*args, **kwargs)

backend/apps/reading/serializers.py

@@ -1,35 +0,0 @@
-from rest_framework import serializers
-
-from .models import Bookmark, Highlight, ReadingProgress
-
-
-class BookmarkSerializer(serializers.ModelSerializer[Bookmark]):
-    class Meta:
-        model = Bookmark
-        fields = ["id", "document", "page", "label", "created_at"]
-        read_only_fields = ["id", "created_at"]
-
-
-class HighlightSerializer(serializers.ModelSerializer[Highlight]):
-    class Meta:
-        model = Highlight
-        fields = ["id", "document", "page", "color", "text", "note", "created_at"]
-        read_only_fields = ["id", "created_at"]
-
-
-class ReadingProgressSerializer(serializers.ModelSerializer[ReadingProgress]):
-    class Meta:
-        model = ReadingProgress
-        fields = ["id", "document", "current_page", "total_pages", "percentage", "last_read_at"]
-        read_only_fields = ["id", "percentage", "last_read_at"]
-
-
-class ReadingProgressUpdateSerializer(serializers.ModelSerializer[ReadingProgress]):
-    class Meta:
-        model = ReadingProgress
-        fields = ["current_page", "total_pages"]
-
-    def validate_current_page(self, value: int) -> int:
-        if value < 1:
-            raise serializers.ValidationError("Page must be at least 1.")
-        return value

backend/apps/reading/urls.py

@@ -1,15 +0,0 @@
-from django.urls import include, path
-from rest_framework.routers import DefaultRouter
-
-from . import views
-
-router = DefaultRouter()
-router.register("bookmarks", views.BookmarkViewSet, basename="bookmark")
-router.register("highlights", views.HighlightViewSet, basename="highlight")
-router.register("progress", views.ReadingProgressViewSet, basename="reading-progress")
-
-app_name = "reading"
-
-urlpatterns = [
-    path("", include(router.urls)),
-]

backend/apps/reading/views.py

@@ -1,49 +0,0 @@
-from rest_framework import permissions, viewsets
-
-from .models import Bookmark, Highlight, ReadingProgress
-from .serializers import (
-    BookmarkSerializer,
-    HighlightSerializer,
-    ReadingProgressSerializer,
-    ReadingProgressUpdateSerializer,
-)
-
-
-class BookmarkViewSet(viewsets.ModelViewSet):
-    """User bookmarks for documents."""
-    serializer_class = BookmarkSerializer
-    permission_classes = [permissions.IsAuthenticated]
-
-    def get_queryset(self):
-        return Bookmark.objects.filter(user=self.request.user).select_related("document")
-
-    def perform_create(self, serializer):
-        serializer.save(user=self.request.user)
-
-
-class HighlightViewSet(viewsets.ModelViewSet):
-    """User highlights for documents."""
-    serializer_class = HighlightSerializer
-    permission_classes = [permissions.IsAuthenticated]
-
-    def get_queryset(self):
-        return Highlight.objects.filter(user=self.request.user).select_related("document")
-
-    def perform_create(self, serializer):
-        serializer.save(user=self.request.user)
-
-
-class ReadingProgressViewSet(viewsets.ModelViewSet):
-    """Reading progress tracker."""
-    permission_classes = [permissions.IsAuthenticated]
-
-    def get_serializer_class(self):
-        if self.action in ("create", "update", "partial_update"):
-            return ReadingProgressUpdateSerializer
-        return ReadingProgressSerializer
-
-    def get_queryset(self):
-        return ReadingProgress.objects.filter(user=self.request.user).select_related("document")
-
-    def perform_create(self, serializer):
-        serializer.save(user=self.request.user)

backend/apps/users/admin.py

@@ -0,0 +1,11 @@
+from django.contrib import admin
+from django.contrib.auth.admin import UserAdmin as BaseUserAdmin
+
+from apps.users.models import User
+
+
+@admin.register(User)
+class UserAdmin(BaseUserAdmin):
+    """Admin config for the custom User model."""
+    list_display = ("email", "username", "is_staff", "is_active", "date_joined")
+    search_fields = ("email", "username")

backend/apps/users/apps.py

@@ -0,0 +1,7 @@
+from django.apps import AppConfig
+
+
+class UsersConfig(AppConfig):
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "apps.users"
+    label = "users"

backend/apps/users/models.py

@@ -0,0 +1,13 @@
+from django.contrib.auth.models import AbstractUser
+
+
+class User(AbstractUser):
+    """Custom user model. Uses email as the unique identifier field."""
+
+    class Meta:
+        db_table = "users_user"
+        verbose_name = "User"
+        verbose_name_plural = "Users"
+
+    def __str__(self) -> str:
+        return self.email or self.username

backend/apps/users/urls.py

@@ -0,0 +1,8 @@
+from django.urls import include, path
+from rest_framework.routers import DefaultRouter
+from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView
+
+urlpatterns = [
+    path("token/", TokenObtainPairView.as_view(), name="token_obtain_pair"),
+    path("token/refresh/", TokenRefreshView.as_view(), name="token_refresh"),
+]

backend/config/django.py

@@ -0,0 +1,157 @@
+"""
+Django settings for cloud-reader backend.
+
+Generated using Django 5.1.  Customised with pydantic-settings integration.
+"""
+
+from pathlib import Path
+
+from config.settings import settings
+
+# ---------------------------------------------------------------------------
+# Build paths
+# ---------------------------------------------------------------------------
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+# ---------------------------------------------------------------------------
+# Security
+# ---------------------------------------------------------------------------
+SECRET_KEY = settings.DJANGO_SECRET_KEY
+DEBUG = settings.DJANGO_DEBUG
+ALLOWED_HOSTS = settings.DJANGO_ALLOWED_HOSTS
+
+# ---------------------------------------------------------------------------
+# Application definition
+# ---------------------------------------------------------------------------
+INSTALLED_APPS = [
+    # Django built-in
+    "django.contrib.admin",
+    "django.contrib.auth",
+    "django.contrib.contenttypes",
+    "django.contrib.sessions",
+    "django.contrib.messages",
+    "django.contrib.staticfiles",
+    # Third-party
+    "rest_framework",
+    "rest_framework_simplejwt",
+    "corsheaders",
+    "django_filters",
+    # Local apps
+    "apps.users",
+    "apps.books",
+    "apps.annotations",
+]
+
+MIDDLEWARE = [
+    "corsheaders.middleware.CorsMiddleware",
+    "django.middleware.security.SecurityMiddleware",
+    "django.contrib.sessions.middleware.SessionMiddleware",
+    "django.middleware.common.CommonMiddleware",
+    "django.middleware.csrf.CsrfViewMiddleware",
+    "django.contrib.auth.middleware.AuthenticationMiddleware",
+    "django.contrib.messages.middleware.MessageMiddleware",
+    "django.middleware.clickjacking.XFrameOptionsMiddleware",
+]
+
+ROOT_URLCONF = "config.urls"
+
+TEMPLATES = [
+    {
+        "BACKEND": "django.template.backends.django.DjangoTemplates",
+        "DIRS": [],
+        "APP_DIRS": True,
+        "OPTIONS": {
+            "context_processors": [
+                "django.template.context_processors.debug",
+                "django.template.context_processors.request",
+                "django.contrib.auth.context_processors.auth",
+                "django.contrib.messages.context_processors.messages",
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = "config.wsgi.application"
+
+# ---------------------------------------------------------------------------
+# Database
+# ---------------------------------------------------------------------------
+DATABASES = {
+    "default": {
+        "ENGINE": "django.db.backends.postgresql",
+        "NAME": settings.DB_NAME,
+        "USER": settings.DB_USER,
+        "PASSWORD": settings.DB_PASSWORD,
+        "HOST": settings.DB_HOST,
+        "PORT": settings.DB_PORT,
+    }
+}
+
+# ---------------------------------------------------------------------------
+# Auth
+# ---------------------------------------------------------------------------
+AUTH_USER_MODEL = "users.User"
+
+AUTH_PASSWORD_VALIDATORS = [
+    {"NAME": "django.contrib.auth.password_validation.MinimumLengthValidator"},
+    {"NAME": "django.contrib.auth.password_validation.NumericPasswordValidator"},
+]
+
+# ---------------------------------------------------------------------------
+# DRF
+# ---------------------------------------------------------------------------
+REST_FRAMEWORK = {
+    "DEFAULT_AUTHENTICATION_CLASSES": (
+        "rest_framework_simplejwt.authentication.JWTAuthentication",
+    ),
+    "DEFAULT_PERMISSION_CLASSES": (
+        "rest_framework.permissions.IsAuthenticated",
+    ),
+    "DEFAULT_PAGINATION_CLASS": "rest_framework.pagination.PageNumberPagination",
+    "PAGE_SIZE": 50,
+    "DEFAULT_FILTER_BACKENDS": [
+        "django_filters.rest_framework.DjangoFilterBackend",
+        "rest_framework.filters.OrderingFilter",
+        "rest_framework.filters.SearchFilter",
+    ],
+}
+
+# ---------------------------------------------------------------------------
+# SimpleJWT
+# ---------------------------------------------------------------------------
+from datetime import timedelta
+
+SIMPLE_JWT = {
+    "ACCESS_TOKEN_LIFETIME": timedelta(minutes=settings.JWT_ACCESS_TOKEN_LIFETIME_MINUTES),
+    "REFRESH_TOKEN_LIFETIME": timedelta(days=settings.JWT_REFRESH_TOKEN_LIFETIME_DAYS),
+}
+
+# ---------------------------------------------------------------------------
+# CORS
+# ---------------------------------------------------------------------------
+CORS_ALLOWED_ORIGINS = settings.CORS_ALLOWED_ORIGINS
+
+# ---------------------------------------------------------------------------
+# i18n
+# ---------------------------------------------------------------------------
+LANGUAGE_CODE = "en-us"
+TIME_ZONE = "UTC"
+USE_I18N = True
+USE_TZ = True
+
+# ---------------------------------------------------------------------------
+# Static / Media / Uploads
+# ---------------------------------------------------------------------------
+STATIC_URL = "static/"
+STATIC_ROOT = BASE_DIR / "staticfiles"
+MEDIA_URL = "media/"
+MEDIA_ROOT = BASE_DIR / "media"
+
+# Maximum upload size: 50MB
+DATA_UPLOAD_MAX_MEMORY_SIZE = 52_428_800
+FILE_UPLOAD_MAX_MEMORY_SIZE = 52_428_800
+
+# ---------------------------------------------------------------------------
+# Default primary key
+# ---------------------------------------------------------------------------
+DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"

backend/config/exceptions.py

@@ -1,13 +0,0 @@
-"""Custom exception handler that returns consistent JSON error responses."""
-from rest_framework.views import exception_handler
-
-
-def custom_exception_handler(exc, context):
-    """Wrap DRF's default handler to always return {'detail': ..., 'code': ...}."""
-    response = exception_handler(exc, context)
-    if response is not None:
-        data = response.data
-        # Flatten validation errors into a consistent shape
-        if isinstance(data, dict) and "detail" not in data:
-            response.data = {"detail": "Validation error", "fields": data, "code": "validation_error"}
-    return response

backend/config/settings.py

@@ -1,170 +1,42 @@
 import os
 from pathlib import Path
 
-import decouple
+from pydantic_settings import BaseSettings
 
-BASE_DIR = Path(__file__).resolve().parent.parent
 
-# ---------------------------------------------------------------------------
+class Settings(BaseSettings):
-# Environment
+    """Application settings via pydantic-settings. Reads from env vars and .env."""
-# ---------------------------------------------------------------------------
-config = decouple.AutoConfig(search_path=BASE_DIR / ".env")
 
-SECRET_KEY = config("SECRET_KEY", default="django-insecure-change-me-in-production")
+    # Django
-DEBUG = config("DEBUG", default=False, cast=bool)
+    DJANGO_SECRET_KEY: str = "django-insecure-change-me-in-production"
-ALLOWED_HOSTS = config("ALLOWED_HOSTS", default="localhost,127.0.0.1", cast=decouple.Csv())
+    DJANGO_DEBUG: bool = False
+    DJANGO_ALLOWED_HOSTS: list[str] = ["*"]
 
-# ---------------------------------------------------------------------------
+    # PostgreSQL
-# Application definition
+    DB_NAME: str = "cloud_reader"
-# ---------------------------------------------------------------------------
+    DB_USER: str = "postgres"
-INSTALLED_APPS = [
+    DB_PASSWORD: str = "postgres"
-    "django.contrib.admin",
+    DB_HOST: str = "localhost"
-    "django.contrib.auth",
+    DB_PORT: int = 5432
-    "django.contrib.contenttypes",
-    "django.contrib.sessions",
-    "django.contrib.messages",
-    "django.contrib.staticfiles",
-    # Third-party
-    "rest_framework",
-    "rest_framework_simplejwt",
-    "corsheaders",
-    "django_filters",
-    "drf_spectacular",
-    # Local
-    "apps.accounts",
-    "apps.documents",
-    "apps.collections",
-    "apps.reading",
-]
 
-MIDDLEWARE = [
+    # JWT
-    "django.middleware.security.SecurityMiddleware",
+    JWT_ACCESS_TOKEN_LIFETIME_MINUTES: int = 60
-    "whitenoise.middleware.WhiteNoiseMiddleware",
+    JWT_REFRESH_TOKEN_LIFETIME_DAYS: int = 7
-    "corsheaders.middleware.CorsMiddleware",
-    "django.contrib.sessions.middleware.SessionMiddleware",
-    "django.middleware.common.CommonMiddleware",
-    "django.middleware.csrf.CsrfViewMiddleware",
-    "django.contrib.auth.middleware.AuthenticationMiddleware",
-    "django.contrib.messages.middleware.MessageMiddleware",
-    "django.middleware.clickjacking.XFrameOptionsMiddleware",
-]
 
-ROOT_URLCONF = "config.urls"
+    # CORS
+    CORS_ALLOWED_ORIGINS: list[str] = [
+        "http://localhost:5173",
+        "http://localhost:3000",
+    ]
 
-TEMPLATES = [
+    @property
-    {
+    def DATABASE_URL(self) -> str:
-        "BACKEND": "django.template.backends.django.DjangoTemplates",
+        return (
-        "DIRS": [BASE_DIR / "templates"],
+            f"postgresql://{self.DB_USER}:{self.DB_PASSWORD}"
-        "APP_DIRS": True,
+            f"@{self.DB_HOST}:{self.DB_PORT}/{self.DB_NAME}"
-        "OPTIONS": {
+        )
-            "context_processors": [
-                "django.template.context_processors.debug",
-                "django.template.context_processors.request",
-                "django.contrib.auth.context_processors.auth",
-                "django.contrib.messages.context_processors.messages",
-            ],
-        },
-    },
-]
 
-WSGI_APPLICATION = "config.wsgi.application"
+    model_config = {"env_file": ".env", "env_file_encoding": "utf-8"}
 
-# ---------------------------------------------------------------------------
-# Database
-# ---------------------------------------------------------------------------
-DATABASES = {
-    "default": {
-        "ENGINE": config("DB_ENGINE", default="django.db.backends.postgresql"),
-        "NAME": config("DB_NAME", default="cloud_reader"),
-        "USER": config("DB_USER", default="cloud_reader"),
-        "PASSWORD": config("DB_PASSWORD", default="cloud_reader"),
-        "HOST": config("DB_HOST", default="localhost"),
-        "PORT": config("DB_PORT", default="5432", cast=int),
-    }
-}
 
-DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
+settings = Settings()
-
-# ---------------------------------------------------------------------------
-# Auth
-# ---------------------------------------------------------------------------
-AUTH_USER_MODEL = "accounts.User"
-AUTH_PASSWORD_VALIDATORS = [
-    {"NAME": "django.contrib.auth.password_validation.MinimumLengthValidator"},
-    {"NAME": "django.contrib.auth.password_validation.CommonPasswordValidator"},
-    {"NAME": "django.contrib.auth.password_validation.NumericPasswordValidator"},
-]
-
-LOGIN_URL = "rest_framework:login"
-LOGOUT_URL = "rest_framework:logout"
-
-# ---------------------------------------------------------------------------
-# Internationalization
-# ---------------------------------------------------------------------------
-LANGUAGE_CODE = "en-us"
-TIME_ZONE = "UTC"
-USE_I18N = True
-USE_TZ = True
-
-# ---------------------------------------------------------------------------
-# Static & Media files
-# ---------------------------------------------------------------------------
-STATIC_URL = "static/"
-STATIC_ROOT = BASE_DIR / "staticfiles"
-STATICFILES_DIRS = [BASE_DIR / "static"]
-STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
-
-MEDIA_URL = "media/"
-MEDIA_ROOT = BASE_DIR / "media"
-
-# ---------------------------------------------------------------------------
-# CORS
-# ---------------------------------------------------------------------------
-CORS_ALLOWED_ORIGINS = config(
-    "CORS_ALLOWED_ORIGINS",
-    default="http://localhost:5173,http://localhost:3000",
-    cast=decouple.Csv(),
-)
-CORS_ALLOW_CREDENTIALS = True
-
-# ---------------------------------------------------------------------------
-# REST Framework
-# ---------------------------------------------------------------------------
-REST_FRAMEWORK = {
-    "DEFAULT_AUTHENTICATION_CLASSES": (
-        "rest_framework_simplejwt.authentication.JWTAuthentication",
-    ),
-    "DEFAULT_PERMISSION_CLASSES": (
-        "rest_framework.permissions.IsAuthenticated",
-    ),
-    "DEFAULT_PAGINATION_CLASS": "rest_framework.pagination.PageNumberPagination",
-    "PAGE_SIZE": 20,
-    "DEFAULT_FILTER_BACKENDS": [
-        "django_filters.rest_framework.DjangoFilterBackend",
-        "rest_framework.filters.SearchFilter",
-        "rest_framework.filters.OrderingFilter",
-    ],
-    "DEFAULT_SCHEMA_CLASS": "drf_spectacular.openapi.AutoSchema",
-    "EXCEPTION_HANDLER": "config.exceptions.custom_exception_handler",
-}
-
-# ---------------------------------------------------------------------------
-# SimpleJWT
-# ---------------------------------------------------------------------------
-from datetime import timedelta  # noqa: E402
-
-SIMPLE_JWT = {
-    "ACCESS_TOKEN_LIFETIME": timedelta(minutes=30),
-    "REFRESH_TOKEN_LIFETIME": timedelta(days=7),
-    "ROTATE_REFRESH_TOKENS": True,
-    "AUTH_HEADER_TYPES": ("Bearer",),
-}
-
-# ---------------------------------------------------------------------------
-# drf-spectacular (OpenAPI)
-# ---------------------------------------------------------------------------
-SPECTACULAR_SETTINGS = {
-    "TITLE": "Cloud Reader API",
-    "VERSION": "0.1.0",
-    "SERVE_INCLUDE_SCHEMA": False,
-}

backend/config/urls.py

@@ -3,11 +3,7 @@ from django.urls import include, path
 
 urlpatterns = [
     path("admin/", admin.site.urls),
-    # API
+    path("api/auth/", include("apps.users.urls")),
-    path("api/v1/auth/", include("apps.accounts.urls")),
+    path("api/books/", include("apps.books.urls")),
-    path("api/v1/documents/", include("apps.documents.urls")),
+    path("api/annotations/", include("apps.annotations.urls")),
-    path("api/v1/collections/", include("apps.collections.urls")),
-    path("api/v1/reading/", include("apps.reading.urls")),
-    # OpenAPI schema
-    path("api/schema/", include("drf_spectacular.urls")),
 ]

backend/config/wsgi.py

@@ -2,6 +2,6 @@ import os
 
 from django.core.wsgi import get_wsgi_application
 
-os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.settings")
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.django")
 
 application = get_wsgi_application()

backend/manage.py

@@ -1,12 +1,13 @@
 #!/usr/bin/env python
 """Django's command-line utility for administrative tasks."""
+
 import os
 import sys
 
 
-def main() -> None:
+def main():
     """Run administrative tasks."""
-    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.settings")
+    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.django")
     try:
         from django.core.management import execute_from_command_line
     except ImportError as exc:

backend/pyproject.toml

@@ -1,33 +0,0 @@
-[project]
-name = "cloud-reader-backend"
-version = "0.1.0"
-description = "Cloud Reader API — Django REST Framework backend"
-readme = "README.md"
-requires-python = ">=3.12"
-dependencies = [
-    "django>=5.1,<6.0",
-    "djangorestframework>=3.15,<4.0",
-    "django-cors-headers>=4.3",
-    "django-filter>=24.3",
-    "psycopg2-binary>=2.9",
-    "python-decouple>=3.8",
-    "djangorestframework-simplejwt>=5.3",
-    "drf-spectacular>=0.27",
-    "gunicorn>=22.0",
-    "whitenoise>=6.6",
-    "Pillow>=10.3",
-]
-
-[project.optional-dependencies]
-dev = [
-    "pytest>=8.0",
-    "pytest-django>=4.8",
-    "pytest-cov>=5.0",
-    "model-bakery>=1.17",
-    "ruff>=0.5",
-    "ipdb>=0.13",
-]
-
-[build-system]
-requires = ["setuptools>=72"]
-build-backend = "setuptools.build_meta"

backend/pytest.ini

@@ -1,5 +1,8 @@
-# pytest
+[tool:pytest]
-DJANGO_SETTINGS_MODULE = config.settings
+DJANGO_SETTINGS_MODULE = config.django
 python_files = tests.py test_*.py *_tests.py
-django_find_project = false
+testpaths = apps
-testpaths = apps/
+
+[coverage:run]
+source = apps
+omit = */tests/*,*/migrations/*,*/admin.py,*/apps.py

backend/requirements.txt

@@ -0,0 +1,15 @@
+Django==5.1.7
+djangorestframework==3.15.2
+djangorestframework-simplejwt==5.4.0
+django-filter==25.1
+django-cors-headers==4.6.0
+psycopg2-binary==2.9.10
+pydantic==2.10.5
+pydantic-settings==2.7.1
+python-dotenv==1.0.1
+gunicorn==23.0.0
+Pillow>=11.0.0
+pytest==8.3.4
+pytest-django==4.9.0
+pytest-cov==6.0.0
+coverage==7.6.10

backend/requirements/dev.txt

@@ -1,7 +0,0 @@
--r production.txt
-pytest>=8.0
-pytest-django>=4.8
-pytest-cov>=5.0
-model-bakery>=1.17
-ruff>=0.5
-ipdb>=0.13

backend/requirements/production.txt

@@ -1,12 +0,0 @@
-# Django
-django>=5.1,<6.0
-djangorestframework>=3.15,<4.0
-django-cors-headers>=4.3
-django-filter>=24.3
-psycopg2-binary>=2.9
-python-decouple>=3.8
-djangorestframework-simplejwt>=5.3
-drf-spectacular>=0.27
-gunicorn>=22.0
-whitenoise>=6.6
-Pillow>=10.3

docker-compose.yml

@@ -1,39 +1,58 @@
-version: "3.9"
-
 services:
   db:
-    image: postgres:16
+    image: postgres:15
+    restart: unless-stopped
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
     environment:
       POSTGRES_DB: cloud_reader
-      POSTGRES_USER: cloud_reader
+      POSTGRES_USER: postgres
-      POSTGRES_PASSWORD: cloud_reader
+      POSTGRES_PASSWORD: postgres
     ports:
       - "5432:5432"
-    volumes:
+    healthcheck:
-      - pgdata:/var/lib/postgresql/data
+      test: ["CMD-SHELL", "pg_isready -U postgres -d cloud_reader"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
 
   backend:
-    build: backend
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
     ports:
       - "8000:8000"
     environment:
-      SECRET_KEY: development-secret-key
+      DJANGO_SECRET_KEY: "dev-secret-key-change-in-production"
-      DEBUG: "True"
+      DJANGO_DEBUG: "True"
-      DB_HOST: db
       DB_NAME: cloud_reader
-      DB_USER: cloud_reader
+      DB_USER: postgres
-      DB_PASSWORD: cloud_reader
+      DB_PASSWORD: postgres
-      CORS_ALLOWED_ORIGINS: http://localhost:5173,http://localhost:3000
+      DB_HOST: db
-      ALLOWED_HOSTS: localhost,127.0.0.1
+      DB_PORT: "5432"
+    volumes:
+      - ./backend:/app
+      - book_media:/app/media
+    command: >
+      sh -c "python manage.py migrate && python manage.py runserver 0.0.0.0:8000"
     depends_on:
-      - db
+      db:
+        condition: service_healthy
 
   frontend:
-    build: frontend
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
     ports:
-      - "5173:80"
+      - "5173:5173"
+    environment:
+      VITE_API_URL: "http://localhost:8000"
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
     depends_on:
       - backend
 
 volumes:
-  pgdata:
+  postgres_data:
+  book_media:

frontend/Dockerfile

@@ -1,20 +1,12 @@
-FROM node:20-alpine AS build
+FROM node:20-alpine
 
 WORKDIR /app
 
 COPY package.json yarn.lock ./
-COPY shared/package.json shared/
-COPY frontend/package.json frontend/
-
 RUN yarn install --frozen-lockfile
 
-COPY shared/ shared/
+COPY . ./
-COPY frontend/ frontend/
 
-RUN yarn workspace @cloud-reader/shared build && \
+EXPOSE 5173
-    yarn workspace @cloud-reader/frontend build
 
-FROM nginx:alpine
+CMD ["yarn", "dev", "--host"]
-COPY --from=build /app/frontend/dist /usr/share/nginx/html
-COPY frontend/nginx.conf /etc/nginx/conf.d/default.conf
-EXPOSE 80

frontend/index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cloud Reader</title>
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   </head>
   <body>
     <div id="root"></div>

frontend/nginx.conf

@@ -1,15 +0,0 @@
-server {
-    listen 80;
-    root /usr/share/nginx/html;
-    index index.html;
-
-    location / {
-        try_files $uri $uri/ /index.html;
-    }
-
-    location /api/ {
-        proxy_pass http://backend:8000;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-    }
-}

frontend/package.json

@@ -1,28 +1,30 @@
 {
   "name": "@cloud-reader/frontend",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
     "preview": "vite preview",
-    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
-    "lint": "echo 'lint ok'"
+    "lint": "eslint ."
   },
   "dependencies": {
-    "@cloud-reader/shared": "*",
+    "react": "^19.0.0",
-    "react": "^18.3.0",
+    "react-dom": "^19.0.0",
-    "react-dom": "^18.3.0",
+    "react-router-dom": "^7.1.0",
-    "react-router-dom": "^6.26.0",
+    "axios": "^1.7.9"
-    "axios": "^1.7.0",
-    "zod": "^3.23.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.0",
+    "@types/react": "^19.0.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^4.3.0",
+    "@vitejs/plugin-react": "^4.3.4",
-    "typescript": "^5.5.0",
+    "typescript": "~5.7.0",
-    "vite": "^5.4.0"
+    "vite": "^6.0.0",
+    "vitest": "^2.1.0",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "jsdom": "^25.0.0"
   }
 }

frontend/src/App.tsx

@@ -1,43 +1,56 @@
-import React, { Suspense, lazy } from "react";
+import React, { lazy, Suspense, useState } from "react";
-import { Navigate, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
-import { useAuth } from "./hooks/useAuth";
+import { AuthProvider, useAuth } from "./context/AuthContext";
 
-const LoginPage = lazy(() => import("./pages/LoginPage"));
+const LibraryPage = lazy(() => import("./pages/Library").then((m) => ({ default: m.LibraryPage })));
-const RegisterPage = lazy(() => import("./pages/RegisterPage"));
+const ReaderPage = lazy(() => import("./pages/Reader").then((m) => ({ default: m.ReaderPage })));
-const LibraryPage = lazy(() => import("./pages/LibraryPage"));
+const AddBookPage = lazy(() => import("./pages/AddBook").then((m) => ({ default: m.AddBookPage })));
-const DocumentPage = lazy(() => import("./pages/DocumentPage"));
+const SettingsPage = lazy(() => import("./pages/Settings").then((m) => ({ default: m.SettingsPage })));
-const ReaderPage = lazy(() => import("./pages/ReaderPage"));
+const BookmarksNotesPage = lazy(() => import("./components/annotations/BookmarksNotesPage").then((m) => ({ default: m.BookmarksNotesPage })));
-const CollectionsPage = lazy(() => import("./pages/CollectionsPage"));
-const SettingsPage = lazy(() => import("./pages/SettingsPage"));
 
-function ProtectedRoute({ children }: { children: React.ReactNode }): React.ReactElement {
+const AuthPage = lazy(() =>
-  const { user, isLoading } = useAuth();
+  import("./pages/AuthPage").then((m) => ({
-  if (isLoading) return <div className="loading-screen">Loading...</div>;
+    default: () => {
-  if (!user) return <Navigate to="/login" replace />;
+      const [isLogin, setIsLogin] = useState(true);
+      return isLogin ? <m.LoginPage onToggle={() => setIsLogin(false)} /> : <m.RegisterPage onToggle={() => setIsLogin(true)} />;
+    },
+  })),
+);
+
+function LoadingFallback() {
+  return <div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh", color: "#888", fontSize: 16 }}><p>Loading...</p></div>;
+}
+
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { isAuthenticated, loading } = useAuth();
+  if (loading) return <LoadingFallback />;
+  if (!isAuthenticated) return <Navigate to="/auth" replace />;
   return <>{children}</>;
 }
 
-function PublicRoute({ children }: { children: React.ReactNode }): React.ReactElement {
+function AppRoutes() {
-  const { user, isLoading } = useAuth();
+  const { isAuthenticated } = useAuth();
-  if (isLoading) return <div className="loading-screen">Loading...</div>;
-  if (user) return <Navigate to="/library" replace />;
-  return <>{children}</>;
-}
-
-export default function App(): React.ReactElement {
   return (
-    <Suspense fallback={<div className="loading-screen">Loading...</div>}>
+    <Suspense fallback={<LoadingFallback />}>
       <Routes>
-        <Route path="/login" element={<PublicRoute><LoginPage /></PublicRoute>} />
+        <Route path="/auth" element={isAuthenticated ? <Navigate to="/" replace /> : <AuthPage />} />
-        <Route path="/register" element={<PublicRoute><RegisterPage /></PublicRoute>} />
+        <Route path="/" element={<ProtectedRoute><LibraryPage /></ProtectedRoute>} />
-        <Route path="/library" element={<ProtectedRoute><LibraryPage /></ProtectedRoute>} />
+        <Route path="/reader/:id" element={<ProtectedRoute><ReaderPage /></ProtectedRoute>} />
-        <Route path="/documents/:id" element={<ProtectedRoute><DocumentPage /></ProtectedRoute>} />
+        <Route path="/add" element={<ProtectedRoute><AddBookPage /></ProtectedRoute>} />
-        <Route path="/read/:id" element={<ProtectedRoute><ReaderPage /></ProtectedRoute>} />
-        <Route path="/collections" element={<ProtectedRoute><CollectionsPage /></ProtectedRoute>} />
         <Route path="/settings" element={<ProtectedRoute><SettingsPage /></ProtectedRoute>} />
-        <Route path="/" element={<Navigate to="/library" replace />} />
+        <Route path="/bookmarks-notes/:bookId?" element={<ProtectedRoute><BookmarksNotesPage /></ProtectedRoute>} />
-        <Route path="*" element={<div className="not-found">Page not found</div>} />
+        <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
     </Suspense>
   );
 }
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <AuthProvider>
+        <AppRoutes />
+      </AuthProvider>
+    </BrowserRouter>
+  );
+}

frontend/src/api/annotations.ts

@@ -0,0 +1,96 @@
+import api from "@/api/client";
+import type {
+  Bookmark,
+  CreateBookmarkPayload,
+  Note,
+  CreateNotePayload,
+  UpdateNotePayload,
+  PaginatedResponse,
+} from "@/types";
+
+/** Fetch bookmarks for the current user, optionally filtered by book */
+export async function fetchBookmarks(
+  bookId?: string
+): Promise<PaginatedResponse<Bookmark>> {
+  const params: Record<string, string> = {};
+  if (bookId) params.book = bookId;
+  const { data } = await api.get<PaginatedResponse<Bookmark>>(
+    "/annotations/bookmarks/",
+    { params }
+  );
+  return data;
+}
+
+/** Create a new bookmark */
+export async function createBookmark(
+  payload: CreateBookmarkPayload
+): Promise<Bookmark> {
+  const { data } = await api.post<Bookmark>(
+    "/annotations/bookmarks/",
+    payload
+  );
+  return data;
+}
+
+/** Delete a bookmark by id */
+export async function deleteBookmark(id: string): Promise<void> {
+  await api.delete(`/annotations/bookmarks/${id}/`);
+}
+
+/** Batch delete bookmarks */
+export async function batchDeleteBookmarks(
+  ids: string[]
+): Promise<{ deleted: number }> {
+  const { data } = await api.delete<{ deleted: number }>(
+    "/annotations/bookmarks/batch-delete/",
+    { data: { ids } }
+  );
+  return data;
+}
+
+/** Fetch notes for the current user, optionally filtered by book */
+export async function fetchNotes(
+  bookId?: string
+): Promise<PaginatedResponse<Note>> {
+  const params: Record<string, string> = {};
+  if (bookId) params.book = bookId;
+  const { data } = await api.get<PaginatedResponse<Note>>(
+    "/annotations/notes/",
+    { params }
+  );
+  return data;
+}
+
+/** Create a new note */
+export async function createNote(payload: CreateNotePayload): Promise<Note> {
+  const { data } = await api.post<Note>("/annotations/notes/", payload);
+  return data;
+}
+
+/** Update a note's content */
+export async function updateNote(
+  id: string,
+  payload: UpdateNotePayload
+): Promise<Note> {
+  const { data } = await api.patch<Note>(
+    `/annotations/notes/${id}/`,
+    payload
+  );
+  return data;
+}
+
+/** Delete a note by id */
+export async function deleteNote(id: string): Promise<void> {
+  await api.delete(`/annotations/notes/${id}/`);
+}
+
+/** Batch delete notes */
+export async function batchDeleteNotes(
+  ids: string[]
+): Promise<{ deleted: number }> {
+  const { data } = await api.delete<{ deleted: number }>(
+    "/annotations/notes/batch-delete/",
+    { data: { ids } }
+  );
+  return data;
+}

frontend/src/api/books.ts

@@ -0,0 +1,56 @@
+import api from "./client";
+import type { EBookDetail, EBookListItem, ReadingProgress, ReadingSettings } from "../types/book";
+
+export const booksApi = {
+  async getEBooks(): Promise<EBookListItem[]> {
+    const { data } = await api.get<EBookListItem[]>("/books/ebooks/");
+    return data;
+  },
+
+  async getEBook(id: number): Promise<EBookDetail> {
+    const { data } = await api.get<EBookDetail>(`/books/ebooks/${id}/`);
+    return data;
+  },
+
+  async uploadEBook(
+    file: File,
+    title: string,
+    author: string,
+    coverImage?: File | null,
+  ): Promise<EBookDetail> {
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("title", title);
+    if (author) formData.append("author", author);
+    if (coverImage) formData.append("cover_image", coverImage);
+
+    const { data } = await api.post<EBookDetail>("/books/ebooks/", formData, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+    return data;
+  },
+
+  async deleteEBook(id: number): Promise<void> {
+    await api.delete(`/books/ebooks/${id}/`);
+  },
+
+  async getProgress(ebookId: number): Promise<ReadingProgress> {
+    const { data } = await api.get<ReadingProgress>(`/books/ebooks/${ebookId}/progress/`);
+    return data;
+  },
+
+  async updateProgress(ebookId: number, progressData: Partial<ReadingProgress>): Promise<ReadingProgress> {
+    const { data } = await api.patch<ReadingProgress>(`/books/ebooks/${ebookId}/progress/`, progressData);
+    return data;
+  },
+
+  async getSettings(): Promise<ReadingSettings> {
+    const { data } = await api.get<ReadingSettings>("/books/settings/");
+    return data;
+  },
+
+  async updateSettings(settingsData: Partial<ReadingSettings>): Promise<ReadingSettings> {
+    const { data } = await api.patch<ReadingSettings>("/books/settings/", settingsData);
+    return data;
+  },
+};

frontend/src/api/client.ts

@@ -0,0 +1,67 @@
+import axios from "axios";
+
+const api = axios.create({
+  baseURL: "/api",
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+// Attach JWT token to every request
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem("access_token");
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+// Attempt token refresh on 401
+let isRefreshing = false;
+let pendingRequests: Array<(token: string) => void> = [];
+
+api.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+    if (error.response?.status !== 401 || originalRequest._retry) {
+      return Promise.reject(error);
+    }
+
+    if (isRefreshing) {
+      return new Promise((resolve) => {
+        pendingRequests.push((token: string) => {
+          originalRequest.headers.Authorization = `Bearer ${token}`;
+          resolve(api(originalRequest));
+        });
+      });
+    }
+
+    originalRequest._retry = true;
+    isRefreshing = true;
+
+    try {
+      const refreshToken = localStorage.getItem("refresh_token");
+      if (!refreshToken) {
+        throw new Error("No refresh token");
+      }
+      const { data } = await axios.post("/api/auth/token/refresh/", {
+        refresh: refreshToken,
+      });
+      localStorage.setItem("access_token", data.access);
+      pendingRequests.forEach((cb) => cb(data.access));
+      pendingRequests = [];
+      originalRequest.headers.Authorization = `Bearer ${data.access}`;
+      return api(originalRequest);
+    } catch {
+      localStorage.removeItem("access_token");
+      localStorage.removeItem("refresh_token");
+      window.location.href = "/login";
+      return Promise.reject(error);
+    } finally {
+      isRefreshing = false;
+    }
+  }
+);
+
+export default api;

frontend/src/components/annotations/AddAnnotationForm.tsx

@@ -0,0 +1,120 @@
+import React, { useState } from "react";
+import { useAnnotations } from "@/context/AnnotationsContext";
+
+interface AddAnnotationFormProps {
+  bookId: string;
+  page: number;
+  locationText?: string;
+  onClose?: () => void;
+}
+
+export function AddAnnotationForm({
+  bookId,
+  page,
+  locationText,
+  onClose,
+}: AddAnnotationFormProps): React.ReactElement {
+  const { addBookmark, addNote } = useAnnotations();
+  const [mode, setMode] = useState<"bookmark" | "note" | null>(null);
+  const [noteContent, setNoteContent] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (): Promise<void> => {
+    setSubmitting(true);
+    setError(null);
+    try {
+      if (mode === "bookmark") {
+        await addBookmark({ book: bookId, page, location_text: locationText });
+      } else if (mode === "note") {
+        if (!noteContent.trim()) {
+          setError("Note content cannot be empty.");
+          setSubmitting(false);
+          return;
+        }
+        await addNote({
+          book: bookId,
+          page,
+          location_text: locationText,
+          content: noteContent.trim(),
+        });
+      }
+      onClose?.();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to save annotation."
+      );
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="add-annotation-overlay">
+      <div className="add-annotation-modal">
+        <button className="modal-close" onClick={onClose} aria-label="Close">
+          &times;
+        </button>
+        <h3>Add to Page {page}</h3>
+        {locationText && (
+          <blockquote className="annotation-quote">
+            &ldquo;{locationText}&rdquo;
+          </blockquote>
+        )}
+
+        {!mode ? (
+          <div className="mode-selector">
+            <button
+              className="btn btn-block"
+              onClick={() => setMode("bookmark")}
+            >
+              Add Bookmark
+            </button>
+            <button
+              className="btn btn-block btn-secondary"
+              onClick={() => setMode("note")}
+            >
+              Add Note
+            </button>
+          </div>
+        ) : (
+          <div className="annotation-form">
+            {mode === "note" && (
+              <div className="form-group">
+                <label htmlFor="note-content">Note:</label>
+                <textarea
+                  id="note-content"
+                  className="form-textarea"
+                  value={noteContent}
+                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                    setNoteContent(e.target.value)
+                  }
+                  rows={5}
+                  placeholder="Write your note here..."
+                  autoFocus
+                />
+              </div>
+            )}
+            {error && <div className="form-error">{error}</div>}
+            <div className="form-actions">
+              <button
+                className="btn"
+                onClick={handleSubmit}
+                disabled={submitting}
+              >
+                {submitting ? "Saving..." : "Save"}
+              </button>
+              <button
+                className="btn btn-secondary"
+                onClick={() => setMode(null)}
+                disabled={submitting}
+              >
+                Back
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/components/annotations/AnnotationsDashboard.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { useAnnotations } from "@/context/AnnotationsContext";
+import type { AnnotationEntry } from "@/types";
+
+interface AnnotationsDashboardProps {
+  bookId?: string;
+  onNavigateToPage?: (bookId: string, page: number) => void;
+}
+
+export function AnnotationsDashboard({
+  bookId,
+  onNavigateToPage,
+}: AnnotationsDashboardProps): React.ReactElement {
+  const {
+    mergedAnnotations,
+    loadBookmarks,
+    loadNotes,
+    removeBookmark,
+    removeNote,
+    state,
+  } = useAnnotations();
+
+  React.useEffect(() => {
+    loadBookmarks(bookId);
+    loadNotes(bookId);
+  }, [loadBookmarks, loadNotes, bookId]);
+
+  const handleDelete = async (entry: AnnotationEntry): Promise<void> => {
+    if (entry.kind === "bookmark") {
+      await removeBookmark(entry.id);
+    } else {
+      await removeNote(entry.id);
+    }
+  };
+
+  if (state.bookmarksLoading || state.notesLoading) {
+    return <div className="annotations-loading">Loading annotations...</div>;
+  }
+
+  if (mergedAnnotations.length === 0) {
+    return (
+      <div className="annotations-empty">
+        No bookmarks or notes yet.
+      </div>
+    );
+  }
+
+  return (
+    <div className="annotations-dashboard">
+      <div className="annotations-summary">
+        <span className="summary-count">
+          {state.bookmarks.length} bookmarks
+        </span>
+        <span className="summary-separator">&middot;</span>
+        <span className="summary-count">
+          {state.notes.length} notes
+        </span>
+      </div>
+      <div className="annotations-list">
+        {mergedAnnotations.map((entry: AnnotationEntry) => (
+          <div key={`${entry.kind}-${entry.id}`} className="annotation-card">
+            <div className="annotation-card-header">
+              <span
+                className={`annotation-kind-badge ${
+                  entry.kind === "bookmark" ? "bookmark-badge" : "note-badge"
+                }`}
+              >
+                {entry.kind === "bookmark" ? "Bookmark" : "Note"}
+              </span>
+              <span className="annotation-book-title">
+                {entry.book_title}
+              </span>
+              <span className="annotation-page">p.{entry.page}</span>
+              <span className="annotation-date">
+                {new Date(entry.created_at).toLocaleDateString()}
+              </span>
+            </div>
+            {entry.location_text && (
+              <blockquote className="annotation-quote">
+                &ldquo;{entry.location_text}&rdquo;
+              </blockquote>
+            )}
+            {entry.kind === "note" && entry.content && (
+              <p className="note-content-text">{entry.content}</p>
+            )}
+            <div className="annotation-actions">
+              {onNavigateToPage && (
+                <button
+                  className="btn btn-sm"
+                  onClick={() =>
+                    onNavigateToPage(entry.book_id, entry.page)
+                  }
+                >
+                  Go to page
+                </button>
+              )}
+              <button
+                className="btn btn-sm btn-danger"
+                onClick={() => handleDelete(entry)}
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/components/annotations/BookmarkList.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+import { useAnnotations } from "@/context/AnnotationsContext";
+import type { Bookmark } from "@/types";
+
+interface BookmarkListProps {
+  bookId?: string;
+  onNavigateToPage?: (bookId: string, page: number) => void;
+}
+
+export function BookmarkList({
+  bookId,
+  onNavigateToPage,
+}: BookmarkListProps): React.ReactElement {
+  const { state, loadBookmarks, removeBookmark } = useAnnotations();
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+
+  React.useEffect(() => {
+    loadBookmarks(bookId);
+  }, [loadBookmarks, bookId]);
+
+  const handleDelete = async (id: string): Promise<void> => {
+    setDeletingId(id);
+    try {
+      await removeBookmark(id);
+    } catch {
+      // error handled by context
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  if (state.bookmarksLoading) {
+    return <div className="annotations-loading">Loading bookmarks...</div>;
+  }
+
+  if (state.bookmarks.length === 0) {
+    return (
+      <div className="annotations-empty">
+        No bookmarks yet. Select a passage and add a bookmark while reading.
+      </div>
+    );
+  }
+
+  return (
+    <div className="annotations-list">
+      {state.bookmarks.map((bookmark: Bookmark) => (
+        <div key={bookmark.id} className="annotation-card">
+          <div className="annotation-card-header">
+            <span className="annotation-kind-badge bookmark-badge">
+              Bookmark
+            </span>
+            <span className="annotation-page">
+              Page {bookmark.page}
+            </span>
+            <span className="annotation-date">
+              {new Date(bookmark.created_at).toLocaleDateString()}
+            </span>
+          </div>
+          {bookmark.location_text && (
+            <blockquote className="annotation-quote">
+              &ldquo;{bookmark.location_text}&rdquo;
+            </blockquote>
+          )}
+          <div className="annotation-actions">
+            {onNavigateToPage && (
+              <button
+                className="btn btn-sm"
+                onClick={() =>
+                  onNavigateToPage(bookmark.book, bookmark.page)
+                }
+              >
+                Go to page
+              </button>
+            )}
+            <button
+              className="btn btn-sm btn-danger"
+              onClick={() => handleDelete(bookmark.id)}
+              disabled={deletingId === bookmark.id}
+            >
+              {deletingId === bookmark.id ? "Deleting..." : "Delete"}
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/components/annotations/BookmarksNotesPage.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { AnnotationsDashboard } from "@/components/annotations";
+
+interface BookmarksNotesPageProps {
+  bookId?: string;
+}
+
+export function BookmarksNotesPage({
+  bookId,
+}: BookmarksNotesPageProps): React.ReactElement {
+  return (
+    <div className="page">
+      <h2>Bookmarks & Notes</h2>
+      <AnnotationsDashboard
+        bookId={bookId}
+        onNavigateToPage={(bookId, page) => {
+          // Navigate to the book reader page at the specific page
+          window.location.href = `/books/${bookId}?page=${page}`;
+        }}
+      />
+    </div>
+  );
+}

frontend/src/components/annotations/NoteList.tsx

@@ -0,0 +1,148 @@
+import React, { useState } from "react";
+import { useAnnotations } from "@/context/AnnotationsContext";
+import type { Note } from "@/types";
+
+interface NoteListProps {
+  bookId?: string;
+  onNavigateToPage?: (bookId: string, page: number) => void;
+}
+
+export function NoteList({
+  bookId,
+  onNavigateToPage,
+}: NoteListProps): React.ReactElement {
+  const { state, loadNotes, editNote, removeNote } = useAnnotations();
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editContent, setEditContent] = useState<string>("");
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  const [savingId, setSavingId] = useState<string | null>(null);
+
+  React.useEffect(() => {
+    loadNotes(bookId);
+  }, [loadNotes, bookId]);
+
+  const handleEdit = (note: Note): void => {
+    setEditingId(note.id);
+    setEditContent(note.content);
+  };
+
+  const handleSave = async (id: string): Promise<void> => {
+    setSavingId(id);
+    try {
+      await editNote(id, editContent.trim());
+      setEditingId(null);
+    } catch {
+      // error handled by context
+    } finally {
+      setSavingId(null);
+    }
+  };
+
+  const handleCancelEdit = (): void => {
+    setEditingId(null);
+    setEditContent("");
+  };
+
+  const handleDelete = async (id: string): Promise<void> => {
+    setDeletingId(id);
+    try {
+      await removeNote(id);
+    } catch {
+      // error handled by context
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  if (state.notesLoading) {
+    return <div className="annotations-loading">Loading notes...</div>;
+  }
+
+  if (state.notes.length === 0) {
+    return (
+      <div className="annotations-empty">
+        No notes yet. Select a passage and add a note while reading.
+      </div>
+    );
+  }
+
+  return (
+    <div className="annotations-list">
+      {state.notes.map((note: Note) => (
+        <div key={note.id} className="annotation-card">
+          <div className="annotation-card-header">
+            <span className="annotation-kind-badge note-badge">Note</span>
+            <span className="annotation-page">Page {note.page}</span>
+            <span className="annotation-date">
+              {new Date(note.created_at).toLocaleDateString()}
+            </span>
+          </div>
+          {note.location_text && (
+            <blockquote className="annotation-quote">
+              &ldquo;{note.location_text}&rdquo;
+            </blockquote>
+          )}
+          <div className="annotation-note-content">
+            {editingId === note.id ? (
+              <div className="note-edit-form">
+                <textarea
+                  className="note-edit-textarea"
+                  value={editContent}
+                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                    setEditContent(e.target.value)
+                  }
+                  rows={4}
+                  autoFocus
+                />
+                <div className="note-edit-actions">
+                  <button
+                    className="btn btn-sm"
+                    onClick={() => handleSave(note.id)}
+                    disabled={savingId === note.id || !editContent.trim()}
+                  >
+                    {savingId === note.id ? "Saving..." : "Save"}
+                  </button>
+                  <button
+                    className="btn btn-sm btn-secondary"
+                    onClick={handleCancelEdit}
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <p className="note-content-text">{note.content}</p>
+            )}
+          </div>
+          <div className="annotation-actions">
+            {onNavigateToPage && (
+              <button
+                className="btn btn-sm"
+                onClick={() =>
+                  onNavigateToPage(note.book, note.page)
+                }
+              >
+                Go to page
+              </button>
+            )}
+            {editingId !== note.id && (
+              <button
+                className="btn btn-sm btn-secondary"
+                onClick={() => handleEdit(note)}
+              >
+                Edit
+              </button>
+            )}
+            <button
+              className="btn btn-sm btn-danger"
+              onClick={() => handleDelete(note.id)}
+              disabled={deletingId === note.id}
+            >
+              {deletingId === note.id ? "Deleting..." : "Delete"}
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/components/annotations/index.ts

@@ -0,0 +1,4 @@
+export { BookmarkList } from "./BookmarkList";
+export { NoteList } from "./NoteList";
+export { AddAnnotationForm } from "./AddAnnotationForm";
+export { AnnotationsDashboard } from "./AnnotationsDashboard";

frontend/src/components/layout/Layout.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { AnnotationsProvider } from "@/context/AnnotationsContext";
+
+interface LayoutProps {
+  children: React.ReactNode;
+  title?: string;
+}
+
+export function Layout({
+  children,
+  title = "Cloud Reader",
+}: LayoutProps): React.ReactElement {
+  return (
+    <AnnotationsProvider>
+      <div className="app-container">
+        <header className="app-header">
+          <h1 className="app-title">{title}</h1>
+          <nav className="app-nav">
+            <a href="/" className="nav-link">Home</a>
+            <a href="/bookmarks-notes" className="nav-link">Bookmarks & Notes</a>
+          </nav>
+        </header>
+        <main className="app-main">{children}</main>
+      </div>
+    </AnnotationsProvider>
+  );
+}

frontend/src/components/layout/index.ts

@@ -0,0 +1 @@
+export { Layout } from "./Layout";

frontend/src/context/AnnotationsContext.tsx

@@ -0,0 +1,277 @@
+import {
+  createContext,
+  useContext,
+  useReducer,
+  useCallback,
+  type ReactNode,
+} from "react";
+import type { Bookmark, Note, AnnotationEntry } from "@/types";
+import * as annotationsApi from "@/api/annotations";
+
+// ---------------------------------------------------------------------------
+// State
+// ---------------------------------------------------------------------------
+
+interface AnnotationsState {
+  bookmarks: Bookmark[];
+  notes: Note[];
+  bookmarksLoading: boolean;
+  notesLoading: boolean;
+  error: string | null;
+  selectedBookId: string | null;
+}
+
+const initialState: AnnotationsState = {
+  bookmarks: [],
+  notes: [],
+  bookmarksLoading: false,
+  notesLoading: false,
+  error: null,
+  selectedBookId: null,
+};
+
+// ---------------------------------------------------------------------------
+// Actions
+// ---------------------------------------------------------------------------
+
+type AnnotationsAction =
+  | { type: "FETCH_BOOKMARKS_START" }
+  | { type: "FETCH_BOOKMARKS_SUCCESS"; payload: Bookmark[] }
+  | { type: "FETCH_NOTES_START" }
+  | { type: "FETCH_NOTES_SUCCESS"; payload: Note[] }
+  | { type: "SET_ERROR"; payload: string }
+  | { type: "CLEAR_ERROR" }
+  | { type: "REMOVE_BOOKMARK"; payload: string }
+  | { type: "REMOVE_NOTE"; payload: string }
+  | { type: "UPDATE_NOTE"; payload: Note }
+  | { type: "ADD_BOOKMARK"; payload: Bookmark }
+  | { type: "ADD_NOTE"; payload: Note }
+  | { type: "SET_SELECTED_BOOK"; payload: string | null };
+
+// ---------------------------------------------------------------------------
+// Reducer
+// ---------------------------------------------------------------------------
+
+function annotationsReducer(
+  state: AnnotationsState,
+  action: AnnotationsAction
+): AnnotationsState {
+  switch (action.type) {
+    case "FETCH_BOOKMARKS_START":
+      return { ...state, bookmarksLoading: true, error: null };
+    case "FETCH_BOOKMARKS_SUCCESS":
+      return { ...state, bookmarks: action.payload, bookmarksLoading: false };
+    case "FETCH_NOTES_START":
+      return { ...state, notesLoading: true, error: null };
+    case "FETCH_NOTES_SUCCESS":
+      return { ...state, notes: action.payload, notesLoading: false };
+    case "SET_ERROR":
+      return { ...state, error: action.payload, bookmarksLoading: false, notesLoading: false };
+    case "CLEAR_ERROR":
+      return { ...state, error: null };
+    case "REMOVE_BOOKMARK":
+      return {
+        ...state,
+        bookmarks: state.bookmarks.filter((b) => b.id !== action.payload),
+      };
+    case "REMOVE_NOTE":
+      return {
+        ...state,
+        notes: state.notes.filter((n) => n.id !== action.payload),
+      };
+    case "UPDATE_NOTE":
+      return {
+        ...state,
+        notes: state.notes.map((n) =>
+          n.id === action.payload.id ? action.payload : n
+        ),
+      };
+    case "ADD_BOOKMARK":
+      return {
+        ...state,
+        bookmarks: [action.payload, ...state.bookmarks],
+      };
+    case "ADD_NOTE":
+      return {
+        ...state,
+        notes: [action.payload, ...state.notes],
+      };
+    case "SET_SELECTED_BOOK":
+      return { ...state, selectedBookId: action.payload };
+    default:
+      return state;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+interface AnnotationsContextValue {
+  state: AnnotationsState;
+  loadBookmarks: (bookId?: string) => Promise<void>;
+  loadNotes: (bookId?: string) => Promise<void>;
+  addBookmark: (data: { book: string; page: number; location_text?: string }) => Promise<Bookmark>;
+  addNote: (data: { book: string; page: number; location_text?: string; content: string }) => Promise<Note>;
+  editNote: (id: string, content: string) => Promise<Note>;
+  removeBookmark: (id: string) => Promise<void>;
+  removeNote: (id: string) => Promise<void>;
+  setSelectedBook: (bookId: string | null) => void;
+  /** Merged list of bookmarks + notes, sorted by created_at desc */
+  mergedAnnotations: AnnotationEntry[];
+}
+
+const AnnotationsContext = createContext<AnnotationsContextValue | null>(null);
+
+// ---------------------------------------------------------------------------
+// Provider
+// ---------------------------------------------------------------------------
+
+export function AnnotationsProvider({
+  children,
+}: {
+  children: ReactNode;
+}): React.ReactElement {
+  const [state, dispatch] = useReducer(annotationsReducer, initialState);
+
+  const loadBookmarks = useCallback(async (bookId?: string) => {
+    dispatch({ type: "FETCH_BOOKMARKS_START" });
+    try {
+      const response = await annotationsApi.fetchBookmarks(bookId);
+      dispatch({ type: "FETCH_BOOKMARKS_SUCCESS", payload: response.results });
+    } catch (err) {
+      dispatch({
+        type: "SET_ERROR",
+        payload: err instanceof Error ? err.message : "Failed to load bookmarks",
+      });
+    }
+  }, []);
+
+  const loadNotes = useCallback(async (bookId?: string) => {
+    dispatch({ type: "FETCH_NOTES_START" });
+    try {
+      const response = await annotationsApi.fetchNotes(bookId);
+      dispatch({ type: "FETCH_NOTES_SUCCESS", payload: response.results });
+    } catch (err) {
+      dispatch({
+        type: "SET_ERROR",
+        payload: err instanceof Error ? err.message : "Failed to load notes",
+      });
+    }
+  }, []);
+
+  const addBookmark = useCallback(
+    async (data: {
+      book: string;
+      page: number;
+      location_text?: string;
+    }): Promise<Bookmark> => {
+      const bookmark = await annotationsApi.createBookmark(data);
+      dispatch({ type: "ADD_BOOKMARK", payload: bookmark });
+      return bookmark;
+    },
+    []
+  );
+
+  const addNote = useCallback(
+    async (data: {
+      book: string;
+      page: number;
+      location_text?: string;
+      content: string;
+    }): Promise<Note> => {
+      const note = await annotationsApi.createNote(data);
+      dispatch({ type: "ADD_NOTE", payload: note });
+      return note;
+    },
+    []
+  );
+
+  const editNote = useCallback(
+    async (id: string, content: string): Promise<Note> => {
+      const updated = await annotationsApi.updateNote(id, { content });
+      dispatch({ type: "UPDATE_NOTE", payload: updated });
+      return updated;
+    },
+    []
+  );
+
+  const removeBookmark = useCallback(async (id: string) => {
+    await annotationsApi.deleteBookmark(id);
+    dispatch({ type: "REMOVE_BOOKMARK", payload: id });
+  }, []);
+
+  const removeNote = useCallback(async (id: string) => {
+    await annotationsApi.deleteNote(id);
+    dispatch({ type: "REMOVE_NOTE", payload: id });
+  }, []);
+
+  const setSelectedBook = useCallback((bookId: string | null) => {
+    dispatch({ type: "SET_SELECTED_BOOK", payload: bookId });
+  }, []);
+
+  // Build merged annotations list sorted by created_at desc
+  const mergedAnnotations: AnnotationEntry[] = [
+    ...state.bookmarks.map(
+      (b): AnnotationEntry => ({
+        id: b.id,
+        kind: "bookmark",
+        book_title: b.book_title,
+        book_id: b.book,
+        page: b.page,
+        location_text: b.location_text,
+        created_at: b.created_at,
+        updated_at: b.updated_at,
+      })
+    ),
+    ...state.notes.map(
+      (n): AnnotationEntry => ({
+        id: n.id,
+        kind: "note",
+        book_title: n.book_title,
+        book_id: n.book,
+        page: n.page,
+        location_text: n.location_text,
+        content: n.content,
+        created_at: n.created_at,
+        updated_at: n.updated_at,
+      })
+    ),
+  ].sort(
+    (a, b) =>
+      new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+  );
+
+  const value: AnnotationsContextValue = {
+    state,
+    loadBookmarks,
+    loadNotes,
+    addBookmark,
+    addNote,
+    editNote,
+    removeBookmark,
+    removeNote,
+    setSelectedBook,
+    mergedAnnotations,
+  };
+
+  return (
+    <AnnotationsContext.Provider value={value}>
+      {children}
+    </AnnotationsContext.Provider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+export function useAnnotations(): AnnotationsContextValue {
+  const context = useContext(AnnotationsContext);
+  if (!context) {
+    throw new Error(
+      "useAnnotations must be used within an AnnotationsProvider"
+    );
+  }
+  return context;
+}

frontend/src/context/AuthContext.tsx

@@ -0,0 +1,63 @@
+import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
+import api from "../api/client";
+
+interface AuthContextValue {
+  isAuthenticated: boolean;
+  loading: boolean;
+  user: { email: string } | null;
+  login: (email: string, password: string) => Promise<void>;
+  register: (email: string, password: string) => Promise<void>;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<{ email: string } | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const token = localStorage.getItem("access_token");
+    if (token) {
+      try {
+        const payload = JSON.parse(atob(token.split(".")[1] ?? ""));
+        setUser({ email: payload.email ?? payload.sub ?? "user" });
+      } catch {
+        localStorage.removeItem("access_token");
+        localStorage.removeItem("refresh_token");
+      }
+    }
+    setLoading(false);
+  }, []);
+
+  const login = useCallback(async (email: string, password: string) => {
+    const { data } = await api.post<{ access: string; refresh: string }>("/auth/token/", { email, password });
+    localStorage.setItem("access_token", data.access);
+    localStorage.setItem("refresh_token", data.refresh);
+    const payload = JSON.parse(atob(data.access.split(".")[1] ?? ""));
+    setUser({ email: payload.email ?? payload.sub ?? "user" });
+  }, []);
+
+  const register = useCallback(async (email: string, password: string) => {
+    await api.post("/auth/register/", { email, password });
+    await login(email, password);
+  }, [login]);
+
+  const logout = useCallback(() => {
+    localStorage.removeItem("access_token");
+    localStorage.removeItem("refresh_token");
+    setUser(null);
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ isAuthenticated: !!user, loading, user, login, register, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth(): AuthContextValue {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be used within an AuthProvider");
+  return ctx;
+}

frontend/src/hooks/index.ts

@@ -0,0 +1 @@
+export { usePaginatedQuery } from "./usePaginatedQuery";

frontend/src/hooks/useAuth.tsx

@@ -1,76 +0,0 @@
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import type { UserProfile } from "../types/auth";
-import { fetchProfile, login as apiLogin, register as apiRegister } from "../services/authService";
-import type { LoginCredentials, RegisterData } from "../types/auth";
-
-interface AuthContextValue {
-  user: UserProfile | null;
-  isLoading: boolean;
-  login: (credentials: LoginCredentials) => Promise<void>;
-  register: (data: RegisterData) => Promise<void>;
-  logout: () => void;
-  refreshProfile: () => Promise<void>;
-}
-
-const AuthContext = createContext<AuthContextValue | null>(null);
-
-export function AuthProvider({ children }: { children: React.ReactNode }): React.ReactElement {
-  const [user, setUser] = useState<UserProfile | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  const refreshProfile = useCallback(async () => {
-    const token = localStorage.getItem("access_token");
-    if (!token) {
-      setUser(null);
-      setIsLoading(false);
-      return;
-    }
-    try {
-      const profile = await fetchProfile();
-      setUser(profile);
-    } catch {
-      localStorage.removeItem("access_token");
-      localStorage.removeItem("refresh_token");
-      setUser(null);
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    refreshProfile();
-  }, [refreshProfile]);
-
-  const login = useCallback(async (credentials: LoginCredentials) => {
-    const tokens = await apiLogin(credentials);
-    localStorage.setItem("access_token", tokens.access);
-    localStorage.setItem("refresh_token", tokens.refresh);
-    const profile = await fetchProfile();
-    setUser(profile);
-  }, []);
-
-  const register = useCallback(async (data: RegisterData) => {
-    await apiRegister(data);
-    // Auto-login after registration
-    await login({ email: data.email, password: data.password });
-  }, [login]);
-
-  const logout = useCallback(() => {
-    localStorage.removeItem("access_token");
-    localStorage.removeItem("refresh_token");
-    setUser(null);
-  }, []);
-
-  const value = useMemo<AuthContextValue>(
-    () => ({ user, isLoading, login, register, logout, refreshProfile }),
-    [user, isLoading, login, register, logout, refreshProfile],
-  );
-
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
-}
-
-export function useAuth(): AuthContextValue {
-  const ctx = useContext(AuthContext);
-  if (!ctx) throw new Error("useAuth must be used within an AuthProvider");
-  return ctx;
-}

frontend/src/hooks/useDocuments.ts

@@ -1,51 +0,0 @@
-import { useState, useCallback } from "react";
-import api from "../services/api";
-import type { Document, PaginatedResponse } from "@cloud-reader/shared";
-
-interface UseDocumentsReturn {
-  documents: Document[];
-  isLoading: boolean;
-  error: string | null;
-  totalCount: number;
-  fetchDocuments: (params?: Record<string, string | number>) => Promise<void>;
-  fetchDocument: (id: number) => Promise<Document | null>;
-  deleteDocument: (id: number) => Promise<void>;
-}
-
-export function useDocuments(): UseDocumentsReturn {
-  const [documents, setDocuments] = useState<Document[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [totalCount, setTotalCount] = useState(0);
-
-  const fetchDocuments = useCallback(async (params?: Record<string, string | number>) => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const { data } = await api.get<PaginatedResponse<Document>>("/documents/", { params });
-      setDocuments(data.results);
-      setTotalCount(data.count);
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : "Failed to fetch documents");
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  const fetchDocument = useCallback(async (id: number): Promise<Document | null> => {
-    try {
-      const { data } = await api.get<Document>(`/documents/${id}/`);
-      return data;
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : "Failed to fetch document");
-      return null;
-    }
-  }, []);
-
-  const deleteDocument = useCallback(async (id: number) => {
-    await api.delete(`/documents/${id}/`);
-    setDocuments((prev) => prev.filter((d) => d.id !== id));
-  }, []);
-
-  return { documents, isLoading, error, totalCount, fetchDocuments, fetchDocument, deleteDocument };
-}

frontend/src/hooks/usePaginatedQuery.ts

@@ -0,0 +1,69 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import type { PaginatedResponse } from "@/types";
+
+interface UsePaginatedQueryOptions<T> {
+  fetchFn: (cursor?: string) => Promise<PaginatedResponse<T>>;
+}
+
+interface UsePaginatedQueryResult<T> {
+  items: T[];
+  loading: boolean;
+  error: string | null;
+  hasMore: boolean;
+  loadMore: () => Promise<void>;
+  refresh: () => Promise<void>;
+}
+
+/**
+ * Hook for paginated list fetching with infinite scroll support.
+ */
+export function usePaginatedQuery<T>({
+  fetchFn,
+}: UsePaginatedQueryOptions<T>): UsePaginatedQueryResult<T> {
+  const [items, setItems] = useState<T[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [nextCursor, setNextCursor] = useState<string | null>(null);
+  const loadingRef = useRef(false);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetchFn();
+      setItems(response.results);
+      setNextCursor(response.next);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch data");
+    } finally {
+      setLoading(false);
+    }
+  }, [fetchFn]);
+
+  const loadMore = useCallback(async () => {
+    if (!nextCursor || loadingRef.current) return;
+    loadingRef.current = true;
+    try {
+      const response = await fetchFn(nextCursor);
+      setItems((prev) => [...prev, ...response.results]);
+      setNextCursor(response.next);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load more");
+    } finally {
+      loadingRef.current = false;
+    }
+  }, [nextCursor, fetchFn]);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  return {
+    items,
+    loading,
+    error,
+    hasMore: nextCursor !== null,
+    loadMore,
+    refresh,
+  };
+}

frontend/src/main.tsx

@@ -1,19 +1,53 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
+import { Layout } from "@/components/layout";
-import App from "./App";
+import { BookmarksNotesPage } from "@/components/annotations/BookmarksNotesPage";
-import { AuthProvider } from "./hooks/useAuth";
+import "./styles.css";
-import "./styles/global.css";
+
+function App(): React.ReactElement {
+  const path = window.location.pathname;
+
+  // Simple client-side routing
+  if (path.startsWith("/books/") && path.includes("bookmarks-notes")) {
+    // /books/:id/bookmarks-notes
+    const bookId = path.split("/")[2];
+    return (
+      <Layout title="Cloud Reader">
+        <BookmarksNotesPage bookId={bookId} />
+      </Layout>
+    );
+  }
+
+  if (path === "/bookmarks-notes" || path === "/bookmarks-notes/") {
+    return (
+      <Layout title="Cloud Reader">
+        <BookmarksNotesPage />
+      </Layout>
+    );
+  }
+
+  // Default: landing page
+  return (
+    <Layout title="Cloud Reader">
+      <div className="page">
+        <h2>Welcome to Cloud Reader</h2>
+        <p>Your personal e-book reader with cross-device sync.</p>
+        <div className="quick-links">
+          <a href="/bookmarks-notes" className="card-link">
+            <h3>Bookmarks & Notes</h3>
+            <p>View and manage all your annotations</p>
+          </a>
+        </div>
+      </div>
+    </Layout>
+  );
+}
 
 const rootElement = document.getElementById("root");
-if (!rootElement) throw new Error("Root element not found");
+if (rootElement) {
-
+  ReactDOM.createRoot(rootElement).render(
-ReactDOM.createRoot(rootElement).render(
     <React.StrictMode>
-    <BrowserRouter>
-      <AuthProvider>
       <App />
-      </AuthProvider>
+    </React.StrictMode>
-    </BrowserRouter>
+  );
-  </React.StrictMode>,
+}
-);

frontend/src/pages/AddBook.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { booksApi } from "../api/books";
+
+export function AddBookPage() {
+  const navigate = useNavigate();
+  const [title, setTitle] = useState("");
+  const [author, setAuthor] = useState("");
+  const [file, setFile] = useState<File | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selected = e.target.files?.[0] ?? null;
+    if (selected) {
+      const ext = selected.name.split(".").pop()?.toLowerCase();
+      if (ext !== "epub" && ext !== "pdf") { setError("Only EPUB and PDF files are supported."); setFile(null); return; }
+      setFile(selected); setError(null);
+      if (!title) setTitle(selected.name.replace(/\.(epub|pdf)$/i, ""));
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!file || !title.trim()) { setError("Title and file are required."); return; }
+    setUploading(true); setError(null);
+    try { await booksApi.uploadEBook(file, title.trim(), author.trim()); navigate("/"); }
+    catch (err) { setError(err instanceof Error ? err.message : "Upload failed."); }
+    finally { setUploading(false); }
+  };
+
+  return (
+    <div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
+      <header style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee" }}>
+        <button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>← Back</button>
+        <h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>Add Book</h1>
+      </header>
+      <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 20 }}>
+        {error && <div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14 }}>{error}</div>}
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          <label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>File (EPUB or PDF) *</label>
+          <input type="file" accept=".epub,.pdf" onChange={handleFileChange} style={{ padding: "10px 0" }} />
+          {file && <p style={{ fontSize: 13, color: "#666", marginTop: 4 }}>Selected: {file.name}</p>}
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          <label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Title *</label>
+          <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Book title" style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          <label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Author</label>
+          <input type="text" value={author} onChange={(e) => setAuthor(e.target.value)} placeholder="Author name" style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
+        </div>
+        <button type="submit" disabled={uploading} style={{ padding: "12px 24px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 16, fontWeight: 600, cursor: "pointer", opacity: uploading ? 0.6 : 1, marginTop: 8 }}>{uploading ? "Uploading..." : "Upload Book"}</button>
+      </form>
+    </div>
+  );
+}

frontend/src/pages/AuthPage.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
+
+function AuthForm({ isLogin, onToggle }: { isLogin: boolean; onToggle: () => void }) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const { login, register } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault(); setError(null);
+    if (!isLogin && password !== confirmPassword) { setError("Passwords do not match."); return; }
+    setLoading(true);
+    try {
+      if (isLogin) await login(email, password);
+      else await register(email, password);
+      navigate("/");
+    } catch (err) { setError(err instanceof Error ? err.message : isLogin ? "Login failed" : "Registration failed"); }
+    finally { setLoading(false); }
+  };
+
+  return (
+    <div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh", background: "#f8f9fa", padding: 16 }}>
+      <div style={{ width: "100%", maxWidth: 400, background: "#fff", borderRadius: 12, padding: 32, boxShadow: "0 2px 16px rgba(0,0,0,0.08)" }}>
+        <h1 style={{ fontSize: 28, fontWeight: 700, color: "#1a1a2e", textAlign: "center", marginBottom: 4 }}>Cloud Reader</h1>
+        <h2 style={{ fontSize: 16, color: "#888", textAlign: "center", marginBottom: 24, fontWeight: 400 }}>{isLogin ? "Sign In" : "Create Account"}</h2>
+        <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+          {error && <div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14 }}>{error}</div>}
+          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+            <label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Email</label>
+            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" required style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
+          </div>
+          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+            <label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Password</label>
+            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="At least 8 characters" required minLength={8} style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
+          </div>
+          {!isLogin && <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+            <label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Confirm Password</label>
+            <input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} placeholder="Repeat your password" required minLength={8} style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
+          </div>}
+          <button type="submit" disabled={loading} style={{ padding: "12px 24px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 16, fontWeight: 600, cursor: "pointer", opacity: loading ? 0.6 : 1, marginTop: 8 }}>{loading ? (isLogin ? "Signing in..." : "Creating account...") : (isLogin ? "Sign In" : "Create Account")}</button>
+        </form>
+        <p style={{ textAlign: "center", marginTop: 20, color: "#888", fontSize: 14 }}>
+          {isLogin ? "Don't have an account? " : "Already have an account? "}
+          <button onClick={onToggle} style={{ background: "none", border: "none", color: "#1a1a2e", fontWeight: 600, cursor: "pointer", fontSize: 14, textDecoration: "underline" }}>{isLogin ? "Register" : "Sign In"}</button>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export function LoginPage({ onToggle }: { onToggle: () => void }) { return <AuthForm isLogin={true} onToggle={onToggle} />; }
+export function RegisterPage({ onToggle }: { onToggle: () => void }) { return <AuthForm isLogin={false} onToggle={onToggle} />; }

frontend/src/pages/CollectionsPage.tsx

@@ -1,100 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { Link } from "react-router-dom";
-import type { Collection } from "@cloud-reader/shared";
-import api from "../services/api";
-
-export default function CollectionsPage(): React.ReactElement {
-  const [collections, setCollections] = useState<Collection[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [showCreate, setShowCreate] = useState(false);
-  const [newName, setNewName] = useState("");
-  const [newDesc, setNewDesc] = useState("");
-
-  const fetchCollections = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      const { data } = await api.get<{ results: Collection[] }>("/collections/");
-      setCollections(data.results || data as unknown as Collection[]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    fetchCollections();
-  }, [fetchCollections]);
-
-  const handleCreate = async (e: React.FormEvent): Promise<void> => {
-    e.preventDefault();
-    await api.post("/collections/", { name: newName, description: newDesc });
-    setNewName("");
-    setNewDesc("");
-    setShowCreate(false);
-    fetchCollections();
-  };
-
-  const handleDelete = async (id: number): Promise<void> => {
-    if (!confirm("Delete this collection?")) return;
-    await api.delete(`/collections/${id}/`);
-    fetchCollections();
-  };
-
-  return (
-    <div className="layout">
-      <header className="topbar">
-        <Link to="/library" className="btn-secondary">&larr; Library</Link>
-        <h1 className="logo">Collections</h1>
-        <button onClick={() => setShowCreate(true)} className="btn-primary">+ New Collection</button>
-      </header>
-
-      <main className="content">
-        {showCreate && (
-          <form onSubmit={handleCreate} className="create-collection-form">
-            <input
-              type="text"
-              placeholder="Collection name"
-              value={newName}
-              onChange={(e) => setNewName(e.target.value)}
-              required
-              autoFocus
-            />
-            <input
-              type="text"
-              placeholder="Description (optional)"
-              value={newDesc}
-              onChange={(e) => setNewDesc(e.target.value)}
-            />
-            <div className="form-actions">
-              <button type="submit" className="btn-primary">Create</button>
-              <button type="button" onClick={() => setShowCreate(false)} className="btn-secondary">Cancel</button>
-            </div>
-          </form>
-        )}
-
-        {isLoading ? (
-          <div className="loading">Loading collections...</div>
-        ) : collections.length === 0 ? (
-          <div className="empty-state">
-            <p>No collections yet. Group your documents into collections!</p>
-          </div>
-        ) : (
-          <div className="collection-list">
-            {collections.map((col) => (
-              <div key={col.id} className="collection-card">
-                <div className="collection-info">
-                  <h3>{col.name}</h3>
-                  <p className="collection-desc">{col.description}</p>
-                  <span className="collection-count">{col.document_count} document{col.document_count !== 1 ? "s" : ""}</span>
-                </div>
-                <div className="collection-actions">
-                  <Link to={`/collections/${col.id}`} className="btn-secondary">View</Link>
-                  <button onClick={() => handleDelete(col.id)} className="btn-danger">Delete</button>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </main>
-    </div>
-  );
-}

frontend/src/pages/DocumentPage.tsx

@@ -1,92 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { Link, useNavigate, useParams } from "react-router-dom";
-import type { DocumentDetail } from "@cloud-reader/shared";
-import api from "../services/api";
-
-export default function DocumentPage(): React.ReactElement {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const [doc, setDoc] = useState<DocumentDetail | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  const fetchDoc = useCallback(async () => {
-    if (!id) return;
-    setIsLoading(true);
-    try {
-      const { data } = await api.get<DocumentDetail>(`/documents/${id}/`);
-      setDoc(data);
-    } catch {
-      navigate("/library");
-    } finally {
-      setIsLoading(false);
-    }
-  }, [id, navigate]);
-
-  useEffect(() => {
-    fetchDoc();
-  }, [fetchDoc]);
-
-  const handleDelete = async (): Promise<void> => {
-    if (!id || !confirm("Delete this document?")) return;
-    await api.delete(`/documents/${id}/`);
-    navigate("/library");
-  };
-
-  if (isLoading) return <div className="loading">Loading document...</div>;
-  if (!doc) return <div className="not-found">Document not found</div>;
-
-  return (
-    <div className="layout">
-      <header className="topbar">
-        <Link to="/library" className="btn-secondary">&larr; Back</Link>
-        <h1 className="logo">{doc.title}</h1>
-        <div className="topbar-right">
-          <button onClick={handleDelete} className="btn-danger">Delete</button>
-        </div>
-      </header>
-
-      <main className="content document-detail">
-        <div className="doc-header">
-          <div className="doc-cover-large">
-            {doc.cover_url ? (
-              <img src={doc.cover_url} alt={doc.title} />
-            ) : (
-              <div className="doc-cover-placeholder-large">{doc.file_type.toUpperCase()}</div>
-            )}
-          </div>
-          <div className="doc-metadata">
-            <h2>{doc.title}</h2>
-            {doc.author && <p className="doc-author">by {doc.author}</p>}
-            <p className="doc-description">{doc.description}</p>
-            <div className="doc-stats">
-              <span>Type: {doc.file_type}</span>
-              <span>Size: {(doc.file_size / 1024 / 1024).toFixed(1)} MB</span>
-              {doc.page_count && <span>Pages: {doc.page_count}</span>}
-              <span>Uploaded: {new Date(doc.uploaded_at).toLocaleDateString()}</span>
-            </div>
-            {doc.tags.length > 0 && (
-              <div className="doc-tags">
-                {doc.tags.map((tag) => (
-                  <span key={tag} className="tag">{tag}</span>
-                ))}
-              </div>
-            )}
-            <Link to={`/read/${doc.id}`} className="btn-primary">Start Reading</Link>
-          </div>
-        </div>
-
-        {doc.recent_highlights.length > 0 && (
-          <section className="recent-highlights">
-            <h3>Recent Highlights</h3>
-            {doc.recent_highlights.map((hl) => (
-              <div key={hl.id} className="highlight-card" style={{ borderLeftColor: hl.color }}>
-                <p className="highlight-text">{hl.text}</p>
-                <span className="highlight-page">Page {hl.page}</span>
-              </div>
-            ))}
-          </section>
-        )}
-      </main>
-    </div>
-  );
-}

frontend/src/pages/Library.tsx

@@ -0,0 +1,61 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { booksApi } from "../api/books";
+import type { EBookListItem } from "../types/book";
+import { useAuth } from "../context/AuthContext";
+
+export function LibraryPage() {
+  const [books, setBooks] = useState<EBookListItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const { logout } = useAuth();
+  const navigate = useNavigate();
+
+  const loadBooks = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await booksApi.getEBooks();
+      setBooks(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load library");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { void loadBooks(); }, [loadBooks]);
+
+  return (
+    <div style={{ maxWidth: 800, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
+      <header style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee", flexWrap: "wrap", gap: 8 }}>
+        <h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e" }}>My Library</h1>
+        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+          <button onClick={() => navigate("/add")} style={{ padding: "10px 20px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 14, fontWeight: 600, cursor: "pointer" }}>+ Add Book</button>
+          <button onClick={() => navigate("/settings")} style={{ padding: "10px 20px", borderRadius: 8, border: "1px solid #ddd", background: "#fff", color: "#333", fontSize: 14, cursor: "pointer" }}>Settings</button>
+          <button onClick={() => navigate("/bookmarks-notes")} style={{ padding: "10px 20px", borderRadius: 8, border: "1px solid #ddd", background: "#fff", color: "#333", fontSize: 14, cursor: "pointer" }}>Bookmarks</button>
+          <button onClick={logout} style={{ padding: "10px 20px", borderRadius: 8, border: "1px solid #e74c3c", background: "#fff", color: "#e74c3c", fontSize: 14, cursor: "pointer" }}>Logout</button>
+        </div>
+      </header>
+
+      {error && <div style={{ background: "#fde8e8", padding: 16, borderRadius: 8, marginBottom: 16, textAlign: "center" }}><p>{error}</p><button onClick={loadBooks} style={{ marginTop: 8, padding: "8px 16px", border: "none", borderRadius: 6, background: "#e74c3c", color: "#fff", cursor: "pointer" }}>Retry</button></div>}
+      {loading && books.length === 0 && <div style={{ textAlign: "center", padding: "60px 20px" }}><p>Loading your library...</p></div>}
+      {!loading && !error && books.length === 0 && <div style={{ textAlign: "center", padding: "60px 20px" }}><p style={{ fontSize: 20, color: "#666", marginBottom: 8 }}>Your library is empty</p><p style={{ color: "#999", marginBottom: 20 }}>Add a book to get started</p><button onClick={() => navigate("/add")} style={{ padding: "10px 20px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 14, fontWeight: 600, cursor: "pointer" }}>Add Your First Book</button></div>}
+
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 16 }}>
+        {books.map((book) => (
+          <div key={book.id} onClick={() => navigate(`/reader/${book.id}`)} style={{ background: "#fff", borderRadius: 12, overflow: "hidden", boxShadow: "0 2px 8px rgba(0,0,0,0.06)", cursor: "pointer" }}>
+            <div style={{ height: 180, background: "#f0f0f0", display: "flex", alignItems: "center", justifyContent: "center" }}>
+              {book.cover_image ? <img src={book.cover_image} alt={book.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : <span style={{ fontSize: 48 }}>📖</span>}
+            </div>
+            <div style={{ padding: 12 }}>
+              <h3 style={{ fontSize: 14, fontWeight: 600, color: "#1a1a2e", marginBottom: 4, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{book.title}</h3>
+              <p style={{ fontSize: 12, color: "#888", marginBottom: 8 }}>{book.author || "Unknown Author"}</p>
+              {book.progress !== null && <div style={{ width: "100%", height: 4, background: "#eee", borderRadius: 2, overflow: "hidden" }}><div style={{ height: "100%", background: "#1a1a2e", borderRadius: 2, width: `${Math.min(book.progress, 100)}%` }} /></div>}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/LibraryPage.tsx

@@ -1,80 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
-import { useAuth } from "../hooks/useAuth";
-import { useDocuments } from "../hooks/useDocuments";
-
-export default function LibraryPage(): React.ReactElement {
-  const { user, logout } = useAuth();
-  const { documents, isLoading, totalCount, fetchDocuments } = useDocuments();
-  const [search, setSearch] = useState("");
-
-  useEffect(() => {
-    fetchDocuments();
-  }, [fetchDocuments]);
-
-  const filtered = documents.filter(
-    (d) =>
-      d.title.toLowerCase().includes(search.toLowerCase()) ||
-      (d.author && d.author.toLowerCase().includes(search.toLowerCase())),
-  );
-
-  return (
-    <div className="layout">
-      <header className="topbar">
-        <h1 className="logo">Cloud Reader</h1>
-        <div className="topbar-right">
-          <span className="user-greeting">Hi, {user?.display_name || user?.email}</span>
-          <Link to="/settings" className="btn-secondary">Settings</Link>
-          <button onClick={logout} className="btn-secondary">Logout</button>
-        </div>
-      </header>
-
-      <main className="content">
-        <div className="library-header">
-          <h2>My Library ({totalCount})</h2>
-          <Link to="/upload" className="btn-primary">Upload Document</Link>
-        </div>
-
-        <div className="search-bar">
-          <input
-            type="text"
-            placeholder="Search by title or author..."
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-          />
-        </div>
-
-        {isLoading ? (
-          <div className="loading">Loading documents...</div>
-        ) : filtered.length === 0 ? (
-          <div className="empty-state">
-            <p>No documents yet. Upload your first document to start reading!</p>
-          </div>
-        ) : (
-          <div className="document-grid">
-            {filtered.map((doc) => (
-              <Link to={`/documents/${doc.id}`} key={doc.id} className="document-card">
-                <div className="doc-cover">
-                  {doc.cover_url ? (
-                    <img src={doc.cover_url} alt={doc.title} />
-                  ) : (
-                    <div className="doc-cover-placeholder">{doc.file_type.toUpperCase()}</div>
-                  )}
-                </div>
-                <div className="doc-info">
-                  <h3>{doc.title}</h3>
-                  {doc.author && <p className="doc-author">{doc.author}</p>}
-                  <div className="doc-meta">
-                    <span className="doc-type">{doc.file_type}</span>
-                    <span className="doc-size">{(doc.file_size / 1024 / 1024).toFixed(1)} MB</span>
-                    {doc.page_count && <span className="doc-pages">{doc.page_count} pages</span>}
-                  </div>
-                </div>
-              </Link>
-            ))}
-          </div>
-        )}
-      </main>
-    </div>
-  );
-}

frontend/src/pages/LoginPage.tsx

@@ -1,65 +0,0 @@
-import React, { FormEvent, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { useAuth } from "../hooks/useAuth";
-
-export default function LoginPage(): React.ReactElement {
-  const { login } = useAuth();
-  const navigate = useNavigate();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [submitting, setSubmitting] = useState(false);
-
-  const handleSubmit = async (e: FormEvent): Promise<void> => {
-    e.preventDefault();
-    setError(null);
-    setSubmitting(true);
-    try {
-      await login({ email, password });
-      navigate("/library");
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : "Login failed");
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="auth-page">
-      <div className="auth-card">
-        <h1>Cloud Reader</h1>
-        <h2>Sign In</h2>
-        {error && <div className="error-message">{error}</div>}
-        <form onSubmit={handleSubmit}>
-          <div className="form-group">
-            <label htmlFor="email">Email</label>
-            <input
-              id="email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-              autoFocus
-            />
-          </div>
-          <div className="form-group">
-            <label htmlFor="password">Password</label>
-            <input
-              id="password"
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-            />
-          </div>
-          <button type="submit" disabled={submitting} className="btn-primary">
-            {submitting ? "Signing in..." : "Sign In"}
-          </button>
-        </form>
-        <p className="auth-link">
-          Don't have an account? <Link to="/register">Register</Link>
-        </p>
-      </div>
-    </div>
-  );
-}

frontend/src/pages/Reader.tsx

@@ -0,0 +1,64 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { booksApi } from "../api/books";
+import type { EBookDetail } from "../types/book";
+
+export function ReaderPage() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [book, setBook] = useState<EBookDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const progressTimer = useRef<ReturnType<typeof setInterval> | null>(null);
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const bookId = Number(id);
+
+  const saveProgress = useCallback(async () => {
+    if (!scrollRef.current || !book) return;
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    const position = Math.min(100, Math.round((scrollTop / (scrollHeight - clientHeight)) * 100));
+    try { await booksApi.updateProgress(bookId, { current_position: position }); } catch { /* silent */ }
+  }, [bookId, book]);
+
+  useEffect(() => {
+    const loadBook = async () => {
+      setLoading(true); setError(null);
+      try {
+        const data = await booksApi.getEBook(bookId);
+        setBook(data);
+        document.title = data.title;
+      } catch (err) { setError(err instanceof Error ? err.message : "Failed to load book"); }
+      finally { setLoading(false); }
+    };
+    void loadBook();
+    return () => { document.title = "Cloud Reader"; };
+  }, [bookId]);
+
+  useEffect(() => {
+    progressTimer.current = setInterval(() => { void saveProgress(); }, 5000);
+    return () => { if (progressTimer.current) clearInterval(progressTimer.current); };
+  }, [saveProgress]);
+
+  useEffect(() => {
+    const handleBeforeUnload = () => { void saveProgress(); };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, [saveProgress]);
+
+  if (loading) return <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100vh", color: "#888" }}><p>Loading book...</p></div>;
+  if (error) return <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", height: "100vh", gap: 16 }}><p style={{ color: "#e74c3c", fontSize: 16 }}>{error}</p><button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer" }}>← Back to Library</button></div>;
+  if (!book) return null;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100vh", background: "#fff" }}>
+      <header style={{ display: "flex", alignItems: "center", padding: "12px 16px", borderBottom: "1px solid #eee", gap: 12, flexShrink: 0 }}>
+        <button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>← Library</button>
+        <div style={{ flex: 1 }}><h1 style={{ fontSize: 18, fontWeight: 600, color: "#1a1a2e", margin: 0 }}>{book.title}</h1><p style={{ fontSize: 14, color: "#888", margin: "4px 0 0" }}>{book.author}</p></div>
+        <button onClick={() => navigate(`/bookmarks-notes/${bookId}`)} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>📑 Bookmarks & Notes</button>
+      </header>
+      <div ref={scrollRef} style={{ flex: 1, overflow: "auto", background: "#fafafa" }}>
+        {book.file_url ? <iframe src={book.file_url} style={{ width: "100%", height: "100%", border: "none" }} title={book.title} /> : <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%", color: "#888" }}><p>No file available.</p></div>}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/ReaderPage.tsx

@@ -1,91 +0,0 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { Link, useParams } from "react-router-dom";
-import type { DocumentDetail } from "@cloud-reader/shared";
-import api from "../services/api";
-
-export default function ReaderPage(): React.ReactElement {
-  const { id } = useParams<{ id: string }>();
-  const [doc, setDoc] = useState<DocumentDetail | null>(null);
-  const [currentPage, setCurrentPage] = useState(1);
-
-  const fetchDoc = useCallback(async () => {
-    if (!id) return;
-    const { data } = await api.get<DocumentDetail>(`/documents/${id}/`);
-    setDoc(data);
-    setCurrentPage(data.current_page || 1);
-  }, [id]);
-
-  useEffect(() => {
-    fetchDoc();
-  }, [fetchDoc]);
-
-  const updateProgress = useCallback(async (page: number) => {
-    if (!id) return;
-    setCurrentPage(page);
-    try {
-      await api.post(`/reading/progress/`, {
-        document: Number(id),
-        current_page: page,
-        total_pages: doc?.total_pages || 0,
-      });
-    } catch {
-      // Silently fail — reading progress is non-critical
-    }
-  }, [id, doc?.total_pages]);
-
-  if (!doc) return <div className="loading">Loading reader...</div>;
-
-  return (
-    <div className="reader-layout">
-      <header className="reader-topbar">
-        <Link to={`/documents/${id}`} className="btn-secondary">&larr; Back</Link>
-        <span className="reader-title">{doc.title}</span>
-        <span className="reader-page-info">
-          Page {currentPage} of {doc.total_pages || "?"}
-        </span>
-      </header>
-
-      <main className="reader-content">
-        <div className="reader-viewport">
-          <p className="reader-placeholder">
-            Reader view for <strong>{doc.title}</strong>.<br />
-            File type: {doc.file_type} | Pages: {doc.page_count || "Unknown"}
-          </p>
-          <p className="reader-placeholder-sub">
-            Document rendering will be available in a future iteration.<br />
-            Your reading progress is being saved as you navigate.
-          </p>
-        </div>
-      </main>
-
-      <footer className="reader-controls">
-        <button
-          className="btn-secondary"
-          disabled={currentPage <= 1}
-          onClick={() => updateProgress(Math.max(1, currentPage - 1))}
-        >
-          Previous Page
-        </button>
-        <div className="page-input">
-          <input
-            type="number"
-            min={1}
-            max={doc.total_pages || 9999}
-            value={currentPage}
-            onChange={(e) => setCurrentPage(Number(e.target.value))}
-            onBlur={(e) => updateProgress(Number(e.target.value))}
-            onKeyDown={(e) => e.key === "Enter" && updateProgress(currentPage)}
-          />
-          {doc.total_pages && <span>of {doc.total_pages}</span>}
-        </div>
-        <button
-          className="btn-secondary"
-          disabled={doc.total_pages ? currentPage >= doc.total_pages : false}
-          onClick={() => updateProgress(currentPage + 1)}
-        >
-          Next Page
-        </button>
-      </footer>
-    </div>
-  );
-}

frontend/src/pages/RegisterPage.tsx

@@ -1,77 +0,0 @@
-import React, { FormEvent, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { useAuth } from "../hooks/useAuth";
-
-export default function RegisterPage(): React.ReactElement {
-  const { register } = useAuth();
-  const navigate = useNavigate();
-  const [form, setForm] = useState({
-    email: "",
-    username: "",
-    display_name: "",
-    password: "",
-    password_confirm: "",
-  });
-  const [error, setError] = useState<string | null>(null);
-  const [submitting, setSubmitting] = useState(false);
-
-  const handleChange = (field: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    setForm((prev) => ({ ...prev, [field]: e.target.value }));
-  };
-
-  const handleSubmit = async (e: FormEvent): Promise<void> => {
-    e.preventDefault();
-    if (form.password !== form.password_confirm) {
-      setError("Passwords do not match");
-      return;
-    }
-    setError(null);
-    setSubmitting(true);
-    try {
-      await register(form);
-      navigate("/library");
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : "Registration failed");
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="auth-page">
-      <div className="auth-card">
-        <h1>Cloud Reader</h1>
-        <h2>Create Account</h2>
-        {error && <div className="error-message">{error}</div>}
-        <form onSubmit={handleSubmit}>
-          <div className="form-group">
-            <label htmlFor="email">Email</label>
-            <input id="email" type="email" value={form.email} onChange={handleChange("email")} required />
-          </div>
-          <div className="form-group">
-            <label htmlFor="username">Username</label>
-            <input id="username" type="text" value={form.username} onChange={handleChange("username")} required />
-          </div>
-          <div className="form-group">
-            <label htmlFor="display_name">Display Name (optional)</label>
-            <input id="display_name" type="text" value={form.display_name} onChange={handleChange("display_name")} />
-          </div>
-          <div className="form-group">
-            <label htmlFor="password">Password</label>
-            <input id="password" type="password" value={form.password} onChange={handleChange("password")} required minLength={8} />
-          </div>
-          <div className="form-group">
-            <label htmlFor="password_confirm">Confirm Password</label>
-            <input id="password_confirm" type="password" value={form.password_confirm} onChange={handleChange("password_confirm")} required />
-          </div>
-          <button type="submit" disabled={submitting} className="btn-primary">
-            {submitting ? "Creating account..." : "Create Account"}
-          </button>
-        </form>
-        <p className="auth-link">
-          Already have an account? <Link to="/login">Sign In</Link>
-        </p>
-      </div>
-    </div>
-  );
-}

frontend/src/pages/Settings.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { booksApi } from "../api/books";
+import type { ReadingSettings } from "../types/book";
+
+const BG_COLORS = [
+  { value: "#ffffff", label: "White" },
+  { value: "#f4e4c1", label: "Sepia" },
+  { value: "#1a1a2e", label: "Dark" },
+  { value: "#c7edcc", label: "Green" },
+];
+
+export function SettingsPage() {
+  const navigate = useNavigate();
+  const [settings, setSettings] = useState<ReadingSettings | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  useEffect(() => {
+    const load = async () => {
+      try { const data = await booksApi.getSettings(); setSettings(data); }
+      catch (err) { setError(err instanceof Error ? err.message : "Failed to load settings"); }
+      finally { setLoading(false); }
+    };
+    void load();
+  }, []);
+
+  const handleSave = async () => {
+    if (!settings) return;
+    setSaving(true); setError(null); setSuccess(false);
+    try { await booksApi.updateSettings(settings); setSuccess(true); setTimeout(() => setSuccess(false), 2000); }
+    catch (err) { setError(err instanceof Error ? err.message : "Failed to save settings"); }
+    finally { setSaving(false); }
+  };
+
+  if (loading) return <div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}><p>Loading settings...</p></div>;
+
+  return (
+    <div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
+      <header style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee" }}>
+        <button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>← Back</button>
+        <h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>Reading Settings</h1>
+      </header>
+      <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+        {error && <div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14 }}>{error}</div>}
+        {success && <div style={{ background: "#d4edda", padding: 12, borderRadius: 6, color: "#155724", fontSize: 14 }}>Settings saved!</div>}
+
+        {settings && <>
+          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+            <label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Font Size ({settings.font_size}px)</label>
+            <input type="range" min={12} max={36} value={settings.font_size} onChange={(e) => setSettings({ ...settings, font_size: Number(e.target.value) })} style={{ width: "100%", cursor: "pointer" }} />
+            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "#999" }}><span>12px</span><span>36px</span></div>
+          </div>
+          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+            <label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Font Style</label>
+            <select value={settings.font_style} onChange={(e) => setSettings({ ...settings, font_style: e.target.value as ReadingSettings["font_style"] })} style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, background: "#fff", outline: "none" }}>
+              <option value="sans-serif">Sans Serif</option><option value="serif">Serif</option><option value="monospace">Monospace</option>
+            </select>
+          </div>
+          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+            <label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Background Color</label>
+            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
+              {BG_COLORS.map((bg) => (
+                <button key={bg.value} onClick={() => setSettings({ ...settings, background_color: bg.value })}
+                  style={{ width: 48, height: 48, borderRadius: "50%", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", background: bg.value, border: settings.background_color === bg.value ? "3px solid #1a1a2e" : "3px solid #ddd" }}
+                  title={bg.label}>
+                  {settings.background_color === bg.value && <span style={{ fontSize: 20, fontWeight: 700, color: bg.value === "#ffffff" || bg.value === "#f4e4c1" ? "#1a1a2e" : "#fff" }}>✓</span>}
+                </button>
+              ))}
+            </div>
+          </div>
+        </>}
+
+        <button onClick={handleSave} disabled={saving} style={{ padding: "12px 24px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 16, fontWeight: 600, cursor: "pointer", opacity: saving ? 0.6 : 1, marginTop: 8 }}>{saving ? "Saving..." : "Save Settings"}</button>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/SettingsPage.tsx

@@ -1,64 +0,0 @@
-import React, { FormEvent, useState } from "react";
-import { Link } from "react-router-dom";
-import { useAuth } from "../hooks/useAuth";
-import { changePassword } from "../services/authService";
-
-export default function SettingsPage(): React.ReactElement {
-  const { user, logout } = useAuth();
-  const [oldPassword, setOldPassword] = useState("");
-  const [newPassword, setNewPassword] = useState("");
-  const [message, setMessage] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const handlePasswordChange = async (e: FormEvent): Promise<void> => {
-    e.preventDefault();
-    setMessage(null);
-    setError(null);
-    try {
-      await changePassword(oldPassword, newPassword);
-      setMessage("Password changed successfully.");
-      setOldPassword("");
-      setNewPassword("");
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : "Failed to change password");
-    }
-  };
-
-  return (
-    <div className="layout">
-      <header className="topbar">
-        <Link to="/library" className="btn-secondary">&larr; Library</Link>
-        <h1 className="logo">Settings</h1>
-        <button onClick={logout} className="btn-secondary">Logout</button>
-      </header>
-
-      <main className="content settings-page">
-        <section className="settings-section">
-          <h2>Profile</h2>
-          <div className="profile-info">
-            <p><strong>Email:</strong> {user?.email}</p>
-            <p><strong>Display Name:</strong> {user?.display_name || "Not set"}</p>
-            <p><strong>Member since:</strong> {user?.date_joined ? new Date(user.date_joined).toLocaleDateString() : "N/A"}</p>
-          </div>
-        </section>
-
-        <section className="settings-section">
-          <h2>Change Password</h2>
-          {message && <div className="success-message">{message}</div>}
-          {error && <div className="error-message">{error}</div>}
-          <form onSubmit={handlePasswordChange}>
-            <div className="form-group">
-              <label htmlFor="old_password">Current Password</label>
-              <input id="old_password" type="password" value={oldPassword} onChange={(e) => setOldPassword(e.target.value)} required />
-            </div>
-            <div className="form-group">
-              <label htmlFor="new_password">New Password</label>
-              <input id="new_password" type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} required minLength={8} />
-            </div>
-            <button type="submit" className="btn-primary">Update Password</button>
-          </form>
-        </section>
-      </main>
-    </div>
-  );
-}

frontend/src/services/api.ts

@@ -1,86 +0,0 @@
-import axios, { AxiosError, InternalAxiosRequestConfig } from "axios";
-import type { AuthTokens } from "../types/auth";
-
-const API_BASE = "/api/v1";
-
-const api = axios.create({
-  baseURL: API_BASE,
-  headers: { "Content-Type": "application/json" },
-});
-
-// Token refresh queue to avoid multiple simultaneous refresh calls
-let isRefreshing = false;
-let failedQueue: Array<{
-  resolve: (token: string) => void;
-  reject: (error: unknown) => void;
-}> = [];
-
-function processQueue(error: unknown, token: string | null): void {
-  failedQueue.forEach((prom) => {
-    if (error) {
-      prom.reject(error);
-    } else {
-      prom.resolve(token!);
-    }
-  });
-  failedQueue = [];
-}
-
-// Attach access token to every request
-api.interceptors.request.use((config: InternalAxiosRequestConfig) => {
-  const token = localStorage.getItem("access_token");
-  if (token && config.headers) {
-    config.headers.Authorization = `Bearer ${token}`;
-  }
-  return config;
-});
-
-// Handle 401 — attempt token refresh
-api.interceptors.response.use(
-  (response) => response,
-  async (error: AxiosError) => {
-    const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean };
-    if (error.response?.status === 401 && !originalRequest._retry) {
-      if (isRefreshing) {
-        return new Promise((resolve, reject) => {
-          failedQueue.push({ resolve, reject });
-        }).then((token) => {
-          originalRequest.headers.Authorization = `Bearer ${token}`;
-          return api(originalRequest);
-        });
-      }
-
-      originalRequest._retry = true;
-      isRefreshing = true;
-
-      const refreshToken = localStorage.getItem("refresh_token");
-      if (!refreshToken) {
-        localStorage.removeItem("access_token");
-        localStorage.removeItem("refresh_token");
-        window.location.href = "/login";
-        return Promise.reject(error);
-      }
-
-      try {
-        const { data } = await axios.post<AuthTokens>(`${API_BASE}/auth/token/refresh/`, {
-          refresh: refreshToken,
-        });
-        localStorage.setItem("access_token", data.access);
-        processQueue(null, data.access);
-        originalRequest.headers.Authorization = `Bearer ${data.access}`;
-        return api(originalRequest);
-      } catch (refreshError) {
-        processQueue(refreshError, null);
-        localStorage.removeItem("access_token");
-        localStorage.removeItem("refresh_token");
-        window.location.href = "/login";
-        return Promise.reject(refreshError);
-      } finally {
-        isRefreshing = false;
-      }
-    }
-    return Promise.reject(error);
-  },
-);
-
-export default api;

frontend/src/services/authService.ts

@@ -1,29 +0,0 @@
-import api from "../services/api";
-import type { LoginCredentials, RegisterData, UserProfile } from "../types/auth";
-
-export async function login(credentials: LoginCredentials): Promise<{ access: string; refresh: string }> {
-  const { data } = await api.post("/auth/token/", credentials);
-  return data;
-}
-
-export async function register(data: RegisterData): Promise<UserProfile> {
-  const { data: user } = await api.post<UserProfile>("/auth/register/", data);
-  return user;
-}
-
-export async function fetchProfile(): Promise<UserProfile> {
-  const { data } = await api.get<UserProfile>("/auth/me/");
-  return data;
-}
-
-export async function updateProfile(updates: Partial<UserProfile>): Promise<UserProfile> {
-  const { data } = await api.patch<UserProfile>("/auth/me/", updates);
-  return data;
-}
-
-export async function changePassword(oldPassword: string, newPassword: string): Promise<void> {
-  await api.post("/auth/change-password/", {
-    old_password: oldPassword,
-    new_password: newPassword,
-  });
-}