934: We Built a Real-Time, Local-Data, Competitive Coding Game

Scott, Wes, and CJ dive into SynHax, Scott’s Hackweek project for code battles. They discuss live coding duels, referee controls, and the surprisingly simple tech stack that delivers instant updates and audience engagement. Show Notes 00:00 Welcome to Syntax! 01:50 Brought to you by Sentry.io 02:30 What is SynHax? This Button Broke Our Brains (CSS Challenge) 04:21 The Stack SvelteKit Postgres Drizzle Zero Sync Better Auth Syntax 931: How to make good choices when starting a coding project 07:39 How it works 15:03 The battle experience 28:28 Fun details 34:12 Creating new battles & the admin dashboard Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Scott Tolinski?

  Welcome to Syntax. Today, I'm talking deep dive into my Hack Week project, which is the Sinhacks competitive coding game. This thing is going to be useful for us when we do our CSS battles. We can code live in UI battles. We can have an audience watch us do it in real time and vote and all these great things. And I built this project on a stack that is going to change how I build apps. I think forever because I was so efficient with this and I was so able to knock out so many things so quickly and iterate and build and have this thing be so fast and good. I want to talk all about it.

• 0:42Scott Tolinski?

  I'm going to scream it from the rooftops, this stack here, because I had such a good time building this thing. So, we're going to do a deep dive in that. But before we get going, let me introduce my two wonderful esteemed co-hosts today. With me as always is Wes Boss and CJ Reynolds.

• 0:58Speaker 01

  Lou.

• 0:59Wes Bos?

  What's up? Excited to hear about your project. This is something that we very much needed and it's amazing what you have built. So, let's get into it.

• 1:09Scott Tolinski?

  Thank you. Can you say any other nice things about me while we're...

• 1:11Wes Bos?

  No, that's about it. I'm not sure if you can see the picture I just drew of you on my Hack Week project, but that's about as nice as I get.

• 1:22Scott Tolinski?

  Okay, speaking of pictures here, folks, this is going to be best consumed on video. I'm not going to say, "Look at this, look at that." There will be things to see here and there will be a better video than it will be audio, but you will get a lot out of it if you are listening to like technical choices and things like that. I'm going to make sure to at least talk all about that kind of thing. So, the general idea for this project, and keep in mind, this project was built for the Sentry.io Hack Week. Sentry is the perfect place to track all of your errors.

• 1:53Wes Bos?

  Look at this ad read.

• 1:54Scott Tolinski?

  Build fun things and just like make sure your stuff's working. Sentry is producing all kinds of really great features. And if the Hack Week is any vision into the future, the future of Sentry is very bright. I mean, even the immediate future of Sentry is very bright because they've been dropping new features left and right, like the new Seer feature that allows you to fix and solve problems, get to the root of the cause of things with AI, and it is very good. And they have a pretty cool logo that CJ used in his Hack Week project. Okay, head on over to Sentry.io/synthax, sign up, get two months for free using the coupon code TASTYTREAT, all one word, all lowercase. That's right, I'm talking today, folks. Synhacks. This is a competitive coding platform. It's built in SvelteKit. I'll talk maybe a little bit about the tech in a second.

• 2:38Scott Tolinski?

  I just want to maybe talk about the platform first. It's a competitive coding platform where you can do a CSS battle. And it's a UI HTML and CSS where you code. The idea here is that you code on your own local machine in your own text editor. And you can see those updates happen in real time on the site. Audience can watch as things are being built in real time. When it's over, they can vote on who did the best or whose code they liked the most. There's even a referee view so that you, if you have like, let's say, a producer named Randy, he could go ahead and manage the flow of battle. He could control the timing of things. He could give it overtime. Typically, when we do these CSS battles, if you haven't watched those videos,

• 3:22Scott Tolinski?

  give one of our CSS battles a watch. They're super fun. CSS battles are not practical UI. We're writing shapes. We're seeing who can do it in the least amount of code or the fastest. And that pretty much always leads to bad code, whether that is code that we're just squishing to be really small, impractical code, hacks of the platform, little things here and there. And like, sometimes we lose just because the renderer is like, I don't know, you don't get 100%. So I set out to solve all those issues and build a platform where, you know, it's a little less, I don't know, a little bit more like, let's build stuff. Like Wes and I, we did a video where we were trying to code this button, this keycap button that you see on screen here.

• 4:06Scott Tolinski?

  And that button had interesting interactions, whether that was animations or active state or those types of things. And like, that could never happen in the current CSS battles flow. So I took it upon myself to build something that would have allowed us to do that there. So what did I do? What did I choose to build it in? The stack itself uses Postgres as a database. It uses Drizzle as an ORM. It uses ZeroSync for the local data. And I've been able to connect those two. I can even like, show some of that where like, typically what you're doing with like a schema is that you have to write a schema and you have that schema in Drizzle, right? I was able to write the schema just in Drizzle

• 4:49Scott Tolinski?

  and then use a really wonderful package that connects.

• 4:55Scott Tolinski?

  Zero to drizzle. So instead of having to write multiple schemas, I'm writing a schema once, you run a script and that spits out the zero sync schema. Now there's, ignore this permissions right now that says anyone can do anything because I'm just sweeping down under the rug right now.

• 5:15Wes Bos?

  I don't need permissions.

• 5:17Scott Tolinski?

  We don't need permissions. What that package allows you to do is just slurp up your drizzle schema and it generates you one and then it bops it out as a schema that's ready for zero sync to use. So this is a generated one. I didn't have to manage this. I didn't have to type this at all. So that's really nice. One schema to rule them all, right? If I need to make modifications, then I need to make modifications. And it also gives me types where I can just bounce the client side types right out of here. And, and these are the client side types rather than the database types.

• 5:49Wes Bos?

  Can you show it like actually working? Just so we can get a visual of, of how it works?

• 5:55Scott Tolinski?

  Which part would you like?

• 5:56Wes Bos?

  While you're talking about tech, like, like the actual battle part, you know, like, I'm curious about like what data is even being stored in the database. Yeah, but like, let's, I want to see it before you, before you talk about the, the, the choices.

• 6:11Scott Tolinski?

  I'm talking about the just tech behind it.

• 6:13Wes Bos?

  All right.

• 6:14Scott Tolinski?

  I'll talk about it just one second when we talk about how it works. Okay. Because I think it's more important when you, when we're looking at it to talk about how it works. The authentication is done with Betteroff and it uses GitHub Oath. The UI is done with SvelteKit and the APIs that are interesting is the file system API, which is how we're managing to do that file stuff. I'm going to spend a lot of time on that because that's like a core part of this thing. Building this strategy, first things first, I build a read me and we did a whole episode where I discovered planning. I wrote this read me by hand. This is, this is not done with AI. I wrote this and this was just like, what do I want it to do? What does a general schema look like? What are even some of the routing

• 6:57Scott Tolinski?

  structures? And this might not even be up to date, but I wrote this whole thing by hand before I wrote any code. And that led me to be able to really Get a good handle on things and I was using this to then pass into AI to ask questions about stuff I'm forgetting. How should I modify this, etc. Another thing I did, which I don't typically do is I built the entire functionality, like the HTML and the JavaScript before ever writing a line of CSS. No CSS, no even thought to where things are going to go in the UI. Just dump it on the page, the flow of the app should work, it should take you, it should do all the things you need to do. And then I can get into the UI. So very two different strategies for me.

• 7:37Scott Tolinski?

  I planned and I did logic first. So Wes, it's now time to see how this thing works. So typically what you would do in this app, you come in, you select a battle. There are sound effects, you guys probably can't hear them, and it would give you an option to select a battle. Now, these are again are just database records. You click a new, uh, new battle. What it's doing is it's creating a record for a battle. And the inside of that battle, right now there are no participants, so there's battle participants. So this is the Randy view, the referee view, and you have the option of making a public or a private match. If it is a public match, then there's a watch link here ready for you to just share with other people,

• 8:21Scott Tolinski?

  where they could watch the battle as it's happening. There's options for a timed match will count upwards where when you submit your final code, the person who finished the fastest would be, their time would be saved. And then there's the one I anticipate us using more, which is the timed match, which is how long this thing can be. So like if we're going to do a battle that's 20 minutes, you could have this be 20 minutes. It puts 20 minutes on the clock here and it shouldn't let me start this battle. But since this isn't grayed out, that means, uh, maybe there's some missing logic there. But right now there's zero participants locked in. So you have the battlers themselves, which are then going to be users.

• 9:03Scott Tolinski?

  So from here, I would just click invite, gives me a link and. I head to this link and this is the, if you are a battler, somebody who's going to be competing in this, this is what you see here. Man, I got some CSS issues here. I should tune that up. Either way, if you are logged into this app, you're a battler, you can join. Clicking join just creates another record and that gets you in the lobby. So you'll be seen as the referee, as a participant, but not locked in. So you don't show up here yet. So you can be like potentially in the lobby and then you could leave or join again.

• 9:42Scott Tolinski?

  And then you could lock in, which allows you to essentially be in the battle. Now, the interesting technical stuff when you lock in is that you'll notice here, there is code right here. It has an app already, which in the code itself, when you click lock in, what that's actually doing is it is accessing your file system and it is creating a folder. If you do not have permissions at that point, it will prompt you for permissions to say, what is your, your, your, your code here? That, that prompting will also happen when you first log into the app because this app does need your file system access. There

• 10:25Scott Tolinski?

  is no editor interface in this thing for you to use. Otherwise-

• 10:29Wes Bos?

  I'm so excited for that because like we're, every time we're using CSS battles, we're like, ah Emmet, ah, don't have my shortcuts, you know? And I'm hitting all these-

• 10:38Scott Tolinski?

  Exactly.

• 10:38Wes Bos?

  Random shortcuts. It's, it's so much better when you're like in your own editor and like comfortable, or you can just focus on the actual coding and getting the result out.

• 10:50Speaker 01

  It'll be much easier. I mean, this might be cheating, but we could use AI too, because we have AI-

• 10:54Scott Tolinski?

  You could use AI too.

• 10:55Speaker 01

  And it like-

• 10:56Scott Tolinski?

  And that was intentional, by the way.

• 10:57Speaker 01

  Yeah. Yeah. So this is great. I think this is one of the things people want for CSS battles, even for like Code Wars, all these competitive coding platforms, you have to use their website. This, this is great. This is like the killer feature here, I think.

• 11:10Scott Tolinski?

  I hate typing in a GUI online. And so the file system access checks for people who are interested in the code for how that works is that when the main layout after you are logged in loads, this is a layout file, I'm running a files check. Files is a customs felt state. So I'm running this function just whenever this file runs and it just simply checks to see if you have access. And this is a big old giant complex state object here. So that check is really just saying first try to restore directory access. If that has not been restored, yeah, I set the status to you. Or if it has been restored, then set you have access and that will then not prompt the user again.

• 11:55Scott Tolinski?

  Otherwise, set status to no access. And then because that automatic access check, the browser does need user interaction before writing files. So it will prompt you to read permission it if you want to have access to writing files. And that restored directory handle, the file system access is stored in an index DB outside of zero sync. It is stored in a just its own index DB because the you can't store that in local storage or anything like that. I just have the the handle for the file system being stored in an index DB. I checked to see if that's there.

• 12:38Scott Tolinski?

  If it's not there, then I I re-prompt and say, check for access to it. If that fails, so yeah, query permission. If the handle has query permissions and the permissions are granted, then go look for the files themselves. Otherwise, then you are going to then request permissions at that point. And the user is going to be prompted to say, all right, let me let me give them access. So the file system stuff's interesting because ultimately what I'm doing is I am storing the project folder handle and then there's the individual project handle. The individual project handle is the mini folder.

• 13:19Scott Tolinski?

  So I'll show you there is, what this does is like many games or many apps. What it does is it has a folder that stores all of the files for that game. And this is no different than that. It stores all of your battles in one folder, whatever folder you give it. And it does them based on the name of the battle themselves, which could be changed. It could be an ID or something like that. Sorry, we have two code bases here. So this is the file state and it gives you access. And so when you lock in, it creates a folder in the folder that you've given it access to, like the keycap button one, and it has created these files if they didn't already exist.

• 13:59Wes Bos?

  Okay, so it gives you, you get a CSS file and an HTML file?

• 14:03Scott Tolinski?

  Yes, and there's no head or anything like that. You don't have to link them because I wanted to reduce the amount of bloat here, especially if we're doing this in a battle. I wanted this to be like, right now, this is actually interesting. I'm not sure right now if I change this, if it will update live. Okay, it won't. I'm not pulling for this yet. Cool. Simultaneously, Wes, what it's done is it's added this code to the database. So it not only has a file system access, but it has the string of this HTML and CSS added as a string into the database.

• 14:36Wes Bos?

  Okay, so that's, that's what I was wondering is, is how this all works. So you have your file system access, which is the browser is monitoring your local files for changes. And then when those changes happen, that's getting thrown into, that's getting mirrored to zero sync, which will then, as quickly as possible, will then sync it up to the cloud or to the database.

• 15:03Scott Tolinski?

  Yes. So let's say we want to start this battle and I can show you that in action. So we have Scott, we have the battle. I can click start and the battle started. You can see automatically, I didn't have to do anything. It redirected me to the like the, the battle screen for the code and this over here on the right is the referee view. So I can, I can hide the referee view for now, or at least move it over here and focus on the coding view. The coding view just shows you the code, the target, this is the target, what we're trying to build and this is the code that is active. So if this works right now, you can see when I click save, it immediately updated real time here. And the way this works is I'm simply pulling to

• 15:45Scott Tolinski?

  check for file changes. So I'm saying, hey, did CSS, uh, did CSS change? If it changed, then update the database record, not update the UI, update the database record. That updates the database record, which then in turn triggers a zero sync.

• 16:07Wes Bos?

  And it changes the UI.

• 16:09Scott Tolinski?

  Right. Which just happens automatically. Yeah.

• 16:12Wes Bos?

  You don't have to worry about, like I immediately, I was like, oh, but do you like, do you send diffs of the HTML only if stuff's that has changed, but the zero sync takes care of that with the CRDTs? Is that true?

• 16:22Scott Tolinski?

  Yes. It does. It does. But like, you've got to think about it this way. Since it's just a string, I'm not like breaking these out into individual components. It is sending that whole string over. But like, it's, it's miniscule, the amount of stuff we're changing, right? We're not, we're not building a whole app in here. So it doesn't need to send that much information.

• 16:41Speaker 01

  Yeah. And I guess to also take a step back, because you talked about the tech stack, but that, that's why you chose zero sync is you basically get real time for free. You get diffing for free. You get reconciliation for free. You're using their framework to automatically sync what the user is doing to the cloud, which means you could have a spectator view. You could have an admin view. Everyone else can see what everyone else is doing because of this zero sync architecture. Is that accurate to say?

• 17:07Scott Tolinski?

  That's accurate to say. And like, this is what the audience is seeing. The UI could use a little bit of work, but the audience is then able to see not only my code, but any of the other battler's code. And as I'm coding itself, this again is all being propagated real time. Oh, there it goes. It's just slow. Yeah, there it goes. And so that way they could see in real time as I'm coding it, not just the UI, but they could see the code itself as we're typing it. And then they could actually click and use this thing as we're actively building it. So again, like you said, yeah, it is, it's just pulling that file. Because what we can't do is we can't check for partial file changes.

• 17:50Scott Tolinski?

  So it's not going to update as I'm typing. So I can type here and this isn't going to update. But the moment I hit command S and the file saves, it happens. So it happens like automatically.

• 18:01Wes Bos?

  I wonder if you could use VS Code's save without formatting on key up. Because like you don't want to, you don't want to save every single second because then your, your linters and everything rerun. But you, you kind of do. Or even like the VS Code has like a, where you just like, once you stop typing for a second, it will save it.

• 18:20Scott Tolinski?

  Yep. Yeah, you could solve all those in different ways. If you, if you don't want to hit command S, or you might be the type of person who like, doesn't want it, try to save when it's in a broken state.

• 18:31Wes Bos?

  It's true. Yeah. You don't want, you don't want to hit save until you like are happy. Otherwise you send up broken changes. I love that. That's so simple.

• 18:40Scott Tolinski?

  It's so simple. The whole thing ended up like, like I said, the tech choices and like, I thought about this stuff for a bit. And when I had some of these epiphanies, I was like, oh man, this rules. And then the fact that it just all worked out was like, really super nice. Um, this should also work too. I'm going to try this here. I also made a breakout view. One of the things that we hate about debugging this stuff is that you don't get access to your dev tools. Because these are done in sandbox iFrames. Um, okay. So we got a hydrate and mismatch error. Let's see if this works because this should work. Um, we're going to see if I type in here, if this updates in here. The hydrate, it worked. It was slow. I don't know why it's slow, but it is slow.

• 19:22Scott Tolinski?

  I'll have to figure that out, but you could, you could then break it out and not have to debug it within an iframe. This is just straight, just your.

• 19:34Scott Tolinski?

  CSS battle code and only your CSS battle code.

• 19:37Speaker 01

  Can I just mention something that's a little bit confusing and I think it's because you're using Comet. I can't see your URL unless you hover over it because right now it looks like every single tab is localhost. But this is like a unique URL with the state in the URL. Is that accurate to say like? This URL points to the render view of player one, which is getting rendered in that little frame. But in this case, you're being able to see it fullscreen.

• 19:59Scott Tolinski?

  Many times people would approach this as creating this URL. And then using that URL in this iframe is the way people would often do it. But I'm actually assembling that iframe in a different way. So I'm assembling the iframe by getting the HTML from the database. And then where's the blob and I'm creating a blob. Oh no, sorry. I'm using, I actually changed. I was using a blob at some point. All I'm doing is passing in the code. I'm running it through a processor here using a Svelte derived. So I'm taking the HTML and CSS. I'm deriving it into the final code and I'm passing it as a source doc.

• 20:42Scott Tolinski?

  Because of that, I can then use that again in another route. Using the Svelte kit kind of route groupings, that's a blank route. That is simply just

• 20:56Scott Tolinski?

  doing a query, deriving it and then outputting it as code. So nice and simple.

• 21:02Wes Bos?

  And when there's a change, that preview, it just refreshes the whole page. Or does it, I guess you could just replace the entire CSS.

• 21:13Scott Tolinski?

  When there's a change, it's just treating this as a reactive value. And it's just rendering it with the add HTML reactive value in Svelte. It's recognizing a change here. It's rerunning this code. So what it's doing is it's recognizing a change to the hack itself. So hacks right here. It's recognizing a change. It is rerunning this query, which is grabbing the current hack. And it is outputting it here. And then that gives me just the HTML and CSS as a string. I'm able to derive the full on HTML directly from that. So reruns this, reruns this, reruns that.

• 21:50Speaker 01

  Can I check for understanding like initial page render, server side render because it like loads the code and spits that out? After that, line 34 is like a live query. Like, that code is sitting in the browser. And if z当前 query hacks changes, that just updates in real time in the browser with JavaScript. Is that accurate to say?

• 22:11Scott Tolinski?

  It is not, because there's no server-side rendering. And this only reruns. Yeah, when does this rerun? Yeah, Zero Sync knows when the hack has changed and that chooses to rerun this. What's so great about Zero is that I set up all my relations. So like, I did it so you can get any data from anything at any point, and it's all become super fast. So I can say, give me the battle where we're getting the ID from the params. Give me only one of them, obviously. Give me the related referee, all of the related participants, and then give me the related users of those participants, and then give me the target itself. And then it just spits us all out into a big, old, beautiful object here that we can utilize. So.

• 22:56Wes Bos?

  Man, I love the simplicity of just using the browser to render HTML and CSS. Because I'm thinking like, oh, maybe you could hook up like V, virtual modules. But I don't think that you need that.

• 23:09Scott Tolinski?

  No.

• 23:09Wes Bos?

  Because like CSS support is so fantastic in all the browsers now. And of course, we'll be using the latest one, right? You can use all of the features. I don't think you'd need like a bundler for any of this.

• 23:23Scott Tolinski?

  No, you can use whatever CSS you want to that's being supported in the browser that you're working in. It just needs file system access is the only limit here, is that you need that file system access. And this is being done with Highlight JS, by the way. They just, just that, yeah.

• 23:38Wes Bos?

  As we're developing this, right? Like, you want to have a pane open to watch it as your thing. Is it, is that fast enough to be, to like, see your real-time changes? Or would it be better to like, run like a V server locally, just see your changes as well?

• 23:54Scott Tolinski?

  You tell me. So here, we have like the background. I'm gonna change this background to green. I'm gonna do command S, 1, 2, 3, command S.

• 24:03Wes Bos?

  Oh, man.

• 24:04Scott Tolinski?

  Yeah. Because ultimately, what this is doing, Wes, the reason why it's instant is because, yes, this is persistent. Yes, if I refresh, these will save, right? But what it's doing is when I click command S on this, it's pulling, it's looking 10 times a second for changes on this thing.

• 24:20Wes Bos?

  Okay.

• 24:20Scott Tolinski?

  If it sees a change, then it saves it immediately to.

• 24:26Scott Tolinski?

  IndexDB. It doesn't go off to the database elsewhere. This is going to be just as fast if you are running this on a server.

• 24:32Wes Bos?

  It's local first. You don't care about the database.

• 24:36Scott Tolinski?

  It's saving it to indexDB and then updating your queries using just a svelte state using zero sync. So there's, there's no reason why this shouldn't be instantaneous, right? This should be as fast as, as possible, the moment you hit command S. I had it as like a, a four times a second polling and that even felt instantaneous too. So like.

• 24:55Speaker 01

  The other way to talk about it, this is an optimistic UI, right? So the locally, when you click command S, that's just, you see your changes instantly. There's some process to sync to the backend zero sync, but you don't care about that because you're seeing your changes instantly. The only hiccup would be someone who's in the, the viewer mode. But even then we saw it's like maybe two seconds to, to see the latest updates.

• 25:19Scott Tolinski?

  Totally. And that, that, yes, exactly. And so that, that, yeah, that's pretty much the main crux of the difficult things about this. Everything else is just treating that zero sync as a source of truth for the state for the entire app. You had mentioned server side. This app is like running server side code, but the only time it's really running server side code is in the better auth stuff, where I'm getting the current session and passing it into server side stuff. And then I am using that in some routes to do some auth checks. Well, sorry, there's the server side is equal to false. Yeah, I am doing it for auth check server side. There's a whole admin section of this thing.

• 26:00Speaker 01

  So for that, it kind of brings up for me questions about how to use zero sync because I haven't used it before. So like that page that was rendering the hacks, the code to query zero sync is code that would only ever run on the client? Is that accurate? Is it, that's not server side code?

• 26:15Scott Tolinski?

  Correct. Yes. Yeah. Yeah. Pretty much anytime you're doing data querying at all with zero, it is client side. Your SSR equals false for any component that's touching. Otherwise you're going to have a bad time. That's for sure.

• 26:28Speaker 01

  And then if, if you wanted to do server side stuff, would that actually just be writing to a Postgres database? Or, or is there a server side component of the, of the zero sync library as well?

• 26:37Scott Tolinski?

  Well, the cool thing is that I do have Drizzle, so I would use Drizzle for that.

• 26:41Wes Bos?

  Yeah.

• 26:41Scott Tolinski?

  And I have Drizzle ready to go. Data loading and all that stuff is, yeah, it's all handled via these queries. And this is using my own Zero Svelte library. But it is, every single time I want to get data, it looks like that as the query, regardless of what it is.

• 26:57Wes Bos?

  That's sweet.

• 26:59Scott Tolinski?

  And this is reactive automatically, right here. Yeah.

• 27:02Wes Bos?

  Probably need to run it through like a DOM purify. Cause people could, people could put a script tag in there, right?

• 27:11Scott Tolinski?

  Let me tell you, there's a number of things, there's a number of reasons why this isn't public right now. The DOM purifying stuff is one of them that I haven't gotten done. Another one is, like we had mentioned earlier, if you go inside of permissions, permissions, anyone can do anything, which is a nice little helper that Zero gives you. Permissions code in Zero is super easy. I am passing the correct information into this. I just haven't written this code yet, which is checking server side auth roles and things like that IDs. Just because I wanted to get the whole thing done and working. Other things that are interesting about this is the countdown clock is really just like constantly checking if the battle end,

• 27:53Scott Tolinski?

  which is stored in the database, if the battle ends at is greater than right now, then the battle's over. Otherwise, you know, just update the countdown and that's, that's pretty much it, just at an interval. Once the battle is over, it automatically updates the database, which again, the way Zero Sync works, you update the database, everything else happens reactively. So that way I can do pencils down, modals take over. It gives our producer a chance to say, yes, this battle is over, or the, we need to extend this into overtime. So that's how that works. I'll show you a battle that we had completed, so we don't have to wait for this one to wind down. So past battles, this one has all three of us in here.

• 28:39Scott Tolinski?

  This is a, uh, these are real users. So this is, this wasn't like faked or something. These are our real users. I just made you guys user accounts that can't log in, but updated the picture. And there are two views for this. This is the recap view. Again, this one's going to be much better if you are watching this. But if you are somebody who's in the audience, you will see something that looks like this, where you could see their code. You could see the app that they built. You could try it out and then we can come in here and say, all right, Scott's gets three stars. It is, uh, not feeling so good and it's not accurate at all. And that does some fun things. It updates the score, which is just an average of all three of these.

• 29:22Scott Tolinski?

  And it changes my profile photo to be angry. The profile photos are based on the place that you've landed. So first place is laughing, second place is sad, and last place is angry. So, uh, there's also some neat stuff. You can see that the numbers get bigger. I thought that was like a fun little touch. Like if you're in first place, your score is the largest. So I was trying to go for like video game UI with a lot of this stuff, right? Yeah. And, and there's a nice little animation, um, that happens of course. And then in addition to that, the battlers can also rate the battle on how they felt like it was fun or whatever.

• 30:02Scott Tolinski?

  But again, this all happens in real time. So theoretically there could be a ton of chaos that comes from a bunch of people voting on this all at once. Because right now what you're seeing is like the average of, you know, one voter's scores. But really this number would be changing constantly and these photos might be like changing constantly, uh, which I think would be a lot of fun.

• 30:22Wes Bos?

  Man, even, I'm just thinking like, when we go to conferences and do like a live syntax, this would be perfect to throw up on the projector. And we could all

• 30:31Scott Tolinski?

  Let people vote.

• 30:32Wes Bos?

  Be hacking on our own. Yeah, let people vote in real time. This is great.

• 30:37Scott Tolinski?

  Oh, you need a GitHub account, yeah.

• 30:38Speaker 01

  And it's a perfect way to let the audience see something interesting because it's always hard when because you guys have tried to do live coding before, but it's like you're too busy coding and like you're not interacting with the audience. But like you could have a commentator that has this public page up. And is basically live commentating what the people coding are doing is like and getting audience reactions and stuff like that.

• 30:59Scott Tolinski?

  One cool thing too, is that with users permissions, um, this doesn't work completely yet. So I don't want to show this off. But with users permissions, it generates these anime photos from your GitHub profile picture. And there's a simple prompt that gets that I found it to be very reliable. And one thing that you may have noticed is that there was no loading time between any of these pictures. And it's not done via preloading. It's just done via a very um, smart way of loading those images. I think they're in static. It's just a four pane image. So the, the emotions are in four different pains in one image. So I'm just changing the position of the image to show the different states. So it only has to load one image for each of us.

• 31:41Wes Bos?

  Sprite.

• 31:42Speaker 01

  I was gonna say.

• 31:42Scott Tolinski?

  I made a sprite.

• 31:43Wes Bos?

  Yeah.

• 31:43Speaker 01

  Sprite, it's just like me.

• 31:45Wes Bos?

  Yeah.

• 31:47Wes Bos?

  I did not do sprites in my project.

• 31:49Speaker 01

  Does the AI generate it as four pane or you assemble that?

• 31:52Scott Tolinski?

  Yes.

• 31:52Speaker 01

  Okay, awesome.

• 31:53Scott Tolinski?

  Yeah, so I just have a prompt that's been very reliable in terms of giving me the emotion, the four pains. I mean, I, I use the same prompt for uh, four of these. So there's Wes. Although it gave Wes glasses. I'm not sure why it did that. I need to say something about it. Only give glasses if they're wearing glasses. Uh, and then I also did this one, which is the unknown faceless user for, oh, this mouth is crazy. I didn't care about this because I'm only ever using the unknown user as their, this face, this top one where they're because that's used before someone has joined the battle. Like before they're in the battle, there's like a grayed out version of this. Yeah, this is scary. Uh, sorry about that, folks.

• 32:33Scott Tolinski?

  Um, yeah, that's all I got. I did stuff you couldn't hear, like animations and sound effects and stuff in this thing, too. Obviously, there's some CSS things, permission things. Like I said, the data structure, everything is straightforward. You just have a node process for the app, or you can throw it on Cloudflare, would work fine on workers, and then you need a node process for ZeroSync, and that's it.

• 32:55Wes Bos?

  Man, and the database is Postgres?

• 32:59Scott Tolinski?

  Yep.

• 33:00Wes Bos?

  So what do you think you're gonna, gonna do? I guess because you use... Does ZeroSync has to be Postgres? Is that true?

• 33:08Scott Tolinski?

  Yes. Yeah. Yeah, yeah. Um, I, I just, yeah, just to have some basic drizzle commands, throw it up somewhere, change the URL, push those commands, and then that's good. As far as dependencies go, you might all be surprised to know I am not using very much. I did use Web Awesome for the stars component, and I used it for this tab component, but I'm gonna move it back to Svelte, because, man, web components do some weird stuff. Like, this is being cropped right here, and there's absolutely nothing I can do to give this a height, to get it to fill this space, unless the... I don't, I don't, I couldn't tell you why it doesn't fill the space. I've like gone nuts trying to figure that out. But other than that, yeah, I used a, I'm not using this, um, I used a split pane thing for the split panes,

• 33:52Scott Tolinski?

  zero Svelte for zero Svelte, uh, Svelte Highlight for the Highlight, um, Nano ID, uh, Drizzle Zero. I had to use .env because, uh, I think Betteroff uses that. And then I used TanStack Table for the admin stuff.

• 34:07Speaker 01

  And then are you storing images in S3?

• 34:10Scott Tolinski?

  I will be. That's why this is here.

• 34:12Speaker 01

  Last question I have is how do you create new battles? And what does a new battle consist of? Like, is it in target image and then like example files?

• 34:21Scott Tolinski?

  So you would create a, a new target is the language.

• 34:25Speaker 01

  Hmm.

• 34:26Scott Tolinski?

  So a new target only is possible for admins right now. So if you were not an admin, this wouldn't even show up. That brings us into the admin section, which we don't need to spend a lot of time on. But theoretically, the way this was built is that a target could be an image. In that case, you just give it a URL. It could be a video. Which I would like to have hosting as well. So like, the button that we had Wes and I were doing had a scrubbable video. That would be perfect to throw them here as a video. Or it could be code, in which right now it's just paste code snippet and that's a pain, but I would like to have a better way to do this where you would actually be able to have

• 35:08Scott Tolinski?

  a target as code that is not revealed to the user, so that way they could physically interact with the target as code. And then the image URL is a thumbnail preview image that would just be generated. Again, yeah, targets exist here. You create a target, you update them here. This is what they're looking like currently. And again, I have this whole admin section, even with fuzzy searching. Like, I built a lot for this thing. It's pretty crazy.

• 35:34Wes Bos?

  What you can get done in a week. I know that you killed yourself for a week, but it's like,

• 35:40Scott Tolinski?

  Yeah.

• 35:40Wes Bos?

  It was a full-ass app.

• 35:42Scott Tolinski?

  It's a full-ass app, for sure. So, folks, this will be available to use at some point, not too long, because I don't think the things are like, a lot of it's UI stuff here and there and flow, but I would love to get this in the hands of people and uncover like what needs work on it. I think we're gonna at least use it for a CSS battle or two here first. You know, hopefully those go successfully and then we can open up to the wider audience. We can add more targets to this thing, so that way there aren't just these two targets. I built a lot of components for this, even like the UI components. Again, I know I used no UI libraries. I just used my own two hands. Lot of stuff. Cool. Well, that's it. I hope you guys found this interesting. Let me know what you want to see inside of

• 36:22Scott Tolinski?

  Sinhacks, because again, there's so many things to do here and I have been so able to rapidly iterate on this thing that I feel like I can knock out all kinds of stuff. I even have a to-do list doc. The AI avatars need to get finished, some styling stuff. I would like to have revealing too. Maybe they can use the code without knowing who wrote it first. Lot of interesting stuff. Cool. Well, that's all I got for you, folks. Hope you found this interesting. Leave a comment below. Let me know if you want to try it, yada, yada, yada. Alright, on that note, we'll catch you in the next one. We dive into Wes or CJ's project. Peace.