{"id":18878316,"url":"https://github.com/captaincluster/drum-machine","last_synced_at":"2025-04-14T18:32:12.343Z","repository":{"id":227822635,"uuid":"772196797","full_name":"CaptainCluster/Drum-Machine","owner":"CaptainCluster","description":"The third project for the \"Front End Development Libraries\" course provided by FreeCodeCamp. ","archived":true,"fork":false,"pushed_at":"2024-03-15T22:41:54.000Z","size":180,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-20T12:47:05.818Z","etag":null,"topics":["freecodecamp","freecodecamp-project","front-end","html","javascript","music","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CaptainCluster.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2024-03-14T18:06:03.000Z","updated_at":"2024-09-26T07:32:27.000Z","dependencies_parsed_at":"2024-11-08T06:37:28.678Z","dependency_job_id":null,"html_url":"https://github.com/CaptainCluster/Drum-Machine","commit_stats":null,"previous_names":["captaincluster/drum-machine"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCluster%2FDrum-Machine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCluster%2FDrum-Machine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCluster%2FDrum-Machine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CaptainCluster%2FDrum-Machine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CaptainCluster","download_url":"https://codeload.github.com/CaptainCluster/Drum-Machine/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248936860,"owners_count":21186115,"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":["freecodecamp","freecodecamp-project","front-end","html","javascript","music","react"],"created_at":"2024-11-08T06:25:53.505Z","updated_at":"2025-04-14T18:32:11.869Z","avatar_url":"https://github.com/CaptainCluster.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Drum Machine\n\nDrum Machine is the third project for the *Front End Development Libraries* course that is hosted by **FreeCodeCamp**.\nIt utilizes the **React** JavaScript library to build the UI. The user can either click the drum pads or press specific\nkeys to trigger various audio samples.\n\n[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0)\n\n📚 Dependencies\n---\n![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB)\n![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge\u0026logo=node.js\u0026logoColor=white)\n\n\u003e [Learn more about React here!](https://react.dev/)\n\nIn order to use the project, you need to download **NodeJS** for the necessary commands.\n\u003e [Install NodeJS here](https://nodejs.org/en/)\n\nAfter this, you have to install additional project dependencies, while being in the directory of the project.\nThis can be done by running the following command:\n\u003e `npm install`\n\n🚀 Running the program\n---\n\nIn order to start the program, all you need to do is run this command:\n\u003e `npm start`\n\nAfter this, you are good to go!\n\n👀 Example\n---\n\u003cdiv\u003e\n  \u003cimg src=\"https://github.com/CaptainCluster/Drum-Machine/assets/121576355/bc717c56-052b-4aef-a8b9-fcb88e7f1218\" style=\"width: 500px; \"\u003e\n\u003c/div\u003e\n\n\u003e The user presses the *Z* key and triggers the *Kick n' Hat* audio sample. The pressed drum pad changes its color temporarily.\n\n🙏 Credits\n---\n![FreeCodeCamp](https://img.shields.io/badge/Freecodecamp-%23123.svg?\u0026style=for-the-badge\u0026logo=freecodecamp\u0026logoColor=green)\n\nThis project is a part of **FreeCodeCamp** *Front End Development Libraries Course*. FreeCodeCamp is the provider of the\naudio samples for the project. While some ideas have been received from their example project and the instructions have been \nfollowed, all the components and the style have been made by me, and follow my vision, with both the inspiration and constraints\nin mind. \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptaincluster%2Fdrum-machine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaptaincluster%2Fdrum-machine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaptaincluster%2Fdrum-machine/lists"}