{"id":28974842,"url":"https://github.com/plcoster/fcc_frontendlibs_project3","last_synced_at":"2026-04-16T10:34:16.022Z","repository":{"id":299016100,"uuid":"466579285","full_name":"PLCoster/fcc_frontendlibs_project3","owner":"PLCoster","description":"Free Code Camp: Front End Libraries Projects - Drum Machine","archived":false,"fork":false,"pushed_at":"2022-03-09T23:51:41.000Z","size":399,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-24T12:16:52.407Z","etag":null,"topics":["bootstrap","react","webpack"],"latest_commit_sha":null,"homepage":"https://plcoster.github.io/fcc_frontendlibs_project3/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PLCoster.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,"zenodo":null}},"created_at":"2022-03-05T22:13:52.000Z","updated_at":"2022-03-09T23:12:55.000Z","dependencies_parsed_at":"2025-06-14T06:33:01.623Z","dependency_job_id":"999ff79c-01b7-44cc-971d-0ef64b4890c9","html_url":"https://github.com/PLCoster/fcc_frontendlibs_project3","commit_stats":null,"previous_names":["plcoster/fcc_frontendlibs_project3"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/PLCoster/fcc_frontendlibs_project3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_frontendlibs_project3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_frontendlibs_project3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_frontendlibs_project3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_frontendlibs_project3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PLCoster","download_url":"https://codeload.github.com/PLCoster/fcc_frontendlibs_project3/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLCoster%2Ffcc_frontendlibs_project3/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265314346,"owners_count":23745249,"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":["bootstrap","react","webpack"],"created_at":"2025-06-24T12:07:08.307Z","updated_at":"2026-04-16T10:34:10.955Z","avatar_url":"https://github.com/PLCoster.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Free Code Camp: Front End Libs Project 3 - Drum Machine\n\n## React Drum Machine\n\n### Project Aims:\n\nThe aim of this project was to build a drum machine with functionality similar to https://codepen.io/freeCodeCamp/full/MJyNMd.\n\nThis project was built using the following technologies:\n\n- **HTML**\n- **JavaScript** with **[Node.js](https://nodejs.org/en/) / [NPM](https://www.npmjs.com/)** for package management\n- **[React](https://reactjs.org/)** for application view with React Hooks to handle the application state\n- **[Bootstrap](https://getbootstrap.com/)** for styling with some custom **SASS / SCSS**\n- **[FontAwesome](https://fontawesome.com/)** for icons\n- **[webpack](https://webpack.js.org/)** to bundle React / JS / Styles and development server\n\nDrum Samples were provided by **[SampleSwap](https://sampleswap.org/)**\n\n### Project Requirements:\n\n- User Story #1: I should be able to see an outer container with a corresponding id=\"drum-machine\" that contains all other elements.\n\n- User Story #2: Within #drum-machine I can see an element with a corresponding id=\"display\".\n\n- User Story #3: Within #drum-machine I can see 9 clickable drum pad elements, each with a class name of drum-pad, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: Q, W, E, A, S, D, Z, X, C. The drum pads MUST be in this order.\n\n- User Story #4: Within each .drum-pad, there should be an HTML5 audio element which has a src attribute pointing to an audio clip, a class name of clip, and an id corresponding to the inner text of its parent .drum-pad (e.g. id=\"Q\", id=\"W\", id=\"E\" etc.).\n\n- User Story #5: When I click on a .drum-pad element, the audio clip contained in its child audio element should be triggered.\n\n- User Story #6: When I press the trigger key associated with each .drum-pad, the audio clip contained in its child audio element should be triggered (e.g. pressing the Q key should trigger the drum pad which contains the string Q, pressing the W key should trigger the drum pad which contains the string W, etc.).\n\n- User Story #7: When a .drum-pad is triggered, a string describing the associated audio clip is displayed as the inner text of the #display element (each string must be unique).\n\n### Project Writeup:\n\nFor the third Free Code Camp: Front End Libraries Project, I decided to build the project using the React Library, and use webpack to bundle all the React / JS code into a single minified and uglified bundle. The application state is controlled using React Hooks (`useState`, `useEffect`, `useRef`).\n\nGoing beyone the required User Stories outlined above, this React Drum Machine also allows users to record their drum pad inputs, and then replay the inputs at a later time (Record / Playback functionality). Furthermore, users can then use the Playback + Record functionality in order to layer recordings and inputs on top of each other, building up complex drum tracks over time.\n\nThe output volume of triggered sounds can be adjusted using a volume slider on the drum machine.\nIn addition, the drum machine has a metronome functionality, allowing users to play an audible metronome with a specified tempo (50 - 250 bpm) that can be adjusted using the corresponding slider.\n\nFinally the drum machine can have its power turned on / off, following the logic of a physical drum machine. The drum machine remembers recorded drum tracks even when switched off, and they can be replayed when switched back on.\n\n### Project Files\n\n- `index.html` - is a simple HTML template to mount the React component tree. Webpack adds the scripts required to load the JS bundle when the project is built.\n\n- `index.jsx` - this the entry point to the React application, it renders the react component tree on the DOM, as well as imports styles for the application. It is also the file the webpack uses as its entry point to create the JS bundle.\n\n- `assets/` - this folder contains audio clips and font files for the application, as well as a JS file (`audioLoader.js`) to combine all the audioclip information into a single array.\n\n#### Components\n\n- `App.jsx` is a simple container component for the `NavBar` and `DrumMachine` Components:\n\n  - `NavBar.jsx` is a presentational navbar component, providing links to other projects / sites.\n\n  - `DrumMachine.jsx` is a major stateful component of the application. It contains various state variables (`pressedKeys, power, displayMessage, volume, recording, playBack`) as well as various handler functions to update state in a logical manner, when events are triggered in the app. This component also initialises document event listeners to listen for 'keydown' and 'keyup' events in order to trigger the drum pads on certain key presses. Both state variables and handler functions are passed to its child components (`ControlsDisplay` and `PadDisplay`) as props:\n\n    - `ControlsDisplay.jsx` is the component responsible for displaying the control panel (visual display, volume and tempo sliders, Record / PlayBack / PlayBack + Record / Metronome and Power buttons) on the LHS of the drum machine. It is also a stateful component as it controls the state of the metronome (on/off) and the metronome `tempo`.\n\n    - `PadDisplay.jsx` is a container component for the nine drum pad inputs on the RHS of the drum machine. It renders nine `DrumPad` components using the JS map higher order function, applied to an array of drum pad information / audioClip sources from `audioLoader.js`. Props are passed to each DrumPad to correctly label / identify them as well as determine whether or not they should play their audio clip at a given time.\n\n      - `DrumPad.jsx` creates individual `DrumPad` components. Each one holds an audio clip which can be triggered to play when the `playSound` prop passed to it is truthy. `DrumPad`s can be triggered by the correct key press or by a mouse click. `DrumPad`s also adjust their audioclip volume when the `volume` prop passed to them changes, which occurs when the volume slider is altered.\n\n### Usage\n\nRequires Node.js / NPM in order to install required packages. After downloading the repo, install required dependencies with:\n\n`npm install`\n\nThe webpack development server can then be started with:\n\n`npm run dev`\n\nThe development server can then be viewed at `http://localhost:8080/` in the browser.\n\nA production build can be created in the `dist/` folder by running:\n\n`npm run build`\n\nTo view the production build, open the output html file in the dist folder in your browser, or serve it using Live Server in VSCode.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplcoster%2Ffcc_frontendlibs_project3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplcoster%2Ffcc_frontendlibs_project3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplcoster%2Ffcc_frontendlibs_project3/lists"}