MineGuardian-Frontend

Hi, quick devlog here. I added a field for the address of the server, it even has a cool animation and it has a copy button.

Hello dear reader. This devlog comes with a lot of features implemented. The most important of them all is the user login and creation page. Half of the hours on this devlog were put into the authentication flow. The rest were put into integrating new features on the backend, such as giving users (currently using their ids, but I’ll make them use the username instead) custom permissions in each server individually, or fixing WebSocket connections connecting twice, etc… The last thing I did was to add that Aurora, which seems the most impressive part visually. On the user taking logic, I still need to make a resend verification button, a reset password button, add the option to delete your account, and even create a privacy policy (I put a lot of effort into keeping the user data safe in a database, with the password encrypted). Thank you for reading, see you next time!

Oh ****, I did it again. 10h without devlogging. I was just so caught up with everything, I forgot about flavortown. Sorry Sorry Sorry many times. Now about what I did, well, a lot. Let me list all of it here:

1. I added a sidebar, as you can also see in the recording. The sidebar will be where all the navigation will happen. From there you will be able to go to settings (when I make one), to players (it’s i the recording, but it’s just a placeholder, it doesn’t actually do something. The sidebar can also retract, there is a little button on its right, at the top. Didn’t demonstrate that in the recording, but it works! it took a lot of work because I didn’t know how to work around the last design of the page with the server list being a sidebar, but I found a solution eventually.
2. I redid how the server panel works. When you go to servers, you now have all the servers listed there, along with the install server button, and it also has a player viewer and a stats viewer, and those are global! They get the max ram from every server, add it up, then do the same for the ram used, and then it displays it. Same for cpu and for players.
3. Refactored a lot of the code, like the hole css file, into smaller ones for each component. Created “global” data types for the server’s returned Api (for example, I have one specifically for the max memory, used memory, cpu used in %, max online players and the actuall online players.).
   That’s what I’ve done in 10h

Omg, I didn’t log for so long. Sorrrrrryyyyyy!!! In the almost 7hours, I got every part of the site that I didn’t like and just redesigned it. I added RAM and CPU usage trackers using API endpoints, I added an install server button (and an uninstall one). And made a simple homepage to have at least something.
But what I definitely like the most is this new open source React component that I found, that provides you a lot of animated icons and components, and you can notice them all trough tout the front, and I’m definitely going to use more of it.

Holla guys! I have refractured some Api to match with the backend, and, the most important change, I modified the online players counter so that it shows a picture of the players online, and if hovered, it shows their username! I am so, so happy with how this turned up.
I don’t really have anything else to say, so, as usual, thank you for reading, have a great day and bye!

Well well well, only one hour and 47 minutes, hmmm…. Something ain’t right. But it doesn’t matter, because I’m super happy with how this turned up until this point, and im sure you are going to love it. I made the console bar retract down, and now I used a react library for different icons, which are also very good. I really don’t know how I want the final website to look, but I’ll see what I like more, and I’m sure that you’ll like what I come up with.
Thanks for reading and have a great day!
Bye!

Alright, so I worked a little bit, made the code more usable and understandable (for both me and you), and added these quick commands tool you can see in the video, they just start and stop the server (and restart, ofc). Now I think I want to figure out how to structure the page, because you can only fit so many elements on a page and it has to be pretty organized.

Ok, it’s been more then 1h and 30m, it’s been actually like 3h but who counts? (me) So anyway, now the webpage actually uses this WebSocket thing. I searched and documented about it and let me tell you what it does. It is a protocol (fancy term, i know, it means a way of transferring data from one server to another) which allows you to send data at the same time to one another with no time limit. It’s the same thing you use to chat on WhatsApp or to call someone. The thing is, it’s complicated to set up (it’s also my first time, but still, it was hard!), but I got it working. The client and the server will establish a WebSocket connection, providing at the handshake moment (the moment when they connect) the server id of which you wish to have access it’s console. For now, I didn’t connect the console, but that’s going to be easy-peasy compared to this WebSocket thing.
Also, I made a UI look kinda better, I still didn’t add those features I mentioned in the last devlog,. My next goal is to go to sleep I think, and I’ll see y’all tomorrow!

First devlog!!! Ok, so, I made a very simple webpage with reactjs, and used a library which seems pretty well known to fetch APIs. I used it to get a list of minecraft servers installed on the actual server. It isn’t anything big, but it can fetch data and im happy about it. I made a button so you can even refresh it yourself. I think im going to work a little tiny bit on the UI, then add some features like accessing the minecraft server console from the browser (I’m scared of that because I think I have to use WebSocket, even though I have no ideea how to use it or what it is🥲). But for now, I’m excited!
P.S: Im logging almost 2h of work so my bad for that, and also, in the video, you will see that I tried refreshing the server list. I assure you it worked, but it was just the same:)