Project Structure - satoshi-create/emakimono-next GitHub Wiki

📁 Project Structure

This section outlines the current system structure of the Emakimono Viewer project, including potential future extensions. It is intended for contributors and maintainers to understand the high-level architecture and its components.

---

🧭 System Overview

The Emakimono Viewer is a lightweight, modular web application built with Next.js, partial Tailwind CSS, and multilingual support via i18n. Assets are fetched from Cloudinary, and annotations/metadata are currently stored in JSON format.

Future improvements are being planned to adopt a more scalable and type-safe stack.

---

📐 Architecture Diagram (Mermaid)

graph TD

  %% === Frontend Layer ===
  subgraph Frontend[🖥️ Frontend Layer]
    UI[🖼️ Emakimono Viewer UI - Next.js_Tailwind-CSS]
    Lang[i18n - multi-language support]
    Scroll[Horizontal scroll display]
  end

  %% === Backend Layer ===
  subgraph Backend[🛠️ Backend Layer - API endpoints]
    MetadataAPI[📦 API - emaki, annotations, image links]
    Auth[🔐 Authentication]
  end

  %% === Asset & Data Layer ===
  subgraph Assets[📁 Asset & Data Management]
    Cloudinary[☁️ Cloudinary - image hosting]
    Annotations[📝 Annotations - JSON files]
    Translation[🌐 Translations - YAML or JSON]
  end

  %% === Current Connections ===
  UI -->|fetch| MetadataAPI
  MetadataAPI --> Cloudinary
  MetadataAPI --> Annotations
  Lang --> UI
  Auth --> UI
  Translation --> Lang

  %% === Future Enhancements ===
  subgraph Future["🚀 Future Enhancements (Planned)"]
    Pixi[🎮 PixiJS - smooth horizontal rendering]
    TSUI[⚙️ Refactor - TypeScript and full TailwindCSS]
    Supabase[(🗃️ Supabase - PostgreSQL RLS)]
  end

  Scroll -.-> Pixi
  UI -.-> TSUI
  Annotations -.-> Supabase

🔍 Component Roles

• Frontend Layer: Handles UI rendering and internationalization.
• Backend Layer: Provides API endpoints for data retrieval and user authentication.
• Asset & Data Layer: Stores visual and textual data; lightweight and static in current version.
• Future Layer: Explores scalable upgrades such as PixiJS for rendering and Supabase for structured storage.

---

Feel free to contribute updates or refinements to this diagram via pull request or issue discussion.