{"id":22298166,"url":"https://github.com/owengretzinger/symphony","last_synced_at":"2025-07-18T16:06:00.891Z","repository":{"id":265592189,"uuid":"896308865","full_name":"owengretzinger/symphony","owner":"owengretzinger","description":"Real-time multiplayer web app where you create drawings that get transformed into music","archived":false,"fork":false,"pushed_at":"2024-12-04T15:55:22.000Z","size":4596,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T03:14:05.520Z","etag":null,"topics":["chrome-extension","drawing","express","hackwestern","music","nextjs","openai","react","socket-io","suno-ai"],"latest_commit_sha":null,"homepage":"https://hackwestern-seven.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/owengretzinger.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-11-30T02:49:17.000Z","updated_at":"2025-02-10T11:30:27.000Z","dependencies_parsed_at":"2025-04-12T03:14:20.239Z","dependency_job_id":"5a8b0060-3cc5-4ea8-8d45-dfb984d976ba","html_url":"https://github.com/owengretzinger/symphony","commit_stats":null,"previous_names":["owengretzinger/hackwestern","owengretzinger/symphony"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/owengretzinger/symphony","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/owengretzinger%2Fsymphony","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/owengretzinger%2Fsymphony/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/owengretzinger%2Fsymphony/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/owengretzinger%2Fsymphony/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/owengretzinger","download_url":"https://codeload.github.com/owengretzinger/symphony/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/owengretzinger%2Fsymphony/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265791664,"owners_count":23829164,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome-extension","drawing","express","hackwestern","music","nextjs","openai","react","socket-io","suno-ai"],"created_at":"2024-12-03T17:59:59.873Z","updated_at":"2025-07-18T16:06:00.873Z","avatar_url":"https://github.com/owengretzinger.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Symphony\n\nReal-time multiplayer web app where you create drawings that get transformed into music. Built for HackWestern 11.\n\n## Demo\n\nhttps://github.com/user-attachments/assets/19c79cdc-0c84-4a63-b796-d89baff4029e\n\n## Screenshots\n\nFinal result example:\n![Final result example](https://github.com/user-attachments/assets/5fa060df-bac7-45b8-a42e-75451509b61b)\n\nHost panel that shows everyone's drawings live:\n![Host panel example](https://github.com/user-attachments/assets/77d3ab4d-6caf-44bc-a244-9bab5dcfc181)\n\nWhiteboard example:\n![Whiteboard example](https://github.com/user-attachments/assets/5ecf03fa-00cf-4a09-b5d1-00422edc8732)\n\n## Features\n\n- **Real-time Collaboration:** Players from different locations can play together simultaneously\n- **Drawing**: Collaborative drawing interface with multiple colors and eraser tools\n- **AI Integration**: Converts player drawings into song lyrics and music using AI\n- **Host Controls**: Special host interface to manage the game flow and view player drawings as they draw in real-time\n- **Beautiful UI:** Intuitive interface, repsonsive design for mobile, minimalistic UI, light \u0026 dark mode\n- **Take it Home:** After playing, you can download the song, the album cover, and all the drawings\n\n## Architecture\n\n![Architecture Diagram](https://github.com/user-attachments/assets/546f554e-483a-4c1f-b14e-382673fc4383)\n\n1. **Next.js Client** (`/frontend`): Web application that players use to draw and listen to the generated music\n2. **Express Websocket Server** (`/server`): Node.js server that handles game logic, AI integration, and real-time communication between players\n3. **Express Server** (`/song-generation-api/server`): Server that hosts the Chrome extension for Suno integration\n4. **Chrome Extension** (`/song-generation-api/extension`): Chrome extension that interacts with Suno to generate songs from lyrics (there's no official Suno API, and unofficial APIs did not work)\n\n## Tech Stack\n\n- **Frontend**:\n\n  - Next.js 15 (React)\n  - TailwindCSS\n  - Socket.IO Client\n  - Shadcn/UI Components\n\n- **Backend**:\n\n  - Socket Server (Node.js/TypeScript)\n  - Express\n  - OpenAI API Integration\n  - Socket.IO\n\n- **Extension**:\n  - Chrome Extension (JavaScript)\n  - WebRTC\n\n## Future Improvements\n\n- **Database Integration**: Store game data, drawings, and songs in a database\n- **User Accounts**: Allow users to create accounts and revisit songs they've created\n- **Robustness**: Improve error handling and edge case handling\n- **Suno Integration**: Ideally Suno releases an official API, otherwise host the Chrome extension using a headless browser (currently uses ngrok to expose localhost as a public URL)\n- **Custom Music Settings**: Allow users to vote on the genre\n\n## Getting Started\n\n1. Clone the repository\n\n2. Install dependencies:\n\n```bash\n# In frontend\npnpm install\n\n# In server\npnpm install\n```\n\n3. Set up environment variables:\n\n```bash\n# In frontend/.env\nNEXT_PUBLIC_SOCKET_SERVER_URL=\n\n# In server/.env\nOPENAI_API_KEY=\nSONG_API=\n```\n\n4. Run the development servers:\n\n```bash\n# In frontend\npnpm dev\n\n# In server\npnpm dev\n```\n\n5. Either mock the song link instead of calling the song generation API, or set up the song generation API server + Chrome extension\n\n## Game Flow\n\n1. Players join a lobby with nicknames\n2. Host starts the game\n3. Players create drawings simultaneously\n4. AI processes the drawings to generate lyrics\n5. System creates a song from the combined lyrics\n6. Players can listen to and download their creation\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fowengretzinger%2Fsymphony","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fowengretzinger%2Fsymphony","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fowengretzinger%2Fsymphony/lists"}