1 00:00:00,100 --> 00:00:02,640 In this video, we'll begin the process of 2 00:00:02,640 --> 00:00:05,460 building our full-stack Gemini application 3 00:00:05,460 --> 00:00:07,860 by breaking down the different parts and looking 4 00:00:07,860 --> 00:00:10,160 at how everything comes together. 5 00:00:10,160 --> 00:00:13,120 But before that, let's look at how the finished 6 00:00:13,120 --> 00:00:14,880 application works. 7 00:00:14,880 --> 00:00:17,060 This will help us get a good perspective of 8 00:00:17,060 --> 00:00:20,420 the expected outcome for our intended project. 9 00:00:20,420 --> 00:00:22,620 So here we have the finished application loaded 10 00:00:22,620 --> 00:00:23,940 in the browser. 11 00:00:23,940 --> 00:00:26,680 The app is a travel companion that helps users 12 00:00:26,680 --> 00:00:29,580 discover exciting places to visit during their 13 00:00:29,580 --> 00:00:34,360 The user can simply type in a destination, 14 00:00:34,360 --> 00:00:40,740 select a list of preferences, and hit search 15 00:00:40,740 --> 00:00:43,160 to see a list of recommended places to visit 16 00:00:43,160 --> 00:00:46,260 in the destination entered. 17 00:00:46,260 --> 00:00:48,560 And it also takes into account the selected 18 00:00:48,560 --> 00:00:50,380 preferences. 19 00:00:50,380 --> 00:00:52,640 In the results returned, we see the names 20 00:00:52,640 --> 00:00:55,760 of the suggested spots, a budget indicator 21 00:00:55,760 --> 00:00:58,740 that indicates how pricey a trip to the destination 22 00:00:58,740 --> 00:01:01,860 can be so that you can be guided by your budget, 23 00:01:01,860 --> 00:01:03,960 a description of the place, and highlights 24 00:01:03,960 --> 00:01:06,200 of each suggested destination. 25 00:01:06,200 --> 00:01:08,460 You are also given information about the best 26 00:01:08,460 --> 00:01:10,300 time to travel to the destination 27 00:01:10,300 --> 00:01:13,740 to take good advantage of all it has to offer. 28 00:01:13,740 --> 00:01:15,320 How cool is that? 29 00:01:15,320 --> 00:01:16,980 You can also click the Check Weather button 30 00:01:16,980 --> 00:01:19,140 on the destination card to see the current 31 00:01:19,140 --> 00:01:21,760 weather information at the place. 32 00:01:21,760 --> 00:01:25,120 This will also help you prepare accordingly. 33 00:01:25,120 --> 00:01:27,240 Aside searching by typing in your destination 34 00:01:27,240 --> 00:01:32,120 in text form, you can also just pick an image 35 00:01:32,120 --> 00:01:34,220 with the vibe or features of where you would 36 00:01:34,220 --> 00:01:35,560 like to visit. 37 00:01:35,560 --> 00:01:40,380 Let's select an image. 38 00:01:40,380 --> 00:01:43,160 Here we have selected the London Eye. 39 00:01:43,160 --> 00:01:44,820 You can also select a list of preferences 40 00:01:44,820 --> 00:01:48,900 and hit the search button to find destinations 41 00:01:48,900 --> 00:01:52,600 that are similar to the image you just uploaded. 42 00:01:52,600 --> 00:01:54,740 And as expected, we get destinations where 43 00:01:54,740 --> 00:01:56,840 the user can witness something similar to 44 00:01:56,840 --> 00:01:58,740 the London Eye ferries wheel. 45 00:01:58,740 --> 00:02:01,180 The destination cards contain the same details 46 00:02:01,180 --> 00:02:03,680 as the results from our text search. 47 00:02:03,680 --> 00:02:06,380 And we can also check the weather. 48 00:02:06,380 --> 00:02:09,300 So that's how the application works. 49 00:02:09,300 --> 00:02:12,060 Now let's break it down to frontend and backend 50 00:02:12,060 --> 00:02:13,880 components. 51 00:02:13,880 --> 00:02:16,300 At the frontend, we will need to implement 52 00:02:16,300 --> 00:02:17,880 the following features. 53 00:02:17,880 --> 00:02:21,360 a text-based destination search, an image-based 54 00:02:21,360 --> 00:02:24,340 destination search, a preferences list to 55 00:02:24,340 --> 00:02:27,020 further refine the search, a destination display 56 00:02:27,020 --> 00:02:29,520 for our search results, and a weather widget 57 00:02:29,520 --> 00:02:32,060 that will display the weather condition at 58 00:02:32,060 --> 00:02:34,100 a selected destination. 59 00:02:34,100 --> 00:02:36,020 These are the components that will call our 60 00:02:36,020 --> 00:02:38,820 backend service to request destination and 61 00:02:38,820 --> 00:02:41,280 weather information for display. 62 00:02:41,280 --> 00:02:43,280 For the backend, we will need to develop the 63 00:02:43,280 --> 00:02:46,880 endpoints that will serve our frontend application. 64 00:02:46,880 --> 00:02:49,460 Next we will need an endpoint for the text-based 65 00:02:49,460 --> 00:02:50,760 search. 66 00:02:50,760 --> 00:02:52,940 This will take in a search phrase and an optional 67 00:02:52,940 --> 00:02:54,360 list of preferences. 68 00:02:54,360 --> 00:02:55,780 It will then return the list of destination 69 00:02:55,780 --> 00:02:59,140 objects with all the details we just saw displayed 70 00:02:59,140 --> 00:03:01,160 in the destination cards. 71 00:03:01,160 --> 00:03:03,260 This endpoint will make use of the Gemini 72 00:03:03,260 --> 00:03:06,240 API to get our destination suggestions and 73 00:03:06,240 --> 00:03:08,980 return them as a structured output for use 74 00:03:08,980 --> 00:03:10,960 in our front-end code. 75 00:03:10,960 --> 00:03:13,260 We'll also need an endpoint to perform our 76 00:03:13,260 --> 00:03:16,220 image-based destinations search. 77 00:03:16,220 --> 00:03:18,840 This endpoint will take a file object and 78 00:03:18,840 --> 00:03:21,460 also an optional list of preferences. 79 00:03:21,460 --> 00:03:23,760 It will then use the Gemini API's multimodal 80 00:03:23,760 --> 00:03:26,680 capabilities to perform an image search and 81 00:03:26,680 --> 00:03:29,320 then return a list of destinations just like 82 00:03:29,320 --> 00:03:30,800 the previous endpoint. 83 00:03:30,800 --> 00:03:33,480 The third and final endpoint is the endpoint 84 00:03:33,480 --> 00:03:35,660 that will help us get weather information 85 00:03:35,660 --> 00:03:37,480 for a destination. 86 00:03:37,480 --> 00:03:40,120 This endpoint will take in the requested destination 87 00:03:40,120 --> 00:03:43,360 as a string and use a tool to get the weather 88 00:03:43,360 --> 00:03:44,900 for that destination. 89 00:03:44,900 --> 00:03:47,580 This is where we'll be making use of Gemini's 90 00:03:47,580 --> 00:03:49,240 tool calling feature. 91 00:03:49,240 --> 00:03:50,680 The weather information will then be sent 92 00:03:50,680 --> 00:03:53,160 back to the client in a structured form for 93 00:03:53,160 --> 00:03:55,760 display in our weather widget. 94 00:03:55,760 --> 00:03:58,840 So that's our implementation strategy and 95 00:03:58,840 --> 00:04:01,180 in each section of this course, we will be 96 00:04:01,180 --> 00:04:02,980 building each feature that we have discussed 97 00:04:02,980 --> 00:04:03,980 in this video. 98 00:04:03,980 --> 00:04:07,720 But first, let's get our Gemini API key in 99 00:04:07,720 --> 00:04:10,720 order to authenticate with the Gemini API. 100 00:04:10,720 --> 00:04:14,000 Details of how to do that comes next.