feat: Integrate Expo mobile application into monorepo (#16)

- Add mobile/ directory with Expo React Native project
- Create API client with JWT auth and token refresh using AsyncStorage
- Implement AuthContext for login/register/logout flow
- Add screens: Login, Register, Library, Search, Settings
- Set up React Navigation with AuthStack and MainTabs
- Create packages/shared/ with shared types and utilities
- Add shared validation utilities (email, password strength)
- Update root package.json workspaces to include mobile + shared
- Add spec document docs/backend/009-expo-integration.md

README.md

@@ -14,7 +14,7 @@ cloud-reader/
 │   │   └── annotations/ # Bookmarks and notes
 │   ├── manage.py
 │   └── requirements.txt
-├── frontend/        # React + Vite + TypeScript (canonical frontend)
+├── frontend/        # React + Vite + TypeScript (web frontend)
 │   ├── src/
 │   │   ├── api/         # API client (axios with JWT refresh)
 │   │   ├── components/  # Reusable components
@@ -23,6 +23,23 @@ cloud-reader/
 │   │   ├── pages/       # Route pages (Library, Reader, AddBook, Auth, Settings)
 │   │   └── types/       # TypeScript type definitions
 │   └── package.json
+├── mobile/          # Expo React Native app (mobile frontend)
+│   ├── src/
+│   │   ├── api/         # API client (axios with JWT refresh via AsyncStorage)
+│   │   ├── components/  # Reusable UI components
+│   │   ├── context/     # Auth context
+│   │   ├── hooks/       # Custom hooks
+│   │   ├── navigation/  # React Navigation (Auth stack + Main tabs)
+│   │   ├── screens/     # Screen-level components (Login, Library, etc.)
+│   │   └── types/       # Mobile-specific types
+│   ├── App.tsx
+│   └── app.json
+├── packages/
+│   └── shared/       # @cloud-reader/shared — domain types & utilities
+│       └── src/
+│           ├── types.ts   # Shared domain types (Book, User, Bookmark, Note, etc.)
+│           └── utils.ts   # Date formatting, validation, API endpoint constants
+├── package.json      # Root — yarn workspaces config
 └── docker-compose.yml
 ```
 
@@ -50,8 +67,24 @@ yarn install
 yarn dev
 ```
 
+### Mobile (Expo)
+```bash
+# From monorepo root — installs all workspaces including mobile
+yarn install
+
+# Start Expo dev server
+yarn workspace @cloud-reader/mobile start
+
+# Or cd into mobile and run directly
+cd mobile
+npx expo start
+```
+
+> The mobile app requires the backend to be running. Set `EXPO_PUBLIC_API_URL` environment variable in your shell or `.env` file to point to the backend (defaults to `http://10.0.2.2:8000` for Android emulator).
+
 ## Migration Notes
 Consolidated from duplicate `api/` + `web/` into single `backend/` + `frontend/` canonical structure.
 - `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.
-- `api/` and `web/` directories removed.
+- `api/` and `web/` directories removed.
+- `mobile/` added as Expo React Native app with shared `@cloud-reader/shared` package.

docs/backend/009-expo-integration.md

@@ -0,0 +1,96 @@
+# 009 — Expo Mobile Application Integration
+
+**Issue:** #16
+**Status:** Draft
+**Created:** 2026-05-29
+
+## Objective
+
+Integrate an Expo-based React Native mobile application into the `cloud-reader` monorepo, sharing types, API client patterns, and configuration with the existing web frontend.
+
+## Directory Structure
+
+```
+cloud-reader/
+├── mobile/                    # Expo React Native app
+│   ├── package.json
+│   ├── app.json
+│   ├── tsconfig.json
+│   ├── babel.config.js
+│   ├── App.tsx               # Root component
+│   ├── src/
+│   │   ├── api/              # API client (mirrors frontend/src/api/ pattern)
+│   │   │   ├── client.ts     # Axios instance + JWT interceptor
+│   │   │   ├── books.ts      # Book API calls
+│   │   │   └── annotations.ts
+│   │   ├── screens/          # Screen-level components
+│   │   ├── components/       # Reusable UI components
+│   │   ├── navigation/       # React Navigation setup
+│   │   ├── context/          # Auth context, etc.
+│   │   ├── hooks/            # Custom hooks
+│   │   └── types/            # Mobile-specific types
+│   └── assets/
+├── packages/
+│   └── shared/
+│       ├── package.json
+│       ├── tsconfig.json
+│       └── src/
+│           ├── types.ts      # Shared domain types (Book, User, Bookmark, Note)
+│           └── utils.ts      # Shared utility functions
+└── package.json              # Root — updated workspace config
+```
+
+## Monorepo Workspace Config
+
+Root `package.json` workspaces array updated to include `"mobile"`, `"packages/shared"` alongside existing `"frontend"` and `"backend"`.
+
+## Shared `packages/shared`
+
+- `@cloud-reader/shared` package published within the monorepo
+- Exports:
+  - All domain types (`Book`, `BookSummary`, `Bookmark`, `Note`, `User`, `AnnotationEntry`, `PaginatedResponse`, `TokenResponse`)
+  - API endpoint constants
+  - Date formatting helpers
+  - Validation utilities (email regex, password strength check)
+
+## Mobile App Structure
+
+### API Client (`mobile/src/api/client.ts`)
+- Axios instance configured with:
+  - Base URL from environment variable (`EXPO_PUBLIC_API_URL`)
+  - JWT token attachment via request interceptor
+  - Token refresh response interceptor on 401
+  - Uses `AsyncStorage` for token persistence (instead of `localStorage`)
+
+### Navigation (`mobile/src/navigation/`)
+- React Navigation stack:
+  1. `AuthStack` — Login, Register screens
+  2. `MainTabs` — Library, Search, Settings tabs
+  3. `BookReader` — Full-screen reading view
+
+### Key Screens
+| Screen | Route | Purpose |
+|--------|-------|---------|
+| Login | `Auth/Login` | Email/password login |
+| Register | `Auth/Register` | User registration |
+| Library | `Main/Library` | Book list with filtering |
+| BookDetail | `Main/BookDetail` | Book metadata + actions |
+| Reader | `Reader/View` | EPUB/PDF rendering |
+| Search | `Main/Search` | Book discovery |
+| Settings | `Main/Settings` | Profile, theme, download mgmt |
+
+## Backend Changes Required
+
+None. The existing Django REST API already serves all endpoints needed by the mobile app. The mobile app communicates with the same backend via the shared API base URL.
+
+## Docker
+
+No changes to `docker-compose.yml` needed — the mobile app runs on-device or via Expo Go, not inside Docker.
+
+## CI/CD Considerations
+
+The monorepo structure supports a single pipeline that can:
+- `yarn install` at root (installs all workspaces)
+- `yarn workspace @cloud-reader/shared build`
+- `yarn workspace @cloud-reader/mobile build` (Expo EAS for mobile builds)
+- `yarn workspace @cloud-reader/frontend build` (Vite for web builds)

mobile/App.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { StatusBar } from "expo-status-bar";
+import { AuthProvider } from "./src/context/AuthContext";
+import { RootNavigator } from "./src/navigation/RootNavigator";
+
+export default function App() {
+  return (
+    <AuthProvider>
+      <NavigationContainer>
+        <StatusBar style="auto" />
+        <RootNavigator />
+      </NavigationContainer>
+    </AuthProvider>
+  );
+}

mobile/app.json

@@ -0,0 +1,28 @@
+{
+  "expo": {
+    "name": "Cloud Reader",
+    "slug": "cloud-reader",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "splash": {
+      "backgroundColor": "#1a1a2e"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.cloudreader.app"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#1a1a2e"
+      },
+      "package": "com.cloudreader.app"
+    },
+    "plugins": [
+      "expo-document-picker",
+      "expo-file-system"
+    ]
+  }
+}

mobile/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+    plugins: ["react-native-reanimated/plugin"],
+  };
+};

mobile/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@cloud-reader/mobile",
+  "version": "1.0.0",
+  "private": true,
+  "main": "expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "expo": "~52.0.0",
+    "expo-status-bar": "~2.0.0",
+    "react": "^19.0.0",
+    "react-native": "0.76.6",
+    "react-native-safe-area-context": "4.14.1",
+    "react-native-screens": "~4.4.0",
+    "@react-navigation/native": "^7.0.0",
+    "@react-navigation/native-stack": "^7.0.0",
+    "@react-navigation/bottom-tabs": "^7.0.0",
+    "axios": "^1.7.9",
+    "@react-native-async-storage/async-storage": "2.1.0",
+    "expo-document-picker": "~13.0.0",
+    "expo-file-system": "~18.0.0",
+    "react-native-gesture-handler": "~2.20.0",
+    "react-native-reanimated": "~3.16.0",
+    "@cloud-reader/shared": "*"
+  },
+  "devDependencies": {
+    "@types/react": "~19.0.0",
+    "typescript": "~5.7.0"
+  }
+}

mobile/src/api/annotations.ts

@@ -0,0 +1,55 @@
+import api from "./client";
+import type {
+  Bookmark,
+  Note,
+  CreateBookmarkPayload,
+  CreateNotePayload,
+  PaginatedResponse,
+} from "@cloud-reader/shared";
+
+export function fetchBookmarks(
+  bookId?: string,
+): Promise<PaginatedResponse<Bookmark>> {
+  const params = bookId ? { book: bookId } : {};
+  return api
+    .get<PaginatedResponse<Bookmark>>("/api/annotations/bookmarks/", { params })
+    .then((res) => res.data);
+}
+
+export function createBookmark(
+  payload: CreateBookmarkPayload,
+): Promise<Bookmark> {
+  return api
+    .post<Bookmark>("/api/annotations/bookmarks/", payload)
+    .then((res) => res.data);
+}
+
+export function deleteBookmark(id: string): Promise<void> {
+  return api.delete(`/api/annotations/bookmarks/${id}/`).then(() => {});
+}
+
+export function fetchNotes(bookId?: string): Promise<PaginatedResponse<Note>> {
+  const params = bookId ? { book: bookId } : {};
+  return api
+    .get<PaginatedResponse<Note>>("/api/annotations/notes/", { params })
+    .then((res) => res.data);
+}
+
+export function createNote(payload: CreateNotePayload): Promise<Note> {
+  return api
+    .post<Note>("/api/annotations/notes/", payload)
+    .then((res) => res.data);
+}
+
+export function updateNote(
+  id: string,
+  content: string,
+): Promise<Note> {
+  return api
+    .patch<Note>(`/api/annotations/notes/${id}/`, { content })
+    .then((res) => res.data);
+}
+
+export function deleteNote(id: string): Promise<void> {
+  return api.delete(`/api/annotations/notes/${id}/`).then(() => {});
+}

mobile/src/api/books.ts

@@ -0,0 +1,31 @@
+import api from "./client";
+import type { Book, PaginatedResponse } from "@cloud-reader/shared";
+
+export function fetchBooks(
+  page = 1,
+  pageSize = 20,
+): Promise<PaginatedResponse<Book>> {
+  return api
+    .get<PaginatedResponse<Book>>("/api/books/", {
+      params: { page, page_size: pageSize },
+    })
+    .then((res) => res.data);
+}
+
+export function fetchBook(id: string): Promise<Book> {
+  return api.get<Book>(`/api/books/${id}/`).then((res) => res.data);
+}
+
+export function searchBooks(
+  query: string,
+): Promise<PaginatedResponse<Book>> {
+  return api
+    .get<PaginatedResponse<Book>>("/api/books/search/", {
+      params: { q: query },
+    })
+    .then((res) => res.data);
+}
+
+export function deleteBook(id: string): Promise<void> {
+  return api.delete(`/api/books/${id}/`).then(() => {});
+}

mobile/src/api/client.ts

@@ -0,0 +1,140 @@
+import axios, { type AxiosError, type InternalAxiosRequestConfig } from "axios";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+const STORAGE_KEYS = {
+  ACCESS_TOKEN: "access_token",
+  REFRESH_TOKEN: "refresh_token",
+} as const;
+
+interface RetryConfig extends InternalAxiosRequestConfig {
+  _retry?: boolean;
+}
+
+const api = axios.create({
+  baseURL: process.env.EXPO_PUBLIC_API_URL || "http://localhost:8000",
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+// ── Token helpers ────────────────────────────────────────────────────
+
+async function getAccessToken(): Promise<string | null> {
+  return AsyncStorage.getItem(STORAGE_KEYS.ACCESS_TOKEN);
+}
+
+async function getRefreshToken(): Promise<string | null> {
+  return AsyncStorage.getItem(STORAGE_KEYS.REFRESH_TOKEN);
+}
+
+async function setTokens(access: string, refresh: string): Promise<void> {
+  await AsyncStorage.setItem(STORAGE_KEYS.ACCESS_TOKEN, access);
+  await AsyncStorage.setItem(STORAGE_KEYS.REFRESH_TOKEN, refresh);
+}
+
+async function clearTokens(): Promise<void> {
+  await AsyncStorage.multiRemove([
+    STORAGE_KEYS.ACCESS_TOKEN,
+    STORAGE_KEYS.REFRESH_TOKEN,
+  ]);
+}
+
+// ── Request interceptor ─────────────────────────────────────────────
+
+api.interceptors.request.use(async (config: InternalAxiosRequestConfig) => {
+  const token = await getAccessToken();
+  if (token && config.headers) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+// ── Response interceptor: auto-refresh on 401 ───────────────────────
+
+let isRefreshing = false;
+let failedQueue: Array<{
+  resolve: (token: string) => void;
+  reject: (err: unknown) => void;
+}> = [];
+
+function processQueue(error: unknown, token: string | null = null): void {
+  failedQueue.forEach((prom) => {
+    if (error) {
+      prom.reject(error);
+    } else if (token) {
+      prom.resolve(token);
+    }
+  });
+  failedQueue = [];
+}
+
+api.interceptors.response.use(
+  (response) => response,
+  async (error: AxiosError) => {
+    const originalRequest = error.config as RetryConfig | undefined;
+
+    if (!originalRequest) {
+      return Promise.reject(error);
+    }
+
+    if (
+      error.response?.status !== 401 ||
+      originalRequest._retry ||
+      originalRequest.url?.includes("/api/auth/token/refresh/") ||
+      originalRequest.url?.includes("/api/auth/login/") ||
+      originalRequest.url?.includes("/api/auth/register/") ||
+      originalRequest.url?.includes("/api/auth/logout/")
+    ) {
+      return Promise.reject(error);
+    }
+
+    if (isRefreshing) {
+      return new Promise<string>((resolve, reject) => {
+        failedQueue.push({ resolve, reject });
+      }).then((token) => {
+        if (originalRequest.headers) {
+          originalRequest.headers.Authorization = `Bearer ${token}`;
+        }
+        return api(originalRequest);
+      });
+    }
+
+    originalRequest._retry = true;
+    isRefreshing = true;
+
+    const refreshToken = await getRefreshToken();
+
+    if (!refreshToken) {
+      isRefreshing = false;
+      await clearTokens();
+      return Promise.reject(error);
+    }
+
+    try {
+      const response = await axios.post(
+        `${api.defaults.baseURL}/api/auth/token/refresh/`,
+        { refresh: refreshToken },
+      );
+
+      const newAccess = response.data.access as string;
+      const newRefresh = response.data.refresh as string;
+      await setTokens(newAccess, newRefresh);
+
+      processQueue(null, newAccess);
+
+      if (originalRequest.headers) {
+        originalRequest.headers.Authorization = `Bearer ${newAccess}`;
+      }
+      return api(originalRequest);
+    } catch (refreshError) {
+      processQueue(refreshError, null);
+      await clearTokens();
+      return Promise.reject(refreshError);
+    } finally {
+      isRefreshing = false;
+    }
+  },
+);
+
+export { getAccessToken, getRefreshToken, setTokens, clearTokens };
+export default api;

mobile/src/api/ebooks.ts

@@ -0,0 +1,54 @@
+import { apiClient } from "./client";
+import type {
+  EBookListItem,
+  EBookDetail,
+  ReadingProgress,
+  ReadingSettings,
+  TocResponse,
+  ContentResponse,
+  PaginatedResponse,
+} from "@cloud-reader/shared";
+
+export const ebooksApi = {
+  /** List uploaded e-books */
+  list() {
+    return apiClient.get<PaginatedResponse<EBookListItem>>("/api/ebooks/");
+  },
+
+  /** Get e-book detail */
+  get(id: number) {
+    return apiClient.get<EBookDetail>(`/api/ebooks/${id}/`);
+  },
+
+  /** Get table of contents */
+  getToc(id: number) {
+    return apiClient.get<TocResponse>(`/api/ebooks/${id}/toc/`);
+  },
+
+  /** Get page content */
+  getContent(id: number, page: number) {
+    return apiClient.get<ContentResponse>(
+      `/api/ebooks/${id}/content/?page=${page}`,
+    );
+  },
+
+  /** Update reading progress */
+  updateProgress(id: number, data: Partial<ReadingProgress>) {
+    return apiClient.patch<ReadingProgress>(
+      `/api/ebooks/${id}/progress/`,
+      data,
+    );
+  },
+
+  /** Get or update reading settings */
+  getSettings(id: number) {
+    return apiClient.get<ReadingSettings>(`/api/ebooks/${id}/settings/`);
+  },
+
+  updateSettings(id: number, data: Partial<ReadingSettings>) {
+    return apiClient.patch<ReadingSettings>(
+      `/api/ebooks/${id}/settings/`,
+      data,
+    );
+  },
+};

mobile/src/api/index.ts

@@ -0,0 +1,4 @@
+export { apiClient, saveTokens, loadTokens, clearTokens } from "./client";
+export { booksApi } from "./books";
+export { ebooksApi } from "./ebooks";
+export { annotationsApi } from "./annotations";

mobile/src/context/AuthContext.tsx

@@ -0,0 +1,104 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  type ReactNode,
+} from "react";
+import type { User, TokenResponse } from "@cloud-reader/shared";
+import { apiClient, saveTokens, loadTokens, clearTokens } from "../api/client";
+
+interface AuthState {
+  user: User | null;
+  isLoading: boolean;
+  isAuthenticated: boolean;
+}
+
+interface AuthContextValue extends AuthState {
+  login: (email: string, password: string) => Promise<void>;
+  register: (
+    email: string,
+    username: string,
+    password: string,
+  ) => Promise<void>;
+  logout: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [state, setState] = useState<AuthState>({
+    user: null,
+    isLoading: true,
+    isAuthenticated: false,
+  });
+
+  // Restore session on mount
+  useEffect(() => {
+    (async () => {
+      try {
+        const tokens = await loadTokens();
+        if (tokens?.access) {
+          const response = await apiClient.get<User>("/api/auth/profile/");
+          setState({
+            user: response.data,
+            isLoading: false,
+            isAuthenticated: true,
+          });
+          return;
+        }
+      } catch {
+        await clearTokens();
+      }
+      setState({ user: null, isLoading: false, isAuthenticated: false });
+    })();
+  }, []);
+
+  const login = useCallback(async (email: string, password: string) => {
+    const response = await apiClient.post<TokenResponse>(
+      "/api/auth/login/",
+      { email, password },
+    );
+    await saveTokens(response.data);
+    const profile = await apiClient.get<User>("/api/auth/profile/");
+    setState({
+      user: profile.data,
+      isLoading: false,
+      isAuthenticated: true,
+    });
+  }, []);
+
+  const register = useCallback(
+    async (email: string, username: string, password: string) => {
+      await apiClient.post("/api/auth/register/", {
+        email,
+        username,
+        password,
+        password2: password,
+      });
+      // Auto-login after registration
+      await login(email, password);
+    },
+    [login],
+  );
+
+  const logout = useCallback(async () => {
+    await clearTokens();
+    setState({ user: null, isLoading: false, isAuthenticated: false });
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ ...state, 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;
+}

mobile/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useAuth } from "../context/AuthContext";
+export { useAsyncData } from "./useAsyncData";

mobile/src/hooks/useAsyncData.ts

@@ -0,0 +1,33 @@
+import { useState, useEffect, useCallback } from "react";
+
+/**
+ * Generic async data fetching hook for mobile screens.
+ */
+export function useAsyncData<T>(
+  fetcher: () => Promise<T>,
+  deps: unknown[] = [],
+) {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const execute = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await fetcher();
+      setData(result);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setLoading(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  useEffect(() => {
+    execute();
+  }, [execute]);
+
+  return { data, loading, error, refetch: execute };
+}

mobile/src/navigation/AppNavigator.tsx

@@ -0,0 +1,45 @@
+import { type ReactNode } from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { useAuth } from "../context/AuthContext";
+import LoginScreen from "../screens/LoginScreen";
+import RegisterScreen from "../screens/RegisterScreen";
+import MainTabs from "./MainTabs";
+
+export type AuthStackParamList = {
+  Login: undefined;
+  Register: undefined;
+};
+
+export type RootStackParamList = {
+  Auth: undefined;
+  Main: undefined;
+};
+
+const RootStack = createNativeStackNavigator<RootStackParamList>();
+const AuthStack = createNativeStackNavigator<AuthStackParamList>();
+
+function AuthNavigator(): ReactNode {
+  return (
+    <AuthStack.Navigator screenOptions={{ headerShown: false }}>
+      <AuthStack.Screen name="Login" component={LoginScreen} />
+      <AuthStack.Screen name="Register" component={RegisterScreen} />
+    </AuthStack.Navigator>
+  );
+}
+
+export default function AppNavigator(): ReactNode {
+  const { state } = useAuth();
+
+  return (
+    <NavigationContainer>
+      <RootStack.Navigator screenOptions={{ headerShown: false }}>
+        {state.isAuthenticated ? (
+          <RootStack.Screen name="Main" component={MainTabs} />
+        ) : (
+          <RootStack.Screen name="Auth" component={AuthNavigator} />
+        )}
+      </RootStack.Navigator>
+    </NavigationContainer>
+  );
+}

mobile/src/navigation/AuthNavigator.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import LoginScreen from "../screens/LoginScreen";
+import RegisterScreen from "../screens/RegisterScreen";
+
+export type AuthStackParamList = {
+  Login: undefined;
+  Register: undefined;
+};
+
+const Stack = createNativeStackNavigator<AuthStackParamList>();
+
+export function AuthNavigator() {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}
+    >
+      <Stack.Screen name="Login" component={LoginScreen} />
+      <Stack.Screen name="Register" component={RegisterScreen} />
+    </Stack.Navigator>
+  );
+}

mobile/src/navigation/MainNavigator.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { Text } from "react-native";
+import LibraryScreen from "../screens/LibraryScreen";
+import SearchScreen from "../screens/SearchScreen";
+import SettingsScreen from "../screens/SettingsScreen";
+
+export type MainTabParamList = {
+  Library: undefined;
+  Search: undefined;
+  Settings: undefined;
+};
+
+const Tab = createBottomTabNavigator<MainTabParamList>();
+
+function TabIcon({ label, focused }: { label: string; focused: boolean }) {
+  const icons: Record<string, string> = {
+    Library: "📚",
+    Search: "🔍",
+    Settings: "⚙️",
+  };
+  return (
+    <Text style={{ fontSize: 22, opacity: focused ? 1 : 0.5 }}>
+      {icons[label] ?? "●"}
+    </Text>
+  );
+}
+
+export function MainNavigator() {
+  return (
+    <Tab.Navigator
+      screenOptions={{
+        headerStyle: { backgroundColor: "#fff" },
+        headerTitleStyle: { fontWeight: "600", color: "#1a1a2e" },
+        tabBarActiveTintColor: "#4a6cf7",
+        tabBarInactiveTintColor: "#999",
+      }}
+    >
+      <Tab.Screen
+        name="Library"
+        component={LibraryScreen}
+        options={{
+          tabBarIcon: ({ focused }) => (
+            <TabIcon label="Library" focused={focused} />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Search"
+        component={SearchScreen}
+        options={{
+          tabBarIcon: ({ focused }) => (
+            <TabIcon label="Search" focused={focused} />
+          ),
+        }}
+      />
+      <Tab.Screen
+        name="Settings"
+        component={SettingsScreen}
+        options={{
+          tabBarIcon: ({ focused }) => (
+            <TabIcon label="Settings" focused={focused} />
+          ),
+        }}
+      />
+    </Tab.Navigator>
+  );
+}

mobile/src/navigation/MainTabs.tsx

@@ -0,0 +1,55 @@
+import { type ReactNode } from "react";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { Text } from "react-native";
+import LibraryScreen from "../screens/LibraryScreen";
+import SearchScreen from "../screens/SearchScreen";
+import SettingsScreen from "../screens/SettingsScreen";
+
+export type MainTabParamList = {
+  Library: undefined;
+  Search: undefined;
+  Settings: undefined;
+};
+
+const Tab = createBottomTabNavigator<MainTabParamList>();
+
+function TabIcon({ label, focused }: { label: string; focused: boolean }) {
+  return (
+    <Text style={{ fontSize: 22, opacity: focused ? 1 : 0.5 }}>
+      {label === "Library" ? "📚" : label === "Search" ? "🔍" : "⚙️"}
+    </Text>
+  );
+}
+
+export default function MainTabs(): ReactNode {
+  return (
+    <Tab.Navigator
+      screenOptions={({ route }) => ({
+        tabBarIcon: ({ focused }: { focused: boolean }) => (
+          <TabIcon label={route.name} focused={focused} />
+        ),
+        tabBarActiveTintColor: "#4f8ef7",
+        tabBarInactiveTintColor: "#888",
+        headerStyle: { backgroundColor: "#1a1a2e" },
+        headerTintColor: "#fff",
+        tabBarStyle: { backgroundColor: "#1a1a2e", borderTopColor: "#333" },
+      })}
+    >
+      <Tab.Screen
+        name="Library"
+        component={LibraryScreen}
+        options={{ title: "My Library" }}
+      />
+      <Tab.Screen
+        name="Search"
+        component={SearchScreen}
+        options={{ title: "Search" }}
+      />
+      <Tab.Screen
+        name="Settings"
+        component={SettingsScreen}
+        options={{ title: "Settings" }}
+      />
+    </Tab.Navigator>
+  );
+}

mobile/src/navigation/RootNavigator.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { ActivityIndicator, View } from "react-native";
+import { useAuth } from "../context/AuthContext";
+import { AuthNavigator } from "./AuthNavigator";
+import { MainNavigator } from "./MainNavigator";
+
+export function RootNavigator() {
+  const { isLoading, isAuthenticated } = useAuth();
+
+  if (isLoading) {
+    return (
+      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+        <ActivityIndicator size="large" color="#4a6cf7" />
+      </View>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <AuthNavigator />;
+  }
+
+  return <MainNavigator />;
+}

mobile/src/screens/LibraryScreen.tsx

@@ -0,0 +1,181 @@
+import { useState, useEffect, useCallback, type ReactNode } from "react";
+import {
+  View,
+  Text,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+  ActivityIndicator,
+  RefreshControl,
+} from "react-native";
+import { fetchBooks } from "../api/books";
+import type { Book, PaginatedResponse } from "@cloud-reader/shared";
+
+export default function LibraryScreen({ navigation }: { navigation: any }): ReactNode {
+  const [books, setBooks] = useState<Book[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+
+  const loadBooks = useCallback(async (pageNum: number, isRefresh = false) => {
+    try {
+      const data: PaginatedResponse<Book> = await fetchBooks(pageNum);
+      if (isRefresh) {
+        setBooks(data.results);
+      } else {
+        setBooks((prev) => [...prev, ...data.results]);
+      }
+      setHasMore(data.next !== null);
+      setPage(pageNum);
+    } catch {
+      // Silent error for now
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadBooks(1, true);
+  }, [loadBooks]);
+
+  const onRefresh = () => {
+    setRefreshing(true);
+    loadBooks(1, true);
+  };
+
+  const loadMore = () => {
+    if (hasMore && !loading) {
+      loadBooks(page + 1);
+    }
+  };
+
+  const renderBook = ({ item }: { item: Book }) => (
+    <TouchableOpacity
+      style={styles.bookCard}
+      onPress={() =>
+        navigation.navigate("BookDetail", { bookId: item.id })
+      }
+    >
+      <View style={styles.bookCover}>
+        <Text style={styles.coverText}>
+          {item.title.charAt(0).toUpperCase()}
+        </Text>
+      </View>
+      <View style={styles.bookInfo}>
+        <Text style={styles.bookTitle} numberOfLines={1}>
+          {item.title}
+        </Text>
+        <Text style={styles.bookAuthor} numberOfLines={1}>
+          {item.author}
+        </Text>
+        <Text style={styles.bookPages}>{item.total_pages} pages</Text>
+      </View>
+    </TouchableOpacity>
+  );
+
+  if (loading && books.length === 0) {
+    return (
+      <View style={styles.centered}>
+        <ActivityIndicator size="large" color="#4f8ef7" />
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={books}
+        renderItem={renderBook}
+        keyExtractor={(item) => item.id}
+        onEndReached={loadMore}
+        onEndReachedThreshold={0.5}
+        contentContainerStyle={styles.list}
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            tintColor="#4f8ef7"
+          />
+        }
+        ListEmptyComponent={
+          <View style={styles.centered}>
+            <Text style={styles.emptyText}>Your library is empty</Text>
+            <Text style={styles.emptySubtext}>
+              Add books to get started
+            </Text>
+          </View>
+        }
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#0f0f23",
+  },
+  centered: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 24,
+  },
+  list: {
+    padding: 16,
+  },
+  bookCard: {
+    flexDirection: "row",
+    backgroundColor: "#1a1a2e",
+    borderRadius: 12,
+    padding: 12,
+    marginBottom: 12,
+    borderWidth: 1,
+    borderColor: "#333",
+  },
+  bookCover: {
+    width: 60,
+    height: 80,
+    backgroundColor: "#2a2a4e",
+    borderRadius: 8,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  coverText: {
+    fontSize: 24,
+    fontWeight: "bold",
+    color: "#4f8ef7",
+  },
+  bookInfo: {
+    flex: 1,
+    marginLeft: 12,
+    justifyContent: "center",
+  },
+  bookTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#fff",
+    marginBottom: 4,
+  },
+  bookAuthor: {
+    fontSize: 14,
+    color: "#888",
+    marginBottom: 4,
+  },
+  bookPages: {
+    fontSize: 12,
+    color: "#666",
+  },
+  emptyText: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#888",
+    marginBottom: 8,
+  },
+  emptySubtext: {
+    fontSize: 14,
+    color: "#666",
+  },
+});

mobile/src/screens/LoginScreen.tsx

@@ -0,0 +1,173 @@
+import { useState, type ReactNode } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+import { useAuth } from "../context/AuthContext";
+import { isValidEmail } from "@cloud-reader/shared";
+
+export default function LoginScreen({ navigation }: { navigation: any }): ReactNode {
+  const { state, login, clearError } = useAuth();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleLogin = async () => {
+    clearError();
+
+    if (!email.trim()) {
+      Alert.alert("Validation Error", "Please enter your email.");
+      return;
+    }
+    if (!isValidEmail(email.trim())) {
+      Alert.alert("Validation Error", "Please enter a valid email address.");
+      return;
+    }
+    if (!password) {
+      Alert.alert("Validation Error", "Please enter your password.");
+      return;
+    }
+
+    try {
+      await login(email.trim(), password);
+    } catch {
+      // Error handled in context
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+    >
+      <View style={styles.inner}>
+        <Text style={styles.title}>Cloud Reader</Text>
+        <Text style={styles.subtitle}>Sign in to your account</Text>
+
+        {state.error && (
+          <View style={styles.errorBox}>
+            <Text style={styles.errorText}>{state.error}</Text>
+          </View>
+        )}
+
+        <TextInput
+          style={styles.input}
+          placeholder="Email"
+          placeholderTextColor="#666"
+          value={email}
+          onChangeText={setEmail}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          autoCorrect={false}
+        />
+
+        <TextInput
+          style={styles.input}
+          placeholder="Password"
+          placeholderTextColor="#666"
+          value={password}
+          onChangeText={setPassword}
+          secureTextEntry
+        />
+
+        <TouchableOpacity
+          style={[styles.button, state.isLoading && styles.buttonDisabled]}
+          onPress={handleLogin}
+          disabled={state.isLoading}
+        >
+          {state.isLoading ? (
+            <ActivityIndicator color="#fff" />
+          ) : (
+            <Text style={styles.buttonText}>Sign In</Text>
+          )}
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={() => navigation.navigate("Register")}>
+          <Text style={styles.linkText}>
+            Don't have an account?{" "}
+            <Text style={styles.linkBold}>Sign Up</Text>
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#0f0f23",
+  },
+  inner: {
+    flex: 1,
+    justifyContent: "center",
+    paddingHorizontal: 24,
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: "bold",
+    color: "#fff",
+    textAlign: "center",
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: "#888",
+    textAlign: "center",
+    marginBottom: 32,
+  },
+  input: {
+    backgroundColor: "#1a1a2e",
+    borderRadius: 8,
+    padding: 16,
+    fontSize: 16,
+    color: "#fff",
+    marginBottom: 12,
+    borderWidth: 1,
+    borderColor: "#333",
+  },
+  button: {
+    backgroundColor: "#4f8ef7",
+    borderRadius: 8,
+    padding: 16,
+    alignItems: "center",
+    marginTop: 8,
+    marginBottom: 24,
+  },
+  buttonDisabled: {
+    opacity: 0.6,
+  },
+  buttonText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  errorBox: {
+    backgroundColor: "rgba(255, 69, 58, 0.15)",
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: "rgba(255, 69, 58, 0.3)",
+  },
+  errorText: {
+    color: "#ff453a",
+    fontSize: 14,
+    textAlign: "center",
+  },
+  linkText: {
+    color: "#888",
+    textAlign: "center",
+    fontSize: 14,
+  },
+  linkBold: {
+    color: "#4f8ef7",
+    fontWeight: "600",
+  },
+});

mobile/src/screens/RegisterScreen.tsx

@@ -0,0 +1,212 @@
+import { useState, type ReactNode } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+} from "react-native";
+import { useAuth } from "../context/AuthContext";
+import {
+  isValidEmail,
+  validatePasswordStrength,
+} from "@cloud-reader/shared";
+
+export default function RegisterScreen({
+  navigation,
+}: {
+  navigation: any;
+}): ReactNode {
+  const { state, register, clearError } = useAuth();
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
+  const handleRegister = async () => {
+    clearError();
+
+    if (!username.trim()) {
+      Alert.alert("Validation Error", "Please enter a username.");
+      return;
+    }
+    if (!email.trim()) {
+      Alert.alert("Validation Error", "Please enter your email.");
+      return;
+    }
+    if (!isValidEmail(email.trim())) {
+      Alert.alert("Validation Error", "Please enter a valid email address.");
+      return;
+    }
+    const passwordError = validatePasswordStrength(password);
+    if (passwordError) {
+      Alert.alert("Validation Error", passwordError);
+      return;
+    }
+    if (password !== confirmPassword) {
+      Alert.alert("Validation Error", "Passwords do not match.");
+      return;
+    }
+
+    try {
+      await register(email.trim(), password, username.trim());
+    } catch {
+      // Error handled in context
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+    >
+      <ScrollView contentContainerStyle={styles.inner}>
+        <Text style={styles.title}>Create Account</Text>
+        <Text style={styles.subtitle}>Join Cloud Reader</Text>
+
+        {state.error && (
+          <View style={styles.errorBox}>
+            <Text style={styles.errorText}>{state.error}</Text>
+          </View>
+        )}
+
+        <TextInput
+          style={styles.input}
+          placeholder="Username"
+          placeholderTextColor="#666"
+          value={username}
+          onChangeText={setUsername}
+          autoCapitalize="none"
+          autoCorrect={false}
+        />
+
+        <TextInput
+          style={styles.input}
+          placeholder="Email"
+          placeholderTextColor="#666"
+          value={email}
+          onChangeText={setEmail}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          autoCorrect={false}
+        />
+
+        <TextInput
+          style={styles.input}
+          placeholder="Password"
+          placeholderTextColor="#666"
+          value={password}
+          onChangeText={setPassword}
+          secureTextEntry
+        />
+
+        <TextInput
+          style={styles.input}
+          placeholder="Confirm Password"
+          placeholderTextColor="#666"
+          value={confirmPassword}
+          onChangeText={setConfirmPassword}
+          secureTextEntry
+        />
+
+        <TouchableOpacity
+          style={[styles.button, state.isLoading && styles.buttonDisabled]}
+          onPress={handleRegister}
+          disabled={state.isLoading}
+        >
+          {state.isLoading ? (
+            <ActivityIndicator color="#fff" />
+          ) : (
+            <Text style={styles.buttonText}>Create Account</Text>
+          )}
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={() => navigation.goBack()}>
+          <Text style={styles.linkText}>
+            Already have an account?{" "}
+            <Text style={styles.linkBold}>Sign In</Text>
+          </Text>
+        </TouchableOpacity>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#0f0f23",
+  },
+  inner: {
+    flexGrow: 1,
+    justifyContent: "center",
+    paddingHorizontal: 24,
+    paddingVertical: 48,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "bold",
+    color: "#fff",
+    textAlign: "center",
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: "#888",
+    textAlign: "center",
+    marginBottom: 32,
+  },
+  input: {
+    backgroundColor: "#1a1a2e",
+    borderRadius: 8,
+    padding: 16,
+    fontSize: 16,
+    color: "#fff",
+    marginBottom: 12,
+    borderWidth: 1,
+    borderColor: "#333",
+  },
+  button: {
+    backgroundColor: "#4f8ef7",
+    borderRadius: 8,
+    padding: 16,
+    alignItems: "center",
+    marginTop: 8,
+    marginBottom: 24,
+  },
+  buttonDisabled: {
+    opacity: 0.6,
+  },
+  buttonText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  errorBox: {
+    backgroundColor: "rgba(255, 69, 58, 0.15)",
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: "rgba(255, 69, 58, 0.3)",
+  },
+  errorText: {
+    color: "#ff453a",
+    fontSize: 14,
+    textAlign: "center",
+  },
+  linkText: {
+    color: "#888",
+    textAlign: "center",
+    fontSize: 14,
+  },
+  linkBold: {
+    color: "#4f8ef7",
+    fontWeight: "600",
+  },
+});

mobile/src/screens/SearchScreen.tsx

@@ -0,0 +1,130 @@
+import { useState, type ReactNode } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+  ActivityIndicator,
+} from "react-native";
+import { searchBooks } from "../api/books";
+import type { Book, PaginatedResponse } from "@cloud-reader/shared";
+
+export default function SearchScreen(): ReactNode {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<Book[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [searched, setSearched] = useState(false);
+
+  const handleSearch = async () => {
+    if (!query.trim()) return;
+    setLoading(true);
+    setSearched(true);
+    try {
+      const data: PaginatedResponse<Book> = await searchBooks(query.trim());
+      setResults(data.results);
+    } catch {
+      setResults([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const renderBook = ({ item }: { item: Book }) => (
+    <View style={styles.resultCard}>
+      <Text style={styles.resultTitle}>{item.title}</Text>
+      <Text style={styles.resultAuthor}>{item.author}</Text>
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.searchBar}>
+        <TextInput
+          style={styles.input}
+          placeholder="Search books by title, author..."
+          placeholderTextColor="#666"
+          value={query}
+          onChangeText={setQuery}
+          onSubmitEditing={handleSearch}
+          returnKeyType="search"
+          autoCapitalize="none"
+          autoCorrect={false}
+        />
+      </View>
+
+      {loading && (
+        <View style={styles.centered}>
+          <ActivityIndicator size="large" color="#4f8ef7" />
+        </View>
+      )}
+
+      {!loading && searched && results.length === 0 && (
+        <View style={styles.centered}>
+          <Text style={styles.noResults}>No books found for "{query}"</Text>
+        </View>
+      )}
+
+      <FlatList
+        data={results}
+        renderItem={renderBook}
+        keyExtractor={(item) => item.id}
+        contentContainerStyle={styles.list}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#0f0f23",
+  },
+  searchBar: {
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: "#333",
+  },
+  input: {
+    backgroundColor: "#1a1a2e",
+    borderRadius: 8,
+    padding: 14,
+    fontSize: 16,
+    color: "#fff",
+    borderWidth: 1,
+    borderColor: "#333",
+  },
+  centered: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 24,
+  },
+  list: {
+    padding: 16,
+  },
+  resultCard: {
+    backgroundColor: "#1a1a2e",
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: "#333",
+  },
+  resultTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#fff",
+    marginBottom: 4,
+  },
+  resultAuthor: {
+    fontSize: 14,
+    color: "#888",
+  },
+  noResults: {
+    fontSize: 16,
+    color: "#888",
+    textAlign: "center",
+  },
+});

mobile/src/screens/SettingsScreen.tsx

@@ -0,0 +1,91 @@
+import { type ReactNode } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+} from "react-native";
+import { useAuth } from "../context/AuthContext";
+
+export default function SettingsScreen(): ReactNode {
+  const { state, logout } = useAuth();
+
+  const handleLogout = () => {
+    Alert.alert("Logout", "Are you sure you want to sign out?", [
+      { text: "Cancel", style: "cancel" },
+      { text: "Sign Out", style: "destructive", onPress: logout },
+    ]);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Account</Text>
+        <View style={styles.infoRow}>
+          <Text style={styles.label}>Username</Text>
+          <Text style={styles.value}>{state.user?.username ?? "—"}</Text>
+        </View>
+        <View style={styles.infoRow}>
+          <Text style={styles.label}>Email</Text>
+          <Text style={styles.value}>{state.user?.email ?? "—"}</Text>
+        </View>
+      </View>
+
+      <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
+        <Text style={styles.logoutText}>Sign Out</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#0f0f23",
+    padding: 16,
+  },
+  section: {
+    backgroundColor: "#1a1a2e",
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 24,
+    borderWidth: 1,
+    borderColor: "#333",
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#fff",
+    marginBottom: 16,
+  },
+  infoRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: "#333",
+  },
+  label: {
+    fontSize: 14,
+    color: "#888",
+  },
+  value: {
+    fontSize: 14,
+    color: "#fff",
+    fontWeight: "500",
+  },
+  logoutButton: {
+    backgroundColor: "rgba(255, 69, 58, 0.15)",
+    borderRadius: 8,
+    padding: 16,
+    alignItems: "center",
+    borderWidth: 1,
+    borderColor: "rgba(255, 69, 58, 0.3)",
+  },
+  logoutText: {
+    color: "#ff453a",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});

mobile/src/types/index.ts

@@ -0,0 +1,8 @@
+// Mobile-specific type aliases and extensions not covered by shared types
+
+export type RootStackParamList = {
+  Auth: undefined;
+  Main: undefined;
+  BookReader: { bookId: number };
+  BookDetail: { bookId: number };
+};

mobile/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

package.json

@@ -4,6 +4,15 @@
   "private": true,
   "workspaces": [
     "frontend",
-    "backend"
+    "backend",
-  ]
+    "mobile",
+    "packages/shared"
+  ],
+  "scripts": {
+    "dev:frontend": "yarn workspace @cloud-reader/frontend dev",
+    "dev:backend": "cd backend && python manage.py runserver",
+    "start:mobile": "yarn workspace @cloud-reader/mobile start",
+    "build:shared": "yarn workspace @cloud-reader/shared build",
+    "install:all": "yarn install"
+  }
 }

packages/shared/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@cloud-reader/shared",
+  "version": "1.0.0",
+  "private": true,
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "typescript": "~5.7.0"
+  }
+}

packages/shared/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+export * from "./utils";

packages/shared/src/types.ts

@@ -0,0 +1,218 @@
+/** Core domain types for Cloud Reader — shared across web and mobile */
+
+// ---- User & Auth ----
+
+export interface User {
+  id: number;
+  email: string;
+  username: string;
+}
+
+export interface TokenResponse {
+  access: string;
+  refresh: string;
+}
+
+export interface LoginPayload {
+  email: string;
+  password: string;
+}
+
+export interface RegisterPayload {
+  email: string;
+  username: string;
+  password: string;
+  password2: string;
+}
+
+// ---- Books ----
+
+export interface Book {
+  id: string;
+  title: string;
+  author: string;
+  total_pages: number;
+  cover_image: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface BookSummary {
+  id: string;
+  title: string;
+  author: string;
+  total_pages: number;
+  cover_image: string;
+}
+
+export interface BookListItem {
+  id: number;
+  title: string;
+  author: string;
+  genre: string;
+  reading_status: string;
+  reading_status_display: string;
+  cover_image: string | null;
+}
+
+export interface BookDetail {
+  id: number;
+  title: string;
+  author: string;
+  genre: string;
+  description: string;
+  reading_status: string;
+  reading_status_display: string;
+  cover_image: string | null;
+  total_pages: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface BookSearchParams {
+  q?: string;
+  genre?: string;
+  author?: string;
+  reading_status?: string;
+  ordering?: string;
+  page?: number;
+  page_size?: number;
+}
+
+export const READING_STATUS_OPTIONS = [
+  "to_read",
+  "reading",
+  "finished",
+  "dnf",
+] as const;
+
+// ---- E-Books ----
+
+export interface EBookListItem {
+  id: number;
+  title: string;
+  author: string;
+  filename: string;
+  format: string;
+  page_count: number;
+  cover_image: string | null;
+  created_at: string;
+  progress: number | null;
+}
+
+export interface EBookDetail {
+  id: number;
+  title: string;
+  author: string;
+  filename: string;
+  file_url: string;
+  format: string;
+  page_count: number;
+  file_size: number;
+  metadata_json: Record<string, unknown>;
+  cover_image: string | null;
+  created_at: string;
+  updated_at: string;
+  progress: ReadingProgress | null;
+}
+
+export interface ReadingProgress {
+  current_position: number;
+  last_page: number;
+}
+
+export interface ReadingSettings {
+  font_size: number;
+  font_style: "sans-serif" | "serif" | "monospace";
+  background_color: string;
+}
+
+export interface BookChapter {
+  id: number;
+  title: string;
+  index: number;
+  href: string;
+  children: BookChapter[];
+}
+
+export interface TocResponse {
+  chapters: BookChapter[];
+  format: string;
+  page_count: number;
+}
+
+export interface ContentResponse {
+  page: number;
+  total_pages: number;
+  content: string;
+  chapter_title: string;
+  format: string;
+}
+
+// ---- Bookmarks & Notes ----
+
+export interface Bookmark {
+  id: string;
+  book: string;
+  book_title: string;
+  page: number;
+  location_text: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Note {
+  id: string;
+  book: string;
+  book_title: string;
+  page: number;
+  location_text: string;
+  content: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateBookmarkPayload {
+  book: string;
+  page: number;
+  location_text?: string;
+}
+
+export interface CreateNotePayload {
+  book: string;
+  page: number;
+  location_text?: string;
+  content: string;
+}
+
+export interface UpdateNotePayload {
+  content: string;
+}
+
+export type AnnotationKind = "bookmark" | "note";
+
+export interface AnnotationEntry {
+  id: string;
+  kind: AnnotationKind;
+  book_title: string;
+  book_id: string;
+  page: number;
+  location_text: string;
+  content?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+// ---- Generic API shapes ----
+
+export interface PaginatedResponse<T> {
+  count: number;
+  next: string | null;
+  previous: string | null;
+  results: T[];
+}
+
+export interface ApiError {
+  detail?: string;
+  [key: string]: unknown;
+}

packages/shared/src/utils.ts

@@ -0,0 +1,117 @@
+/** Shared utility functions for Cloud Reader */
+
+/**
+ * Format an ISO date string to a human-readable date.
+ */
+export function formatDate(iso: string): string {
+  const date = new Date(iso);
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}
+
+/**
+ * Format a date as a relative time string (e.g., "2h ago", "3d ago").
+ */
+export function formatRelativeTime(iso: string): string {
+  const now = Date.now();
+  const then = new Date(iso).getTime();
+  const diffMs = now - then;
+  const seconds = Math.floor(diffMs / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 0) return `${days}d ago`;
+  if (hours > 0) return `${hours}h ago`;
+  if (minutes > 0) return `${minutes}m ago`;
+  return "just now";
+}
+
+/**
+ * Validate an email address format.
+ */
+export function isValidEmail(email: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
+/**
+ * Password strength check:
+ * - At least 8 characters
+ * - At least one uppercase letter
+ * - At least one lowercase letter
+ * - At least one digit
+ */
+export function isStrongPassword(password: string): boolean {
+  return (
+    password.length >= 8 &&
+    /[A-Z]/.test(password) &&
+    /[a-z]/.test(password) &&
+    /\d/.test(password)
+  );
+}
+
+/**
+ * Check if two passwords match.
+ */
+export function doPasswordsMatch(password: string, confirm: string): boolean {
+  return password === confirm;
+}
+
+/**
+ * Get a user-friendly reading status label.
+ */
+export function readingStatusLabel(status: string): string {
+  const labels: Record<string, string> = {
+    to_read: "To Read",
+    reading: "Reading",
+    finished: "Finished",
+    dnf: "Did Not Finish",
+  };
+  return labels[status] ?? status;
+}
+
+/**
+ * Format file size in bytes to a human-readable string.
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// ---- API endpoint constants ----
+
+export const API_ENDPOINTS = {
+  auth: {
+    login: "/api/auth/login/",
+    register: "/api/auth/register/",
+    tokenRefresh: "/api/auth/token/refresh/",
+    profile: "/api/auth/profile/",
+  },
+  books: {
+    list: "/api/books/",
+    detail: (id: number | string) => `/api/books/${id}/`,
+    genres: "/api/books/genres/",
+    authors: "/api/books/authors/",
+  },
+  ebooks: {
+    list: "/api/ebooks/",
+    detail: (id: number) => `/api/ebooks/${id}/`,
+    upload: "/api/ebooks/upload/",
+    toc: (id: number) => `/api/ebooks/${id}/toc/`,
+    content: (id: number, page: number) =>
+      `/api/ebooks/${id}/content/?page=${page}`,
+    progress: (id: number) => `/api/ebooks/${id}/progress/`,
+    settings: (id: number) => `/api/ebooks/${id}/settings/`,
+  },
+  annotations: {
+    list: "/api/annotations/",
+    bookmarks: "/api/annotations/bookmarks/",
+    notes: "/api/annotations/notes/",
+    bookmarkDetail: (id: string) => `/api/annotations/bookmarks/${id}/`,
+    noteDetail: (id: string) => `/api/annotations/notes/${id}/`,
+  },
+} as const;

packages/shared/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": ["src/**/*"]
+}