---

[!NOTE] Catatan untuk guru produktif
Laporan dan proposal saya letakkan di folder docs/. Silakan bisa diperiksa.

About AniKomi

AniKomi (short for Anime and Komik) is a web-based manga/manhwa/manhua reader with a modern client-server architecture. It is designed to deliver a fast, responsive, and comfortable reading experience with multi-provider support -- aggregating data from multiple third-party sources simultaneously via Server-Sent Events (SSE).

This repository contains the frontend (Svelte 5 SPA). The backend (Elysia API server) is in a separate repository at aryareal1/anikomi-backend.

Key Features

Feature	Description
Home	Popular and latest manga feed from multiple sources
Explore	Search, genre filter, type filter (manga/manhwa/manhua), and sorting
Manga Detail	Synopsis, author, genres, rating, chapter list, and recommendations
Chapter Reader	Reader with inter-chapter navigation, progress tracking, and scroll mode
Library	Manage personal collection (Reading, Completed, Plan to Read, On Hold)
Favorites	Mark manga as favorites for quick access
Reading History	Track previously read chapters
Dark/Light Mode	Toggleable themes that can follow system preference
Multi-Provider	Real-time data aggregation from many sources simultaneously

---

Tech Stack

Layer	Technology
Frontend	Svelte 5 (rune-based), TypeScript 6
Bundler	Vite 8
Routing	svelte5-router (SPA)
API Client	Eden Treaty (@elysia/eden)
Backend	Elysia 1 (running on Bun)
API Format	SSE (Server-Sent Events) for streaming multi-provider responses
Theming	mode-watcher
Icons	Material Symbols
Fonts	Nunito, Outfit, Nova Square

---

Architecture

AniKomi uses a Client-Server architecture with SSE (Server-Sent Events) communication. The frontend (this repo) and backend are maintained as separate repositories:

• Frontend: https://github.com/aryareal1/anikomi (this repo)
• Backend: https://github.com/aryareal1/anikomi-backend

+-----------------------+        SSE Stream        +------------------------+
|                       | <----------------------- |                        |
|   Frontend (SPA)      |                          |   Backend (Elysia)     |
|                       | ----- HTTP Request ----> |                        |
|   Svelte 5 + Vite     |                          |   Bun + Elysia         |
|                       |                          |                        |
+-----------------------+                          +------------+-----------+
                                                                |
                                                 +--------------+---------------+
                                                 |              |               |
                                             Provider A     Provider B     Provider C
                                            (Kiryuu, etc.)  (scraping)     (scraping)

How Multi-Provider Works:

1. Frontend sends a request to the Elysia backend
2. Backend calls all third-party providers in parallel
3. Each provider response is streamed to the frontend as an event stream (SSE)
4. Frontend merges data from all providers in real-time
5. Best data is selected (e.g., chapter with the most images)

---

Project Structure

anikomi/
+-- index.html                 # HTML entry point
+-- package.json               # Dependencies & scripts
+-- svelte.config.js           # Svelte configuration
+-- vite.config.ts             # Vite configuration
+-- tsconfig.json              # TypeScript configuration
+-- elysia.d.ts                # Elysia types (auto-generated)
|
+-- src/
|   +-- index.ts               # Application entry point (Svelte mount)
|   +-- App.svelte             # Root component + routing
|   +-- globals.css            # Design system (CSS custom properties)
|   |
|   +-- assets/
|   |   +-- brand.png          # Logo (light mode)
|   |   +-- brand_dark.png     # Logo (dark mode)
|   |   +-- flags/             # Country flag icons (jp, kr, cn)
|   |   +-- providers/         # Provider icons
|   |
|   +-- layouts/
|   |   +-- Layout.svelte      # Main layout (Nav + main content)
|   |
|   +-- components/
|   |   +-- ui/
|   |   |   +-- Nav.svelte           # Main navigation + search bar
|   |   |   +-- MangaCard.svelte     # Manga card (cover, rating, type flag)
|   |   |   +-- MangaCardSkeleton.svelte
|   |   |
|   |   +-- home/
|   |   |   +-- Home.svelte          # Home page
|   |   |   +-- MangaGrid.svelte     # Manga grid (popular/latest)
|   |   |   +-- MangaGridSkeleton.svelte
|   |   |   +-- ContinueReading.svelte
|   |   |
|   |   +-- explore/
|   |   |   +-- Explore.svelte           # Explore page
|   |   |   +-- SearchResults.svelte     # Search results + pagination
|   |   |   +-- GenreSection.svelte      # Genre filter section
|   |   |   +-- SectionCarousel.svelte   # Recommendation carousel
|   |   |
|   |   +-- manga/
|   |   |   +-- MangaDetail.svelte       # Manga detail page
|   |   |   +-- MangaDetailHero.svelte   # Hero section (cover, info)
|   |   |   +-- MangaDetailMeta.svelte   # Metadata + library actions
|   |   |   +-- MangaDetailChapters.svelte
|   |   |   +-- MangaDetailSynopsis.svelte
|   |   |   +-- MangaDetailSimilar.svelte
|   |   |   +-- MangaDetailError.svelte
|   |   |   +-- MangaDetailSkeleton.svelte
|   |   |   +-- types.ts
|   |   |
|   |   +-- reader/
|   |   |   +-- Reader.svelte            # Chapter reader
|   |   |   +-- ReaderPages.svelte       # Page images
|   |   |   +-- ReaderPage.svelte
|   |   |   +-- ReaderHeader.svelte      # Reader header
|   |   |   +-- ReaderControls.svelte    # Reader navigation controls
|   |   |   +-- ReaderChapterNav.svelte  # Inter-chapter navigation
|   |   |   +-- ReaderProgressPill.svelte
|   |   |   +-- ReaderError.svelte
|   |   |   +-- ReaderSkeleton.svelte
|   |   |   +-- types.ts
|   |   |
|   |   +-- library/
|   |       +-- Library.svelte           # Personal library
|   |       +-- LibraryFavorites.svelte  # Favorites page
|   |       +-- LibraryHistory.svelte    # Reading history
|   |
|   +-- lib/
|   |   +-- api.ts              # Eden Treaty client instance
|   |   +-- manga.ts            # Utility functions & data loading
|   |   +-- reader.ts           # Chapter loading logic
|   |   +-- stores.ts           # Svelte stores (library, history, favorites)
|   |
|   +-- styles/
|       +-- manga-card.css      # Manga card styling
|       +-- manga-detail.css    # Manga detail page styling
|       +-- reader.css          # Chapter reader styling
|
+-- tooling/
|   +-- elysia-types.ts         # Elysia type auto-generation script
|
+-- docs/                       # Project documentation (report)

---

Getting Started

Prerequisites

• Bun v1.x -- runtime and package manager
• anikomi-backend running at http://localhost:3154

Backend Setup

The backend is in a separate repository. Clone and start it first:

git clone https://github.com/aryareal1/anikomi-backend.git
cd anikomi-backend
bun install
bun dev

The Elysia server will start on http://localhost:3154. OpenAPI documentation is available at http://localhost:3154/docs.

Frontend Installation

# Clone the repository
git clone https://github.com/aryareal1/anikomi.git
cd anikomi

# Install dependencies
bun install

Running the Development Server

bun dev

This command will:

1. Run types:elysia to fetch the latest Elysia type definitions from the backend
2. Start the Vite dev server (usually at http://localhost:5173)

Production Build

bun build

Preview Build

bun preview

---

Available Scripts

Script	Description
bun dev	Start development server
bun build	Build for production
bun preview	Preview production build
bun check	Type-check with svelte-check & tsc
bun types:elysia	Regenerate elysia.d.ts from the Elysia server

---

Backend (anikomi-backend)

The backend is a separate Elysia server (Bun-native TypeScript framework) that scrapes and aggregates manga data from third-party providers.

Repository: https://github.com/aryareal1/anikomi-backend

Tech Stack

Layer	Technology
Runtime	Bun
Framework	Elysia (latest)
API Docs	OpenAPI / Swagger (via @elysia/openapi)
CORS	@elysia/cors
Parsing	jsdom for HTML scraping
Types	elysia-remote-dts for server type export

API Endpoints

All data endpoints use SSE (Server-Sent Events) to stream results from multiple providers concurrently:

Endpoint	Method	Description
/feed	GET	Manga feed -- supports q, type, order, page, limit query params
/manga/:slug	GET	Manga detail + recommendations streamed from providers
/manga/:slug/chapters/:chapter	GET	Chapter content (images, navigation, metadata)
/docs	GET	OpenAPI / Swagger interactive documentation

Providers

The backend uses a pluggable provider system (src/providers/). Currently implemented providers:

• Kiryuu -- scrapes https://kiryuu.online/api and normalizes data into the Anikomi schema
• Komiku Parser (src/utils/komikuParser.ts) -- HTML parsing utility for extracting manga info from the Komiku website

New providers can be added by implementing the same interface in the src/providers/ directory.

Development

cd anikomi-backend
bun dev          # starts on http://localhost:3154

---

Design System

AniKomi uses a design system based on CSS Custom Properties with two theme variants:

• Luminous Clarity -- Light mode theme
• Luminous Clarity Dark -- Dark mode theme

Design variables cover surface colors, primary/secondary/tertiary colors, typography, border radii, and a consistent spacing scale throughout the application.

Typography

Font	Usage
Nunito	Body text (sans-serif)
Outfit	Headings
Nova Square	Brand / logo

---

Contributing

Contributions are always welcome! Feel free to open an issue or submit a pull request for improvements or new features.

---

License

This project was developed for educational purposes and final project documentation.

---