shurgbee

Small refactors before final submission (fixing broken links)

ok so I completely forgot I had to make these 💀. I ended up adding the following things
- Containerization
- Disconnect Detection and redirecting
- Env Detection
- More words
- Connection Dot (helps players see their connection status)
- Fixed issues where players could connect to themselves.
- Queue Message that tells the player how many people are in queue

Next up is probably making the backend typesafe using Pydantic (i am never using python for backend again) and then implementing room creation and joining functionality (as well as bug fixes)

We're almost there. I've implemented the ending logic (if guesser gets it right/wrong and if someone disconnects). I've also added a modal that pops open when the round is over informing them what the word was and redirecting them to the home page. I have (mostly) created what I need for an MVP, now all that's left is to deal with my technical debt and get this ready for prod.

Fully implemented the game window (chat interface, conditional info) as well as the chat features, and functional timer, now I have to implement message filtering and a win/lose screen (prob gonna make it a modal)

Took another break, but I'm back for a (hopefully) more consistent commit schedule. I've finally fixed the connection logic and get started working on the actual game part

AI NOTICE 🤖: I use AI to help me with an issue I had. I was struggling to pass the websocket connection to the game page whenever navigating, so I asked AI to create a solution. While the AI did code it for me, I wanted to go through and make sure I understood what it did instead of blindly copying it.

Basically, it used the useContext hook from react to pass down the reference of the websocket to the page instead of having it within the page itself. This allows the root component to navigate between pages while maintaining the same connection (if you want to read more abt useContext use
this link
) it then instantiated the useWebsocket hook as normal and passed down the neccesary state variables.
Next will be actually creating game logic and the 'chat-room' aspect of the project.

it's been a while...

I had a bunch of IRL stuff to attend to so barely any coding. The architecture was also starting to intimidate me and I realized that the scope of this project was massive (I also got distracted by how hirable Java is like I never anticipated that happening).

I finally got around to making the joining logic, cut out a bunch of bloat. You don't know how happy I am to see this screenshot

FINALLY GOT WEBSOCKETS WORKING!🎉🎉🎉

Took forever cause I didn't really understand how to connect the frontend to backend and how to format backend code but from here it should be relatively easy

For this project, I wanted to make a simple chat app, then attach a game element onto it. I started out with a LOT of research into what tech stack to use as I'm unfamiliar with Websockets and how to use them. I ended up settling with FASTAPI backend and Vite frontend. I set up dev env for vite and made a basic UI, and I'm going to start looking into react Router for routing.

FINALLY UPLOADED TO REACTIVE!! 🎉🎉
I ran into a bunch of issues between finishing the product and uploading it:
Build Errors (aggressive eslint configs but whatever it was easy to fix)
Provider Errors: Cloudflare uses something called OpenNext to build the app for cloudflare workers, but opennext is broken on windows and recommends wsl so I just swapped to vercel
DB Errors: Had to swap from localhost to Neon (was going to use Tembo but they shut down RIP 🕊)

I'm not done with working on it for SoM but I'm 100% taking a break (put in ~16+ hours in 3 days and I think I'm developing carpal tunnel💀)

Good News! We're in the home stretch for the MVP for Reactive!

Bad News! I spent 2 hours debugging some server error Server Functions Must be Async. Turns out, having all of your types in the server function makes everything a server component which is NOT fun. Fixed that and made some other changes (cart icon, added carousel loading). UI is screwed up but it won't be too crazy of a fix. See you in 2 hrs :)

Finished out the Checkout Page will 99% of it's functionality (i'll leave the styling issues to be resolved after the MVP is shipped)
Also implemented the localStorage Cart parsing and writing (had to learn about Maps the hard way)

A LOT of work has been finish since last devlog:
- MVP for Checkout (took FOREVER)
- Adjusted the formatting how the website deals with the cart
- Added Skeleton Render for items Page

Added items slug page w/ hydration from server components as well as shopping cart logic. Next will be shopping cart page, cart icon, and carousel hydration.

Fully Setup Drizzle ORM, and implemented the autocomplete function. Next will probably be the Items Page that uses nested routes

I started working towards the searchbar (figured out how to mcguyver a solution using the popover and command component) and got Drizzle ORM connected (but not setup)

AI DISCLAIMER: I used AI to create PSQL Queries and to generate fake data as well as some debugging some of the errors that came up when setting up Drizzle

I spent 2 AND A HALF HOURS TRYING TO MESS WITH TAILWIND COMPONENTS TO FIX THE CARD >:((((( (and added a searchbar that I'll delete later). I'm giving up and starting work on the drizzle orm and searchbar autocomplete as well as item population. I'll come back if I have time later

Started working on the actual website (setting up dev env, creating home page, adding components).

Next is setting up the DB and properly hydrating the components.

I started out on the basic layout of the website after making some mockups. Due date is in 2 days so this is basically a hackathon, meaning I have to lock in and move fast. I planned out the website layout on paper and got the dev env set up.

I setup my development environment (hard to do when expo has WRONG documentation >:( ). I setup the React Native app and started exploring the RN primitives as well as how well my designs on Penpot translate to Native Code.

Finalized some parts of the design alongside some file cleanup and other small chores. Product has reached it's MVP and is ready to ship (TBH I feel like I've spend too much time working on something that isn't really complex. apt I'm just doing minor UI fixes).

I changed the timeline cards to be able to parse from an md file and organize themselves by start date

I tried to change the timeline card to be smaller which meant I had to change the spotify card to be larger which took way too long :)))))

Changing the CSS of the about me section, I also worked towards the timeline part of the page, finalizing the general layout of the timeline page.

After completing the Projects card, I've moved on to refactoring the About Me Card

I transformed the old social page into a Projects page which parses in md file using astro collections to automatically format them into little sections that are scrollable.

I've revisited the project after a long time and decided on a layout inspired by someone else's personal page. It'll require me to use helper functions to get the projects that I've worked on in my github