#Overview

So today i didnt really code just refactored again and went back to css and decided to design all design elements in figma. It was pretty easy and II am now qustoning why i didnt do that instead also i only copied these 2. I will make my own streets afterwards and i also decided to redesign the website because it realy just a copy and i dont want to be sued but the board will probally look the same just different countries and maybe prices need to look for balancing and how it is normally in monopoly. But this probally going to take 2 to 3 days cause i really dont got any time in the next few days.

Project Update: The Great Refactor & React Integration

📋 Overview

Damn this looks trash

just a small update and i jsut noticed tailwind actaully looks like trash are there any alternatives because i didnt expect it to look this bad in comparison to before and yes i do know its looks aigenrerated but i did myslef also tailwind is pretty easy if you get the hang of it just looks trash maybe going to watch some tuts cause i cant upload the final product like this.

Overview

This phase was a major point for the project. After successfully implementing the lobby chat and the 11x11 Monopoly board using Vanilla JS and CSS Grid, I realized that managing the game states (turns, money, properties, transactions) in Vanilla JS was going to lead to unmanageable spaghetti code and was way to hard.

To keep the project clean and professional, I decided to perform a complete “hard reset” and refactor the entire frontend into a modern React Single Page Application (SPA) utilizing Tailwind CSS v4 [1.1.1, 1.1.8].
I always though about using it but found it weird and dififult for a beginer

The Great Redesign

Instead of keeping duplicate file structures or nesting my React app in a subfolder, I decided to do a complete wipe of the repository and initialize Vite directly at the root of my Poorup folder [1.1.1].

My backend directory (server/) with the working Socket.io logic stays at the root level, sitting side-by-side with my brand-new React source directory (src/).Because i didnt want to rewrite that all

Tailwind v4 & Vite Setup (React Redesign - Lab 1)

I verified that the setup is 100% correct by creating a basic functional component in src/App.jsx and rendering a test heading styled in large, bold, violet text using Tailwind v4 utility classes [1.1.8]. It compiled instantly and loaded perfectly in the browser.

Next Steps

Now that the modern React + Tailwind ecosystem is up and running at the root, I am starting Lab Challenge 2 (React Redesign). I’ll be creating a dedicated <LandingScreen /> component, managing the nickname input using React useState hooks, and connecting Socket.io to React to emit player connection data back to the server [1.1.1, 1.2.6]. You know lab challenges for this i will watch some more videos leanr more js and learn react if possible

Conclusion

Deciding to start over from a blank folder was tough, but it was absolutely necessary. The codebase feels incredibly clean and changing to React will save me massive amounts of time as I start building out the actual Monopoly gameplay. But i now learned alot in the time i decided to atleast built the lobby and board in vanilla js,css and html. Also anybody knows an ki which is good in front end because i just realised iam trash in front end and ki is too

Overview

This phase was important even though it was short. I transitioned from basic static mockups to building a fully functional, real-time multiplayer lobby system. I resolved tricky logical bugs and fought port conflicts, I also expanded my knowledge on js and am probally going to need to take a break to really learn all of js and will soon watch a 22 hour tut.

Fixing the SPA Screen Switch (Lab 9)

I started by tackling the dynamic transition from the login screen (#landing-screen) to the lobby screen (#lobby-screen).

1. Space in HTML ID: I accidentally wrote id="landing screen" (with a space) in my HTML, which broke my JavaScript’s querySelector because IDs cannot have spaces.

Once I replaced the space with a dash (id="landing-screen") Now it works perfectly fine.

Port Conflicts

Right after getting the transitions working, my local server crashed on Port 3000. My terminal crashed and restored its history, leaving a Node process running in the background and locking the port i still dont know why it does that just looked on reddit and youtube.

To easily bypass this without fighting Windows process managers, I updated my server.js and local client connection to run on Port 3005. It started up instantly.

Designing the 3-Column Lobby (Lab 10)

With the screen switching working, I redesigned the lobby HTML to match the responsive 3-column layout of Richup.io [1]. I used Flexbox (flex: 1 and flex: 2 for the center) to align:

• Left Column: A placeholder invite link input and a scrollable chat area [1].
• Center Column: The player greeting, token color picker, and “Join Game” button [1].
• Right Column: Game settings (dropdowns for starting cash) [1].

Structuring this required a bit of tweaking but not to hard.

Interactive Color Picker & Socket Events (Lab 11)

Next, I tackled the token selection grid [1]. I styled four distinct color circles (Red, Blue, Green, Yellow) in CSS and set up a .selected class that applies a thick white border and a glowing shadow.

In client.js, I wrote a forEach loop that listens for clicks on each circle, removes the .selected class from all others, adds it to the active circle, and stores the selection in a global variable. On the server side, I set up a 'join-room' socket listener. Now, when a player selects a color and clicks “Join Game”, the client emits the color choice, and the backend successfully receives and logs it in the terminal [1].

Server-Side Multiplayer Sync (Lab 12)

The most exciting part and hard part today was implementing real-time state synchronization. I declared a global activePlayers dictionary on the server to keep track of active sessions.

• When a user logs in, they are registered in the dictionary.
• When they choose a color and click “Join Game”, their color is updated, and the server broadcasts the entire updated list to all active clients via io.emit("update-players") [1].
• On the client side, I wrote a listener that clears out the #player-list and dynamically rebuilds it, coloring each player’s username text to match their selected token color.
• I also handled the 'disconnect' socket event to delete players from the dictionary when they close it. You can see the messaged in the terminal and yes it is antigravity but i dont use the ai and have only used it to refractor my notes, so i dont even have tokens anymore cause of the amount of notes i had.

So i also decided i probally need to expand my file directory and iam thinking of using tailwind css or just using css and making custom icons using favicons and etc by using figma also i got approved for the Student github :).

Overview

Today was massive for Poorup. I officially made the first steps into the website, creating the backend for the hompage and creating the CSS..

Transitioning From HTML to CSS

I officially finished the basic HTML path on freeCodeCamp! It feels great to have the basic foundation down. I am still missing a lot of depth in semantic HTML and more advanced stuff, but I have enough of experienc to now build on it. I just need to learn some more js and CSS.

I then watched some video regarding CSS and worked on it. I realised that CSS is really simple but involes alot of googling to find certain functions . I did one rooky mistake which was having the css file not in the right folder so it wasnt loading correctly and i was quite suprised

Backend & Real-Time Socket.io Integration

This is where the real engineering started today. Since Poorup is a real-time multiplayer board game, I can’t just use standard HTTP requests where the browser has to reload every time a player moves. I needed a permanent, open connection between the browser and the server.

I set up a Node.js server with Express in server/server.js to serve my static folder. Then, I integrated Socket.io:

• Express Server: Serving the public folder on http://localhost:3000.
• Socket.io Setup: Wrapped the Express app in an HTTP server and configured the connection listeners.
• Client-Side JS: Wrote client.js to capture input data and handle form events.

The Struggle: I ran into a bug where clicking “Play” triggered the server connection even when the username field was completely empty, which bypassed my HTML required attribute. After digging into my event listeners, I realized I was listening to the click event on the button instead of the submit event on the form. Since the browser’s native validation only checks fields during a form submission, the click listener was bypassing it. Switching my listener to form.addEventListener("submit") fixed the empty-name validation instantly.

When I run node server/server.js now and type a name in the browser, the server terminal immediately logs the connection and prints the player’s name in real-time.

Next Steps & Screen Switching

Now that the backend is running and successfully communicating with the client, my next step is handling the UI transitions. Since we don’t want a full page reload (which would kill the WebSocket connection), I am working on setting up a Single Page Application (SPA) structure ,aksed ki what to do next by usign my earlier stated Lab approach in which i dont get code but how to do stuff and have to implement it.

I am currently working on Lab Challenge 9, where I will be wrapping the login screen in a #landing-screen div and the lobby in a #lobby-screen div. I’ll use JS to dynamically swap the .hidden class as soon as the server acknowledges that a player has successfully joined.

Conclusion

Overall, this phase was a huge step up from just writing static tags. I’m taking active notes on everything which you will later find in a second repo so you can build it your own with all the Lab challenges. I find it to be quite rewarding but now i have to lock in for school cause i got a vocabulary test in 2 days. I will probally upload a demo soon an do some major changes to color, theme, name and etc for copyright reasons

Stardance Progress Log: Poorup Development

Current Progress

• Learning Path: Almost completed the Basic HTML section on freeCodeCamp.

• Note-taking: Iam taking personal notes on semantic HTML, document structures, tags, and form elements.

My Learning Methodology (AI as a Mentor)

To make sure I actually understand every line of code I write, I am using a strict, self-guided approach to learning: First of all i have strictly said to the ai to never write code for me and never give me the answer and just show me how i could achieve it. Also the ai acts strictly as a mentor. It analyzes my goals and designs custom “Lab Challenges” formatted exactly like freeCodeCamp exercises (with Objectives, User Stories, and Test suites). Because i found this to be quite efective. Also i decided to install the live preview extenstion to see my code in person and debug it easiear.

What I’ve Built So Far

• Landing Page Structure: Created a solid textual game menu and lobby framework in public/index.html using headings (h1, h2), paragraphs, an unordered list for features, and an ordered list for instructions.
• Interactive Elements: Added call-to-action buttons for joining and creating lobbies.

Next Steps

• Currently working on Lab Challenge 2 given by the ai: The Player Registration Form to practice form validation, input types (text, radio, checkbox), and connecting labels with inputs via attributes.
• Once HTML basics are solid, I will start exploring basic CSS styling.

I have now started with creating the Github and also learning some HTML with free Code Camp. I also decided to take some notes in a md file reading through the guides

I have now started with creating the Github and also learning some HTML with free Code Camp. I also decided to take some notes in a md file reading through the guides