Build a Business Dashboard With Claude Code: Figma to Live

Full video transcript

Source: YouTube automatic captions, with rolling-caption duplicates removed. Recognition errors may remain.

You can see the whole dashboard is built. 6 minutes ago. It’s going to run automations without requiring your laptop to be on and open. Can design it in Figma and rebuild that design, build it in GitHub, deploy it to Vercel, and then begin to add your additional environmental variable. You and it doesn’t just stay static. I didn’t miss anything from the core stack that I’m using that I use most often on the day-to-day for this. Claude Code for the majority of what I’m doing when I’m I’m working inside of a terminal, inside of the desktop with Claude Code, and I connect it with GitHub and Vercel. GitHub for hosting the code, making updates to the code, creating PRs that need to be then get and the key with all of the the tools that we’re talking about here and the reason why the pre-work for this workshop was like setting up your company brain, set setting up your AI chief of staff, is that once you have those set up and then you’re creating a command center like this in Vercel, inside of Vercel, which is what I use it for a lot of this dashboard more specifically on it, and you install Claude Code, it takes maybe 5 minutes to set up. You just follow the instructions on the Claude official website to install the terminal and then you connect it with your your Anthropic account. You can either use your API key or you can just like sign in with your Anthropic subscription. So I have the Claude Max account, and so I’ve already signed in and authenticated my account. And so to get started with it, you type in Claude and then inside of terminal it’s going to ask you if you trust this folder, and I’m going to say, “Yes, I do.” And now it’s going to open up and I can interact. I’ll say, “Hey Claude Riff, we’re working in our Janeyou Atlas dashboard in Figma. I want to create a clone of the dashboard and make it dark and move the chat interface to the right hand sidebar as my main view and then simplify the home screen to show me the one thing I need to do today and the small hinges that I need to be focused on to accomplish that goal since I use demo data here just for right now. So, you can see now move this the adjustment here from me telling Claude, “Hey, we’ve been building out this dashboard. Here’s some of the changes that I want to be making to make it a view that’s going to be useful for me and how I want to operate.” And it kind of restructured that entire dashboard right here in this sort of way so I can see what’s displaying and what I want to be surfacing. I this looks great. Now, I want to connect with a new GitHub repo for this project and then build out the dashboard there using the design we have here which we will then deploy to Vercel and connect our APIs to allow this to run even when our laptop is shut and gives me morning briefs and updates throughout the day on the one thing and needle mover. But, you can see it’s asking it’s based on my command it said, “Okay, cool. Well, do you want to set this up as a standalone repo?” Yes, we’re going to do that. Cool, we’re going to add it to these projects in our team. And then how should the morning brief >> [snorts] >> and the one thing go? Slack DM, we’re going to have it do an email. I don’t and I only Yeah, so that’s fine. And it’s again, it’s like how do you want to see this information? You just need to tell Cloud Code to help you with setting it up to building and structuring that out. So, calling back to what shipped in live, right? So, now Cloud Code is telling me it’s got the repos repo set up, it’s private, it’s got the app set up under the team, and then it would built it all local before it pushed it out here to GitHub where now it’s going to be [snorts] hosted and deployed on Vercel. Saying one thing you need to fix before anything else, it’s publicly dashboard URL unset. So, if you’re creating an Anthropic API key as or an OpenAI API key or a Gemini API key cuz some of them do things that the others don’t or are more effective at the things that they need to do. Like if you’re using Google, for example, um the Gemini API key because it’s a Google product, works very well with being able to like research and scan and like like review stuff inside of your Google Drive. And so like it doesn’t take very long to set one of those up, but it does take some time to configure it. And so, all you would do is type your Anthropic API key like key and then you would paste that secret key here, save it, redeploy it. So, you’d say dash user, type in your username, and then if that’s the only thing that you’re updating, you need to redeploy on Vercel so that it actually updates your live website. Then I’m going to say dash password, and now you then redeploy that and now it’s going to apply these passwords onto that specific page so that it’s going to be gated by a simple username and password. Then I just refreshed my page and you can see the deployment took and now, let me see, you type in the password, type in the user, and now it’s opened up and you can jump in and you can do whatever you want. So, it’s already set up a few cron jobs to be able to run like the morning brief, a midday check, evening digest. Next 30 days, the challenge to you is you can follow this workflow exactly the way you want, but basically, how are you going to create a dashboard or a command center that you can have that’s hosted using a tool like Cloud Code to interface with it, to make updates, to have it work through any sort of blocking points that you might be getting, and um building something like this that’s going to help you step into work every day, get your morning brief, see exactly what you need to be focusing on.