An interactive virtual aquarium that visualizes real-time cryptocurrency transactions through marine creatures. Each transaction on Binance transforms into a different creature based on transaction volume, creating a unique and immersive experience for monitoring the crypto market.

This project was entirely created during "vibe coding" sessions and has not undergone any code review process. This is an experimental/fun project and does not represent my professional development standards or work quality as a software developer. The code may contain bugs, performance issues, or architectural decisions that wouldn't be acceptable in a production environment.

BitOcean transforms abstract cryptocurrency market data into a visual and intuitive experience. Each real-time transaction from Binance is represented by a specific marine creature, where:

• 🦐 Shrimp: Small transactions (< 1 unit)
• 🦀 Crab: Low transactions (1-10 units)
• 🐙 Octopus: Medium transactions (10-50 units)
• 🐟 Fish: Moderate transactions (50-100 units)
• 🐬 Dolphin: Large transactions (100-500 units)
• 🦈 Shark: Very large transactions (500-1000 units)
• 🐋 Whale: Huge transactions (1000-5000 units)
• 🐋 Humpback Whale: Gigantic transactions (>5000 units)

• Play/Pause: Pause or resume transaction visualization
• Sound: Enable/disable sound effects (special alerts for whales)
• Clear Stats: Reset all statistics and creatures

• Market Sentiment: Visual proportion between buys (🟢) and sells (🔴)
• Market Velocity: Trades per minute with visual indicators
• Volume Analysis: Comparison between current and historical volumes
• Pattern Alerts: Automatic detection of significant movements

• Cryptocurrency Selection: 8 pre-configured popular pairs
• Custom Pairs: Add any Binance pair (e.g., LINKUSDT)
• Creature Filters: Enable/disable specific creature types
• Responsive Interface: Optimized for desktop and mobile

• Mobile-First: Sidebar automatically collapses on mobile devices
• Adaptive Navbar: Elements reorganize based on screen size
• Touch-Friendly Controls: Interface optimized for touch

• Node.js 18+
• npm, yarn, pnpm or bun

1. Clone the repository

git clone https://github.com/breim/bitocean.git
cd bitocean

2. Install dependencies

npm install
# or
yarn install
# or
pnpm install
# or
bun install

3. Run the development server

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

4. Open in browser

http://localhost:3000

The application will automatically reload when you make changes to the files.

npm run dev      # Start development server with Turbopack
npm run build    # Generate production build
npm run start    # Start production server
npm run lint     # Run lint verification

• Next.js 15.3.5 - React framework with App Router
• TypeScript - Static typing for JavaScript
• Tailwind CSS 4 - Utility-first CSS framework

• Binance WebSocket API - Real-time transaction data
• Native WebSocket - Real-time connections for multiple pairs

• Custom Hooks - Modular state management
• Canvas/CSS Animations - Smooth creature animations
• Web Audio API - Sound effects for special events
• LocalStorage - User preferences persistence

bitocean/
├── public/                 # Public files
│   ├── aquarium-background.png
│   └── *.svg
├── src/
│   ├── app/               # App Router (Next.js 13+)
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/        # React Components
│   │   ├── analytics-panel.tsx
│   │   ├── aquarium.tsx
│   │   ├── creature.tsx
│   │   ├── crypto-aquarium.tsx
│   │   ├── sidebar.tsx
│   │   └── top-navbar.tsx
│   ├── hooks/            # Custom Hooks
│   │   ├── use-aquarium-sounds.ts
│   │   ├── use-binance-websocket.ts
│   │   ├── use-creature-spawner.ts
│   │   └── use-market-analytics.ts
│   ├── lib/              # Utilities
│   │   └── creature-classifier.ts
│   └── types/            # TypeScript Definitions
│       └── creature.ts
├── package.json
├── tsconfig.json
├── tailwind.config.js
└── next.config.ts

• Multiple simultaneous connections for different cryptocurrency pairs
• Automatic reconnection with exponential backoff
• Connection state management per pair
• Circular buffer for historical data analysis

• Sliding windows of volume (1min, 5min, 15min)
• Automated pattern detection (whale clusters, volume spikes)
• Real-time market velocity calculation
• Smart alerts based on dynamic thresholds

• Dynamic spawning of creatures based on real transactions
• Physical movement with collision and basic physics
• Automatic lifecycle management of creatures
• Visual effects like bubbles and waves

• Circular buffer for optimized performance
• Data aggregation in multiple time windows
• Anomaly detection in volume and velocity
• Real-time visualization of complex metrics

Since this is a vibe coding project without formal code review, contributions are welcome but please keep in mind the experimental nature of the codebase.

1. Fork the project
2. Create a branch for your feature (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

• Check your internet connection
• Some corporate firewalls may block WebSockets
• Use a VPN if necessary

• Reduce the number of active cryptocurrency pairs
• Use pause mode when not watching
• Disable specific creatures in filters

This project is under the MIT License. See the LICENSE file for details.

Developed with ❤️ as a fun experiment in vibe coding

Note: This project represents a casual coding session and should not be considered as a demonstration of professional development practices.

• Binance for the free WebSocket API
• Next.js Team for the incredible framework
• Tailwind CSS for the design system
• Open Source Community for inspiration and feedback

⭐ If this project helped you or you found it interesting, please leave a star! ⭐

Remember: This is an experimental project created for fun and learning purposes! 🚀