Here in VS Code, we can see the root folder
structure of our seed project.
It contains a backend folder and a frontend
folder.
And as you may have guessed, we'll be writing
all our server code in the backend folder
and our front-facing application in the frontend
folder.
Let's start with the backend folder.
For our backend server, we'll be using the
FastAPI library.
This will help us quickly spin up a server
in Python and write our endpoints seamlessly.
in the folder, we only have one file, the
requirements.txt
file.
This file lists every package we'll need to
install for our backend project.
We have the FastAPI and UVicom packages that
we will be using to build and run our server.
The Python.env
package for managing our environment variables
for this project.
The Google GenAI library, which is the Python
SDK for working with the Gemini API.
The Python, Multipath, and Pillow packages
for handling image uploads.
And finally, Pydantic for some simple data
modeling.
In the next video, we'll be installing these
packages and setting up the backend for development.
Let's head over to the frontend folder.
Here in the frontend folder, we have 3 files.
So let us explore them one by one.
First is our index.html
file.
This is where our markup lives and it already
contains all the HTML we'll need in this
project.
We'll be zooming into each part of the markup
when developing the features for this application.
This page is also globally styled with the
bootstrap 5 library for some simple aesthetic
appeals.
Next, we have the styles.css
file.
This file contains all the custom styling
for this application.
Most of it simply helps apply standard layout
principles and some easy transition animation
effects that we will be seeing in action later.
You really don't have to worry about this
file and we won't be touching it throughout
this course.
However, if you want to customize some of
the default stylings we have put here, feel
free to dive in.
Finally, we have the app.js
file.
This is where all the front-end scripting
for the project will be done.
And some have been done already.
As I mentioned earlier in this course, the
purpose of this seed project is to serve as
a jumpstart by taking care of a bunch of boilerplate.
So code for selecting page elements that we'll
be working on, code that shows alert messages,
collects checkbox selections, shows the preview
of a selected image, shows progress bars,
destination results and so on have all been
written into helpful functions.
You just need to call these functions as you
write the logic that handles your integration
between the back-end and the front-end.
We want you to focus on integrating Gemini
features into a software application and not
spend hours writing front-end code.
At this state of the front-end, we can actually
run it though I must note that nothing will
work right now because we have not started
building our project.
To run the frontend, go to the root of the
frontend folder in your terminal and run the
following command.
cd into our frontend and we'll say python-m
and run the HTTP server module set it to port
3000.
This will spin up a server at localhost port
3000 and now we can visit our browser and
check this out.
Here in our browser, we can simply go to localhost
3000, hit enter, and we'll see the front end
of our Travel Companion application.
But if we try to search anything, we won't
be getting any results.
Let's say I search Tokyo, there won't be any
result.
So let's get started building this travel
companion project and we'll get started by
setting up our backend in the next video.