Index: chapterx-frontend/src/App.tsx
===================================================================
--- chapterx-frontend/src/App.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
+++ chapterx-frontend/src/App.tsx (revision b62cefc14094ca5ac7154f7d48797a1e6c444935)
@@ -0,0 +1,186 @@
+import React, { Suspense, lazy, ReactNode } from 'react'
+import { Routes, Route, Navigate } from 'react-router-dom'
+import { useAuthStore } from './store/authStore'
+import { useUIStore } from './store/uiStore'
+import { UserRole } from './types'
+import { Navbar } from './components/layout/Navbar'
+import { Footer } from './components/layout/Footer'
+import { ToastContainer } from './components/ui/Toast'
+import { DevSwitcher } from './components/DevSwitcher'
+import { Spinner } from './components/ui/Spinner'
+
+// Lazy imports
+const LandingPage = lazy(() => import('./pages/LandingPage').then(m => ({ default: m.LandingPage })))
+const LoginPage = lazy(() => import('./pages/auth/LoginPage').then(m => ({ default: m.LoginPage })))
+const RegisterPage = lazy(() => import('./pages/auth/RegisterPage').then(m => ({ default: m.RegisterPage })))
+const BrowsePage = lazy(() => import('./pages/browse/BrowsePage').then(m => ({ default: m.BrowsePage })))
+const GenrePage = lazy(() => import('./pages/browse/GenrePage').then(m => ({ default: m.GenrePage })))
+const GenresListPage = lazy(() => import('./pages/browse/GenrePage').then(m => ({ default: m.GenresListPage })))
+const StoryDetailPage = lazy(() => import('./pages/story/StoryDetailPage').then(m => ({ default: m.StoryDetailPage })))
+const ChapterReadPage = lazy(() => import('./pages/story/ChapterReadPage').then(m => ({ default: m.ChapterReadPage })))
+const WriterDashboard = lazy(() => import('./pages/writer/WriterDashboard').then(m => ({ default: m.WriterDashboard })))
+const CreateStoryPage = lazy(() => import('./pages/writer/CreateStoryPage').then(m => ({ default: m.CreateStoryPage })))
+const EditStoryPage = lazy(() => import('./pages/writer/EditStoryPage').then(m => ({ default: m.EditStoryPage })))
+const CreateChapterPage = lazy(() => import('./pages/writer/CreateChapterPage').then(m => ({ default: m.CreateChapterPage })))
+const EditChapterPage = lazy(() => import('./pages/writer/EditChapterPage').then(m => ({ default: m.EditChapterPage })))
+const ReadingListPage = lazy(() => import('./pages/reading-list/ReadingListPage').then(m => ({ default: m.ReadingListPage })))
+const CommunityListsPage = lazy(() => import('./pages/reading-list/CommunityListsPage').then(m => ({ default: m.CommunityListsPage })))
+const ProfilePage = lazy(() => import('./pages/profile/ProfilePage').then(m => ({ default: m.ProfilePage })))
+const AdminDashboard = lazy(() => import('./pages/admin/AdminDashboard').then(m => ({ default: m.AdminDashboard })))
+const AdminUsersPage = lazy(() => import('./pages/admin/AdminUsersPage').then(m => ({ default: m.AdminUsersPage })))
+const AdminContentPage = lazy(() => import('./pages/admin/AdminContentPage').then(m => ({ default: m.AdminContentPage })))
+const AdminGenresPage = lazy(() => import('./pages/admin/AdminGenresPage').then(m => ({ default: m.AdminGenresPage })))
+const NotificationsPage = lazy(() => import('./pages/NotificationsPage').then(m => ({ default: m.NotificationsPage })))
+
+const SuspenseFallback = () => (
+
+
+
+)
+
+// Protected route component
+const ProtectedRoute = ({
+ children,
+ requiredRole,
+}: {
+ children: ReactNode
+ requiredRole?: UserRole | UserRole[]
+}) => {
+ const { currentUser } = useAuthStore()
+ const { addToast } = useUIStore()
+
+ if (!currentUser) {
+ addToast('Please sign in to access this page.', 'warning')
+ return
+ }
+
+ if (requiredRole) {
+ const roles = Array.isArray(requiredRole) ? requiredRole : [requiredRole]
+ if (!roles.includes(currentUser.role)) {
+ addToast('You do not have permission to access this page.', 'error')
+ return
+ }
+ }
+
+ return <>{children}
+}
+
+function App() {
+ return (
+
+
+
+ }>
+
+ {/* Public */}
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+
+ {/* Authenticated */}
+
+
+
+ }
+ />
+
+ {/* Writer routes */}
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+ {/* Admin routes */}
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+ {/* 404 */}
+ } />
+
+
+
+
+
+
+