DEV Community: Ivan Manernyi

LazyCats Intranet Portal

Ivan Manernyi — Sun, 27 Jul 2025 08:00:00 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What i built

LazyCats intranet portal: where work feels like play

At my workplace, we use a legacy corporate CRM - honestly, it feels ancient. That got me thinking: what if we could transform boring work routines into an engaging adventure? I've always dreamed of being at the forefront of a company that builds amazing games, and little by little, I’m working towards that vision. Now, I’m excited to share with you the prototype of LazyCats - a game developer’s intranet portal!

Design philosophy: Game Development from the Inside Out
Imagine: you’re a game developer, building intricate, vibrant worlds every day - places where people love the journey, the interactions, and the challenges. Then you log into your company system, and... the fun evaporates. I wanted to break this stereotype.
LazyCats Intranet is crafted as a genuine game ecosystem. Every employee has a level (our protégé John Willson is already at level 42!), gains experience, and earns achievements. Here, achievements aren’t just digital badges - they represent real recognition of one’s contribution to the team and the company’s growth.

The architecture of experience
Dark gradients, smooth transitions, sleek icons - my goal was to make everything feel more like a premium game than another forgettable office app.
Each section has its own vibe:

• The Dashboard greets you with a warm welcome and fresh stats.

• Team showcases your “guild” of developers, their skills and roles.

• Tasks turns planning into a strategy game.

• The Knowledge Base is a spellbook library (read: documentation).

• Cards - yes, LazyCats includes collectible cards with real in-company perks employees can use!

• News page with comments block.

• A profile page where the employee can track completed courses, their activity, achievements, experience history, and skills.

• A page for tracking the company's stock price.

• A company chat with group-based channels.

• A page with a set of tools that simplify corporate life.

Tech magic
Under the hood: Nuxt 3 (Vue 3). Tailwind CSS 4 brings flexibility to the design, while the auto-animate plugin adds those smooth transitions everyone loves.
One standout feature is Presentation Mode. See that ▶️ button? It’s not just for show (though it’s not fully wired up everywhere yet - still a work in progress). Click it, and a component comes to life, revealing new data or showcasing what’s possible.

What I wanted to achieve
My main goal was to create a system employees actually want to use (instead of dreading every new notification). I want checking tasks or reading company news to feel like a micro-reward.
It’s an ecosystem of motivation: every action gives experience, every achievement is celebrated, every employee can see their progress - just like in an RPG, only in real life. Of course, this is just a prototype, but I’ve tried to bring it as close as possible to my true vision. The emotional side - that’s what makes LazyCats special.

The Result
The result is a portal that reflects the culture of our (so far, fictional) company, sending a clear message: we’re not just coding - we’re creating experiences. And that experience starts with your very first click on our little cat logo. 🐱

Demo

DEMO
CODE

Journey

The cats didn’t appear by accident. Lazy Cats is a perfect metaphor for developers, isn’t it? We may seem lazy, but in reality, we’re just conserving energy for what truly matters. Besides, who would say no to a company intranet with cats in the logo?

Technical Solutions I’m Proud Of

Nuxt

In short, I really liked Nuxt 3. It’s built on Vue 3 and comes with everything you’d normally have to set up manually: routing, server-side rendering, TypeScript, and module integration - all out of the box. That saves a lot of time, allowing me to focus more on logic and UI instead of spending hours on infrastructure. It’s also super convenient that changes appear instantly thanks to hot reload, and page generation is fast and predictable. Sure, not everything is perfect - I did run into some truly bizarre bugs in my production projects - but overall, the experience has been positive, and working with Nuxt just feels comfortable.

Gamification without overkill
The core feature of the project is subtle gamification. No loud pop-ups shouting “CONGRATS, YOU GOT +10 XP!” Instead, it’s all about delicate touches: user levels, an achievement system, smooth animations. Everything is integrated so naturally that it feels like a native part of the UI.

Composables as the soul of the app
What I’m most proud of is the composables-based architecture. Every piece of logic has its own home: useTeamData, useAchievements, useStockData. This isn’t just modularity - it’s a philosophy. Want to add a new feature? Create a composable. Need to tweak the logic? Open the relevant file. Clean and beautiful.

Corporate tools system
Restroom monitor, climate control, parking spot tracking - these features came from the idea that an intranet should solve real-world office problems. It may sound absurd, but imagine: no more bathroom queues or thermostat wars!

A Story of how 8GB of RAM per site taught me to listen to my computer

Here comes the most dramatic part of the story. I was working on a modal image optimization component - modal-image-optimizer.client. The goal was simple: when a user opens a card, the image inside should be reloaded in high quality. So I wrote a function called forceImageQuality, added a bunch of event listeners - everything worked flawlessly.

Testing went great. Cards opened, images looked crisp. Beautiful. I committed the code and went to make some tea.

A few days later, I was polishing the card animations. I opened one card, then another, then a third… and suddenly, I heard it - my computer roaring like a Boeing at takeoff. At first I thought, “Eh, must be something in the background.” I hovered my mouse over the app tab and...

The browser tab was using 8 gigabytes of RAM. Eight, Carl! My poor PC was weeping blood, fans blasting at full throttle.

I jumped into debugging. Opened DevTools → Memory tab - and there it was: a sea of orphaned event listeners stuck in memory. I had assumed JavaScript would just clean up everything. Rookie mistake.

Turned out, in the forceImageQuality function I was adding a load event listener to every image - but never removed it after execution. Each time a card opened, another handler got stuck in memory. And since I was opening cards constantly while developing…

// What I had (bad):
image.addEventListener('load', handleLoad);

// What it should’ve been (good):
image.addEventListener('load', handleLoad);
// ... and later:
image.removeEventListener('load', handleLoad);

One simple removeEventListener line - could’ve saved hours of suffering. Lesson learned: what you add, always remove. Memory is not infinite.

Alibaba's Robot Workshop

Ivan Manernyi — Sun, 27 Apr 2025 15:31:48 +0000

This is a submission for the Alibaba Cloud Challenge: Build a Web Game.*

What I Built

I've created "Alibaba's Robot Workshop" - an engaging web-based robot-building simulation game where players collect parts, assemble customized battle robots, and compete in arena battles. The game combines resource management, strategic decision-making, and turn-based combat mechanics in a futuristic setting.
Players start with initial credits to purchase robot parts from a dynamic auction system. They can collect various components like heads, bodies, arms, legs, and weapons - each with unique stats and capabilities. After assembling their robots, players can test their creations in the arena against AI opponents. Winning battles rewards players with credits and parts from defeated robots, while losing results in the destruction of their robot and its components - creating a high-stakes gameplay experience.

Demo

The game is deployed at: http://47.236.224.7. You need to complete registration to play.

Alibaba Cloud Services Implementation

Elastic Compute Service (ECS)

Alibaba's Robot Workshop is deployed on Alibaba Cloud's Elastic Compute Service, which proved to be the backbone of my implementation strategy. I chose ECS for several compelling reasons:

Implementation Details:

Deployed the application on an ECS instance running Ubuntu 20.04 64 bit.
Set up Nginx as a reverse proxy to handle HTTPS connections and serve static assets.
Configured PM2 process manager to ensure the Node.js application runs continuously with auto-restart capabilities.
Implemented automatic daily backups of game data using Alibaba Cloud's snapshot feature.

Integration Benefits:

Seamless scalability allowed me to start with a modest instance size and scale up as the player base grew.
The high-performance storage provided exceptional database I/O performance, crucial for the real-time auction system.
Regional deployment flexibility enabled me to position the game server geographically close to the primary player base, minimizing latency.

ApsaraDB RDS with MySQL 8.0

For the game's database needs, I implemented ApsaraDB RDS for MySQL 8.0, which has been crucial for maintaining game state, user accounts, and the complex relationships between players and their robot inventories.

Implementation Details:

Set up a MySQL 8.0 RDS instance with high-availability architecture
Implemented automated daily backups.
Utilized built-in data encryption for protecting sensitive player information.
Configured read/write splitting to optimize performance during peak playing periods.
Implemented performance monitoring and automatic alerts for unusual database activity.

Integration Benefits:

The fully managed service eliminated the need for manual database administration, allowing me to focus on game development.
Automatic software updates ensured the database constantly ran the latest security patches without downtime.
The high throughput capabilities handled auction system transactions flawlessly, even during concurrent player activities.
Horizontal scaling features provided peace of mind for future growth without architectural changes.

Challenges & Solutions:

Initially faced some configuration complexities when setting up the domain and SSL certificates, but Alibaba's documentation provided clear step-by-step guidance.
During development, I needed to fine-tune network security groups to properly expose only necessary ports while maintaining robust security.
Had to optimize the Node.js memory usage to stay within the allocated resources, which led to improved overall application efficiency.

The ECS service proved remarkably reliable with 99.99% uptime during the three-month development and testing phase, and the performance metrics have consistently shown sub-300ms response times even during peak gaming hours.

Game Development Highlights

Multi-language Support: One of the features I'm particularly proud of is the implementation of a robust internationalization system that supports English, Russian, and Chinese languages, making the game accessible to a broader global audience. The system dynamically loads language resources and allows seamless switching between languages without page refreshes.

Dynamic Auction System: The game features a real-time auction system where robot parts appear and expire at regular intervals. This creates an engaging shopping experience where players must make quick decisions about purchases. The auction algorithm dynamically prices parts based on their quality, rarity, and statistical properties.

Tactical Combat System: The turn-based battle arena implements a sophisticated damage calculation system that considers numerous factors including armor ratings, weapon types, attack locations, and resistance values. This creates strategic depth where players must consider both offensive capabilities and defensive vulnerabilities when building their robots.

The development of Alibaba's Robot Workshop was not only a technical challenge but also a creative journey in game balancing and user experience design. The combination of Nuxt.js + Vue 3 for the frontend, MySQL for persistent data storage, and Alibaba Cloud's robust ECS service resulted in a performant and engaging gaming experience.

By submitting this entry, I agree to receive communications from Alibaba Cloud regarding products, services, events, and special offers. I understand I can unsubscribe at any time and that my information will be handled in accordance with Alibaba Cloud's Privacy Policy.