🧶 Nekozanedex Frontend - Web Novel Platform

English | Tiếng Việt

Nekozanedex is a modern, high-performance web novel reading platform built with Next.js 15+. It features Server-Side Rendering (SSR), robust authentication, a dedicated reader experience, and a comprehensive admin management system.

---

✨ Key Features

📖 Reader Experience

• Optimized Reading Mode: Clean interface with adjustable settings (font, text size, theme).
• Infinite Discovery: Explore stories via Home, Rankings, Genres, and advanced Search.
• Bookmarks & History: Save your progress and keep track of what you've read.

🔐 Advanced Authentication

• SSR-First Auth: Secure session management using Server Components and Server Actions.
• Centralized Auth Utility: src/shared/lib/server-auth.ts provides a unified interface for token management and authenticated fetching (authFetch).
• Adaptive Proxy: Intelligent middleware refreshes tokens for both protected and public routes, ensuring consistent UI state.
• JWT Reuse Detection: Enterprise-grade security against token theft and unauthorized access.

🛠️ Admin Dashboard

• Modular Admin API: Refactored server logic into domain-specific modules (stories.ts, chapters.ts, etc.) for better maintainability.
• Full Story Management: CRUD operations for stories, genres, and chapters.
• Bulk Import: Quickly upload multiple chapters at once.
• Image Management: Integrated Cloudinary support for story covers.
• Real-time Stats: Track platform performance and traffic.

🎨 Design & UX

• Theme System: Seamless dark/light mode toggle with optimized hydration (no layout shifts).
• Responsive Design: Mobile-first approach for reading on any device.
• Skeleton Loaders: Polished loading states using modern skeleton patterns.

---

🚀 Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Components: Shadcn UI
• Icons: Lucide React
• State Management: React Server Actions & Hooks
• Feedback: Sonner (Toasts)

---

🛠️ Getting Started

Prerequisites

• Node.js 18+
• npm / yarn / pnpm

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/nekozanedex-frontend.git
   cd nekozanedex-frontend

2. Install dependencies:

   npm install

3. Configure environment variables: Create a .env.local file:

   NEXT_PUBLIC_API_URL=http://localhost:9091/api
   NEXT_PUBLIC_COOKIE_DOMAIN=localhost

4. Run the development server:

   npm run dev

Open http://localhost:3000 to see the result.

---

📁 Project Structure

src/
├── app/                  # App Router: Pages & API Routes
├── features/             # Feature-based modules (Admin, Auth, Story, etc.)
│   ├── [feature]/
│   │   ├── actions/      # Server Actions
│   │   ├── components/   # UI Components
│   │   ├── server/       # Modularized API logic
│   │   └── types/        # TypeScript Definitions
├── shared/               # Reusable components, hooks, and lib
│   ├── lib/
│   │   └── server-auth.ts # Core Server-Side Auth Logic
├── response/             # Result pattern handling
└── proxy.ts              # Intelligent auth & routing proxy

---

🛡️ Architecture Patterns

• Result Pattern: Consistent error handling across the app for predictable data flow.
• Feature-Based Module System: Highly scalable folder structure.
• Strict Server/Client Separation: Optimized for performance and security.
• Clean Code: Adherence to industry standards for maintainability.

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License.