Rudder Cloud
Complex systems. Clear control.
Rudder Cloud Management Panel · Team project and open-source contribution
In active development
Source code on GitHubThe problem behind it.
Rudder Cloud brings container management, cloud backups, a live terminal and system updates into a shared workspace for developers and teams running their own servers. I worked on the interface, graphics performance and connection lifecycle.
Moving between tools complicates the management of sites, containers and backups. My work focused on combining a graphics-rich welcome scene and live terminal without adding unnecessary interface overhead.
I separated animation rendering from React state, cached repeated graphics work and treated terminal visibility separately from its connection lifecycle. I made update steps observable from the administrator interface.
- Next.js
- React 19
- TypeScript
- Tailwind CSS 4
- Canvas 2D
- xterm.js
- WebSocket
- Node.js
- Prisma
- SQLite / PostgreSQL
- Docker Engine API
- Linux systemd
What I built.
Canvas welcome scene
I developed a moving introduction with a ship, water rings and atmospheric vortices, using controlled automatic movement to support the panel’s visual identity.
Graphics and asset optimization
I separated animation from React re-renders and replaced repeated gradient generation with cached offscreen sprites. I reduced the ship asset from about 1.6 MB to 180 KB, approximately 89% smaller.
Retina and HiDPI support
I mapped Canvas coordinates to logical CSS pixels to keep dimensions and clarity consistent across pixel densities.
Updates from the panel
I developed version checks and a role-restricted update workflow, exposing code retrieval, dependencies, database migrations, build and service restart steps in the interface.
Live terminal, typography and language
I preserved the WebSocket session by keeping the terminal mounted when minimized. I also worked on a live-preview font selector and Turkish–English interface flows.
Inside the product.
Captured from the application. Open a screen to explore it in full.
Behind the decisions.
Independent rendering loop
I separated high-frequency animation from React state management.
Reusable graphics
Offscreen Canvas sprite caching replaces repeated per-frame calculations.
Visibility and connection lifecycle
Hiding the terminal is independent from closing its connection.
Observable updates
Role checks and step logs make system updates easier to follow.
Meet Rudder in the terminal.
Explore the product, my contributions and its technology with commands.
Explore the panel, its architecture and my contribution.
Type help to see the commands, or choose a shortcut below.
This console presents project information locally. It does not connect to a server.
Use Enter to run a command and the up/down arrow keys to browse command history.
What stayed with me.
A terminal that preserves its connection and an understandable update process contribute to the experience as much as smooth animation.
Museum Heist: Night Shift
Next project
