MCSR Stream Finder

Branding!! Made a banner, an icon (welp, it’s just a little star lol) and a README. Also some tiny fixes and enhancements of course. The project’s licensed under MIT now. Will just have to add a favicon and some og meta tags but then I’ll be ready to ship!

The site is up and running and reachable under mcsrstreamfinder.netlify.app now!
I’m currently hosting the API on a Raspberry Pi. I set up correct and customizable CORS headers so you can reach the API from the site!
I also made it so you have to hover the Stream component for one second before it embeds the stream from Twitch. This took quite some time to do actually. I initially tried to start a timeout that executes the function to show the stream after one second and clear the timeout after the mouse leaves the Stream component, but that didn’t really work and often caused streams to still embed after the mouse already stopped hovering the component. In the end, I managed to fix that by using React states. It’s hard for me to explain so you can check the commit e90d930 if you want to see the logic.

Other than that I updated some css, fixed some small bugs and added env variables for the site so you can set the API URL through that.

You might ask yourself why the heck this devlog logs almost seven hours. I was SO LOCKED IN TODAY, all that time was logged today lmao. That’s not the only reason though, the only thing I worked on was the UI and UX. If you compare it with the last devlog it’s a day and night difference. Here’s a quick summary of what I did:

• Implementing the design I made in Figma
• Only list Divisions (in the filter options) that are currently streamed (that only took like five minutes though ;-;)
• Add a loading animation
• Add a fallback message if no streams were found (caused by filters or the API being down)
• Add a proper footer with links to the Credits, Source Code and myself lol
• Dynamically adjust the Stream component’s width and size to the size of the viewport so there’s no weird empty space on one side.

The last one was by far the most time-consuming one because I couldn’t figure out how to dynamically adjust the size (using flex-grow) while keeping both the thumbnail and the iframe (an embedded iframe of the twitch player in this case) the same size so the size wouldn’t change when hovering.
Finally I figured it out, by only making the image invisible (so it still takes up place) and setting the iframe’s positioning to absolute and setting the size to 100% it worked! I can’t really explain well what exactly I was trying to achieve and how I solved it so if you want to take a look at it you can check the commits on GitHub, especially bfd9eec
.

Could I have broken this down in more devlogs? Yeah, of course, but I WAS IN THE FLOW STATE!!!

Added sorting options now. You can sort by elo, viewers and duration. Wanted to add an option to sort by followers too but then I’d have to play around with more Twitch API endpoints and I don’t want to do that currently. You can also switch between Ascending and Descending order. I did this by simply using the sort() function on Arrays.
Was busy with other stuff the last two days so I didn’t do anything but now I can finally start working on the UI and UX pretty soon!

Three hours of pain but finally the filtering works correctly. You can select multiple filters now and it’ll only show you results that match those. I did that by removing all the streams from the Streams Array that do not contain any values from the filtering array. Idk, it’s hard to explain for me, if you want, you can check commit ff2bdb2 to understand the logic for yourself. Before cleaning up, half of the code was literally comments with failed attempts ;-;

Not that much progress sadly, I refactored some stuff so it’s more organized. There are filter options for Language and Division now, though you can only select one option at the moment. It works, but it’s really unpolished and still misses features like selecting multiple options, I’ll try to get that working tomorrow.

More work on the front-end! It correctly shows the rank division and elo with a fitting linear gradient now. Additionally, the elapsed time since the beginning of the stream gets calculated and displayed. Language tags also get translated into the actual name now. If you hover a stream card it embeds a Twitch player now so you can watch the stream for a little while and see if you like it. The only issue I’m having right now is that sometimes Twitch responds with undefined values (e.g. if the language is not specified), I’ll have to take some extra steps to debug this because most of the time all the streams don’t have any undefined data.

Worked on the Front-End. You can now view all the thumbnails and information about the stream. I also pull some more stuff from the Twitch API now and use the streams endpoint instead of the channels endpoint because the streams one covers all the data I pulled from the channels endpoint and gives some additional useful data like the thumbnail.
The CSS is very bare bones ofc, only did a rough structure for visualization, I’m gonna focus on displaying all the needed data first and work on the design afterwards.

I’ve been playing around in Figma for a while and am pretty satisfied with how the designed turned out. The Streams are just placeholders ofc and I’ll most likely add a footer or smth like that later on.

If you look closely at the screenshot of the last devlog you might see that the Minecraft player is completely different from the Twitch streamer. I thought that Twitch would return an array with the same order that I provided but that was not the case lmao. Eventually figured out how to work with that data and assign the Twitch statistics to the corresponding Minecraft player. The token should also get automatically renewed once it’s unvalid now.

Made an API endpoint to get all the MCSR users that are currently live on Twitch, additionally, it also pulls data about their stream from Twitch’s API. It works but it’s not very efficient as I request a new access token from Twitch on every request, I’ll have to see how I can improve that.
All this would’ve also taken like thirty minutes less if I wouldn’t have made a spelling mistake in my .env file (I wrote TWICH instead of TWITCH ;-;
It also took me a while to figure out that you can request data for multiple Twitch users with one request.

This is everything I need from the backend, now I only have structure the code, make it more efficient, secure and implement it in a usable front-end.

Fun with API’s! First time building an actual project with a backend.
Using NodeJS for this project. I made an endpoint to get all streamers that are currently streaming MCSR, it just pulls that data from MCSR’s API but cleans stuff up and structures it in a way I can work with easily. I also want to return the stream statistics (viewer count, username, tags and language) via that API, will have to work with Twitch’s API for that.

I also made a rough(!) design in Excalidraw (just a rough visualization of what I want to build) but first I’m gonna try to get the backend working!