In this informal, live‑coding YouTube video, host Andres (Speaker A) and his collaborator Harrison attempt a 24‑hour "vibe coding" challenge: redesign the side navigation of the real app Flowglad and connect a Supabase backend to Andres's deployed project OptiPrompt. The pair start with little knowledge of the codebase, struggle with unfamiliar terminal commands, and juggle two package managers (npm vs pnpm). They rely heavily on AI tools (ChatGPT) to generate Git commands, code snippets, and SQL for Supabase, correcting the AI when it errs by consulting documentation. Design inspiration is sourced from Mobbin, a library of real‑world UI patterns, while the host also advocates using no‑code tools like Framer for rapid portfolio work, emphasizing the importance of choosing the right tool for the job. After several hours of frustration—debugging localhost issues, handling authentication components they choose not to modify, and populating the database with sample data—they manage to get the sidebar component functional and display data from Supabase on the homepage. The challenge, intended to last 24 hours, wraps up in about 6‑7 hours, leading to a reflective discussion about underestimating their skills, learning through discomfort, and inviting viewers to suggest future challenges.
Chapters
If he doesn't redesign this sidebar successfully in production code, he will be buzz cutting his hair. Today we are going to do a 24-hour vibe coding challenge with my boy Harrison. He will be redesigning a side navigation bar of Flowglad, a real app. This is not some AI slop. Let me see what I can build in 24 hours. I'm going to be actually doing something that's backend related. I'm going to be hooking up my Supabase to my real deployed project called OptiPrompt.
Actually, I probably should just like go over next to you, right?
If you need an excuse to be near me, you know, it's fine.
Oh, dude, I have a note on my phone about like all the ways I can get closer.
We're about 5 minutes into the challenge and we've done nothing. So I'd say it's actually going really well. A good place to start is identifying where that component actually lives in the codebase. Of which we both have no idea. So that's probably a good place to start.
2 hours later.
And hello, hello, welcome today. Welcome to my tutorial. Or maybe just ask Windsor. Ask Windsor, how do I start? No, it's more so like, because it's— All right, it's cool. This is actually really cool. So there's like a whole set of terminal commands that we're both really unfamiliar with. Essentially, we're trying to do is he's made some edits to this branch of code.
Side nav, side nav, shad.cn.
That upgrade. Yeah. So you might be asking, how's this 24-hour challenge going? I forgot an audio cord.
Not well.
So not well. And by the way, I haven't started my— I've been helping Harrison. I haven't even started my shit. Let's go. What's really cool about like using— so what's really cool about using these AI tools— so what's really cool about these AI tools is that you don't need to have like perfect technical expertise in the execution side of things. And what I mean by that is like you don't need to know the exact Git commands to create a new branch from the main branch, right? But you got to know what branches are to be able to prompt the AI tool to do the thing that you wanted it to do. So in this sense, like we're learning how to code code without needing to be perfect in the execution, which actually expedites our learning pretty, pretty quickly. You know what I mean?
I was almost there.
Very nice. So here's going to be the workflow that I'm thinking that we should do for, for Flow Cloud. So we're going to do is we're going to bring in the ChatGPT component as it comes, and then we're going to compare and contrast code, and incrementally we're going to make changes to the sidebar to ensure that it looks The same. We're basically going to be copying code, but like making it work. You know what I mean? Are you talking? Are you talking to me? I'm in an ass. Whether I'm designing or vibe coding a new interface, the place that I always find myself going back to is Mobbin. If you're unfamiliar with Mobbin, it's a really great library of real-world inspiration from companies like OpenAI, from Uber, from Assembly. And don't get me wrong, I still like doing some experimental stuff here and there, but it's just great to have a one-place library that you can go to to find real-world inspiration for real-world apps. So then when you're actually creating something, you know, you're not reinventing the wheel when you don't have to. And I really love how well-designed all these like micro interactions are. You could tell they spent a lot of time with the craft of how this all works. Some of these even have videos, which is really cool because you get to see like step by step how certain microinteractions work. So if you haven't already, go check out Mobbin. They have a free tier so you can start using them today as inspiration. Check out Mobbin if you haven't already. Guys, we got the cable that we needed to film. That's the thing that like you're not thinking about. Like, we got to do the 24-hour challenge and then film ourselves doing it. And then I got to look goofy with this, this POV.
Holy cow.
I would never, bro. Am I, am I ready or what?
Dude, actually, maybe.
Beninass? Should I walk? Bro, it's your reputation. Are we real content creators right now or what? Dude, like, I'm just saying, the things I do for you, the audience, is insane. Like this video because like, this is what I'm doing for you. Entertainment value. Why haven't we vibe coded yet? I don't know. It's not looking good. Dude, what if like YC people watch this and they're like, yeah, definitely not funding that guy. How we doing, boys? How we doing? Dude, this fucking sucks. We're having a tough time right now. It's been a couple hours. I've been helping Harrison. I've been helping Harrison try to like troubleshoot some basic like development server things. He's using a different package manager. I think he's using pnpm and I'm using npm. Anyways, I don't know what the hell I'm doing, but it's cool because I'm also learning as well. Anyway, uh, the task that I have here for me today is to actually connect my Supabase onto this. Specifically, I need to set up my MCP server. So for context, I've asked it to the other day to basically help me set up a database structure. You know, basically there's prompt templates, there's profiles, there's bookmarks and all that sort of stuff. I'm sure this is going to change, but basically what I want to do now is I want to set up an MCP server and connect to my windsurf. And so I'm going to try to figure that out. Okay. For example, here is cursor building a Notion database app, fetch a Supabase URL and on this key, then save it to. Okay, cool. I already did this. One eternity later. Here we go.
Wow.
This is me correcting the AI, dude. Like, and again, the only way that I did this was by just reading documentation. Yeah, it's like, oh, actually you're wrong. The documentation says this.
You're a dummy.
You're, you're taking your job. And while I'm super excited to code with AI, my portfolio is built with a no-code tool. My portfolio is built on Framer. I just want something to build a quality website really fast, and I don't want to think about the code. I want to build my portfolio and make it look beautiful without having to worry about Tailwind CSS, Shassian components. I want an easy, seamless experience. And that is exactly what Framer is all about. And the really cool thing about Framer is they have this like Workshoper AI tool, which you can just like prompt a custom code component, which I think is really dope. And the thing is, you want to use the right tool for the job. I'm not going to use Windsurf to create a portfolio that'd take me forever, you know what I mean? If I'm going to custom code something, it's going to be because I can't do it in Framer with its current functionality today. If you haven't already, go ahead and check out Framer. I really love them and I'm going to continue building websites on Framer and using no-code tools like Framer even though I'm vibecoding. Cancel me. What you gonna do about it, bruh? So what I'm going to do here is I just want to prompt ChatGPT and say like, I want to display featured categories from my Supabase database on my homepage. Please tell me how I can do this. And let me actually start a new chat because this is the primary thing. All right. Actually doesn't know of like my tables. So actually what I'm going to do is I'm going to go back. Please analyze my database via my Supabase MCP server to get an understanding of what I have so far. Yes. Yes. Here's, okay, public schema. Create the view in Supabase, open SQL Editor dashboard or execute this. Okay, copy. Go to my Supabase, go to SQL Editor, new SQL snippet. Success. No rows returned. So I don't have any data, so I think that's probably the problem. Now please help me populate with sample table. Yay! Looks like I have— it looks like I've populated some data to me in my database, which is great. Homepage now. Please. I think I might do it, bro. I think I might do it. Oh, I think I know what's going on. Okay. Yes. Beam and wait. Come on. I feel like I'm so close. You know? You know, feel beautiful? I just fucking did it, dude. Whoa. I am honestly so surprised because in about, what, 5 hours, we've actually made a significant amount of progress. I actually connected my backend Supabase into my project and loaded it up onto the homepage with an MCP. So the MCP was there as a failsafe in case I fucked something up. It was basically to have the AI give me SQL commands to run on Supabase so I can add, you know, fake data and add the files for icons and like all that sort of stuff. So basically I just use it as a failsafe because I didn't want the AI to tell me or give me incorrect information, which it did. Yeah, which it did.
You had said that before. Yeah.
So I actually, I'm actually really surprised. I didn't think I would do it as quickly as I did. And he actually got a sidebar populated. He brought in the component.
Yes.
And actually did it. Yeah.
Did I learn how to fully code today? No. Did I get one step closer to that? Yes, definitely. So I'm not shaving my head, which is sick, but there are still a few things that I want to do, like changing the icon components. I also want to change the colors, but that's at a global level, and I think that that's a little bit difficult to do from what you were telling me. And there are— there's a test mode within that sidebar that I'm not going to be touching because that has to— I think just like my co-founder would kill me. And then authentication, we're using StackAuth, and it has a component at the bottom beneath documentation and Discord that I'm also not going to be touching. And then there is data being fed to where it currently says application. I'm also not going to be touching that. So apart from those 3 things, I'm going to give myself a pat on the back. Yeah, I'm also going to give you a pat on the back, my guy.
Oh yeah. Yeah.
So where's the trash can?
Seriously, I'm super proud. I'm actually proud of us. I think as a theme, the lesson is, while extremely frustrating and at times really discouraging when things don't work.
Incredibly discouraging.
Really discouraging.
Especially when your localhost doesn't work and you're like, what the fuck? Like, why is it not working?
But it's actually part of the process and it's how we learn.
That is so corny.
But it's really true. It's so true, you know.
It also is corny with a K. Yeah, yeah, yeah.
If you're vibe coding in a real project and you're feeling really overwhelmed and frustrated, that's probably a good sign that you're actually pushing outside your comfort zone and you're learning something. Yeah. And I would encourage you to keep going and to look at that and embrace it. All right. So unfortunately, you know, this 24-hour challenge was completed in like 6 to 7 hours. Yeah. I mean, I am mad about it. It just shows also how much we have undersold our own skills and our capabilities.
Yeah. If this was our estimate, Should we just actually get started on another challenge?
Another challenge and go harder. Okay, post in the comments down below. I know this was like a baby challenge, but post in the comments down below, like, what would be a good 24-hour challenge, uh, that you'd want us to do for next time?
