OpenOverlay Used AI

I made a general setup to add different types of components you can add to an overlay, i already implemented:
- rectangle
- ellipse
- image
I made it simple to implement future components and define their properties.
Properties and transform can now also be edited in a inspector which pops up at the right of the screen, when a component is selected

I finally added the member page in the sidenav, here you can edit members role in the workspace and invite / create and manage invite links to the workspace.

I implemented some api routes regarding workspace member, roles and workspace invites, in the next days i should be able to put a bit more time into this project

I made a render source edit page, where you can change details about the rendersource and transition to another overlay in realtime, when a overlay switch occurs, a websocket message gets sent to the render client and the overlay fades smoothly to the new one

i added a websocket handler to send the client a websocket message each time the document of the requested render source changes

I worked on implementing render Sources (a render source acts as an url, which is linked to a overlay, but the overlay can be switched on the go and then the selected overlay gets rendered in that url) its not working all the way yet, but you can create render sources and authenticate to a readonly version of the yjs overlay docs. Im planning on making a second websocket connection, which notifies the clients about overlay changes and then the client connects to the new document.

I refactored the code a bit so everything is managed with zustand (state management). I also added a canvas, which can be resized with a custom width and height. As you can see, i also improved the design of the other clients cursor for better visibility. Next big thing is getting a dynamic render source to work, so you can switch overlays on the fly.

I worked on a real canvas system, so you can pan and zoom the view. It took me quite a while to get the zooming right, but eventually i figured it out. I also made a little toolbar and implemented the draw rectangle function. As you can see in the video you can also undo and redo changes, thats actually a built in yjs feature. I love it.

I implemented some basic canvas functions, such as creating rectangles, moving, deleting and resizing them. everything synced in real time to all clients.

I had some problems with doc persistance and reliability of yjs in general, so i made some research and came across y-redis, an yjs server implementation with redis and disk persistance in a object storage, i integrated this awesome open source project into mine and setup a full docker compose configuration, now the service runs reliable

I replaced the rectangle with a cursor and made the users send their username, so others can see whoms cursor it is. For now clients can send a username they want and its not getting verified, i need to implement that in future. I also added a deploy pipeline to test it on my server with multiple devices.

I began working on the real time collaborative editor. I made some research and decided to use yjs for syncing canvas state between all the clients. It took quite a while for me to figure out how to setup a server for yjs and implement a custom auth middleware, but eventually it worked out after some time.
I setup a small demo, syncing mouse cursor and a counter between clients

I added support to upload a profile picture when initialy setting up the userprofile

I implemented the api routes i had planed in the previous devlog. you can now create a workspace, slug is automatically generated when entering a workspace name, selecting / uploading a logo is not yet implemented

I started making a database design and documented some api routes

I made a sidenav, where you can select a workspace, and navigate between menues

I switched to a sidenav and created a custom small navmenu with some profile options ThemeSwitcher and a Create button for future use

Created a form to set a username which is then stored in the user table in the mysql Database over the API routes i made in the last devlog.

I added some API routes to get and create user profiles linked to a SuperTokens user account

I decided to use Shadcn UI for my Project, and maybe customize it a bit in the end. So i implmented Shadcn UI into my React Project and removed the default UI Components from SuperTokens and replaced them with shadcn Components. To add the functionality i used the SuperTokens SDK to make custom UI. I made login and logout components, i still have to do a component to reset Password and handle the google auth callback. I also added a Navbar, with some basic buttons like login logout and a Theme toggle. Im not yet sure if im going to keep the top navbar. For the Overlay-Editor i want to implement a sidebar, but for dashboard a top navbar could fit.

I setup a nodejs express backend and a react frontend for my Project. I decided to use SuperTokens (self hosted user authentication) for my Project, because I dont have much experience creating secure authentication and I want my project to be safe to use.
I implemented superTokens in the Backend and in the frontend React Project with the default UI. In future im going to replace default UI with my own, but for now that's good enough. I added Email + Password authentication and Google Authentication. For now i protected the home route, so you automatically get redirected to login, when you are not logged in.