We turn music into immutable art. It's Web3's first community-powered musical signature generator — mintable, shareable, tradable... And give them full ownership of their creation through NFTs.
To become the leading platform for inclusive, creative, and immersive musical experiences on the Web3 space — where music, visual art, and technology converge to empower both artists and audiences worldwide.
BlockBeats 3.0 is committed to democratizing access to music creation and NFT monetization, fostering innovation in audiovisual expression, and enabling new forms of interaction through cutting-edge technologies.
- 🎨 Music Drawing Machine: Compose 8-bit melodies as pixel-art with MIDI compatibility
- 🥁 Drum Designer Machine: Create custom drum patterns with an intuitive grid interface
- 🎹 MIDI Support: Connect your MIDI controller for professional music creation
- 🎵 Real-time Playback: Hear your creations instantly with tempo control
- Pixel Art Generation: Transform musical notes into beautiful pixel art
- Frequency Visualization: See your music in stunning visual representations
- Color Mapping: Each note creates unique colors and patterns
- Interactive Canvas: Click to compose, draw to create
- 🤖 Evolving Avatars: 10 unique character phases that evolve with your progress
- 📊 Stats Tracking: Energy, Creativity, XP, and Level progression
- 🎁 Reward System: Earn BBC Coins and unlock new features
- 🎉 Level Up Animations: Celebratory effects and sound design
- 🎲 Vegas Mint Game: Spin to win rewards and special items
- 📅 Daily Rewards: Login bonuses and streak rewards
- 🏅 Achievement System: Unlock badges and special recognition
- 💎 Premium Features: Advanced tools for power users
- 🎵 Musical NFTs: Mint your creations as unique digital assets
- 🔄 Trading System: Buy, sell, and trade musical NFTs
- 📚 Collections: Organize your NFTs into themed collections
- 🌟 Top Collections: Discover trending and popular creations
- 👥 Community Gallery: Explore creations from other artists
- 🔗 Starknet Network: Built on Starknet for fast, cheap transactions
- 👛 Wallet Support:
- Argent X - Secure and user-friendly
- Braavos - Advanced features and security
- 🔐 Decentralized Identity: Own your creations with true Web3 ownership
- 💱 Token Economics: BBC Coins for in-app rewards and features
- 🚀 Vercel Analytics: Real-time performance metrics and user behavior
- 📈 Google Analytics 4: Comprehensive user journey tracking
- 🎵 Music Creation Analytics: Track machine usage and creation patterns
- 🖼️ NFT Activity Tracking: Monitor minting, trading, and marketplace interactions
- 🎮 Gamification Metrics: Level progression, rewards, and engagement
- 👛 Wallet Connection Analytics: Track Web3 adoption and usage patterns
- 🔒 Privacy-First: GDPR compliant with no personal data collection
- Next.js 14 - React framework with App Router
- TypeScript - Type-safe development
- CSS Modules - Scoped styling with animations
- Framer Motion - Smooth animations and transitions
- Starknet - Layer 2 scaling solution
- @starknet-react/core - React hooks for Starknet
- starknetkit - Wallet connection utilities
- Sepolia Testnet - Development and testing
- Firebase - Real-time database and authentication
- Firestore - Document-based data storage
- Firebase Auth - User management and security
- Web Audio API - High-quality audio processing
- MIDI.js - MIDI controller integration
- Custom Audio Engine - Optimized for real-time playback
- React Hot Toast - Beautiful notifications
- React Responsive Modal - Accessible modals
- React Avatar - User avatar generation
- Chart.js - Data visualization
- @vercel/analytics - Real-time performance and user analytics
- @next/third-parties - Optimized third-party script integration
- Google Analytics 4 - Advanced user behavior tracking
- Custom Event Tracking - BlockBeats-specific metrics
- Node.js 18+
- Yarn or npm
- A Starknet-compatible wallet (Argent X or Braavos)
- Clone the repository
git clone https://github.com/yourusername/blockbeats.git
cd blockbeats- Install dependencies
yarn install
# or
npm install- Set up environment variables
cp .env.example .env.local
# Add your Firebase and Starknet configuration- Run the development server
yarn dev
# or
npm run dev- Open your browser Navigate to http://localhost:3000
- Install Argent X or Braavos wallet
- Create or import your wallet
- Switch to Sepolia testnet
- Get testnet ETH from Starknet Faucet
BlockBeats includes comprehensive analytics to understand user behavior and optimize the platform:
- Machine Usage: Track which music creation tools are most popular
- Creation Patterns: Monitor tempo preferences, frequency ranges, and style choices
- Session Duration: Measure time spent in creative sessions
- MIDI Integration: Track hardware controller usage
- Minting Activity: Monitor NFT creation rates and trends
- Trading Volume: Track marketplace interactions and transactions
- Collection Growth: Measure user collection building behavior
- Popular Genres: Identify trending music styles and patterns
- Level Progression: Track user advancement through character levels
- Reward Engagement: Monitor daily rewards and achievement completion
- Vegas Game Activity: Measure engagement with gamification features
- Retention Metrics: Track user return rates and session frequency
- Wallet Connections: Monitor Argent X vs Braavos usage
- Network Activity: Track Starknet transaction patterns
- User Onboarding: Measure Web3 adoption and learning curves
- Cross-Platform Usage: Track desktop vs mobile engagement
- ✅ Zero Configuration - Works immediately after deployment
- 📊 Real-time Dashboard - Available in Vercel project settings
- 🚀 Performance Metrics - Core Web Vitals and loading times
- 👥 User Insights - Geographic distribution and device usage
- Create GA4 Property at analytics.google.com
- Get Measurement ID (format:
G-XXXXXXXXXX) - Add Environment Variable:
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
- Deploy - Analytics will start collecting data immediately
// Example: Track music creation
const { trackMusicCreation } = useBlockBeatsAnalytics();
trackMusicCreation('drawing'); // Tracks drawing machine usage
// Example: Track NFT minting
const { trackNFTCreation } = useBlockBeatsAnalytics();
trackNFTCreation('My Song', 'drawing', 120); // Tracks NFT creation- GDPR Compliant: No personal data collection
- Privacy-First: Wallet addresses are hashed for anonymity
- Opt-Out Ready: Users can disable tracking if needed
- Data Minimization: Only essential metrics are collected
- Daily Active Users (DAU)
- Music Creation Rate (NFTs minted per day)
- User Retention (7-day, 30-day)
- Wallet Connection Rate
- Average Session Duration
- Feature Adoption Rate
- Click "Connect Wallet" in the navigation
- Choose between Argent X or Braavos
- Approve the connection
- Navigate to the Studio
- Select Music Drawing Machine
- Draw on the canvas to create melodies
- Adjust tempo and frequency ranges
- Save your creation as an NFT
- Browse community creations
- Play and preview musical NFTs
- Trade with other users
- Create collections
- Create more music to gain XP
- Watch your avatar evolve
- Earn BBC Coins and rewards
- Unlock new features
blockbeats/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── assets/styles/ # CSS Modules (organized)
│ │ │ ├── components/ # Component-specific styles
│ │ │ ├── layouts/ # Layout styles
│ │ │ └── pages/ # Page-specific styles
│ │ └── globals.css # Global styles
│ ├── components/ # React components (organized)
│ │ ├── features/ # Feature components
│ │ ├── layout/ # Layout components
│ │ ├── machines/ # Music creation tools
│ │ │ ├── drumDesigner/ # Drum machine
│ │ │ └── musicDrawingMachine/ # Pixel music creator
│ │ ├── modals/ # Modal components
│ │ └── ui/ # UI components
│ ├── context/ # React contexts
│ ├── hooks/ # Custom React hooks
│ ├── pages/ # Page components (organized)
│ │ ├── auth/ # Authentication pages
│ │ ├── dashboard/ # Dashboard pages
│ │ ├── marketplace/ # Marketplace pages
│ │ ├── studio/ # Studio pages
│ │ └── collections/ # Collection pages
│ ├── types/ # TypeScript definitions
│ └── utils/ # Helper functions
├── public/ # Static assets (organized)
│ ├── images/ # All images
│ │ ├── avatars/ # Character phases
│ │ ├── backgrounds/ # Background images
│ │ ├── logos/ # Logo files
│ │ ├── characters/ # Character images
│ │ ├── store/ # Store items
│ │ └── launchpad/ # Launchpad images
│ ├── sounds/ # Audio files
│ └── ...
└── firebase.ts # Firebase configuration
- Core music creation tools
- Basic NFT minting
- Wallet integration
- Character progression system
- Voice Music Machine - AI-powered voice-to-melody conversion
- Launchpad Machine - Sample triggering and loop creation
- Advanced MIDI Support - Full MIDI controller integration
- Social Features - Follow artists, like, and comment
- Mobile App - iOS and Android applications
- VR/AR Integration - Immersive music creation experience
- AI Collaboration - AI-assisted composition tools
- Cross-chain Support - Multi-blockchain compatibility
- Artist Marketplace - Professional tools for musicians
- Educational Platform - Music theory and Web3 tutorials
- Live Events - Virtual concerts and competitions
- DAO Governance - Community-driven platform decisions
- Virtual Worlds - 3D music creation environments
- Holographic Arena - Immersive performance spaces
- Drone Shows - Real-world music visualization
- Smart City Integration - Urban music experiences
We welcome contributions from the community! Here's how you can help:
- 🐛 Bug Reports - Help us identify and fix issues
- 💡 Feature Requests - Suggest new functionality
- 🎨 UI/UX Improvements - Enhance the user experience
- 🎵 Audio Assets - Contribute sounds and samples
- 📚 Documentation - Improve guides and tutorials
- 🌐 Translations - Help us reach global audiences
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow TypeScript best practices
- Use meaningful commit messages
- Add tests for new features
- Update documentation as needed
- 🥈 2nd Place - Starknet Hackathon 2024
- 🌟 Featured - Multiple Web3 music showcases
- 👥 1000+ - Community members
- 🎵 500+ - Musical NFTs created
- 🔥 Trending - On Starknet ecosystem
- 📊 100% - Analytics coverage across all features
- 🔒 GDPR Compliant - Privacy-first data collection
- ⚡ Real-time - Live performance monitoring
This project is licensed under the MIT License - see the LICENSE file for details.
- Starknet Foundation - For the amazing ecosystem and support
- Argent & Braavos - For excellent wallet solutions
- Firebase - For reliable backend infrastructure
- Community - For feedback, testing, and contributions
- Open Source - For the incredible tools and libraries
- Email: josegomez.dev@gmail.com
- Discord: Join our community
- Twitter: @blockbeats
- Website: https://blockbeats-tau.vercel.app/
Made with ❤️ by the BlockBeats Team
Turning music into immutable art, one pixel at a time.