1
00:00:00,320 --> 00:00:02,640
Here in VS Code, we can see the root folder

2
00:00:02,640 --> 00:00:04,700
structure of our seed project.

3
00:00:04,700 --> 00:00:07,220
It contains a backend folder and a frontend

4
00:00:07,220 --> 00:00:08,200
folder.

5
00:00:08,200 --> 00:00:10,260
And as you may have guessed, we'll be writing

6
00:00:10,260 --> 00:00:12,900
all our server code in the backend folder

7
00:00:12,900 --> 00:00:15,660
and our front-facing application in the frontend

8
00:00:15,660 --> 00:00:16,480
folder.

9
00:00:16,480 --> 00:00:18,820
Let's start with the backend folder.

10
00:00:18,820 --> 00:00:21,580
For our backend server, we'll be using the

11
00:00:21,580 --> 00:00:23,180
FastAPI library.

12
00:00:23,180 --> 00:00:25,040
This will help us quickly spin up a server

13
00:00:25,040 --> 00:00:29,160
in Python and write our endpoints seamlessly.

14
00:00:29,160 --> 00:00:32,100
in the folder, we only have one file, the

15
00:00:32,100 --> 00:00:33,360
requirements.txt

16
00:00:33,360 --> 00:00:34,840
file.

17
00:00:34,840 --> 00:00:38,060
This file lists every package we'll need to

18
00:00:38,060 --> 00:00:40,640
install for our backend project.

19
00:00:40,640 --> 00:00:43,480
We have the FastAPI and UVicom packages that

20
00:00:43,480 --> 00:00:46,560
we will be using to build and run our server.

21
00:00:46,560 --> 00:00:48,000
The Python.env

22
00:00:48,000 --> 00:00:50,400
package for managing our environment variables

23
00:00:50,400 --> 00:00:51,500
for this project.

24
00:00:51,500 --> 00:00:53,920
The Google GenAI library, which is the Python

25
00:00:53,920 --> 00:00:57,240
SDK for working with the Gemini API.

26
00:00:57,240 --> 00:00:59,160
The Python, Multipath, and Pillow packages

27
00:00:59,160 --> 00:01:01,500
for handling image uploads.

28
00:01:01,500 --> 00:01:04,420
And finally, Pydantic for some simple data

29
00:01:04,420 --> 00:01:05,700
modeling.

30
00:01:05,700 --> 00:01:07,800
In the next video, we'll be installing these

31
00:01:07,800 --> 00:01:11,420
packages and setting up the backend for development.

32
00:01:11,420 --> 00:01:14,060
Let's head over to the frontend folder.

33
00:01:14,060 --> 00:01:16,900
Here in the frontend folder, we have 3 files.

34
00:01:16,900 --> 00:01:20,100
So let us explore them one by one.

35
00:01:20,100 --> 00:01:21,900
First is our index.html

36
00:01:21,900 --> 00:01:23,320
file.

37
00:01:23,320 --> 00:01:26,040
This is where our markup lives and it already

38
00:01:26,040 --> 00:01:29,180
contains all the HTML we'll need in this

39
00:01:29,180 --> 00:01:30,240
project.

40
00:01:30,240 --> 00:01:32,580
We'll be zooming into each part of the markup

41
00:01:32,580 --> 00:01:35,460
when developing the features for this application.

42
00:01:35,460 --> 00:01:39,000
This page is also globally styled with the

43
00:01:39,000 --> 00:01:42,060
bootstrap 5 library for some simple aesthetic

44
00:01:42,060 --> 00:01:43,440
appeals.

45
00:01:43,440 --> 00:01:45,760
Next, we have the styles.css

46
00:01:45,760 --> 00:01:47,100
file.

47
00:01:47,100 --> 00:01:49,360
This file contains all the custom styling

48
00:01:49,360 --> 00:01:51,640
for this application.

49
00:01:51,640 --> 00:01:53,760
Most of it simply helps apply standard layout

50
00:01:53,760 --> 00:01:56,900
principles and some easy transition animation

51
00:01:56,900 --> 00:02:01,080
effects that we will be seeing in action later.

52
00:02:01,080 --> 00:02:02,820
You really don't have to worry about this

53
00:02:02,820 --> 00:02:05,900
file and we won't be touching it throughout

54
00:02:05,900 --> 00:02:07,200
this course.

55
00:02:07,200 --> 00:02:09,580
However, if you want to customize some of

56
00:02:09,580 --> 00:02:11,780
the default stylings we have put here, feel

57
00:02:11,780 --> 00:02:13,360
free to dive in.

58
00:02:13,360 --> 00:02:15,720
Finally, we have the app.js

59
00:02:15,720 --> 00:02:16,980
file.

60
00:02:16,980 --> 00:02:18,760
This is where all the front-end scripting

61
00:02:18,760 --> 00:02:21,160
for the project will be done.

62
00:02:21,160 --> 00:02:23,740
And some have been done already.

63
00:02:23,740 --> 00:02:26,120
As I mentioned earlier in this course, the

64
00:02:26,120 --> 00:02:28,680
purpose of this seed project is to serve as

65
00:02:28,680 --> 00:02:32,460
a jumpstart by taking care of a bunch of boilerplate.

66
00:02:32,460 --> 00:02:35,560
So code for selecting page elements that we'll

67
00:02:35,560 --> 00:02:39,000
be working on, code that shows alert messages,

68
00:02:39,000 --> 00:02:41,960
collects checkbox selections, shows the preview

69
00:02:41,960 --> 00:02:45,720
of a selected image, shows progress bars,

70
00:02:45,720 --> 00:02:48,840
destination results and so on have all been

71
00:02:48,840 --> 00:02:52,640
written into helpful functions.

72
00:02:52,640 --> 00:02:54,840
You just need to call these functions as you

73
00:02:54,840 --> 00:02:57,300
write the logic that handles your integration

74
00:02:57,300 --> 00:03:00,260
between the back-end and the front-end.

75
00:03:00,260 --> 00:03:02,300
We want you to focus on integrating Gemini

76
00:03:02,300 --> 00:03:05,200
features into a software application and not

77
00:03:05,200 --> 00:03:08,220
spend hours writing front-end code.

78
00:03:08,220 --> 00:03:10,300
At this state of the front-end, we can actually

79
00:03:10,300 --> 00:03:13,200
run it though I must note that nothing will

80
00:03:13,200 --> 00:03:15,700
work right now because we have not started

81
00:03:15,700 --> 00:03:18,260
building our project.

82
00:03:18,260 --> 00:03:20,640
To run the frontend, go to the root of the

83
00:03:20,640 --> 00:03:23,080
frontend folder in your terminal and run the

84
00:03:23,080 --> 00:03:26,340
following command.

85
00:03:26,340 --> 00:03:31,440
cd into our frontend and we'll say python-m

86
00:03:31,440 --> 00:03:36,940
and run the HTTP server module set it to port

87
00:03:36,940 --> 00:03:38,300
3000.

88
00:03:38,300 --> 00:03:41,320
This will spin up a server at localhost port

89
00:03:41,320 --> 00:03:45,060
3000 and now we can visit our browser and

90
00:03:45,060 --> 00:03:46,980
check this out.

91
00:03:46,980 --> 00:03:50,780
Here in our browser, we can simply go to localhost

92
00:03:50,780 --> 00:03:56,820
3000, hit enter, and we'll see the front end

93
00:03:56,820 --> 00:04:00,180
of our Travel Companion application.

94
00:04:00,180 --> 00:04:02,460
But if we try to search anything, we won't

95
00:04:02,460 --> 00:04:04,000
be getting any results.

96
00:04:04,000 --> 00:04:09,020
Let's say I search Tokyo, there won't be any

97
00:04:09,020 --> 00:04:10,000
result.

98
00:04:10,000 --> 00:04:12,280
So let's get started building this travel

99
00:04:12,280 --> 00:04:15,320
companion project and we'll get started by

100
00:04:15,320 --> 00:04:19,000
setting up our backend in the next video.