Project Overview

Imaginary World serves as the functional heart of the Imaginary Ones ecosystem, expanding the original NFT collection into a full Web3 gaming ecosystem with staking, rewards, and partner campaign integrations. The platform facilitates the circulation of the $BUBBLE token, allowing users to stake their NFTs and partner collections to collect rewards, help shape the project’s future, and access exclusive ecosystem perks. It acts as the bridge between the mobile gaming suite (Bubble Rangers) and the on-chain financial layer.

Role & Responsibilities

As a Fullstack Web3 Developer on a team, I primarily focused on building and maintaining the frontend experience of the Imaginary World platform. My work involved developing user interfaces, implementing application logic, and integrating backend APIs and blockchain functionality to support staking systems, rewards, and campaign mechanics.

In addition to frontend development, I also contributed to backend services and blockchain-related features, collaborating closely with frontend, backend, and smart contract developers to deliver a cohesive Web3 application. My responsibilities included ensuring responsive UI behavior across devices, validating feature functionality, and optimizing performance for a smooth user experience.

Tech Stack Used

The platform was designed to support a real-time Web3 ecosystem, requiring a stack optimized for performance, scalability, and secure blockchain interaction.

Frontend & UI Architecture

Built with Vue 3, Vuetify, and SCSS, the frontend architecture focused on modular UI components and responsive layouts, enabling reusable campaign interfaces and consistent theming across both desktop and mobile environments.

Backend Infrastructure

The backend architecture, built with NestJS on Node.js, exposed structured APIs that the frontend integrated with for carnival games, campaign logic, and reward distribution.

State Management

Pinia manages the global application state, ensuring synchronized updates for staking balances, rewards, and user interactions across the entire interface.

Blockchain & Smart Contracts

Ethereum/EVM integration implemented with Viem and Ethers.js enables secure, high-precision contract interactions, with the core protocol logic written in Solidity.

Key Contributions

My contributions to this project include:

• Developed and maintained the core frontend interface for the Imaginary World platform, delivering responsive and interactive user experiences optimized for both desktop and mobile environments.
• Implemented frontend application features and API integrations that powered campaign mechanics, dynamic data rendering, and real-time user interactions.
• Integrated blockchain functionality into the frontend, enabling NFT and token staking flows, reward distribution, airdrops, and preorder campaign participation.
• Developed gamified user interfaces and mechanics (such as Wheel games and Gashapon systems) for the Imaginary Carnival ecosystem, supporting campaigns with brands including Shiba Inu, Pucca, and others.
• Designed modular and reusable UI components to support multiple campaign experiences, improving scalability and enabling faster development of new features and partner campaigns.
• Optimized frontend performance and responsiveness through efficient rendering strategies, layout optimization, and asset management to ensure smooth experiences across devices.

App Demo & Screenshots

The following screens showcase key user flows within the Imaginary World platform, including wallet connection, NFT staking, reward claiming, and gamified campaign experiences.

Staking & Rewards

Carnival Games & Campaigns