Build Apps with Firebase Studio | No Installation Required

If you want to go to Firebase Studio, use this link. You know, Firebase Studio, click on get started and type your very first prompt to begin. These are the three simple steps. No installation, no plugins, none of that, no setting up paths, nothing. Just go to the link, click get started, and you're good to go. So, I'll click on this. So, yes, here it is. The Firebase Studio Firebase You can also check out the studio link. You know, browse through the website as well. And I'd also like to show you the documentation section here, the developer guide. This developer guide is really well put together. So if you click on it, it'll walk you through everything, the fundamentals, the AI part, the build part, and everything else. All the documentation is available here. So you can check it out whenever you get stuck. Okay, coming back to the website. Now here you just have to click on get started. There are several places with a get started option on this URL. Just click on any of them. So yeah, here you are. You'll be taken straight to the Firebase Studio page. It'll greet you by name like hello and then ask what you want to build. You have to prototype an app with AI. Why does it say prototype and not build an app? because first it will create a prototype for you and if you're satisfied with the prototype then it will go ahead and build the app for you. Now here what I'm going to do is take a very small mini project as an example and we'll try to implement that and explore all those nine features. If you remember I talked about Firebase Studio with this hands-on approach and then later on I'll talk about another project that will have a solid front end and back end. So what I'm going to do now is write a prompt here. So when I say prompt, I've just written something in plain English. Please create an app where I can list the tasks I need to do today and the time it takes to complete each task. So now I want to store my daily tasks somewhere. Add the duration for each and then have it arrange and schedule them for me. That's the kind of app one want. So it will make a schedule for me like from this time to that time do this then from that time to another time do that. That's the kind of app one want to build. So, the app should create a hierarchy of those tasks and plan my entire day from 6:00 a. m. in the morning to 10 p. m. at night based on the tasks I give as input. Different tasks should be highlighted in different colors and next to each task, the time it takes to complete should also be shown. So, this is basically what I was thinking and I thought let's create an app. So, you'll write all of this down, you'll write all these things and then you can go and prototype it with AI. But before doing that, I want to talk about a few more things here. That is you can create new workspaces. As I mentioned in the spark plan, you can create up to three workspaces at the same time. So you can go ahead and click here to create a new workspace. So this is one workspace where I'm creating one app, another workspace where you can create a different app, and third app. So three in total. That's it. If you want more than that, you have to go and choose the Blaze plan. In the spark free plan, these are the only you have. Then you can see here the different programming language options like go, python, flask, then java and thennet, Android studio cloud as well, flutter, angular, react, node expressjs, gemini, all these tools are available. If you don't want to go ahead with a JavaScript or TypeScript project and instead want to directly write a prompt that will develop the app in your chosen programming language using TypeScript, you can pick any of these options and then go ahead and use the AI model Gemini to build an app there. So, we'll explore this as well in a bit, but for now, let me show you how you can create an app using prompts. After you've written the prompt here, you'll notice there's a small icon available for adding attachments. So, for example, if you have a design ready showing how you want your app to look, you can click on that icon and add the image, you can say, "Hey, this is the image I'm adding. Please refer to this image to create the UI design. " We'll explore this as well. For now, let me keep it very simple since this is your first prompt. So, click on prototype with AI. Next. Okay. Accept this. So as you can see here it has written a composer. The name it has automatically given your app is this. Then it lists all the features. So this is the prototype I was talking about. Very cool feature kind of similar to Bolt. But honestly Bolt isn't this

good. You can check that out. Task entry input task with description and estimated duration. Correct. Schedule generation is what I want. Schedule visualization means you want the schedule to be visually displayed as blocks showing the chronological order. So you can see this is the order it mentions. It's not arranging things in the right order. It should be time based like you know I should rush and freshen up at 6:00 a. m. So it should or rather it will show things in chronological order. That's what it's saying. These changes can be made later on. Let's see duration display color coding. That's fine. Okay. So as you can see the UI is built using TypeScript next. js and Tailwind CSS is also being used. Tailwind CSS is basically for the design part of it or you could say for the colors, the arrangement, the alignment and all that. The borders, everything will be handled with Tailwind CSS. Next. js again is JavaScript and TypeScript. You can go ahead and prototype this app or if you want to make any changes, there are two options. You can easily click here to access a wide range of customization options. This allows you to personalize and modify virtually anything within the application to suit your specific preferences and needs. For instance, let's consider an example where I might want to change the application's name to something more fitting or descriptive, perhaps reflecting a new project or a different purpose. Daily planner guide. Okay, that's a spelling mistake. I've entered it again. So you can see it changed the name immediately. It made it my daily planner guide. Okay. So this is the change. You can make any number of changes. I'll go ahead prototype this app. You have to wait a little while. It just takes a fraction of a second, maybe two to 3 seconds. So you can see what it's doing. It's building the app, making changes to the files, running them, checking for errors, fixing them, and running it again. Okay, so right now the file environment setup is being done. Next, it will generate all the files, TypeScript files, CSS files, Node. js files, everything. So, you have to give it a little time. Now, you can see that it's creating a CSS file. The TypeScript files are done. The environment variable file is done. And the CSS is also done. Now it's implementing the functions. So you can also keep watching what it's doing. Importing all the necessary files, creating the TypeScript file for the form, which is the input it will be taking. I haven't given any description about how it should take the input or what buttons it should have. Let me see what it creates initially and if anything needs to be changed, we can do that later. So, it's done with the initial file creations. Now, it's checking for errors. So, it's developed around 15 files. As I mentioned before, you can see that it won't wait for you to run the code once it's done. It will run it, check for errors, fix them, run it again, and finally give you an output that's free of errors and bugs. So you can see here it's autofixing one error. It looks like it found an error somewhere in the JSON file. So it's trying to fix it. Okay, done. We have some output here. Let's take a look. So you can see the name of the app, my daily planner guide. So when you deploy or publish this project, this will be the name in the URL. Again, let me remind you one of the features of the Spark plan is that you won't have a custom domain. And if you choose the Blaze plan, then you can have your own custom domains as well. So that's also one of the features of the Blaze plan. So yeah, you can see it has come up with something like this. A very simple one. My daily planner guide is a header. Then add a new task. Enter task details below and add it to your list. So yeah, it's even given an example. Morning workout session for 30 minutes. It is also given an option for constraints which I didn't ask for. Like if there's a constraint that it must be done before lunch, it'll arrange it accordingly. For example, if I set lunchtime as 2:00, then it'll schedule it before 2 in the afternoon. So that's how it works. Let's see it in action. So okay, I'll give morning yoga session. I'm not really a workout person, so let's go with yoga for 30 minutes. Constraint must be in the morning.

It's 3:00 in the morning before 8:00 a. m. Okay, there's an option. So, add task to list. So, it says task added. You can see here with all those details, it has added the morning yoga session. You can also delete the task from here. So, you can see I didn't give much detail in the prompt, right? It was just a vague prompt like this is how I want something. It gave me a really nice and good initial project gap. — If you enjoyed this video, you can enroll in Greatle Learning Academy for free. Choose from hundreds of courses across multiple domains and earn a certificate of completion along the way. And if you want to take it a step further, you can try Greatlearning Academy Pro Plus with a free trial. It provides access to additional premium courses with more advanced content from distinguished faculty along with features like guided projects, a resume builder, and mock interviews to make your learning journey even richer. Link is in the description.