Make custom twitch panels React App - (Need Feedback)

Hey guys, just finished making twitch panels app where you can make and customize your own twitch panels, and use them on your twitch channel, wanted to get some feedback on the app, and things I can improve. Thank you.

https://laughing-pike-162008.netlify.app/

1 Like

Looks great.

  1. It might be cool if the value boxes were a numeric input as well so you can change/set the value using numbers right in the box.

  2. Maybe implement a reset back to default values when double-clicking the range sliders.

  3. The row elements on the positioning page might need some horizontal margin to make sure they do not bunch up. Edit: it is on smaller screen sizes it happens.

Good job, keep it up.

1 Like

I finished this yesterday so there are gonna be plenty of updates fixing stuff. I didn’t even think of stuff you just said but both of those things I’m probably gonna add. Numeric input if I got it right should replace the number on the side and not the range input I have, in that case yes, and reset to default definitely should be there, not sure yet is it gonna be a single button that resets everything, or thing u suggested, just reseting separate elements on double click. Thank you so much for the positive feedback.

It’s looking fine on my side.

1 Like

Yeah, I was confused about that part as well, might be a different browser, I’m using chrome and don’t have the same issue. I do still need to fix it for mobile, i found few bugs there where they become squishy, mostly the text inside the buttons, but other than that yeah, i guess its some other browser.

Yes, it should not replace the range sliders. Just have the numbers be something like an input element of type number (or however you would like to do it).

range slider | input:type=“number”

I’d say both. Have a full reset button and the double-click on the slider to just reset individual values. The double-click is sort of a hidden UX feature but a lot of people will know about it and maybe even expect it.

To be clear it only happens at lower screen sizes (just below 1349px). The pic is taken in Chrome.

Yeah, responsive issue.

I’m trying to find that and fix it, but I don’t see it on my screen at all, lower or higher than 1349px and I’m also on chrome so im not really sure whats happening.

It happens when you change the max-width on the container to 90% at the max-width: 1350px break point.

Edit: It does the same in Firefox BTW, so it’s not the browser.

This is how it looks for me when I inspect it, 1351px is the first break point, after that, settings on left side has everything in a column, so I’m still not able to reproduce the issue ur having, I’m not sure why

You are not on the Positioning page/component.

I’m not sure where that is now :smiley: I’ll try fixing it once I figure it out