<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Apu &amp; Opu</title>
    <description>The latest articles on DEV Community by Apu &amp; Opu (@apu-and-opu).</description>
    <link>https://dev.to/apu-and-opu</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3885677%2F65460723-950e-4b2f-9790-89e9535076c8.png</url>
      <title>DEV Community: Apu &amp; Opu</title>
      <link>https://dev.to/apu-and-opu</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/apu-and-opu"/>
    <language>en</language>
    <item>
      <title>I Built “Sousa” — a Detective-Style Investigation Board App</title>
      <dc:creator>Apu &amp; Opu</dc:creator>
      <pubDate>Sat, 18 Apr 2026 08:25:16 +0000</pubDate>
      <link>https://dev.to/apu-and-opu/i-built-sousa-a-detective-style-investigation-board-app-221d</link>
      <guid>https://dev.to/apu-and-opu/i-built-sousa-a-detective-style-investigation-board-app-221d</guid>
      <description>&lt;h2&gt;
  
  
  You know that board from crime dramas? I made it into an app.
&lt;/h2&gt;

&lt;p&gt;You’ve probably seen it in crime dramas and movies —&lt;br&gt;
a whiteboard covered with suspect photos, evidence, and strings connecting everything together.&lt;/p&gt;

&lt;p&gt;I turned that idea into an app.&lt;/p&gt;

&lt;p&gt;It’s a &lt;strong&gt;digital investigation board&lt;/strong&gt; where you can place suspects, related people, and evidence on a canvas, then connect them with lines to visualize relationships and organize information.&lt;/p&gt;

&lt;p&gt;The app is called &lt;strong&gt;“Sousa.”&lt;/strong&gt;&lt;br&gt;
(It’s pronounced &lt;em&gt;soh-sah&lt;/em&gt;, and the name comes from the Japanese word for “investigation.”)&lt;/p&gt;

&lt;p&gt;In general, this kind of board is also known as a:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Investigation Board&lt;/li&gt;
&lt;li&gt;Evidence Board&lt;/li&gt;
&lt;li&gt;Link Analysis Board&lt;/li&gt;
&lt;li&gt;(Sometimes jokingly) Crazy Board&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;A live demo is available on GitHub Pages:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://apu-and-opu.github.io/sousa/" rel="noopener noreferrer"&gt;https://apu-and-opu.github.io/sousa/&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Screenshot
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg5j3sm3coz446754tq80.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg5j3sm3coz446754tq80.png" alt="Sousa" width="800" height="522"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can freely place:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Character cards&lt;/li&gt;
&lt;li&gt;Evidence cards&lt;/li&gt;
&lt;li&gt;Notes&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Then connect them with arrows and label relationships such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Accomplice&lt;/li&gt;
&lt;li&gt;Witness&lt;/li&gt;
&lt;li&gt;Alibi&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Cards are color-coded for clarity:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Red: Suspects&lt;/li&gt;
&lt;li&gt;Blue: Victims&lt;/li&gt;
&lt;li&gt;Yellow: Related persons&lt;/li&gt;
&lt;li&gt;Green: Witnesses&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Features
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Add &lt;strong&gt;people, evidence, and notes&lt;/strong&gt; as cards&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Connect cards with arrows&lt;/strong&gt; and label relationships&lt;/li&gt;
&lt;li&gt;Attach images&lt;/li&gt;
&lt;li&gt;Save and load data in &lt;strong&gt;JSON format&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Supports &lt;strong&gt;Japanese and English&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Can be packaged as a &lt;strong&gt;desktop app (Tauri)&lt;/strong&gt; — no installation required&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Why I built this
&lt;/h2&gt;

&lt;p&gt;There are already many tools for mind maps and relationship diagrams.&lt;/p&gt;

&lt;p&gt;However, surprisingly few are &lt;strong&gt;specifically designed as investigation boards&lt;/strong&gt;, and most of them aren’t very intuitive for that purpose.&lt;/p&gt;

&lt;p&gt;So I built a tool with a &lt;strong&gt;UI focused on investigation workflows&lt;/strong&gt; — simple, visual, and easy to use.&lt;/p&gt;

&lt;p&gt;I believe it could even be useful as a &lt;strong&gt;support tool for real investigations&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  Other use cases
&lt;/h2&gt;

&lt;p&gt;This app isn’t limited to detective work. It can also be used for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Escape games&lt;/strong&gt; — preparing puzzle materials&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Writing (novels, scripts)&lt;/strong&gt; — organizing character relationships and plot&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;TRPG / Murder Mystery games&lt;/strong&gt; — scenario design and session tracking&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Streaming (YouTube / TV)&lt;/strong&gt; — visualizing relationship maps&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Study / Research&lt;/strong&gt; — analyzing historical events or complex relationships&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;…and many other situations.&lt;/p&gt;




&lt;h2&gt;
  
  
  Tech Stack
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Technology&lt;/th&gt;
&lt;th&gt;Purpose&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;React&lt;/td&gt;
&lt;td&gt;Frontend framework&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Vite&lt;/td&gt;
&lt;td&gt;Build tool&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;React Flow (@xyflow/react)&lt;/td&gt;
&lt;td&gt;Canvas, nodes, and connections&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Tailwind CSS&lt;/td&gt;
&lt;td&gt;Styling&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Tauri&lt;/td&gt;
&lt;td&gt;Desktop app packaging&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  Desktop App
&lt;/h2&gt;

&lt;p&gt;You can run it as a web app with &lt;code&gt;npm run dev&lt;/code&gt;,&lt;br&gt;
or build it as a desktop app using Tauri.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Run multiple instances simultaneously (compare different cases)&lt;/li&gt;
&lt;li&gt;Works offline&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Download the Windows (.exe) version here:&lt;br&gt;
&lt;a href="https://github.com/apu-and-opu/sousa/releases/latest" rel="noopener noreferrer"&gt;https://github.com/apu-and-opu/sousa/releases/latest&lt;/a&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  Note: Windows warning when running the .exe
&lt;/h3&gt;

&lt;p&gt;When running the app on Windows, you may see a warning like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“Windows protected your PC”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This does &lt;strong&gt;not&lt;/strong&gt; mean the app is unsafe.&lt;br&gt;
It appears because Windows (Microsoft Defender SmartScreen) treats it as an app from an unknown publisher.&lt;/p&gt;

&lt;p&gt;This is common for indie-developed applications.&lt;/p&gt;

&lt;p&gt;To run the app:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Click &lt;strong&gt;“More info”&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;Click &lt;strong&gt;“Run anyway”&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  Open Source (OSS)
&lt;/h2&gt;

&lt;p&gt;The project is open source on GitHub:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/apu-and-opu/sousa" rel="noopener noreferrer"&gt;https://github.com/apu-and-opu/sousa&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;License: &lt;strong&gt;AGPL-3.0&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Final thoughts
&lt;/h2&gt;

&lt;p&gt;Investigation boards are a niche tool — but a very useful one.&lt;/p&gt;

&lt;p&gt;Whether for real investigations, creative work, games, or research,&lt;br&gt;
I hope this helps anyone who wants to &lt;strong&gt;organize complex relationships in a clear and visual way&lt;/strong&gt;.&lt;/p&gt;

</description>
      <category>opensource</category>
      <category>react</category>
      <category>webdev</category>
      <category>productivity</category>
    </item>
  </channel>
</rss>
