Blue Archive 4-Panel Search

Blue Archive 4-Panel Search is an open-source Next.js web application that lets players and fans search the official Blue Archive 4-panel manga (4コマ) by entering a student's name, powered by Fuse.js fuzzy matching over a JSON dataset.

What is Blue Archive 4-Panel Search?

Blue Archive 4-Panel Search is a student-name search tool for the official Blue Archive 4-panel manga strips. It takes a typed query (for example a student name such as "Hoshino") and returns matching 4-koma panels from a JSON data set stored in the project. The app is built with Next.js and TypeScript, styled with Tailwind CSS and daisyUI, and uses Jotai for lightweight state management and Fuse.js for typo-tolerant search. The project is developed in the m19e GitHub repository and includes a modal view for reading the selected panel.

Key Features

• Fuse.js fuzzy search — Users can type partial or misspelled student names and still get matches, because Fuse.js performs approximate string matching against the JSON index.
• daisyUI + Tailwind CSS styling — The interface uses daisyUI components on top of Tailwind CSS utility classes, giving a consistent look without custom CSS files.
• Next.js + TypeScript — The app runs on the Next.js React framework with TypeScript for type safety, making it easy to extend or redeploy.
• Jotai state management — UI state such as the open/closed modal and selected panel is handled by Jotai atoms, a minimal React state library.
• JSON data set — Manga metadata (titles, student names, image URLs) is stored in a structured JSON file, so adding new panels only requires updating the JSON.
• Responsive modal viewer — Clicking a search result opens a modal with the selected 4-panel manga image, as shown in the project's screenshots.

Who should use Blue Archive 4-Panel Search?

• Blue Archive fans — Quickly find a specific 4-panel strip by typing the student they're looking for, instead of browsing through archives manually.
• Fan-site developers — Use the project as a reference implementation for combining Next.js, Fuse.js, and daisyUI in a searchable content site, or fork it to build a similar archive for another game.
• Content aggregators — Reuse the searchable JSON structure and modal UI to present any series of image-based comics in a searchable interface.

What can you do with Blue Archive 4-Panel Search?

• Search by student name — Type any student's name into the search bar and instantly see all 4-panel strips featuring that student, even if you misspell the name.
• Browse via modal — Click any result to open a larger modal view of the panel, making it easy to read the strip without leaving the page.
• Extend the dataset — Add or update 4-koma entries directly in the JSON file; the search index and UI update automatically without code changes.