mrsiuuuu_x1

after a long day of grinding out the waiting room logic so users weren’t just staring at a blank screen, i finally got the state management to stop tripping. once the vibes were right and the code was actually working, i did the whole git dance to bring it into the main branch. i checked out main, pulled the latest updates to avoid any awkward conflicts, and merged the feature branch in. everything synced up perfectly with no beef from the terminal, so now the waiting room is officially live in the build and the repo is looking massive.
also i added background music too, it feels so good playing the game with music.
edit: I also added two new sound effects, when user enters the waiting room, and when the game starts.

Today was a huge milestone as I finally moved Git Battle from a local project to a live, production environment. It wasn’t a smooth ride—I spent a good chunk of time troubleshooting connection issues, from cleaning up old database links to fixing authentication redirects that were still pointing to our testing tunnels. I also hit a wall where the server wouldn’t build our database client correctly until I manually overrode the start commands, but after hunting down every missing variable and configuration error, it is finally working. The system is stable, users can log in securely, and most importantly, the real-time multiplayer is syncing perfectly, which feels like a massive win after a long day of debugging.

Today marked a major milestone for Git Battle, I integrated a Vercel Postgres database using Prisma ORM to handle persistent data storage. I implemented Server Actions to capture battle outcomes in real-time, ensuring every victory and defeat is permanently recorded. To visualize this data, I built a dynamic Leaderboard system that queries the database to rank top players by wins. The app now has a permanent ‘Hall of Fame,’ creating a competitive loop for users.
Now i am fully focused on setting up multiplayer mode, the most difficult task.

After some testing, and debugging I have finally added the login page, where user must logs in with thier github account, to play I have added three difficulty level for AI mode, and now i am focus on adding the multiplayer mode.

So guys, after a long time, I have added some cool SFX in the game, adn now i am focused on creating a multiplayer mode….

Final: After fixing way too many bugs, Survivetrack is finally done. I fixed the distress signal button and the player marker, added zombie spawners (using emojis), and implemented combat logic and proximity detection.

You can play it outside (yes, touch some grass) or with friends. You can connect with anyone once they send a distress signal. I also used AI for the SFX system since I couldn’t find any good alarm sounds.

Everything’s finished and ready to ship. The project is officially done!

Finally, after so many trial and error, i can finally send distress signals globally, and anyone can see it, by clicking on pulsing circle at top left corner, it took me so long to fix bugs, but it was worth it.

So now I have added a login page where user first need to add his/her username, and then he can move onwards.

Today was one of my worst days, after adding global distress messages which will store your live location, i was ready to merge the branch but an unexpected error appeared. After spending almost half of the day, i was not able to fix it, so instead i created a new repo and then deployed it. I was so scared that i might have lost my data, but fortunately, i didn’t. Now the project is ready, but i may still add some new cool features.

Finally, after ton of debugging, finding correct model, and inserting the API key, it works, though it takes a lot of time to output the message generated…. but yeahhh. it works

I am using mapbox for fetching live location, and it does work also added few messages which will appear once we press the button, now i am trying to add AI logic.

Last year, I participated in a Hackathon. I built a location detector AI which fetches your location (it was fixed location) and scan nearby areas, and then shows zombie on the screen. I built it using gradio, folium at that time, now i want to improvise it becuase the chatbot stopped working, and when user reloads the page the whole datalog was gone, so no databse. Now i have created a classic Apocalyptic theme Ui and am focused on adding key details.
I hope you guys follow me on this journey…

Alr guys! the project is finsihed, I added animations using framer, and also contact info too. I have shared the video too, hope you like it. ready for shipping…

I just added my projects section, and now i am trying to add animations..

I now added a navigation bar, and the languages which i use most often, I am thinking of using 88*31 website for gif to replace the text below.

Alright, guys! This is just a portfolio website, which i want to build to show case my projects, for now i have added a spotlight on my mouse, and will add more stuff.

Guys! I just added floating number feature. It was pretty easy to implement, though i faced some issues as 1/4 hits, the damage numbers were overlapping, so i tried adding a variance and it worked but for a short time as now 1/10 hits the numbers were overlapping, so now i fixed it by making thier positions permanent and looped them to appear up, middle, and bottom.

Guys, I just fixed the exit button logic, at first when user interacted with it, they exited the game. Now, a popup message appears for the confirmation to quit the match.

I have added some new cool class abilities, like pixel Slash (which hits double damage with 60% more damage), hello world push too. I also added a “ability” button which allows user to use thier special ability.

While i was playing my game, i spotted some bugs;

1. the enemy was able to use critical damage, but i wasn’t so i fix the class abilities.
2. The logs were looking a bit boring so i added colors to represent each type.
3. The buttons were looking plain so i added hovering, with background color.
4. the enemy was using only 2 merge shields(heals), while me(player) was able to use all three, so i fixed that too.

Now I am adding more new cool abilities.

Finally!
After spending almost 10hours (generational lock in) designing the UI, it was all worth it, from watching youtube tutorials, to modifying the pixel art; IT WAS ALL WORTH IT.
Ladies and gentleman! presenting you;
a new revolution, a new face of git battle, the Greatest UI upgrade(for me yeah) of “Git Battle”.
(I have also shared a footage of it).
Enjoy!!
(i am gonna rest now).
edit: I still need to fix some bugs too, like the game starts as soon as you land on the battle view page.

I tried changing the UI but it went horribly wrong :((. Thank god I have committed the old version so I did not have to redo the entire UI. Now I am gonna watch some YouTube videos to learn about changing UI more cleanly. I was trying to add cyberpunk 2077 theme, but was not able to accomplish it, hopefully in my second attempt I will. :)))
Anyways, thank you guys for following me, I will do my best to make this one hell of a project!!

When I was testing my game, I ran into a bug, the AI was healing itself continuously, this created a loop in which the game never ends, so in order to fix it, I gave both the player and AI 3 healings right now (will add more difficulties later). This made the game more fun, and put an end to the loop.
Now I am trying to update the Ui of the app, and then will add more cool features.

Alright guys!
I have now fix the healing issue; before, I can constantly heal myself and the AI couldn’t, which was annoying as in this way I can never lose, so to make things fair, I added a cooldown feature which will allow user to heal after 3 turns, and now the AI can also heal if it’s health is below 50%.
I have also shared a footage of it working!

Just added a new cool buff feature, which gives three type of bonuses to the user, according to their class id, like if they have frontend warrior class they will get 25% more speed, if their speed is higher they have chance to hit a critical damage. The class is given to user based on their profile stats, like if they have more repos, stars, and followers they will have stronger bonuses. I have also added a healing button too, at first the game was running itself, but now it waits for user inputs.
There are still many things i have to fix like give the opponent which is a bot rn, healing mechanic too.
I have also shared a working footage below.

Added battle logic, which automatically fights the opponent by attacking them, the attacks happens using a formula;
Damage Formula: attack * random - (defense * 0.2)
Also created a Battle viewing area, which shows the logs of damages done by you/opponents.
Below is a working footage (ignore bg music) :)))

So i am building v2 of this project, i am using next.js to build this version now. I have now created the page.tsx which contains the starting logic of the project, i have added 2 player logic. I have also generated a github token which will help me fetch user stats(repos, stars, followers etc) and use them as battle powerups. Here is a small working footage, though i have not yet created the battle logic.

Just started creating the index.html file, will start styling it now, and then add logic behind it.
edit: changed my mind again, this version was a bit sloppy, so i am building a second version using next.js.

Just created a next.js app from scratch, and connected it to github api.
(Though there are still some bugs like the picture is too big, i am going to fix it).

Final V1 System Polish & Audio Integration The Feels FM dashboard has officially reached V1 stability. We eliminated all layout jitter by locking viewport overflow and standardizing the box model across the ‘VIP Lounge’ interface. The user experience was significantly deepened by extracting the audio logic into a dedicated sounds.js module, enabling consistent, code-generated UI sound effects across the Login, Index, and Dashboard pages without script conflicts. Visuals were finalized with a high-contrast ‘Street Art’ window and a reactive ‘System Clock,’ while the ‘Print’ command was successfully wired to generate styled mission reports. The system is now fully responsive, thematically consistent in Dark Mode, and ready for deployment.

The audio engine has been significantly upgraded to support a dynamic “Smart Shuffle” system, replacing single-playlist logic with randomized pools that ensure a fresh track on every scan while preventing consecutive repeats. We also refactored the data pipeline to capture and display granular metadata, allowing the app to log specific playlist names (e.g., “Happy: Pop Hits” rather than generic labels) to both the user interface and the Supabase database for richer history tracking.

Today’s session focused on significantly lowering the barrier to entry by implementing a persistent Guest Mode and optimizing the interface for mobile users. We replaced the initial URL-based access method with a robust LocalStorage strategy, updating the authentication logic to recognize guest “tickets” so users can bypass the Supabase login wall without triggering security redirects. Alongside this major accessibility upgrade, we repaired the landing page layout by introducing media queries that dynamically scale the aggressive Neo-Brutalist typography, ensuring the title and controls fit perfectly on smaller screens. These updates have been finalized and deployed, making the application fully shareable and functional for users who wish to test the emotion tracking features without creating an account.

Today’s session focused on a comprehensive “Neo-Brutalist” visual overhaul, implementing a high-contrast design system with a robust Dark Mode and a mobile-optimized flexbox layout. We stabilized the core application logic by resolving the critical “Zombie Loop” camera bug to ensure reliable face tracking, while also repairing the chart rendering for better data visualization. Finally, the authentication flow was upgraded with dynamic redirects, successfully deploying the current build to Vercel for live testing and setting a solid foundation for future features.

Just dropped a major UI upgrade for FeelsFM. I implemented a high-contrast “Cyber-Terminal” Dark Mode that completely flips the Neo-Brutalist aesthetic—swapping standard black borders for glowing white shadows against a void-black background. It required some tricky CSS logic to invert the button depths so they still “pop” inside the white content boxes. I also broke the header layout constraints, pinning the Theme Toggle and Logout buttons to the absolute corners of the screen using fixed positioning. This clears the center stage for the data and gives the app a true “cockpit” feel.

Switched the UI to a Neo-Brutalist theme (hard shadows + graph paper). Finally cracked the code on the music player—the Deezer integration now auto-switches playlists based on your facial expression without getting blocked by the browser. Fixed the real-time chart lag and polished the responsive layout. It’s looking raw and working smooth.

Today was a massive pivot from standard design to building a distinct identity for FeelsFM. We completely ripped out the generic “dark mode” aesthetic and replaced it with a raw Neo-Brutalist theme, featuring a graph-paper background, thick 3px black borders, and zero border-radius for a heavy, industrial feel. The biggest battle was taming Chart.js to match this vibe; I had to fight against default clipping and padding issues where data points were smashing into the axis labels. I fixed this by enabling offset: true to give the first point breathing room, adding custom padding to the Y-axis to push the numbers left, and setting clip: false so the square markers could bleed over the lines without being cut off. We also styled the camera feed to look like a retro /// LIVE_FEED.exe window and turned the history list into a monospace “printed receipt,” resulting in an app that finally looks as unique and tactile as the tech behind it.

Today was a major push for stability and vibes in FeelsFM. I started by pivoting from YouTube to the SoundCloud Embed API to solve persistent copyright playback errors, implementing a custom “randomizer” logic that loads curated mood playlists (like Lofi or Phonk) and ensures users never hear the same track twice. Then, I tackled a tricky “Ghost Box” bug where the AI tracking drifted off the face; the issue turned out to be a coordinate mismatch between the widescreen camera request and the 4:3 canvas. I fixed it by enforcing a strict 640x480 native resolution across the hardware, HTML, and canvas layers, resulting in pixel-perfect tracking without any distortion. With the database, music, and tracking now fully stable, tomorrow is dedicated to a complete UI overhaul to make the app look as good as it works.

Up until today, FeelsFM had the memory of a goldfish—if you refreshed the page, your music history was gone. Today, I fixed that.

I spent the day integrating Supabase, giving the app a permanent database. Now, every time you scan your face, the app saves your emotion, the song it recommended, and the intensity of the feeling.

To make this data actually useful, I built a Vibe Trend Dashboard. It uses a line graph to show how your mood intensity fluctuates. I spent a lot of time polishing the UI—getting the tooltips to glow green and show the exact mood percentage (e.g., “Neutral: 99%”) took some tricky JavaScript configuration, but it looks awesome now.

It’s amazing to see the data actually populate in real-time. Can’t wait to ship the live link soon!

I integrated Supabase and Google Auth, so now the app can actually “remember” users. I also ran into some network lag while testing, so I implemented an Optimistic UI pattern. This means the interface updates instantly when a mood is detected, making the app feel snappy even if the database is thinking in the background

created the dashboard UI and added the logout button logic.

Just created a authorization system which logs in and teleports to the dashboard (though not created yet). Tried linking spotify but its developer mode is not working, don’t know why.

Guys! now I have decided add a login page which was very easy to set up, and when i click on “continue as Guest” it starts the v1 of feelsFM.
YEP YOU HEARD THAT RIGHT I AM BUILDING V2 OF FEELS FM AND IT IS GOING TO BE LEGIT EPICCC>

I tackled the “Infinite Loop” challenge, where the player would go silent after one song because my basic iframe had no way of signaling that a track was finished. I realized I needed a “Smart Player,” so I refactored the code to use the full YouTube IFrame API, which allows me to listen for the onStateChange event. By detecting exactly when a video hits the “Ended” state (code 0), I built a logic loop that automatically fetches a new random song from the current mood playlist and loads it instantly without reloading the page. The final hurdle was a tricky security block on my local server, which I solved by explicitly defining the origin parameter in the player config, finally unlocking a seamless, infinite radio experience.
edit: I have some good ideas too which i am hoping to implement in this project, for example; adding a login page where the user signs up and a secret stuff too.(will not tell it)

Emotion detection is now working, and the app successfully plays music based on the detected facial expression. When the camera button is clicked, an emotion is detected and a corresponding song starts playing.

I noticed an issue where continuous detection causes the emotion, and music to change frequently as facial expressions shift naturally. To fix this, I planned to stop the camera after the first detection and lock the emotion. The app then keep playing random songs from that emotion category until the user clicks the camera button again to re-detect their mood.(I still need to work on the UI though.)

Just added a music library which loop and select a random song based on your emotion, and i also fixed somewhat the jittering problem, though not fully fixed.

Just added some non copyright songs, and also some lyrics video too to fix that issue. It was a very hectic task to find these songs though I have used one song for each emotion i will add more and some new features too.
I have shared the video of it working although it has no voice in it, but it shows that the video is playing.(YES THE VIDEO IS PLAYING :GG)
edit: THE SIDE SCREEN IS NOT SHOWING :(((((((((
BUT IT IS WORKING>>>>>>>>
I AM SO TIRED OF THIS WAAAAAAAHHHHHH. WHY DIDNT THE SCREEN RECORDER RECORDED IT. DAMN IT

Fixed some bugs, but when I tried changing music the video doesn’t appear:(
Can someone explain it, and is there any solution for it cause I have already asked chatgpt it says to used the embedded video id, I have also tried that, but nothing happens.

Tried playing music based on my emotion but it went horribly wrong, the screen froze, and no music was played. :((

Just fixed the issue, which were just spelling mistakes, i spelled api as aip, and FaceAllDetections as FaceALLDetections. LOL. I have also shared a footage of it working.

Tried running it, nothing happens still figuring out what to do, although i have downloaded the models which are needed for this project. Can’t say anything more rn, still fixing the errors.

Just added the camera, can’t believe it is connecting .xd SO SUPER EXCITED TO FINISH THIS PROJECT HAHA.

Manage to do some changes. The aspect ratio of the camera changed to 12:5 to fit it into screen. Still thinking about some more changes. Anyways, if you can suggest some ideas feel free to(cause I am not a very creative person)

Just finished with the main UI, though some changes will be needed but here is a small part.(tried to match the theme with spotify :). nevermind). There is a button at the bottom which cannot be seen(apology for that, will change the dimensions. Did some changes too).

Just fixed some bugs, and also added some new cool things, like a text box which displays a message when too many tabs are open. Also moved that overlay from bottom right to bottom left.

Alr guys! just fixed the bug. The bug was that the screen was not shaking and the tabs count was not correct so i just fixed it, by adding a new scripts for actively running in the background and also updated the style.css file for the shake effect.

Just build the main program of the extension. so excited to run it! :))))
edit: ran into a bug! :(

Just build a manifest.json file which will allow the extension to work by providing/allowing the permissions it require. Also i started to style it too as you can see on the image.

I cooked up The Bard’s Quill, a Chrome extension that turns boring emails into dramatic Shakespearean soliloquies! Starting with zero JavaScript knowledge, I used AI as my co-pilot to learn how to manipulate the DOM and build a browser extension from scratch. The hardest part was figuring out why my button kept stealing focus from the text box, though I used AI to fix this issue. Now, “Hello” becomes “Hark!”, and I’ve officially shipped my first project!

I’m working on my first project! This is so exciting. I can’t wait to share more updates as I build.