How to vibe codeHabbo

Prerequisites

• Node.jsfree

  Required for running the full-stack web application framework and local development server.

• GitHubfree

  To store source code and deploy directly to hosting providers.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding full-stack applications and writing complex real-time socket logic.

• Cursor

  Ideal for fine-tuning frontend isometric canvas math and component styling with inline AI edits.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, set up better-auth for simple user credentials, and configure Turso with SQLite tables for users, rooms, inventories, and placed furniture items.

   Initialize a full-stack Next.js project with Tailwind CSS. Set up better-auth for user registration and login with email/password stored in a Turso SQLite database. Create database schema migrations for users (id, username, avatar_config, credits), rooms (id, owner_id, name, description, layout_json), inventories (id, user_id, furni_id), and placed_furni (id, room_id, furni_id, x, y, z, rotation). Ensure proper foreign key constraints and provide seed data for a few basic items.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Isometric Room Renderer Canvas

   Build an HTML5 Canvas or CSS isometric grid component that renders room tiles, walls, and allows camera panning and zooming.

   Create a React component using an HTML5 Canvas that renders an isometric grid floor and walls for a virtual room. Implement mouse-based tile hover detection, coordinate calculations for isometric projection (converting screen x/y to grid x/y), and basic camera panning and zooming controls. Make it responsive and style the surrounding UI with a retro Habbo-inspired pixel aesthetic using Tailwind CSS.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Real-Time WebSocket Server & Pathfinding

   Set up a Node.js companion backend with Socket.io to manage room state, user connections, and simple grid-based movement pathfinding.

   Build a Node.js companion server using Express and Socket.io that handles real-time room entry, leaving, and avatar position synchronization. Implement a basic A* or direct-line grid pathfinding algorithm on the server so when a user clicks a floor tile, their avatar smoothly steps across intermediate grid tiles to the destination, broadcasting movement packets to all other clients currently inside the same room socket room.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Live Chat Bubble System

   Implement real-time chat message broadcasting with floating speech bubbles above avatars inside the active room.

   Add a real-time chat feature to the Socket.io server and React client. When a user types a message in the room chat input bar and hits enter, broadcast the message to all clients in that room. Render the message as a floating speech bubble directly above the speaker's avatar on the isometric canvas, ensuring messages fade out after 5 seconds or stack neatly if multiple messages arrive concurrently.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Room Editor & Furniture Placement

   Build a catalog and inventory drawer allowing users to place, rotate, and pick up furniture items inside their owned rooms.

   Build a room editing mode for room owners. Add an inventory drawer UI that lists furniture items owned by the user. Allow users to select an item, preview its footprint on the isometric grid, and place it by clicking a valid tile. Send placement events to the Socket.io server to update room state and persist items to the database. Include options to rotate items 90 degrees and pick them back up into inventory.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Habbo