Meana Raptor - Web3.0 ecosystem
A modular Web3 platform combining blockchain, NFT commerce, and automated community tools.
Overview
Meana Raptor is a full Web3 ecosystem built to integrate blockchain with lifestyle experiences. It consists of multiple interconnected modules: an MRT token promotional site, NFT-powered golf merchandise store, staking and raffle platforms, and an automated Telegram bot for community updates. Each part of the system is managed via a robust Node.js-based admin dashboard that synchronizes product listings, raffle data, and announcements across the ecosystem.
Key Features
- •Interactive, animated landing page with hero graphics and voiceover-guided CTAs ('Buy Token' & 'Stake Now').
- •Dynamic story-driven 'Lore' and 'Vision' sections designed as comic book pages with animations and audio narration.
- •Feature tabs for Tokenomics, Staking, NFT Marketplace, Online Store, and Raffle — each with responsive, data-driven layouts.
- •Merchandise section connected to NFT-based product logic with token-linked purchase options.
- •Dynamic FAQ page with collapsible, auto-closing answers for smooth UX.
- •Telegram bot integration for real-time merchandise updates, AMA announcements, and raffle winner notifications.
- •Smart discount system: applies tier-based price reductions based on user’s MRT token holdings after wallet connection.
- •Admin dashboard to manage products, raffles, Telegram messages, and user engagement.
- •Scalable Next.js frontend architecture optimized for performance, animations, and modular content updates.
Challenges
- •Implementing synchronized communication between the web admin dashboard, e-commerce platform, and Telegram bot.
- •Building dynamic discount calculations based on on-chain MRT token balances using wallet connection.
- •Creating animated, voiceover-enabled storytelling sections that remain lightweight and performant.
- •Ensuring blockchain integrations (staking, wallet, raffle) remain secure while providing smooth UX for non-crypto users.
- •Maintaining design consistency and performance across multiple sub-platforms — token site, NFT store, and admin dashboard.
Solutions
- •Developed a unified backend API layer with Node.js and Express.js to manage product, raffle, and bot communication through secure routes.
- •Integrated Web3.js for wallet detection, token balance fetching, and real-time discount computation.
- •Used Next.js dynamic routing and modular components for scalable multi-section layouts (Hero, Lore, Features, etc.).
- •Implemented voiceover and hover-triggered animations via React hooks and controlled media elements to enhance interactivity.
- •Integrated Telegram.js API for automated bot messages including raffle results, new product alerts, and AMA posts.
- •Optimized asset loading and image management using Next.js Image component and caching strategies for better performance.
React
Next.js
TailwindCSS
Node.js
Express.js
MongoDB
Web3.js
Telegram.js