Drum Machine Project - React Bootstrap

Project Feedback
#1

Hi all

I thought I would share my Front End Drum Machine with the community. From a UI perspective it isn’t the best example even though it passes all of the tests, any advice on this would be appreciated.

I wanted to share this as I have a implemented it using react-bootstrap which I haven’t seen in a lot of projects here. I have encountered a couple of problems with this approach and I was wondering if anyone has had similar experiences .

I implemented the drum machine as a modal. The first issue is that the FCC test script hamburger menu doesn’t work if the modal show attribute is set to true, however I need this set to true as I want the modal to appear when the page loads, I see this when I run this locally and on codesandbox.io. I can solve this by removing this attribute (show={true}) from the code and reloading the page, selecting the drum machine test from the menu, and then adding show={true} back to the code. Now when the page next reloads the hamburger menu stops working again, but as the drum machine option is selected the tests can be run.

Another issue is that when the drum pad is in mobile mode the letters don’t sit right within the buttons, I spent a long time trying to resolve this but it feels to me that this is a react-bootstrap issue.

Besides these issues any feedback on any aspect of my drum machine is welcome.

Many thanks,
Craig.

#2

Hmm, I tried looking at this but it doesn’t seem to be working for me. The only thing I get is a background image of a drummer playing the drums.

#3

I had to make a slight change so that the modal appeared, should be working now.

#4

I see the drum pad now but as soon as I hit the Tab key I get an error message that overlays the entire thing:

TypeError

onHide is not a function
#5

I had a play using the tab key, which I admit I hadn’t previously done, and although I was able to play a few notes I eventually saw this error as well. It seems to work fine if I only use the mouse, and the tests are passing.

The file it occurs in is part of the react-bootstrap distribution (../node_modules/react-bootstrap/esm/Modal.js). I saw this a few times when I was developing the project in the early stages but not for a while now. This one will need a bit of digging I fear.

Thanks,
Craig.

#6

A project like this should be able to be used with keyboard only. And yes, I have a feeling it is related to your use of a modal window. Just curious, why are you doing this?

#7

Why a modal?

The error also happens if you just click the background. If you add the backdrop="static" property to the Modal component it should fix the error.

#8

@lasjorg I have tried the fix you suggest, I’m not seeing this error occur when I run it locally but it still seems to happening on codesandbox.io, not sure why this is but I will keep looking at it.

@lajorg and @bbsmooth

I choose to use react-bootstrap and a modal to help me learn these components as I hadn’t used them before (I did the previous front end projects in React but I didn’t use much Bootstrap or modals), and from a learning perspective it has been a useful exercise. In hindsight though I don’t think this was the best design choice for this particular project, I may have another go at it with a different approach.

#9

I have made some changes and keyboard input seems to be a lot more stable now, it didn’t crash on me once when I was testing it.

I am not able to switch on/off and change the sound bank using the tab key so still some work to be done though.