feat: monorepo structure with Django backend, React frontend, and Expo mobile app

- Backend: Django 5 + DRF with accounts, documents, collections, and reading apps - Custom User model with email-based auth, JWT via SimpleJWT - Full CRUD viewsets with ModelSerializer + DRF routers - pytest, Ruff, drf-spectacular (OpenAPI), whitenoise - Dockerfile for production deployment - Frontend: React 18 + TypeScript + Vite - Lazy-loaded routes with ProtectedRoute/PublicRoute guards - Auth context with useReducer, token refresh interceptor - Pages: Login, Register, Library, Document Detail, Reader, Collections, Settings - Dark theme, responsive grid layout, Vite proxy to Django backend - Mobile: Expo SDK 51 + React Native + Expo Router - File-based routing with login, register, and library screens - AsyncStorage for token persistence, token refresh interceptor - Shared API types via @cloud-reader/shared workspace package - Shared: TypeScript types (API responses, auth, documents, etc.) - CI/CD: 3 independent GitHub Actions pipelines (backend, frontend, mobile)
2026-05-26 00:51:54 +00:00
commit b8bd1dca14
79 changed files with 3717 additions and 0 deletions
@@ -0,0 +1,26 @@
+import React from "react";
+import { Stack } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+
+export default function RootLayout(): React.ReactElement {
+  return (
+    <>
+      <StatusBar style="light" />
+      <Stack
+        screenOptions={{
+          headerStyle: { backgroundColor: "#1a1f2e" },
+          headerTintColor: "#e1e4ed",
+          headerTitleStyle: { fontWeight: "600" },
+          contentStyle: { backgroundColor: "#0f1419" },
+        }}
+      >
+        <Stack.Screen name="index" options={{ headerShown: false }} />
+        <Stack.Screen name="login" options={{ title: "Sign In" }} />
+        <Stack.Screen name="register" options={{ title: "Create Account" }} />
+        <Stack.Screen name="library" options={{ title: "My Library" }} />
+        <Stack.Screen name="collections" options={{ title: "Collections" }} />
+        <Stack.Screen name="settings" options={{ title: "Settings" }} />
+      </Stack>
+    </>
+  );
+}
@@ -0,0 +1,5 @@
+import { Redirect } from "expo-router";
+
+export default function IndexPage(): React.ReactElement {
+  return <Redirect href="/login" />;
+}
@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react";
+import { View, Text, FlatList, TouchableOpacity, StyleSheet, ActivityIndicator } from "react-native";
+import { useRouter } from "expo-router";
+import api from "../src/services/api";
+import type { Document } from "@cloud-reader/shared";
+
+export default function LibraryScreen(): React.ReactElement {
+  const router = useRouter();
+  const [documents, setDocuments] = useState<Document[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetch = async (): Promise<void> => {
+      try {
+        const { data } = await api.get("/documents/");
+        setDocuments(data.results || []);
+      } catch {
+        // Not authenticated
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetch();
+  }, []);
+
+  const renderDoc = ({ item }: { item: Document }): React.ReactElement => (
+    <TouchableOpacity style={styles.card} onPress={() => router.push(`/documents/${item.id}`)}>
+      <View style={styles.cardContent}>
+        <Text style={styles.cardTitle}>{item.title}</Text>
+        {item.author && <Text style={styles.cardAuthor}>{item.author}</Text>}
+        <View style={styles.cardMeta}>
+          <Text style={styles.badge}>{item.file_type.toUpperCase()}</Text>
+          <Text style={styles.metaText}>{(item.file_size / (1024 * 1024)).toFixed(1)} MB</Text>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+
+  if (loading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator size="large" color="#4f8cff" />
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>My Library ({documents.length})</Text>
+      </View>
+      {documents.length === 0 ? (
+        <View style={styles.center}>
+          <Text style={styles.emptyText}>No documents yet.</Text>
+        </View>
+      ) : (
+        <FlatList
+          data={documents}
+          keyExtractor={(item) => String(item.id)}
+          renderItem={renderDoc}
+          contentContainerStyle={styles.list}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: "#0f1419" },
+  center: { flex: 1, justifyContent: "center", alignItems: "center" },
+  header: { padding: 16, backgroundColor: "#1a1f2e", borderBottomWidth: 1, borderBottomColor: "#2a3042" },
+  headerTitle: { fontSize: 20, fontWeight: "700", color: "#e1e4ed" },
+  list: { padding: 16 },
+  card: { backgroundColor: "#1a1f2e", borderRadius: 12, padding: 16, marginBottom: 12, borderWidth: 1, borderColor: "#2a3042" },
+  cardContent: {},
+  cardTitle: { fontSize: 16, fontWeight: "600", color: "#e1e4ed", marginBottom: 4 },
+  cardAuthor: { fontSize: 14, color: "#8892a4", marginBottom: 8 },
+  cardMeta: { flexDirection: "row", gap: 10 },
+  badge: { fontSize: 12, fontWeight: "600", color: "#4f8cff" },
+  metaText: { fontSize: 12, color: "#8892a4" },
+  emptyText: { color: "#8892a4", fontSize: 16 },
+});
@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert, KeyboardAvoidingView, Platform } from "react-native";
+import { useRouter } from "expo-router";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import api from "../src/services/api";
+
+export default function LoginScreen(): React.ReactElement {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleLogin = async (): Promise<void> => {
+    if (!email || !password) {
+      Alert.alert("Error", "Please fill in all fields.");
+      return;
+    }
+    setLoading(true);
+    try {
+      const { data } = await api.post("/auth/token/", { email, password });
+      await AsyncStorage.setItem("access_token", data.access);
+      await AsyncStorage.setItem("refresh_token", data.refresh);
+      router.replace("/library");
+    } catch {
+      Alert.alert("Error", "Invalid email or password.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === "ios" ? "padding" : "height"}>
+      <View style={styles.card}>
+        <Text style={styles.title}>Cloud Reader</Text>
+        <Text style={styles.subtitle}>Sign in to continue</Text>
+
+        <Text style={styles.label}>Email</Text>
+        <TextInput
+          style={styles.input}
+          value={email}
+          onChangeText={setEmail}
+          autoCapitalize="none"
+          keyboardType="email-address"
+          placeholderTextColor="#8892a4"
+        />
+
+        <Text style={styles.label}>Password</Text>
+        <TextInput
+          style={styles.input}
+          value={password}
+          onChangeText={setPassword}
+          secureTextEntry
+          placeholderTextColor="#8892a4"
+        />
+
+        <TouchableOpacity style={styles.button} onPress={handleLogin} disabled={loading}>
+          <Text style={styles.buttonText}>{loading ? "Signing in..." : "Sign In"}</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={() => router.push("/register")}>
+          <Text style={styles.link}>Don't have an account? Register</Text>
+        </TouchableOpacity>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#0f1419", padding: 24 },
+  card: { width: "100%", maxWidth: 400, padding: 32, backgroundColor: "#1a1f2e", borderRadius: 12 },
+  title: { fontSize: 24, fontWeight: "700", color: "#e1e4ed", marginBottom: 4 },
+  subtitle: { fontSize: 16, color: "#8892a4", marginBottom: 24 },
+  label: { fontSize: 13, fontWeight: "500", color: "#8892a4", marginBottom: 6 },
+  input: { backgroundColor: "#0f1419", borderWidth: 1, borderColor: "#2a3042", borderRadius: 8, padding: 12, color: "#e1e4ed", fontSize: 14, marginBottom: 16 },
+  button: { backgroundColor: "#4f8cff", borderRadius: 8, padding: 14, alignItems: "center", marginTop: 8 },
+  buttonText: { color: "#fff", fontWeight: "600", fontSize: 16 },
+  link: { color: "#4f8cff", textAlign: "center", marginTop: 16, fontSize: 14 },
+});
@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert, KeyboardAvoidingView, Platform, ScrollView } from "react-native";
+import { useRouter } from "expo-router";
+import api from "../src/services/api";
+
+export default function RegisterScreen(): React.ReactElement {
+  const router = useRouter();
+  const [form, setForm] = useState({ email: "", username: "", display_name: "", password: "", password_confirm: "" });
+  const [loading, setLoading] = useState(false);
+
+  const handleRegister = async (): Promise<void> => {
+    if (form.password !== form.password_confirm) {
+      Alert.alert("Error", "Passwords do not match.");
+      return;
+    }
+    setLoading(true);
+    try {
+      await api.post("/auth/register/", form);
+      Alert.alert("Success", "Account created. Please sign in.");
+      router.replace("/login");
+    } catch {
+      Alert.alert("Error", "Registration failed. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === "ios" ? "padding" : "height"}>
+      <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: "center" }}>
+        <View style={styles.card}>
+          <Text style={styles.title}>Create Account</Text>
+          <Text style={styles.subtitle}>Join Cloud Reader</Text>
+
+          {(["email", "username", "display_name", "password", "password_confirm"] as const).map((field) => (
+            <View key={field}>
+              <Text style={styles.label}>
+                {field.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase())}
+              </Text>
+              <TextInput
+                style={styles.input}
+                value={form[field]}
+                onChangeText={(val) => setForm((prev) => ({ ...prev, [field]: val }))}
+                secureTextEntry={field.startsWith("password")}
+                autoCapitalize={field === "email" ? "none" : "words"}
+                placeholderTextColor="#8892a4"
+              />
+            </View>
+          ))}
+
+          <TouchableOpacity style={styles.button} onPress={handleRegister} disabled={loading}>
+            <Text style={styles.buttonText}>{loading ? "Creating account..." : "Create Account"}</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity onPress={() => router.push("/login")}>
+            <Text style={styles.link}>Already have an account? Sign In</Text>
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: "#0f1419", padding: 24 },
+  card: { width: "100%", maxWidth: 400, padding: 32, backgroundColor: "#1a1f2e", borderRadius: 12, alignSelf: "center" },
+  title: { fontSize: 24, fontWeight: "700", color: "#e1e4ed", marginBottom: 4 },
+  subtitle: { fontSize: 16, color: "#8892a4", marginBottom: 24 },
+  label: { fontSize: 13, fontWeight: "500", color: "#8892a4", marginBottom: 6 },
+  input: { backgroundColor: "#0f1419", borderWidth: 1, borderColor: "#2a3042", borderRadius: 8, padding: 12, color: "#e1e4ed", fontSize: 14, marginBottom: 16 },
+  button: { backgroundColor: "#4f8cff", borderRadius: 8, padding: 14, alignItems: "center", marginTop: 8 },
+  buttonText: { color: "#fff", fontWeight: "600", fontSize: 16 },
+  link: { color: "#4f8cff", textAlign: "center", marginTop: 16, fontSize: 14 },
+});