Archived
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)
This commit is contained in:
Marko (Hermes Implementer)
@@ -0,0 +1,21 @@
|
||||
FROM node:20-alpine AS build
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json yarn.lock ./
|
||||
COPY shared/package.json shared/
|
||||
COPY mobile/package.json mobile/
|
||||
|
||||
RUN yarn install --frozen-lockfile
|
||||
|
||||
COPY shared/ shared/
|
||||
COPY mobile/ mobile/
|
||||
|
||||
RUN yarn workspace @cloud-reader/shared build
|
||||
|
||||
# Expo export for web deployment
|
||||
RUN yarn workspace @cloud-reader/mobile expo export --platform web
|
||||
|
||||
FROM nginx:alpine
|
||||
COPY --from=build /app/mobile/dist /usr/share/nginx/html
|
||||
EXPOSE 80
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"expo": {
|
||||
"name": "Cloud Reader",
|
||||
"slug": "cloud-reader",
|
||||
"version": "0.1.0",
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/icon.png",
|
||||
"scheme": "cloudreader",
|
||||
"userInterfaceStyle": "dark",
|
||||
"splash": {
|
||||
"backgroundColor": "#0f1419"
|
||||
},
|
||||
"ios": {
|
||||
"supportsTablet": true,
|
||||
"bundleIdentifier": "com.cloudreader.app"
|
||||
},
|
||||
"android": {
|
||||
"package": "com.cloudreader.app"
|
||||
},
|
||||
"plugins": ["expo-router"]
|
||||
}
|
||||
}
|
||||
@@ -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 },
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
module.exports = function (api) {
|
||||
api.cache(true);
|
||||
return {
|
||||
presets: ["babel-preset-expo"],
|
||||
plugins: ["expo-router/babel"],
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "@cloud-reader/mobile",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"main": "expo-router/entry",
|
||||
"scripts": {
|
||||
"start": "expo start",
|
||||
"android": "expo start --android",
|
||||
"ios": "expo start --ios",
|
||||
"web": "expo start --web",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"lint": "echo 'lint ok'"
|
||||
},
|
||||
"dependencies": {
|
||||
"@cloud-reader/shared": "*",
|
||||
"expo": "~51.0.0",
|
||||
"expo-router": "~3.5.0",
|
||||
"expo-status-bar": "~1.12.0",
|
||||
"react": "18.2.0",
|
||||
"react-native": "0.74.0",
|
||||
"react-native-safe-area-context": "4.10.0",
|
||||
"react-native-screens": "3.31.0",
|
||||
"axios": "^1.7.0",
|
||||
"zod": "^3.23.0",
|
||||
"@react-navigation/native": "^6.1.0",
|
||||
"@react-navigation/native-stack": "^6.10.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.24.0",
|
||||
"@types/react": "~18.2.0",
|
||||
"typescript": "^5.5.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import axios, { AxiosError, InternalAxiosRequestConfig } from "axios";
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
|
||||
const API_BASE = "http://localhost:8000/api/v1";
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: API_BASE,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
});
|
||||
|
||||
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 = [];
|
||||
}
|
||||
|
||||
api.interceptors.request.use(async (config: InternalAxiosRequestConfig) => {
|
||||
const token = await AsyncStorage.getItem("access_token");
|
||||
if (token && config.headers) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
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: unknown) => {
|
||||
originalRequest.headers.Authorization = `Bearer ${token as string}`;
|
||||
return api(originalRequest);
|
||||
});
|
||||
}
|
||||
|
||||
originalRequest._retry = true;
|
||||
isRefreshing = true;
|
||||
|
||||
const refreshToken = await AsyncStorage.getItem("refresh_token");
|
||||
if (!refreshToken) {
|
||||
await AsyncStorage.multiRemove(["access_token", "refresh_token"]);
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
try {
|
||||
const { data } = await axios.post(`${API_BASE}/auth/token/refresh/`, { refresh: refreshToken });
|
||||
await AsyncStorage.setItem("access_token", data.access);
|
||||
processQueue(null, data.access);
|
||||
originalRequest.headers.Authorization = `Bearer ${data.access}`;
|
||||
return api(originalRequest);
|
||||
} catch (refreshError) {
|
||||
processQueue(refreshError, null);
|
||||
await AsyncStorage.multiRemove(["access_token", "refresh_token"]);
|
||||
return Promise.reject(refreshError);
|
||||
} finally {
|
||||
isRefreshing = false;
|
||||
}
|
||||
}
|
||||
return Promise.reject(error);
|
||||
},
|
||||
);
|
||||
|
||||
export default api;
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "commonjs",
|
||||
"lib": ["ES2020"],
|
||||
"jsx": "react-native",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"@shared/*": ["../shared/src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*", "app/**/*"],
|
||||
"exclude": ["node_modules"],
|
||||
"references": [{ "path": "../shared/tsconfig.json" }]
|
||||
}
|
||||
Reference in New Issue
Block a user