{"id":18412497,"url":"https://github.com/boyney123/musix","last_synced_at":"2025-04-07T11:32:03.270Z","repository":{"id":39465284,"uuid":"197421486","full_name":"boyney123/musix","owner":"boyney123","description":"Song application built with React, Sockets and MongoDB","archived":false,"fork":false,"pushed_at":"2023-01-12T05:56:48.000Z","size":39350,"stargazers_count":7,"open_issues_count":43,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-22T17:11:24.957Z","etag":null,"topics":["api","mongodb","react","songs","websockets"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/boyney123.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}},"created_at":"2019-07-17T16:00:05.000Z","updated_at":"2021-12-30T13:47:11.000Z","dependencies_parsed_at":"2023-02-09T10:17:23.260Z","dependency_job_id":null,"html_url":"https://github.com/boyney123/musix","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boyney123%2Fmusix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boyney123%2Fmusix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boyney123%2Fmusix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boyney123%2Fmusix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/boyney123","download_url":"https://codeload.github.com/boyney123/musix/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247644369,"owners_count":20972273,"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":["api","mongodb","react","songs","websockets"],"created_at":"2024-11-06T03:42:19.351Z","updated_at":"2025-04-07T11:31:58.254Z","avatar_url":"https://github.com/boyney123.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003ch2\u003eMusix: Web application to play songs\u003c/h2\u003e\n\u003cp\u003eSong application built using MongoDB, Websockets, React \u0026 Bulma\u003c/\u003e\n\n  \u003chr /\u003e\n\n\u003cimg alt=\"header\" src=\"./images/demo.png\" /\u003e\n\n\u003ch3\u003eFeatures: Play songs, Navigate Songs, Get notfiyed when other people listen to your song, and more...\u003c/h3\u003e\n\n\u003c/div\u003e\n\n\u003chr/\u003e\n\n## Getting Started\n\n```\ngit clone https://github.com/boyney123/musix.git\n```\n\n## Running the application\n\nThere are two ways to get the application running.\n\n- Using Docker (recommended)\n- Locally\n\n### Using Docker (Recommended)\n\n```\ndocker-compose build \u0026\u0026 docker-compose up -d\n```\n\nNext populate the database\n\n```\ndocker-compose exec songs-api npm run populate-database\n```\n\nThen go to http://localhost:4000 to see the application 🎉\n\n### Locally\n\nIf you would like to run this locally (outside Docker) then you need to:\n\n1. Make sure you have [mongo running on your machine](https://docs.mongodb.com/manual/installation/).\n2. Go to `songs-api` and rename `.env-example` to `.env`\n3. `npm install \u0026\u0026 npm start`\n4. Go to `songs-subscriber` and run `npm install \u0026\u0026 npm start`\n5. Go to `songs-client` and run `npm install \u0026\u0026 npm start`\n\nIf you would like to populate the database run:\n\n```sh\n# Run this inside the songs-api directory\nnpm run populate-database\n```\n\n## Using the application\n\n- You can select a song by clicking on it\n- Using the Audio Player controls you can navigate the songs\n- If you have other connections (other browsers) play the same songs, the clients will get notified\n  - To do this locally, just open up the app across multiple browsers and click on the same songs.\n- Pause the songs, clicking pause\n\n---\n\n## About this application\n\nThis application is split into three main parts:\n\n1. Song-API (Handle song information)\n2. Song-Subscriber (Handle socket connections \u0026 shared data)\n3. Song-Client (Client application for users)\n\n\u003cimg alt=\"header\" src=\"./images/architecture.png\" /\u003e\n\n## Songs-API\n\nThe song api was written using Express \u0026 MongoDB.\n\n- The songs are stored staticly on disk (for now)\n- The metadata for the songs are in MongoDB\n\n### API\n\n#### `GET - /songs`\n\nReturns an array of data for songs. Requires `limit` and `page` query string parameters.\n\nQuery String values:\n\n- limit: Number - The number of songs to return\n- page: Number - The page to return\n\nExample:\n\nhttp://localhost:3000/songs?page=1\u0026limit=2 will return 2 songs for the first page. http://localhost:3000/songs?page=2\u0026limit=2 will return the next 2 songs on page 2 and so on...\n\n#### `GET - /download/{file}`\n\nAll the `mp3` files are served statically. You can download the `mp3` files using the `/download` API.\n\nReturns the mp3 file.\n\nExample: http://localhost:3000/download/Decision.mp3\n\nAll the mp3s that can be downloaded are in the `songs-api/public/songs` directory.\n\n## Song Subscriber\n\nThe `song-subscriber` handles connections between client and server. This is used to share song information between users when they connect to the client.\n\nWhen the client starts and stops songs, events are emitted to the server and the data (in memory for now...) is updated with the current state.\n\nThen all clients are notified of the state changes, and the client works out how many listeners are currently listening to that song.\n\nThis uses NodeJS and Socket.io.\n\n## Song-Client\n\nThis is the web application that plays songs from the song-library (from the song-api). Requests are made to the server to get the songs and user can play them.\n\nThis is the web application built using:\n\n- React\n- React Hooks\n- useReducer (rather than redux) for state management\n  - I believe it might be overkill to use redux here but this is just a POC.\n- Jest\n- react-testing-library\n- socket.io-client\n\n## Assumptions / Choices\n\n- No pages were required (using the pagination functionality)\n- In memory data for socket data is fine for now. Could move to database / redis when required.\n- Song images are from a random website at the moment. In theory these could be hosted on a CDN and pulled in (size of images are big too, which would be trimmed)\n- No tests have been written for the subscriber service at the moment.\n- useReducer/Redux seems overkill for this application, most can be done with local state in the Provider components, but for POC that was used.\n- Most components have been kept dumb, which does mean the Application holds the business logic. In theory you could scale some of this down to the components, but I wanted to keep them dumb/reuseable for now.\n- User can not click on the progress bar for now (song progress bar)\n- Songs are not stored/retrieved from network storage (dropbox, drive, s3) yet.\n- All services are in this monorepo for now, in reality they would be seperated\n- You might get into some werid situations with the socket data (if you close the browser refresh etc.) I havent added any code to handle browser disconnects or anything yet. To clear the socket data you will have to restart the application at the moment.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboyney123%2Fmusix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fboyney123%2Fmusix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboyney123%2Fmusix/lists"}