In this video, we'll begin the process of
building our full-stack Gemini application
by breaking down the different parts and looking
at how everything comes together.
But before that, let's look at how the finished
application works.
This will help us get a good perspective of
the expected outcome for our intended project.
So here we have the finished application loaded
in the browser.
The app is a travel companion that helps users
discover exciting places to visit during their
The user can simply type in a destination,
select a list of preferences, and hit search
to see a list of recommended places to visit
in the destination entered.
And it also takes into account the selected
preferences.
In the results returned, we see the names
of the suggested spots, a budget indicator
that indicates how pricey a trip to the destination
can be so that you can be guided by your budget,
a description of the place, and highlights
of each suggested destination.
You are also given information about the best
time to travel to the destination
to take good advantage of all it has to offer.
How cool is that?
You can also click the Check Weather button
on the destination card to see the current
weather information at the place.
This will also help you prepare accordingly.
Aside searching by typing in your destination
in text form, you can also just pick an image
with the vibe or features of where you would
like to visit.
Let's select an image.
Here we have selected the London Eye.
You can also select a list of preferences
and hit the search button to find destinations
that are similar to the image you just uploaded.
And as expected, we get destinations where
the user can witness something similar to
the London Eye ferries wheel.
The destination cards contain the same details
as the results from our text search.
And we can also check the weather.
So that's how the application works.
Now let's break it down to frontend and backend
components.
At the frontend, we will need to implement
the following features.
a text-based destination search, an image-based
destination search, a preferences list to
further refine the search, a destination display
for our search results, and a weather widget
that will display the weather condition at
a selected destination.
These are the components that will call our
backend service to request destination and
weather information for display.
For the backend, we will need to develop the
endpoints that will serve our frontend application.
Next we will need an endpoint for the text-based
search.
This will take in a search phrase and an optional
list of preferences.
It will then return the list of destination
objects with all the details we just saw displayed
in the destination cards.
This endpoint will make use of the Gemini
API to get our destination suggestions and
return them as a structured output for use
in our front-end code.
We'll also need an endpoint to perform our
image-based destinations search.
This endpoint will take a file object and
also an optional list of preferences.
It will then use the Gemini API's multimodal
capabilities to perform an image search and
then return a list of destinations just like
the previous endpoint.
The third and final endpoint is the endpoint
that will help us get weather information
for a destination.
This endpoint will take in the requested destination
as a string and use a tool to get the weather
for that destination.
This is where we'll be making use of Gemini's
tool calling feature.
The weather information will then be sent
back to the client in a structured form for
display in our weather widget.
So that's our implementation strategy and
in each section of this course, we will be
building each feature that we have discussed
in this video.
But first, let's get our Gemini API key in
order to authenticate with the Gemini API.
Details of how to do that comes next.