How congle0707/truyenhub_fe works
TruyenHub is a React reading platform for comics and text stories, with authentication, chapter reading, ratings, comments, and an administrator console for managing catalog content. The principal workflow is: a reader enters the routed app, browses or opens a title, selects a chapter, and reads it; authenticated readers can rate and comment. Administrators authenticate separately and manage authors, categories, titles, and chapters. The graph reflects sampled calls and routing; several page/API relationships remain intentionally unwired where source excerpts were not provided.
Components 26
Public Experience
Reading Community
- Comic Details
src/pages/ComicDetailPage.tsx - Story Details
src/pages/StoryDetailPage.tsx - Comic Reader
src/pages/ComicReadPage.tsx - Story Reader
src/pages/StoryReadPage.tsx - Comment Section
src/components/CommentSection.tsx - Star Rating
src/components/StarRating.tsx
Admin Console
- Admin Layout
src/components/admin/AdminLayout.tsx - Admin Dashboard
src/pages/admin/AdminDashboard.tsx - Manage Categories
src/pages/admin/ManageCategoriesPage.tsx - Manage Authors
src/pages/admin/ManageAuthorsPage.tsx - Manage Comics
src/pages/admin/ManageComicsPage.tsx - Comic Chapters
src/pages/admin/ManageComicChaptersPage.tsx - Manage Stories
src/pages/admin/ManageStoriesPage.tsx - Story Chapters
src/pages/admin/ManageStoryChaptersPage.tsx
API Integration
- Auth API
src/api/auth.ts - Story API
src/api/story.ts - Comment API
src/api/comment.ts - Comic API
src/api/comic.ts - Admin API
src/api/admin.ts
Other components
- Reader
- Administrator
- Backend API
Connections 18
- Reader → Route App: opens app
- Administrator → Route App: opens console
- Route App → Auth Page: routes login
- Route App → Home Page: routes home
- Route App → Comic Details: routes comics
- Route App → Story Details: routes stories
- Route App → Comic Reader: routes chapters
- Route App → Story Reader: routes chapters
- Route App → Admin Layout: routes admin
- Auth Page → Auth Form: renders form
- Auth Form → Auth API: submits credentials
- Auth API → Backend API: requests auth
- Story Details → Story API: fetches details
- Story Details → Star Rating: renders rating
- Story Details → Comment Section: renders comments
- Comment Section → Comment API: loads comments
- Manage Authors → Admin API: manages authors
- Admin API → Backend API: requests administration