| 1 | # ChapterX Frontend
|
|---|
| 2 |
|
|---|
| 3 | A collaborative storytelling platform built with React + TypeScript + Vite + Tailwind CSS.
|
|---|
| 4 |
|
|---|
| 5 | ## Getting Started
|
|---|
| 6 |
|
|---|
| 7 | ```bash
|
|---|
| 8 | cd chapterx-frontend
|
|---|
| 9 | npm install
|
|---|
| 10 | npm run dev
|
|---|
| 11 | ```
|
|---|
| 12 |
|
|---|
| 13 | The app runs at http://localhost:5173
|
|---|
| 14 |
|
|---|
| 15 | ## Dev Switcher
|
|---|
| 16 |
|
|---|
| 17 | There is a floating blue button in the bottom-left corner that opens the **Dev Switcher**. Click it to instantly switch between any of the mock users without needing to log in manually.
|
|---|
| 18 |
|
|---|
| 19 | ## Quick Login Users
|
|---|
| 20 |
|
|---|
| 21 | | User | Role | Description |
|
|---|
| 22 | |------|------|-------------|
|
|---|
| 23 | | `admin_alex` | Admin | Full admin access — user management, content moderation, genre management |
|
|---|
| 24 | | `elena_writes` | Writer | Has 3 stories (published + draft), chapters, AI suggestions, collaborators |
|
|---|
| 25 | | `boris_writer` | Writer | Has 1 published story (Moonlight Promises) |
|
|---|
| 26 | | `sara_reader` | Regular | Has reading lists, can browse and comment |
|
|---|
| 27 | | `marco_author` | Writer | Editor collaborator on Elena's story |
|
|---|
| 28 |
|
|---|
| 29 | You can also use the Login page and type any username to log in (no password required in mock mode).
|
|---|
| 30 |
|
|---|
| 31 | ## Backend
|
|---|
| 32 |
|
|---|
| 33 | The app connects to a .NET 9 API at `https://localhost:7125`. Auth (login/register) uses the real backend when available, and falls back to mock data. All other data (stories, chapters, comments, etc.) uses in-memory mock state.
|
|---|
| 34 |
|
|---|
| 35 | ## Features
|
|---|
| 36 |
|
|---|
| 37 | - Dark mode only UI with glassmorphism design
|
|---|
| 38 | - Story browsing with search, genre filters, and sort
|
|---|
| 39 | - Full story reading with chapter navigation and progress bar
|
|---|
| 40 | - Writer dashboard with analytics (Recharts), story/chapter CRUD
|
|---|
| 41 | - AI Suggestion panel (grammar, style, plot suggestions)
|
|---|
| 42 | - Collaborator management with permission levels
|
|---|
| 43 | - Reading lists (personal + public community lists)
|
|---|
| 44 | - Notifications system
|
|---|
| 45 | - Admin panel: user management, content moderation, genre management
|
|---|
| 46 | - Role-based access control (guest, regular, writer, admin)
|
|---|
