A DJ talked for 30 minutes, and Claude Code built his website before lunch

0:00 …real passion is making music. I think the priority right now is claiming myself as a DJ. Clubs, they require a website. The only way they can see what I'm doing is through…

0:15 Today we have DJ Fed here in San Francisco. We are going to build a brand new website for him from scratch, and we don't have to type anything at all. So we have a 25 MB audio. Now we are having a discussion and somebody's working for us.

0:35 The flyer will look exactly like your website. Should I do it? Deploy. Yes. DJ Fed is live.

0:44 I mean, I didn't have to do anything. It actually was giving me energy. Now it's taking energy. I exist now online.

0:59 Hello explorers. Today we have DJ Fed here in San Francisco. We are going to build a brand new website for him from scratch using Claude Code and deploy that to Vercel. Before the end of the video, you will learn how we gathered his vision and requirements, brainstormed on the whiteboard, decided on the tech stack, and decided how we are going to maintain this on an ongoing basis. We fed the audio to Claude. We built a design system. Claude Code built the website. Before the video ends, we have the whole thing. We'll show you. If you are listening to this on Spotify, you can put your phone in the pocket and listen to this. But if you hear an audible chime, that means something's going on on the screen. Only then you have to pull up your phone and see the screen. Otherwise, you can listen to this whole episode in audio.

1:46 Vision. To get started, we need to paint a clear picture of where you are going in the next three to six months.

1:53 So, I have been DJing in some clubs and parties mostly. For the next jump for me, playing in higher… like bars, I would say clubs, they require a website or a place where they can see my work, my sets and everything, which right now I don't have. The only way they can see what I'm doing is through Instagram. So, I have been connecting with other DJs, and they told me that I should have what they call an electronic press kit, that should be online but also downloadable, like printable or whatever. And the electronic press kit is pretty much a website where…

2:37 Electronic press kit, so we can call it EPK. You sent me a Google Drive one day and there were music files in there. I was listening to it while I was walking. What is that part? Can you explain that more?

2:50 That part is actually where my passion came from, because my real passion is making music.

2:57 So do you want to feature this original music on your website?

3:00 I think the priority right now is showing, claiming myself as a DJ. You know, exposing myself, like I am able to DJ around the city.

3:12 Super. As soon as somebody lands on the website, that's what you want them to see. As a layman, say I'm just a normal guy, when I want to hire a DJ, I don't know the technical terms. You used this word, electronic press kit. I didn't know what that is before. But when I'm hiring a DJ, I'm hiring visually: have they done DJing before? There are some pictures, videos of that. And then what's the date and price? What are they looking for?

3:44 They're looking at my genre too. What am I playing in that club, right? And for me, it's mostly techno, progressive house, electronic.

3:56 So, some examples of recorded sets.

3:59 That can be another thing. It can be both, I would say. Short videos also: they want to see that people are dancing, people are liking it. And for the audio, it's mostly just the audio of the set, the recorded sets. And generally they like my energy, because I dance with people. That's another important thing that the clubs are looking at: does this person have a crowd following him? So they're going to check all your socials too. They want to know if you're going to bring people with you. For them it's money, right? More drinks.

4:42 And the electronic press kit, does the club look into that actually?

4:45 Yes. Even other DJs, because many DJs are looking to partner with other DJs, especially for long sessions. They want to do what they call B2B, back-to-back. Which means I do some tracks, then I'm relaxing a bit, the other DJ is doing some tracks, and then I'm coming back in. Because the session is going to be, I don't know, two, three hours.

5:20 And then also the booking part. I want to have a form, or some sort of way for people to easily book me, or me and my gear, which has a different cost because I will have to bring it. Depending on the gear they need, they might need speakers, they might need lights. This is all stuff I can provide, but of course it's increasing the price.

5:52 So this is like different packages.

5:56 Yes. I like edgy things, but I also like the contrast of colors. So maybe a darker website, but with a contrast of colors that can remind people of lasers, things like that.

6:17 In terms of tech stack, what I'm seeing here: the main thing is the front end. The UI has to be nice, because this is an artwork, what you're doing, so the website has to reflect that part. And if we complicate the back end too much right now, we might have a hard time maintaining it, because your work is on the DJ side. Once you are booked, you need to have some kind of a calendar vision, right? And money: how are you doing the money transactions now?

6:45 Right now through Venmo or through bank transfer. For me the important thing is getting paid and also for me to track it, because I have to pay taxes on it. Many clubs are doing PayPal.

6:56 We are accepting PayPal, Venmo, bank, whatever they are comfortable with, to begin with, instead of building the whole money exchange part in the back end. Can we simplify this? Whatever you said now, we can put all that on the booking page, to make sense for them when they are booking: what is expected, how do we do the transaction. And then in version two or three we can actually bring in, maybe even create, a Stripe account for you, so that the actual booking is fully automated. The money goes to your Stripe, Stripe sends it to your bank account, and that also simplifies your 1099 for the end of the year. Bookkeeping, all that can happen. So there's a lot of scope here, but that is after the booking part, and that requires the complicated back end. Let's get you set up on the front end side of things, so that you have a functioning website and things start flowing.

7:41 The good thing about Claude Design, what I noticed, is if you need a flyer for the event, "I'm performing this night, on this day," you can just tell Claude to use your design system, the same colors, so the flyer will look exactly like your website. There'll be the date, time, where you're performing, the name of the club, things like that. Just one square flyer, and then you can post that flyer on YouTube, Instagram, everywhere, or send it on WhatsApp.

8:08 Deploying to production. I currently use Lovable. The problem with Lovable is there's a lot of JavaScript; everything is behind JavaScript. For things like this, you need the AI to see your website clearly. We need the robots.txt, we need the llms.txt, so that the AI can actually see you exist, you're a performer, you're performing here and there. All those things need to be crawlable by Google and other crawlers, LLM crawlers, so that we get AI visibility. That's very important here, being in San Francisco.

8:46 Ongoing maintenance. You're going to have a Git repository. We can build that now, and then you will set up Claude Code on your local machine and keep pushing using Git. The code will be deployed to Vercel. That's the kind of setup that I'm imagining. What I wish we could have done differently during this requirements gathering is some sort of an audio recorder, so everything we spoke could have been transcribed and fed into Claude Code, and we don't have to type anything. That's a missed opportunity. We can do that next time. We still have the transcript in the video. Do you want to try doing that?

9:26 I mean, we can, right? Because we don't have to type anything at all if we do that. I'm fine with that.

9:32 Okay. Super. We'll cut the video, get the transcript, and we'll be back with the prompt.

9:38 What we did: all that discussion we had about our design, we had it on the whiteboard. We thought we could type all that in, but then we realized we actually have the video recording. So we moved the video recording to our laptop. We're going to extract the audio out of this, ask Claude to transcribe the whole audio, and then use that transcription to make the design and the website, and give us a plan. That's what we're going to tell Claude. So: open file, export as audio only, to my downloads, and call it "requirements gathering." Okay. So we have a 25 MB audio. Now I'm going to talk to Claude Design using an app called Wispr Flow. Instead of typing a lot, it'll be easier to talk.

10:24 "Hey Claude. So I've given you a requirements gathering session. It's a 30-minute discussion that I had with my friend DJ Fed. We are building a website for him. But before we build the website, we need to come up with a design and a plan. Can you guide us on how we can do this? Ask us any questions if you have them before we get started. And yeah, let's do this." So it's transcribing now.

10:57 Right now… at the beginning I was just excited to do it. It actually was giving me energy. Now it's taking energy, because actually I have to do it, and I have to perform, and people are requiring that. It's like having a show, right? It gives you energy, adrenaline, but it's also the responsibility of performing well for the client.

11:24 Okay. Awesome. Something is showing up. Cool. This is great. We are having a discussion and somebody's working for us. So there are some colors. Let's do a quick scroll. There are some color options, and typography. Then there are components. This is a lot, actually.

11:41 I like the kind of laser. See, because that was… it heard about lasers, and it reminds me of these lines and also the color, like the lasers. Yeah. I like it.

12:04 I mean, it's exactly everything we've been talking about. It's also focusing on a light mode, even if we've been talking about dark. That one is something that is impressive, because dark… it's hard when you print it.

12:30 Right, it's going to consume a lot of ink. So it's showing that it's not just listening to you, it's also telling you what's the standard, how you should go about something, which is great.

12:49 We can move from here to Claude Code now. How are we doing on time? 12:14. Our hard cutoff is 1 p.m., right? So we have 45 minutes. "Commit the plan and start scaffolding a Next.js site."

13:08 We have the site. Ooh. Let's go. Look at this. It's one big page, like a big flyer, right? It's dynamic. It's an interactive flyer. I think to make it more you, we need to feed in some more information.

13:33 Why don't we actually get it to production, whatever is here now? If we get to production, we have one full line from local to production, and then we can go to V2. Fed already has a Vercel account. How do we push to that? What do you need from us? Approve Vercel's access to the repo on GitHub.

14:03 So, I can deploy from here if I just press a button. Should I do it? Yeah. Deploy. Bring the laptop. This is the exciting part. We can look at it from the phone.

14:12 Recap of what we have done: the code is pushed to GitHub. We were building on a separate branch. That branch is now merged to main, and Federico is using that main branch and deploying that code to production using Vercel, on his laptop, on his Vercel account. We can make further changes on my laptop. I'm one of the contributors on the GitHub repo.

14:39 Done. Is it done? Wow. Congratulations. "Continue to the project." I think now I should provide the link, right? So we have a public URL now. Open that on your phone.

14:56 Amazing. This is what we built. Show it on camera. Yes. DJ Fed is live. That's what we built today. And we're going to set up other things, like this upcoming gig. By the time you guys are watching it, we will have his live gigs. Wow. This is fantastic.

15:23 I exist now online.

15:25 Online, AI can discover you. Okay, this is amazing. If you want to make a change locally and then see that live on the website, do you want to do that? No, you should do that. From your laptop, or even just github.com. Just go to github.com and make a small change, like A to B, B to C, something like that, and then see that reflected here. You don't need any setup locally. Nothing.

15:49 We're getting rid of em dashes, basically. Yeah, I hate those things. Commit the changes. "Update lead description for site." Perfect. Commit. How do I create a deployment? It should be automatic. You don't do anything. Reload here. Amazing, already done. So just because I committed, it did the auto deployment.

16:27 I mean, I didn't have to do anything. This is fantastic. Love this. So he just made the update and we already have it here.

16:50 If we have somebody who saw your Instagram video, or this YouTube video, landed on your website, booked you, and then that event happens, how amazing would that be? The whole connection, right? We were just here at The Commons building the thing, and now somebody actually booked you and that event happened. That's the whole cycle, and that can be the second video, your follow-up video, of the success of the website.

17:18 And the follow-up can also be: listen, I love everything we did, now I need people to pay me from the platform. I can arrive at the club, give the phone, "give me your PayPal."

17:30 We made this decision just this morning. I had this idea this morning, posted it on a WhatsApp group, the founders club that we both were in, and before lunch we are already live. We are live at 12:30, not even 1:00 p.m. If you are a small business owner or a founder, I would love to work together, and we can get your site deployed. All right, I will see you all in another video. Thank you for watching. Bye.

Source: YouTube auto-captions, edited for readability (filler words removed, names corrected).