https://github.com/ShokoAnime/Shoko-WebUI
Repository for the Web UI used in Shoko Server.
https://github.com/ShokoAnime/Shoko-WebUI
anidb anime management react
Last synced: 1 day ago
JSON representation
Repository for the Web UI used in Shoko Server.
- Host: GitHub
- URL: https://github.com/ShokoAnime/Shoko-WebUI
- Owner: ShokoAnime
- Created: 2016-08-09T08:58:07.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2026-07-07T05:58:42.000Z (8 days ago)
- Last Synced: 2026-07-07T07:22:48.840Z (8 days ago)
- Topics: anidb, anime, management, react
- Language: TypeScript
- Homepage:
- Size: 16.6 MB
- Stars: 73
- Watchers: 8
- Forks: 34
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Agents: AGENTS.md
Awesome Lists containing this project
- stars - Shoko-WebUI
README
# Shoko WebUI
**Shoko WebUI** is the next-generation frontend for the [Shoko Anime Management Server](https://shokoanime.com/). Built with speed and modern aesthetics in mind, it provides a seamless experience for managing your anime collection, exploring metadata, and configuring your server.
## 🚀 Features
* **Modern Stack**: [React 19](https://react.dev/), [Vite](https://vitejs.dev/), [Tailwind CSS](https://tailwindcss.com/), [Redux Toolkit](https://redux-toolkit.js.org/), and [React Query](https://tanstack.com/query).
* **Fast**: Optimized build times and runtime performance.
* **Responsive**: Designed to look great on desktop and mobile.
* **Real-time**: Leverages SignalR for live updates from the server.
## 🛠️ Prerequisites
* **Node.js**: >=22 (LTS recommended)
* **Package Manager**: `pnpm` (This project **strictly** uses pnpm. Do not use `npm` or `yarn`.)
* **Shoko Server**: A running instance of Shoko Server (locally or remote).
## ⚡ Quick Start
1. **Clone the repository**
```bash
git clone https://github.com/ShokoAnime/Shoko-WebUI.git
cd Shoko-WebUI
```
2. **Install dependencies**
```bash
pnpm install
```
3. **Start the development server**
```bash
pnpm start
```
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
## 🏗️ Architecture
The WebUI is a client for the Shoko Server API. It manages global UI state via Redux Toolkit, caches server data with React Query, and receives real-time updates through SignalR.
## 💻 Development
### Key Commands
| Command | Description |
| :--- | :--- |
| `pnpm start` | Runs the app in development mode. |
| `pnpm build` | Builds the app for production to the `dist/` folder. |
| `pnpm build:debug` | Creates a development build. |
| `pnpm lint` | Runs the full verification chain: `dprint` → `oxlint` → `stylelint`. |
| `pnpm tscheck` | Runs TypeScript checks (`tsc --noEmit`). |
| `pnpm oxlint:fix` | Automatically fixes Oxlint errors. |
| `pnpm dprint:fix` | Formats code using dprint. |
### Configuration
If your Shoko server is running on a different machine or port:
1. Copy `proxy.config.default.js` to `proxy.config.js`.
2. Edit `proxy.config.js` and set the `target` to your Shoko Server URL (e.g., `http://192.168.1.50:8111`).
## 🤝 Contributing
We are always accepting help, and there are a million little things that always need done. Hop on our [discord](https://discord.gg/vpeHDsg) and talk to us. Communication is important in any team. No offense, but it's difficult to help anyone that shows up out of nowhere, opens 3 issues, then creates a PR without even talking to us. We have a wealth of experience. Let us help you...preferably before the ADHD takes over, you hyperfixate, and you come up with a fantastic solution to problem that isn't at all what you expected. Support is also best found in the discord, in case you read this far.
