Simi

Small QoL changes and bug fixes

TESTING GUIDE:
To test the program properly, you must first go to https://webss.znko.dev
Create an account or use a Google Signin, or just use Anonymous log-in.
Following this, create a room using the pink button on the sidebar.
Set a name, create the room. It will appear in the sidebar.
Right click it and you can create a Sharing link. Set an EXpiration time. Copy this link to another Tab on private mode with a different account or anonymous session. Do NOT use this in 2 Private mode browser windows, use a regular and a private one, to simulate different accounts, or use 2 different computers.
Paste and enter the new link. Then Join the room. Start sharing your screen. You will see that it works. You can also test this with your friends.

Switch from Github provider to a Google provider for OIDC due to a unreproducible error

Added an anonymous log-in, tested it.
Its working. time to deploy and ship.
(Disclaimer: This is a minimal concept of a idea i have in mind. Do not self host this yourself. Do it at your own risk. it will be made into a finished product in the future, possibly outside of Hack club. stay tuned in my github.)

Got WebRTC to work
The Ui and frontend is really the hardest part for me, i am still not the best person at making frontends.
But it works. just need to fix client-side bugs and behavior, add a couple of tiny features that improve User experience, figure out an ergonomic layout, and the MVP is ready to ship.
I panic coded this after seeing the deadline.
This project has been great to learn about websockets and webRTC.
Still need to get better at Ui components, it really isn’t my strong suit…

I added a better profile card with a logout button
Finally got websockets working, and we can retrieve rooms
Working extra hard to try and ship this. time is very tight…

Put on a shadCN block for the login, wired it all up (Claude did it for me based on previous context that was already manually written)
Manually wrote typings for the Socket.IO messaging from client to server,
i have also setup the Redux for state management.

After a lot of manual work ive finally got data flow working… I also tightened up code and tried to find out why RPC wasn’t working. but now its kinda working. still some stuff left to do.
a good error finally

Now it is fully possible to sign in. Changed the old roomslist to a collapsible sidebar.
The sidebar reflects the logged in user state.
Also added a basic dialog.
Switched the old int based ID to the default random id from better-auth because it gets returned to the frontend. Removed all the union handlings from services and corrected the references in the main schema. Next is finish websockets and plug it in the frontend. after we get basic room management we can implement the screen sharing flow and the User experience.

Completely verify service handler code, isolate all from cache. finished optimal cache datastructures and learned the patterns to use my data.
Installed and created a basic socket.io handlers. (SocketIO is not working yet, but the logic is there).
After i get a login working and basic SocketIO interactions i will init the github repo, i forgot to in the start…. Also added a Login with github page and React-Router. if im not logged in it sends me to the login page.

I ported the Ui to the Vite version,
Configured BetterAuth.
Completed Error Handling approach for the Services, created a middleware that catches and handles errors, including but not limited to Validation failures. Errors not explicitly handled by their class are treated as an Unknown Error to the API.
Started Overloading every single Service handler to make them easier to use.
Every error returned from Service handler is explicit. I am still writing the complete Database data flow. Then i will move to the Redis dataflow, then i will move to Security. Ai was only used for explaining errors. Every part of the code was handwritten with patterns i learned on previous projects, or i read the docs.
Errors will be fixed and Service handlers for the database will be complete the next devlog.

After testing multiple frameworks i’ve landed yet again in the monorepo approach with regular Hono, Vite, and Turbo.
Using the documentation for the tools i have scaffolded the project, and i looked on Google to find the recommended patterns and such, without using Ai, which is very good to removing my impostor syndrome.
I decided to try and make a transaction wrapper that i will use across the rest of my handlers that will automatically handle errors and provide transactions, so i can get easy explicit error messages.
I have setup a Redis connection, the database schema which hopefully i won’t change anymore, added a search bar for rooms and a create room button in the frontend. I migrated all code from the NextJS attempt to here too.

Fought with which framework to use, HonoX had an extremely slow coldboot time, so i switched to NextJS, i really wanna use HonoX, so i will still see what i can do, else i will stick with Next.JS.
Made a RoomName component and implemented a basic way to share the screen using the navigator.getMediaDevices() (on MDN) API

Scaffolded a new HonoX Project With The React Server Side Renderer, TailwindCSS, ShadCN, my own custom ShadCN Theme, Lucide, and made this little page.

This is the final devlog
I tightened stuff up.
The project exists and the base is complete.
Now its only a matter of improvement and learning
(i forgot the padding in the main page, the frontend will improve in the future and i will try to make the backend less ugly and abstract better :p, i changed way too much in the main course.. need to use claude to help me plan project and force me to stick to it because i get way too many ideas)

Refine the Ui behavior, add , fix the centering, make it more cohesive.
Next i will try to improve the animations, add search bars to posts and games, polish, and then SHIP!
I’m so excited to finish this project

fixed a few bugs with form handling after changes in the backend that i missed earlier
now the encoding is working well, we have status of encoding using SSE in the Ui,
i had to use Ai a bit doing this because i was very busy today, and i want to get done with this.
Worry not, i will be manually inspecting the code as soon as i can. Also refactored URL blob stuff to a hook so i get more safety across the Ui. Ui looking increasingly good. when everything works fine, ill give the final touches in the Ui and backend, and get ready to ship. I feel that i am closer.
I’ll also definitely build something like this with no Ai help in the future when i have more free time to improve my skills.

Set up the job code for the video encoder using the ts-ffmpeg/fluent-ffmpeg library
Refactored slug based routes and services to use nanoids instead
Made getFeature service handlers for the DB be more universal and use either slugs or nanoids or ids to work
Fixed security issue where the sessionId was not being regenerated after login actions
Resolved multiple issues related to data integrity in the backend
Standardized file cleanup, path resolution, deriving urls from paths.
Fixed Ui components not reporting the upload status for the file staging upload

Tried to isolate backend modules, changed exports, grouped code, fixed issues.
Backend code is much more readable and clean.
Fixed bugs and improved overall reliability of the app.
Added TODOs around the code
Still have a bunch of issues to fix.

• Added ip address checks and trusted proxies
• Abstracted filepath operations.. shouldve done it from the start…
• Change the fileServe handler to middlewares to free up space in core/servers
• Make a periodic scheduler for cleanUniverse that runs every 6th hour with cron
• Improve the performance of the cleanUniverse function by switching to a set, and added a failover for missed Bunqueue jobs
• GenericizeCropDialog component for image cropping functionality in the frontend.
• Converted Profile updates to use the Form hook and React query
• Documented critical issues and improvements in the backend audit and file upload staging.
• Introduced centralized MIME type validation for images and videos using Zod via a Record that checks it all based on category and functionality.

Well i was thinking, just ship, it doesnt matter, but my mind kept nagging on me to release an actual closer to finished product (even that sounds bad) so i spun up Claude Opus told it to write //TODO: (Human) comments all across my codebase for me to use the tracker and actually implement stuff step by step because i have so much code its easy for me to get lost, and now, we have actual proper Upload staging, with Bunqueue to delete expired files and Redis to make references to these files, so we have a Nanoid for the file. To be fair finding this tech out and refactoring my stuff to use it made me happy, but i can only be proud of this engineering when i ship it.

Setup a Upload stager and move away from multipart review and rewrite code, setup Bunqueue.

Added Progress bars to forms, (had to use Axios, HC Doesnt have it)
Fixed a problem with the coercion that made posts always show up as public, and fix another problem where we couldnt add new images to posts with patch. i think all i need is to review and rewrite code that might be unclean, test the app more, write jsdocs. I want to maximize the user experience. still need a thumbnail picker on Upload Video.
And i only now found out what a Job queue is, which could have solved all of my issues early on…

I now have put the Zod validation on all form hooks and verified the code and put the form boolean coercion on the requesst input schema and the form request output and verified the flow. Also moved the games handler from slugs to nanoid because slugs are unreliable
The form validation is working well. Also need to add a Thumbnail picker thing somehow here.

Add form handling and use the correct pattern, code is working but the files are still pretty messy, im still shaping the functionality. the Games carousel Now is an actual carousel (it didnt have an actual working carousel so stuff would just end up clipping)
(the cover is at the center because im dragging)
I have to also change the slug handling for games and swap it to the Nanoid…
Now i learn NOT to make bad architectural decisions.

User experience work, form handling, error handling, moving previous manual stuff to React Hook Form. still have to perfect error handling.
Made more generic components, and tried to find broader and more useful ways to handle certain behaviors.
Struggle a lot with adding the post Sharing feature, which automatically scrolls to the post and highlights it.
still have some backend stuff to tidy up. I just have to try and add the media component. After i tidy up and refine the frontend and i think it is good enough i will do the rest of the finishing touches and ship. this project is taking more than i expected it to :p but i am going to self host it So might as well make it look good

Worked a lot on the UI, fixed all the querying and caching finally. I dont think i have to worry about that.
I still dislike the code for the frontend. I made a new bunch of components for uploading the images in hopes of making it user friendly. I still think i know almost close to nothing about react, this is my hardest project yet. made a video to post here but it was too large. :(

Implement hono RPC querying, review and optimize query code.
Now less HTTP requests are needed for data because the api returns altered data the cache updates it in real time without having to request again

Make sure that the code patterns between posts and videos was similar, fixed swallowed errors, centralized ownership and public status checks, learned new keywords, is and asserts.
Need to do it for games again, route and service level. I did route and service level check for all the other features, only games is needed, although i told Claude to check it for me and do the tedious parts to save time. Also designed a cool banner using copy pasted ASCII art and gradients, i love it i think its beautiful. I cant draw at all so that’s sad. Unfortunately Canva exported it all with problems. Cant get it to export how it should, so i think screenshot quality is all i can get.

Extensive reviewing and bug fixing and testing of backend code. Studied how PKCE worked, questioned a lot of my own code, looked for security problems (such as in URL Redirection), triple checked logic, thought about how should i handle missing claims such as Email from OIDC.
Fixed functions that weren’t behaving the way i wanted, modularized code, went away from the RoR controllers approach (Discouraged by Hono Docs, just put it in routes anyways, its still readable with time). Finally got the Storage path handling over with, its organized by feature/nanoid/filecat-uuid.ext. I’m focusing a lot on perfection and too little on refining the Ui and then shipping the completed project after testing. Also took a dive into caching and other concerns. I was checking my Error Handling flow, because i want to use my custom AppError middleware. Claude help was minimal during this time, some code was rewritten entirely, such as session management, and other stuff that i wasn’t clearly understanding.
Next i will setup media reencoding, and then i will perfect the Ui and ship.
the cleanUniverse function still isnt reliable yet but im still working on it. when its tested reliable and safe ill put it to work every 6 to 6 hours its called by a timeout. I also need to stop being a workaholic and go sleep

Migrated everything to bun (it even automatically started streaming the videos for me)
Made a single package with all the shared data schemas (might also move the DB there in the future)
Now i need to apply the data schemas everywhere and improve the react components and the code quality, refine the features, try to write tests, manually test edge cases, clean it all up to be nice and tidy and then i’ll be ready to ship. I also got rid of S3 again because its painfully slow (i was self hosting it), an ill deal with handling file expiry and stuff later. it keeps being extremely painful to do that for some reason because i cant pick a way to do it… im way too obsessed with optimizing the backend code

Realize im being forced to make even bigger changes because i have undefined variables. I am still learning how S3 and stuff works and just found out about presigning.
here’s a picture of the output for you to laugh at :D

Move entire storage to S3
Extract boilerplate code to generic functions
fix bugs, code re-structuring.
planning to movo to hono and currently i am taking care of the frontend code and i am also testing the API.

Video is working nicely but the Ui code is still too messy, i found new stuff i can optimize in the project. I fixed a bunch of bugs and edge cases i let slip thru in the backend. Im planning to switch from Node to full Bun and Hono. I also definitely have to implement HLS streaming, and style the Vidstack player. I am refining the user interface step by step, then im trying to make the components more reusable, readable, and trimming the fat. Planning to move the Database to a shared package alongside with Zod, add more error handling in the Ui, more type safety, and a single source of truth for input validation both in frontend and backend. Im really liking this project so im working very dilligently on it. really trying to ship something good for the first time. wish me luck with making the Ui responsive across platforms.

Modularize the stupidly complicated code in my backend,
add a redirect handler for auth.
Add better error handling.

I have set up tanstack query (It optimizes the app by caching requests so we dont do them all the time, and makes accessing state along other stuff less repeated and easier, leading to more readable code)
I have also made the handlers and api for the videos, and fixed even more bugs.
Scaffolded a quick Ui for the videos and confirmed that the Api works as it should.
I’ll make a proper Ui for the videos and wire it up correctly with the Games, for organization.
I also fixed issues with the scrollbar not behaving as i wanted it too, and it took a lot of time to figure out the solution. I had to use Claude with chrome for that.
I still have to do a complete analysis of the codebase, i will try to move around stuff and maybe centralize the types without breaking everything.

Add a game editor and make the layout fit the rest of the content, and also animate it.
I still need to add a way to create new games but it will be based on the editor, and its also WYSIWYG, like the posts.
Also need a way to edit posts. then i can try to be fast enough and add a way to post videos, and then they will be linked under individual games if wanted. I’ll try to ship the project as soon as i get all basic features working. Also logging in should be managed thru the OIDC provider’s group restrictions, who is allowed to login has access to every resource. Still need to add a proper user profile endpoint (the parts that show logged in user are just for the logged in profile)

Add a game display and proper fetching

EDIT: I cannot remove old pictures, i had to crop it for privacy reasons. left something in the picture i shouldnt have, so i deleted and reposted the devlog.
Most of the project and layout setup, Also basic OIDC Setup (Claude did this, but it is NOT final, i will end up changing this and writing manually in the Express API). Code reviews, quality improvements, and questioning the Navbar implementation.
(This devlog logged so much because only recently i figured out hackatime was treating these as separate project but the issue is that in one of the two computers im developing on has a capital Z on the folder, leading to this)
Also setup a basic Posts Page, PostgreSQL. I will eventually make it able for me to review stuff such as games and projects as posts in my website.

Start Change to a better approach to file uploading.
Write more JSDoc
Review more code
Finish writing handlers
Fix bugs that slipped through.
Created a cleanUniverse function that is close to working, that recursively wipes orphaned files and database records.
Question and challenge my own used patterns
Create a small basic CLI to call internal functions to make development less of a pain
Used the wrong database server while coding ( running on remote Server instead of local dev machine )
Wrote trash garbage code that would probably get me fired if i wasn’t unemployed.
Have a bunch of problems i hope to fix

Finish setting up a base API for the games list, i will then try to support adding games to it using values from IGDB. I’ve also noticed some points in my API that i can improve and work on. I feel like i really have improved my experience with Express since i started this project :D

Setup for Videos and Game data, add some cool animations, add a cool constellation background, and use PixelLab to make a cute pixel art fox to put in the corner of the screen (I have terminal skill issue with drawing). The image is not 100% Ai and might not be final, it has been slightly edited in the editor.

Animations, and perfecting grid and frontend Ui code…
Geist Pixel Font

Change the complete architecture of the posts from a blog style page to a Twitter style page… I think it would suit me better.
I also suffered way too much with trying to get S3 to work, and i didnt like Minio, and because i was already suffering for a while i had to revert all my changes and vibe coded a local storage system because i was tired already… (I will peek at it later no worries)

Optimize code, review the database code, write handlers and other stuff for posts (this time no Ai generated code was used).
Install and setup TipTap, get a basic editor in.

I wrote a profile management, and i setup a OIDC Login System. Reestructured code, and setup unified routing so if i change a route it matches everywhere.

Added Discord Activity Tracking via Lanyard Websocket API using a Express and WS Server to redact discord user data!

Created the project

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