WebScreenShare banner

WebScreenShare

11 devlogs
43h 24m 28s

This is WebScreenShare (Abbreviated is WebSS), which is a concept web app that helps friends stream their games and computer screen to eachother easily.

This project uses AI

Ai was used to quickly wire up parts of code and make basic Ui components (some parts of a dialog) and for help with state management, bug fixes, readme.md, and with basic understanding of the WebRTC protocol. This was due to the pressure from both School, life, and tight scheduling, impeding me from polishing the project more.
The project will be eventually completed outside of Hack Club and uploaded to be free and opensource.

Demo Repository

Loading README...

Simão

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.)

Attachment
0
Simão

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…

Attachment
0
Simão

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…

Attachment
Attachment
Attachment
0
Simão

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.

Attachment
Attachment
0
Simão

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

Attachment
0
Simão

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.

Attachment
Attachment
0
Simão

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.

Attachment
0
Simão

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.

Attachment
Attachment
Attachment
0
Simão

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.

Attachment
Attachment
0
Simão

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

Attachment
0
Simão

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

Attachment
0