Build a modern SaaS dashboard transcript

Hello, my name is Gaurav khetarpal and I'm a Google Developer expert. As a founder of a startup, there are a number of metrics that I need to look at on a daily basis. Marketing, finance, hiring, and a lot of other metrics as well. Three years back, my team built an application for me, a web based application, which shows me all the data, but it does not work on my phone, does not work on my tablet, and anytime we need to make a change, it's an absolute nightmare.

There are a lot of code changes front end scaffolding, Figma design, handoffs and the list never ends. So over the next few minutes, I will actually show you how I removed this ugly tool tax by going from a concept to a design, to a prototype, to a fully working application. This is a kind of a dashboard that we built three years back. This shows me an executive summary, our total revenue, our employee count, our active projects, our client satisfaction also shows me the key data in terms of hiring finance, operations.

I want to look up a specific employee. Project helps our clients. This was built three years ago. It worked well at that time. Now it's clunky. It's gray. It's what I call as the ugly tool tax. If Itron OpenWay it on my phone or on my tablet, it gives me a horrible experience. What I really want to do is in 10 minutes, remove this ugly tool tax, go from a concept, an idea to a production grade application which I can use as the founder of my startup.

So what I did was I came up with a prompt. I fed it to Gemini. The prompt says design a modern SaaS executive dashboard for me as the founder of one chief include revenue hiring clients, key metrics that I deal with, a card based layout, light mode, high contrast typography, a cohesive design system for data heavy views, and give me a detailed prompt that I can feed into stitch. I pass this to Gemini, and Gemini gets to work.

It creates me a very detailed plan in terms of what should I be presenting to stitch. It gives me the design system, aesthetics guidelines, the top navigation and header, the performance indicators, what should come in each row, the various cards. And what I can actually do is copy this and then feed it into stitch I specify to stitch. I want to create a web application. I want to use the 3.1 model, and then I ask it to generate designs.

For me, this is where stitch gets to work. I gave a very detailed prompt in terms of what are the design elements I want, what are the screens I want. And then stitched as the magic. So now you can see stitch is actually generating the design system. It will create the typography, it will create the screens, the components for that screen. And I can actually change things on the fly. So I can see the typography has come up.

If I want to make any changes to the color scheme, to the font, I can do that right away and it will reflect in real time as well. Once it has done that, stitch will actually start designing the screens and I can see that pop up on my screen as well. So right now it's creating the placeholders for each of those screens. And then once it's created those placeholders, it will start popping elements on those screens. This takes a couple of minutes because it is actually trying to create EJScreen, each component that I've specified as part of my prompt.

So on stitch I can actually see it creating elements and rendering elements in real time. Each of those screens is being populated with those design elements. I can actually go and modify any of the design elements that I want. It is almost done, and once this is done, I should be able to export this particular project and connect it in anti-gravity. So what I've already done ahead of time is I connected stitch and anti-gravity using an MCTP connection.

It's a simple, straightforward configuration where I specify the API key and anti-gravity knows what my stitch account is. Countess and now my project is ready. So what I will do is I will share my project. I will copy the link to my project, and then I move on to anti-gravity. Here I will say convert this stitch project into a web application, and I specify the URL for my stitch project. The best part about anti-gravity is as it's working through each of the steps, I can actually see what is happening.

So it's right now getting the metadata, the JSON data of my project from stitch, and then it will start working screen by screen, looking at each of the screens, looking at each of the components. And then it will try and create the code for that. So here I can see it downloaded all my screens from stitch. It is actually asking me like, can it actually download those particular screens and start looking at the metadata in those screens.

I granted permission along the way. Anti-gravity will also ask me for permissions where it needs an explicit confirmation, and I will grant those permissions. And here, once the files are generated, I should actually be able to see them in my Explorer as well. Now, this process takes a few minutes because it will actually generate each of those files, optimize those files, and then package everything together. So anti-gravity prepares an implementation plan and it asks me to review that implementation plan.

And once I am sure that OK, this is the plan I want to move ahead with, I can click Proceed and then anti-gravity will start generating the associated code for it. So right now, as you can see, it's scaffolding my project, making it into an executable project that I can run, installing all the dependencies that my project needs. What anti-gravity does is it creates the associated HTML, the JavaScript, the CSS. I can actually prompt specific instructions to it to follow certain design patterns in terms of the code as well.

And I can also add things like authentication. Any other bells and whistles I want to add to my application. I can simply talk to anti-gravity as a chat, and then I can ask it to add that. So right now it's working through all the JSX files, copying the JSX views, and now it will start bundling everything together so I can actually run this application. So here on the left, I can actually see the code that it is generating.

So I can actually see what are the assets, what are the files that have been generated. And then I should be able to see what all it's creating. Then if I go into the SRC folder I can look at all the assets. I can look at all the components that it needs. I can look at the dashboard, I can look at the layout files. And then I can also look at all the HTML files as well. Now it's actually attempting to deploy this to my local.

It's working through the process to deploy my application locally, and it will also launch the browser for me, so I can actually verify that my application has been deployed. Also, the best part about anti-gravity is if it gets stuck or there is a problem which it actually faces, it asks me for a confirmation. It also suggests a workaround. A developer typically needs those while you are working through the process. So now it is asking me for certain changes.

It has provided me the URL and I can actually go and see the URL. It has the application that I needed. This is a mobile friendly application which I wanted. I can see all the metrics. I can see all the data. Obviously, this is not authenticated for now, but I can go back in anti-gravity and I can ask it to add an authentication layer like OAuth as well. The next thing I actually want to do is I actually want to deploy this to Cloud Run.

So I really want to access it over the Cloud and maybe give access to other people as well. So I just say deploy this app to Cloud Run. And again, because I've been using Cloud Run with anti-gravity earlier, it knows who I am. It knows my username, it knows the specific project. I want to deploy it to all of that context anti-gravity already has. So now it will look at my particular project structure. It will see what all is needed to deploy this to Cloud Run, and then it will go ahead with the deployment.

It looks at my implementation plan for Cloud Run. There are a few things that need to change to deploy. So I say yes. Please proceed with those changes. It makes a few changes to the Docker file. I accept all of the changes that it is making to the Docker and the configuration files. And then once the structure is ready, the project is in a format which can be deployed on Cloud Run. So this process again takes a couple of minutes because it fetches all the files, puts all the files in Cloud Run.

And once that is done, it will actually share me the URL of my application deployed on Cloud Run. So as you can see, it says I have set a timer to monitor the deployment progress and will report back once the build and deployment are complete. So I could actually go and work on some other productive tasks. And then once the deployment is done, it will actually prompt me with the URL here. So now it says deploy to Cloud Run finished.

There are some post-processing tasks that it is working through OK. And it is also shared me a URL. My application is now deployed to Cloud Run. Again all the features that I wanted are there. All the screens are there. As I said, I need to still need to add security and all the other features I want. This is what I've built in 10 minutes. All right. My application is live on Google Cloud Run. In a matter of minutes.

I went from a concept to a design to a prototype to a working application. So stop building ugly tools. Start chatting to your Ide. This is the modern way of building AI based applications. Thank you so much for watching.