Loading Projects...
Back to Projects
ShiroAni
Personal anime browser and tracker. Search, track, and organize your watchlist with a built-in browser, Discord Rich Presence, and community bot.
Electron
React
TypeScript
NestJS
Prisma
Zustand
Discord.js
Tailwind CSS
Discord Rich Presence
In Progress
Duration: Ongoing
Project Overview
ShiroAni is an Electron desktop app for anime fans who want a dedicated tool to browse, track, and organize their watchlist. It features a built-in browser for watching anime, Discord Rich Presence integration to share what you are currently watching, and a community Discord bot.
The app is built with a full TypeScript stack: React and Zustand on the frontend, NestJS and Prisma on the backend, and discord.js powering the community bot. It is live and accessible at shiroani.app.
ShiroAni started as a personal project to replace scattered browser tabs and tracking spreadsheets with a single, purpose-built application. Building a browser inside Electron taught a lot about session management, CSP headers, and the quirks of the webview tag.
Key Features
- Built-in anime browser with session management
- Watchlist tracking and organization
- Discord Rich Presence for current activity
- Community Discord bot integration
- Search and discover anime titles
- Cross-platform desktop application
- Local-first data with cloud sync capabilities
Technical Details
Technology Stack
E
ElectronR
ReactT
TypeScriptN
NestJSP
PrismaZ
ZustandD
Discord.jsT
Tailwind CSSV
ViteArchitecture
ShiroAni follows a monorepo structure with an Electron main process running a NestJS backend, a React renderer for the UI, and a separate Discord bot service. The built-in browser uses Electron webview with custom session management and CSP handling.
Challenges & Solutions
Challenge: Embedding a browser inside Electron with proper isolation
Solution: Went through multiple iterations. Tried native overlays, DOM elements, and the deprecated webview tag. The "deprecated" approach turned out to be the most reliable for session management and CSP compliance.
Challenge: Real-time Discord Rich Presence synced with viewing activity
Solution: Built a bridge between the Electron main process and Discord RPC to update presence automatically when the user starts or stops watching anime
Challenge: Managing community features alongside the desktop app
Solution: Separated the Discord bot into its own service within the monorepo, sharing types and utilities with the main app while running independently
Related Projects
AutoMaker
Autonomous AI development studio that orchestrates Claude agents to implement features on a Kanban board. My first open-source project, built with a team of 4. Over 3,000 stars in 2 months.
Electron
React
TypeScript
+12 more
Omniscribe
Desktop app for running and managing up to 12 AI coding assistant sessions in parallel, with per-session terminals, git worktrees, and MCP configs.
Electron
TypeScript
React
+7 more
Shiranami
A local-first music player for your own library. Like Spotify, but for files you already have. Live at shiranami.app.
TypeScript
React
Electron
+3 more