How to Build a Fully Functional AI-Powered Booking Dashboard with Google AI Studio, Firebase & Stripe (Step-by-Step Guide)
Introduction: Google AI Studio + Gemini 3 Booking Dashboard
Google Air Studio has just been upgraded with Gemini 3 and
it's about to destroy all SAS businesses. I've just built this booking
dashboard for my clients and not only does it look like I hired a professional
front end to make this, I've also just made it fully functional using just one
no code tool called Firebase. You can create an account, book a time slot, pay
with Stripe to confirm your booking, and even receive this email confirming the
time and date. And of course, you can view all of your
upcoming calls in the dashboard and reschedule them at any
time. You guys have been asking me for a Stripe tutorial for ages. So, this is
the perfect opportunity to show you how to set it up. So, by the end of this
video, you'll know exactly how to build an app like this from start to finish
and configure Stripe payments. But before we start, we're about to reach 20,000
subscribers on this channel. And I'd love to keep making videos like these for
you guys. So, make sure to hit that
subscribe button and let's get right into the video. Before
building anything, you're going to head over to the description of this video
and get the step-by-step guide I made for it. It's going to walk you through
all of the setup steps and also has the prompts you can just copy and paste
into your app without having to retype anything. So, make sure to get this. And
for our first step, you're going to head over to Google AI Studio and the build
section and paste in the first prompt. I'm just
Step 1: Generating the Booking Dashboard UI in Google AI Studio
1.1 Prompting the AI for the Initial Design
going to say create a one link AI session booking dashboard
with a modern minimalistic design using white and pastel colors. Users must
sign up or login first and once authenticated they should be able to view all
upcoming AI sessions in a board or calendar view. Click to book a 1 hour or
2hour private AI consulting session. The app should automatically detect the
user's time zone and show my availability in the local time. And I'm just going
to insert my schedule here in ESD time zone. Now
the app will get my actual schedule from fire store but I'll
add it here anyway so we can see how the front end works. When a user clicks
book session, show a booking confirmation screen, a stripe payment button, and
after successful payment, the book session should appear in the user's
dashboard. For now, the app is going to be front end only, but should behave as
if it's fully functional. And here's what the app looks like with literally
just one prompt. And since it's purely demo, I
can type out any credentials. I'm just going to say
test.com. Type out any password and just sign in. And here's what that
dashboard looks like. Not bad. I'm going to go ahead and book a slot right
here. And I can see a 1 hour or 2hour session. Click continue to payment. And
as you can see, the pay with Stripe button appears. Let's click it. I
absolutely love this booking confirmed animation. Now, it looks pretty good,
but I'm not happy with all of the available slots just appearing in
the UI like this. I'd rather just have them appear only when
a user clicks to book a new session. So, let's ask Gemini to make a couple of
changes. I'm just going to say the app looks great, but update the behavior as
follows. When a user signs in, they should only see their upcoming sessions,
not the full on availability or open slots. User should only see available time
slots after clicking book a new session. Also, slightly mute the purple palette
to make the design softer and more minimal. I'm
going to send the prompt in and while it's getting changes,
I'm going to go ahead and start on my backend setup in Firebase. Now, if this
part of the video seems a little bit too fast for you, you can watch a detailed
tutorial I made on Firebase. It walk you through how to set up authentication,
a database, storage step by step. So, we don't waste any time on this today.
I'll link it for you in my free guide so you can check it out. Now, the first
thing we need to do here is to create a new project. And
Step 2: Setting Up Firebase Authentication
once that's done, I'm going to head over to build
authentication. And here I'm just going to add two signin methods, email and
password and Google signin. Now, we just need to create an app to link our back
end to Google AI Studio. So, in project overview, I'm going to click add an
app. I'm going to choose this web icon right here. Give it any name. And in the
next step, I'm going to copy this SDK code Gemini generates. Now, this is our
key to connecting everything together. So, make sure to
copy and paste it somewhere. Now, I'll just need a database
where I'm going to store user details, my schedule, and all of the booking
information. So I'm going to head over to build fire store database and I'm
going to click to create a new database with all the default settings in
production mode. Now once it's done the first thing I'll do here is to add my
availability. So I'm going to create a / settings collection and add an
availability document inside it. Now inside the document I'm going to
Step 3: Configuring Firestore Collections and Availability
add this structure time zone as a string which will be est
and a weekly map type field. And inside this field, I'm going to add each day
as an array of free time periods. I'm going to go ahead and save it. And here's
what it's going to look like. We have a main settings collection with my
availability and my schedule inside this document with all of the days and time
periods. Now, I'm also going to add another main collection called global
bookings and just generate a random ID here. Now, this is where our
app will automatically add all bookings for all users. So,
everyone can see which slots are free and taken. Now, right now, you don't need
to add anything else here. Our app will add the rest automatically. Now, last
thing left for us to do in Firebase is to set our security rules. Now, if
you're building this exact same app, you can just copy and paste mine, but if
you're building a different one, you can learn how to prompt Gemini to generate
yours in my free guide. Now in my rules you can see
that every user can read my settings document which
basically means that they can view my schedule but they can't make any changes
in it unless they're an admin. Now each user can read and write in their own
document in all path which basically means that they can view edits and delete
information only in their own profile. Now all path here means that it applies
to all levels inside their own document. So if you have a structure where you
have folders inside folders inside folders, every user can see this
but only if it's inside the Rome user ID document. And
finally, we have rules for global bookings that basically mean that anyone
who's logged in can view all bookings to see which periods are free and taken,
but they can only add and edit their own bookings. Now, make sure you have
figured the rules part out so you don't get any permission errors in the
future. With our rule set up, let's head back and see what our app looks like
and start adding our back end. First, I'm just going to paste in this
Step 4: Linking Authentication and User Flows with Prompts
authentication prompt from my guide. All you need to do here
is just to replace this SDK code snippet with the code you copied earlier when
you created your Firebase app. And once that's done, I'm also going to go ahead
and paste in my email verification, password change, and Google sign up
prompts. Now, Gemini 3 is amazing at understanding instructions. Alicia put
everything in one prompt and it understood everything from the first try. No
need to even split it into multiple prompts anymore. For Google
signups, don't forget to deploy your app. Copy this app link
and paste it into authorized domains and settings. Otherwise, it just won't
work. Also, remember that Google signin does not work in preview. You can only
test it out in your deployed app. Now that it's done, I'm going to go ahead and
sign up and I'll need to confirm my email first. Now, I didn't verify my email
domain yet. So, all of my Firebase emails will land in spam. So, once your app
actually goes live, make sure to verify your
domain here in authentication templates settings by just
hitting on this pencil icon and then clicking to customize your domain. Now,
I'll go ahead and sign in with that confirmed user. And here's my dashboard. As
you can see, it removed all of the slots from the main screen, and the UI now
looks much cleaner. I can only see the slots when I click to book a new
session, which is just what I wanted. Now, if you go back to authentication of
Firebase, you should see the user you've just registered with
right here. I'm seeing mine, so it's working perfectly. Now
that our authentication is linked, let's go ahead and hook our database. I'm
just going to copy and paste this exact prompt from my guides to link the users
collection. This will automatically add everyone who signs up or signs in into
our users collection and fire store and add their user ID as a document inside
it. So once it's done, I'm going to go ahead and sign in. And as you can see in
Fire Store, a users collection was just added
automatically. And here is my user ID document inside it.
Our users collection is now linked. Let's go ahead and do the same with my
schedule and booking. So, I'm going to say 22 clicks book a new session. Read
all available slots in my main/ settings/avvailability document and display all
my available slots 60 days in advance excluding already booked session in /
global bookings collection. Now, this is going to show all of my schedule from
settings minus the sessions that users already
Step 5: Booking Flow, User Bookings, and Global Bookings
booked that are going to be stored in the / global bookings
collection. Now, let's save the event the user booked into the user ID
document. I'm going to say when a user hits on a slot and books a new session,
create a bookings subolction in the document and add all information in this
format. Now here I'm also going to say that for now all payment confirmation is
purely threatened because we haven't configured Stripe yet. I'm going to ask it
to add the following fields. The start time,
end time, duration, payment status, when the event was
created. You can fully customize this to save any information you want. And I
will say the path is slash user/ user ID bookings and the booking ID. Now our
other users also need to know that this slot was just booked. So let's go ahead
and write it in our global bookings collection as well. And we'll add the user
ID field there. So we know who the booking belongs to. So I'm going to say
simultaneously add the booking into the main/global bookings collection in this
format. I'll say the path global booking/booking ID and
fields user ID start time end time duration payment status a created ad. So
basically the same fields. Now I'd like each user to be able to see the booked
events in the dashboard. So I'm going to say when a user logs in show all
bookings in the dashboard from this path / user/ user ID/bookings/booking ID.
Going to go ahead and send this pro in. Now that it's done, let's go ahead and
hit to book a new session. And you'll see here that it's now syncing my
available times from the database and showing them up right
here. Now, I set them up in EST time zone, and I'm currently located in Central
Indonesia time. And as you can see, the first slot here is 300 p.m., which is
2:00 a.m. EST. So, it's showing them up correctly. Let's go ahead and pick that
slot. I'm going to choose 1 hour session. Click continue to payment. Pay with
Stripe. Of course, for now, this is purely front end. And as you can see, it's
now showing confirming your booking, which
means that it's actually syncing it to the database. And
once that's done, it's going to forward me to our main dashboard where my
booking appears. Now, if we go back to our back end, you'll see that in global
bookings, a booking ID was just added with my user ID and all of the
information. And in users collection under my UID, we also see the new
subolction called bookings with my booking inside it and all of the fields.
That's working perfectly. Our app now works perfectly, but payments are only
Step 6: Setting Up Stripe Products and Prices
done in demo mode. Let's go ahead and set up Stripe so we
can actually receive payments from our clients. So, the first thing you're
going to do here is head over to your Stripe account and hit on your profile.
And you're going to switch your account into sandbox mode. Now, this is a
testing environment, so we don't have to use any of our real money to make
payments while we're in development. I'm going to go ahead and click create a
sandbox. And here it is. My store is now called Teal Tunnel. Now,
the first thing you're going to do here is create products
you want to sell. So, in product catalog, I'm going to click add a product and
name the first one hour private AI consulting session. Now, you can either
choose recurring payments for subscription or one-time payment. Now, in my
case, the clients will only pay once per session. So, I'm going to choose a
one-time option. Enter my price $99 and hit to add a product. You're going to
do the same for the 2our session. Add the name. Choose one time
price which is 179 and save it. Now that our products are
created, we'll need to copy their price IDs so we can connect them to our app.
So to do this, below you'll see this developers workbench console. Go ahead and
click on the arrow to open it. And you'll see the price on the left. Go ahead
and copy that price ID and save it somewhere in notes. We're going to do the
same for the 2our session. And now let's head back to Firebase to install the
Firebase Strike plugin that will do all the work for us.
Step 7: Installing and Configuring the Stripe Extension in Firebase
Are you trying to build a custom app for your work or
business but struggling to automate the back end? Well, building these apps is
my absolute passion and I've built hundreds of these for my clients. So, if you
want to learn how to do it, feel free to book a personalized session with me
where I'll teach you how to build the apps you need or shoot me an email if you
want me to do it for you and I'll give you a quote. You'll find all the links
in the description and let's get back to the video. To do this
in Firebase, you're just going to head over to build
extensions and you're going to hit to explore the extensions hub. Now, here in
the search bar, you're just going to type Stripe and you'll see this first run
payments with Stripe extension pop up. Go ahead and choose it and next to it,
you'll see the install in Firebase console button. Hit it. Now, here you're
going to have to select the project we created earlier. And in setup billing,
you're going to hit to upgrade
project to console button. Now, you're going to create a
cloud billing account because you're gonna have to upgrade your project to pay
as you go place. Go ahead and hit this. Now, here you're just going to enter
your billing information. Click to confirm your purchase. Once your project is
upgraded, don't forget to add a budget limit amount in case some bug happens.
So, let's go ahead and press continue. Link cloud billing accounts. And here,
you're just going to press done. Now, in the
review API settings, you're just going to go ahead and check
out those functions. And below it, you'll find the three services that you'll
need to enable. So, press enable next to the first one, next to the second one,
next to the third one, and hit next. Now, in access settings, you're just going
to press next again and leave it as default. And now, this is the most
important step to configure our extension. Here, you're just going to leave
most settings as default, but let
me walk you through the most important ones. So, in
location, just going to choose the default one. And in customers details and
subscription collection, you're going to leave it as customers. So when a user
goes ahead and paste with stripe on your website, the user ID document will get
added inside this customers collection just like we do with users. Now in this
field, you could choose to sync your customers. So they will get created in
both Stripe and Fire Store. So I suggest you choose the sync
one. And now in Stripe API key, this is the most important
field here. You'll need to add your secret here from Stripe. So we can connect
the extension. To get it, go back to your developers workbench. And in
overview, I'm going to copy this secret key and paste it back into the Stripe
API key field and click to create a secret. Now the next web hook secret field
is extremely important, but we're going to leave it empty for now. We'll add it
in the future once we set up our web hook. For
now, just going to hit to install the extension. It's going
to take 3 to 5 minutes to set up as you can see right here. Now, I have no idea
why, but with all Fire Store extensions, once you set them up for the first
time, it gives this error. So, if this happens to you, you can just click to
view details and click to retry installing. And somehow that always fixes the
problem. Our extension is now installed and you're going to be able to create
payment links by sending requests to Stripe. But
Step 8: Setting Up Stripe Webhooks and Firestore Rules
Stripe also needs to communicate back to us to tell us what
happened with the payment. Did it fail? Did it succeed? Or did the subscription
expire? So to do this, we'll need to configure a web hook in Stripe. So you're
going to head back to your developers workbench. And here you're going to click
on the web hooks tab. Go ahead and click to add a destination. Choose your
accounts and continue. Now in events here you'll need to add events which will
tell our back end what happened. So did the payment
succeed? Was it refunded? In my guide you'll find all
actions to add here for both payments and subscription. We're just going to
choose the most important ones. Will be events like checkout session completed,
payment intent succeeded, checkout session expired, payment intent, payment
failed, charge refunded, charge dispute created, etc. Now, with all events
selected, you're going to click continue and choose the web hook endpoint. Now,
here we'll just need to add an endpoint URL from Fire
Store. So to find it, you're going to head over to build
functions and you're going to find this handle web hook events function. When
you hover over the name, you'll see this request URL right here. Just hover
over it and copy it. This is exactly the end point we need. Just go ahead and
copy it and paste it into the Stripe endpoint in the web hook. Now just click
to create the destination and your web hook is set up. Now we just need to add
the web hook signin secret. you'll see on the right
here into the Firebase extension for it to work. Just go
ahead and copy it. And now back in Firebase, head back to your Stripe
extension. Manage reconfigure extension and scroll down to find the Stripe web
hook secret and just paste the signing web hook secret. We copy it right here.
Hit create a secret. And once it's done, don't forget to save everything at the
top. It'll take about 3 to 5 minutes again for changes to take effect. Now,
when a user presses to complete a payment in our app, Stripe is
going to update our Fire Store database with a payment and
subscription information. So, we need to change our Fire Store security rules
to allow this. All you need to do is just copy these few lines of code from our
guide and paste them into your rules and hit publish. Now, these rules are
universal and will work for both one-time payments and recurring payments. Now,
the code you see here will allow Stripe to create documents with our user ID
inside the new customers collection when they pay and also allow it to add
subolctions
like payments for onetime purchases and subscriptions for
recurring payments. Now, the last step here before we connect everything
together, you're just going to head over to build and functions and Firebase
and you're going to hover over this create checkout session function and just
copy this exact name. And that's it. We're ready to connect payments to our
front end. Now, before prompting anything, you're going to go ahead and
redeploy your app first and copy the URL. We'll need you
Step 9: Connecting Stripe Checkout from Frontend
to redirect our users to the success or failed payment page
depending on how that payment went. So, this was my prompt. You can just copy
it from my guide and customize it to your case. When a user presses pay with
Stripe after choosing one or two hour session, you're going to call this tool.
And here, you're just going to paste in the exact function name we copied from
functions earlier, the create checkout session one. And then, I'm just going to
provide pricing options. Now, the default mode is subscriptions. So, if
you're setting up onetime payments, you're going to have to
specify it. So, I'm going to say onetime payments, not subscriptions. And then
I'm just going to say 1 hour session the price and the price ID we copied from
our Stripe workbench earlier. So, it's going to be price underscore and a
string right here. I'm going to do the same for a 2hour session. Now, to
generate your Stripe payment link, you're going to need these four parameters.
The first one is price and I'm going to put the
price ID in curly brackets. Meaning there's going to be
different for the one and twoour session. We already provided those IDs at the
top. Now for the success URL and cancel URL, you're going to have to tell your
app where to redirect your user once they make a payment. So here you're just
going to paste in the deployed app URL/success. And for the cancel URL, the
same one but slashfailure. Now once your app actually goes live and you deploy
it to a domain, you're going to have to change it to
your actual domain. Now the last parameter is very important
to link the payment to the actual user ID who made it. So I'm going to say
client reference ID and put user ID in curly brackets. After the tool is
executed, redirect the user to the generated stripe payment link. Now before
you try anything out, I strongly suggest you ask Google AI Studio to console
log all responses you receive from Stripe. This way you know everything
happening in the background and can investigate what happened in
case of an error. So once that's done, I'm just going to go
ahead and click to book an AI session. I'm going to choose any slot. Continue
to payment. Click pay with Stripe. And as you can see, we now get redirected to
this empty window. Now, we won't be able to actually pay in preview mode. So
let's go ahead and open the console and see what happens. And you'll see that
it actually just generated this payment link for us. Now, if you didn't get any
errors in the console and it managed to generate the
Stripe payment link for you, congratulations. Everything is
set up correctly. But to properly test it out, you're going to have to redeploy
your app again and open the link. This is not going to work in preview. So, now
let's go ahead and pay again in this version. And as you can see, we're now
redirected to the actual Stripe window. At the top here, you'll see that we're
in sandbox mode. My store is called Teal Tunnel. Now, to test the payment out,
you can just pay with the standard Stripe
Sandbox card, which is 4242, repeated four times, and any
other numbers or details in the rest of the fields, or you can also choose to
pay with Google Pay. As you can see, it's also tied to the 4242 card, so it's
not actually using your Google Pay account. Now, you're just going to click
pay. And in a moment, you'll see that your payment was successful. And we now
get this cannot get success error message. Now this is absolutely normal
because we haven't told our Google AI studio app what to do
Step 10: Handling Success and Failure Routes, and Displaying Payment Info
when the user hits the /success route. But before we set
this up, let's go ahead and check if everything worked in the background first.
Now if you go back to fire store, you'll see that a new collection customers
with just created and inside we have my user ID and inside my document we now
have two subolctions checkout sessions and payments. Now this payment
collection would be called subscriptions if you set up recurring payments. Now
inside payments you can see my payment ID and all other
information like price, currency date and so on. So this is
the collection you'll use to display payment information in your front end like
expiration date or payment plans. A back end work perfectly. We just need to
tell Google AI studio what to do when the user hits the success or failure
route. So I'm just going to say after payment we see the cannot get success
error. When a user hits slashsuccess, they should be redirected to the main
page. And a message payment successful should show up at the top. When a user
hits
slashfailure, they should be redirected to the same main
page. And a message payment fail should show up at the top. Now, once that's
finished, you're going to have to redeploy your app to test out the Stripe
payments. And now, when I go ahead and pay with Stripe and just enter in my
credentials, I'm going to pay with Google this time. And now I'm redirected to
the dashboard. And you'll see the success message at the top. Now once the
payment is completed successfully, you're going to want to tell Google AI
Studio which payment information to show in the UI. This
could be things like the plan they paid for, the expiration date. But in my
case, I would just like the user to see payment details when they go ahead and
open a calendar event. But to do this, I'll first need to tie that payment ID
to the event so the app knows exactly what transaction to show. So just going
to say when user makes a payment with stripe and is sent to success. Update
information in the booking ID. I'll write the path here
with the payment ID field from Stripe. Now I'll tell it
exactly where to find this payment ID in our database. I'm going to say
payments/p payments ID. Now when a user opens the booking card, show all
information about their session and the payment information from that payment
ID link to the event. And now that it's done, I can go ahead and open any card.
And as you can see, the payment information will now load up from our database.
We can see the price, the status, method, and this reference
number. You can customize which details to show here in your
prompt. So, that's it for today's video. If you found it useful, make sure to
hit that subscribe button so we can reach 20,000 subscribers. And if you have
any other video suggestions, make sure to leave them down in the comments. You
guys suggested this video. I read all the comments you leave. Thank you so much
for watching and I'll see you in the next
Post a Comment