GitHub Audio - React Edition

A modern React + TypeScript + Vite reimplementation of the GitHub Audio project that converts real-time GitHub events into beautiful music and visualizations.

🎵 What is GitHub Audio?

GitHub Audio listens to events happening across GitHub and converts them into music notes and visual effects. Each type of GitHub event (pushes, issues, pull requests, etc.) produces different sounds and visual elements, creating a unique musical experience from the world's largest code repository.

✨ Features

• Real-time GitHub Events: Connects to live GitHub event streams via WebSocket
• Audio Generation: Different GitHub events trigger different musical notes
  • Push events → Celesta sounds
  • Issues/PRs → Clav sounds
  • Random swell sounds for ambiance
• Dual Visualization Modes:
  • 2D Mode: D3.js powered animations with colored circles for each event
  • 3D Mode: Three.js powered 3D space with colorful floating spheres, a realistic fireball sun, gravitational effects, and a stunning starfield with 10,000 realistically twinkling stars
• Interactive 3D Experience: Orbit controls for zooming, panning, and rotating the 3D scene with realistic gravitational pull animations
• Event Filtering: Filter events by organization or repository name
• Volume Control: Adjustable audio volume
• Responsive Design: Works on desktop and mobile devices
• Modern Architecture: Built with React, TypeScript, styled-components, and Vite

🛠️ Tech Stack

• Frontend Framework: React 18 with TypeScript
• Build Tool: Vite
• Styling: styled-components (CSS-in-JS)
• Audio: Howler.js
• 2D Visualizations: D3.js
• 3D Visualizations: Three.js (vanilla implementation for maximum compatibility)
• State Management: React Hooks
• WebSockets: Native WebSocket API

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/debugger22/github-audio.git
cd github-audio/react-app

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

5. Click the play button to start listening to GitHub's musical symphony!

Building for Production

npm run build

The built files will be in the dist/ directory.

🎮 How to Use

1. Start Listening: Click the large play button to begin
2. Choose Visualization Mode: Use the 2D/3D toggle in the bottom right corner
   • 2D Mode: Classic flat visualization with animated circles
   • 3D Mode: Immersive 3D space with floating spheres that are gradually pulled into a realistic fireball sun
3. Adjust Volume: Use the volume slider in the top right
4. Filter Events: Enter organization or repository names to filter specific events
5. 3D Navigation (3D mode only):
   • Mouse drag: Rotate the camera around the scene
   • Mouse wheel: Zoom in and out
   • Right-click drag: Pan the camera
6. Enjoy: Watch the visual effects and listen to the music generated by GitHub activity

🎨 Event Types & Sounds

🔧 Development

Project Structure

src/
├── components/          # React components
│   └── Visualization.tsx
├── hooks/              # Custom React hooks
│   ├── useAudio.ts     # Audio management
│   └── useWebSocket.ts # WebSocket connection
├── App.tsx             # Main application component
├── main.tsx            # Application entry point
└── index.css           # Global styles

Key Components

• App.tsx: Main application component with layout and state management
• Visualization.tsx: D3.js-powered visual effects component
• useAudio.ts: Custom hook for managing Howler.js audio
• useWebSocket.ts: Custom hook for GitHub event streaming

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🌐 Deployment

The app can be deployed to any static hosting service:

• Vercel
• Netlify
• GitHub Pages
• AWS S3 + CloudFront

🔗 Related Projects

• Original GitHub Audio - The original vanilla JavaScript version
• Rust Server - The backend WebSocket server

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Created by @debugger22

⚠️ Disclaimer

This project is not affiliated with GitHub Inc. in any way.

Media Attention

• The Next Web
• Product Hunt