This is an introduction to using fasttop

to build a simple project.

We're going to build this type of simple

country store.

We may put images in here in the future,

but it's using a something called a

model, a data model, which is the main

point of this tutorial. These are your

learning objectives for this tutorial.

Your main goal is to build a Python web

application. We're using fast API. We

have a stack around fast API called fast

op. That's entirely open source. In a

Python web application or most web

applications, there's a concept of a

route. There is for example the home

route. When you go to a web page, there

is a route at the end of the domain.

Usually, if it's by default is just

slash. The next concept is something

called a template. Think of a web page

template where you have HTML and you

have embedded in the HTML

some Python code to handle things like

for loops.

Next we'll cover models and in this case

we're using SQL model

pyantic

for data type checking and there's a

model

file on fasttop the sample application

we'll be using which we'll be editing

and the design will be handled by a

framework called tailwind going to a

this GitHub repository here opkey/bast

desktop. I'm going to go to this code

down arrow. I'm going to select download

zip. I'm not going to clone it down

because I don't want to contribute back

to this repo. I want to start my own

project. So, the easiest way in my

opinion is to just use this zip here.

I'm going to download it. And now it's

in this folder. I'm going to move it

into a brand new folder on my computer.

On Macintosh, I'm going to double click

it. It opened it up. I'm going to delete

the zipped file. Move into trash.

And I'm going to rename this file

so that we don't get confused. So I'm

going to call mine

country

store

tutorial. I have a blank terminal here.

I'm going to type in cd. I'm going to

drag and drop the folder onto the

terminal and I'll press enter. And now

I'm in the folder that I just

downloaded, which is the country store

tutorial. I just renamed it. I'm going

to do ls- a to see the folders that have

a dot in front of it as well.

I'm going to delete a bunch of the

folders. I'm going to do recursive

delete. Make sure you're careful with

this one. Uh, so recursive will go down

the directory structure. F is force. So

I'm going to have the GitHub

not the git the GitHub because this is

uh it's using a GitHub workflow. I'm

going to delete the blog which we don't

need. I'm going to leave the docs which

it's on the main repo. So you if you

need the docs, you can just look at it

there. And then I'm going to leave the

test

test

and

let's see where we are right now with

this.

Let's type in a at this point there's no

DB. There's no test DB.

So, I'm going to I have UV installed

already.

If you don't have UV installed, you'll

need to install it. I just run UV sync

uvun

op.py.

I'm going to initialize a database

I'll call DB

initialize the database

and I have I'm using SQL light.

So there's a a DB is right there. I'm

going to create a super user

uv runoffman.ply apply super user and

then I'm going to run the server. We can

check out what we what the starting

point is.

So there's a pretty extensive demo which

you can it good to look at but it's

going to get confusing if this is what

you're editing from the start. So we're

going to delete this page and some of

this so that it's easier for you to

focus on the main points. So this part

of tutorial will be on the styling in

the terminal I'm going to control C I'm

using called cursor which is pretty

common. Now

for the purpose of the tutorial I'm

going to turn off the cursor tab. I'll

just press snooze. I'll snooze it for

one hour.

I'm going to do control back tick to

open up this console on the bottom.

And then we'll go command shift or

command option B. It collapses the AI

portion of that window there. You can

open it up from right here too. In the

left hand panel, there's a bunch of

folders. We're going to go templates.

Within templates, the main file is

index.html.

and we will check out and I'll focus on

index.html HTML which is in templates.

Do

the command B on map that collaps the

side panel.

We're going to go down.

Okay. Right at line 35

on this version of fast stop there's

something called main. within that

there's there's a div for

uh this class right here which is some

tailwind syntax.

So I'm going to put my cursor there

and I have rainbow indents.

So I'm going to follow it down.

It keeps going. So there's a div that's

one before the ending main.

I'm going to delete everything in there.

Okay, you identify the main content.

There's a main tag and there's only one

of it in here. And there's a bottom main

tag. And then there's a single div in

here with some Tailwind syntax which you

can ignore for now.

So it's main and there's a single div in

here. The bottom terminal, I'm going to

run uv run

op

run server.

Starts off a local host at port 8000.

Let's open up a web browser.

Okay. So, right now I have a blank page.

There's nothing here because I took out

all the guts of the the main. If you

want to because we're using tailwind and

the styling is going to be a little

funky, right? So, if you just do

food uh product or something

like that, it's not going to actually

have the H1 stylings, which may it may

be a little surprising to you if you're

not used to using Tailwind, but the idea

is it does inline syntax. So you do text

hyphen Excel and you can look at the

Tailwind site for the information on

this on which of the commands to use

here.

I'll make it bold.

So class of 2XL and font bold.

I'll pressing reload here and I'll have

food products. We've got this thing up

here and this. So, you want to make it

into your own

uh store. So, look for a graphic right

now.

I'm going to use this simple graphic

here. Just grab one from the internet.

You're not going to be releasing this

product most likely with this. I think

just for your your own uh development on

your local computer, I think any graphic

is fine.

I'm going to open up the sidebar again

with commandB.

There's a folder called static here. In

the folder, there's something called

images. I'm going to create a subfolder

in images called

Craig store,

which is my name. I'm going to drag and

drop the the logo in here. So, we have

country store.jpg JPG

and you'll see this keyword include for

and include for header and this is for

the footer. It's in the subfolder called

partials. So we'll go into partials and

we'll look at the

header first and we will

notice right here on line seven already.

You can find the path to the logo.

If remember I have it in Craig

store

I believe

country store.jpg JPG

JPEG.

And there's this span here which

originally was fast off. We'll just put

Craig store. You should put your own

name.

We have the logo here.

And there's some headers here which

we're not going to use.

So I'm pressing control back tick

to collapse the bottom portion.

So there's the demo pages

and we're not going to use it.

Let's find the ending do.

It's right there.

There's a comment that says management,

which is how I know that there's a div

there.

Got rid of that.

Um,

I think for your We're going to delete

this one too, just to make it simpler,

just for the aesthetics.

So, we'll scroll down

right above database status.

I think I'm going to leave the database

status here because

we're we're going to connect it to the

SQL database in the future. It might be

good to see uh what the status of the

database is. If you want to add it back

in, you can refer back to the original

GitHub repository.

Okay.

So, do command

B to open up the sidebar template

partial and let's go to footer.

The same thing here. It's not the op key

logo.

Want the country store

and

We start at JPEG

Craig_tore

slashcountry

store.jpeg JP EG on ours

store

instead of the site being about open

source

old

school

small

town

charm and

hustle

shopping experience.

Talk to the owner.

Okay. So, there's some quick links here.

Um, for the purpose of this demo, that's

called hot products.

So, this is linking to different demo

pages, right? So, I'm fast out, but

we're not going to do that. So, I'm

going to delete the bottom two list

items.

and we'll just show you what it looks

like at this stage. So, we've changed

that. Working on the hot product right

now

and instead of Tailwind CSS

or here design demo, we'll call it uh

pets and

household goods.

Uh we don't have a separate page right

now. So we're just we just use a pound

sign as a placeholder for the route at

this point.

So, pets and household goods under hot

products. And then we won't have

technologies here.

We'll have um

entry days

discount.

We'll change it from CSS to

30%

off.

And instead of HTMX, we'll have it be

50%

off. That'll be a huge discount.

Delete the rest of them.

And then there's this bottom portion

here.

So I'm going to delete the the license.

You can make the license whatever you

want.

And we don't want to link to

OP key.

We'll have the

your name for the copyright.

Move it over so you can see. So, we just

have the div single paragraph and it's

the copyright of your name. It's kind of

like this right here. Or

you can make like a fake company, right?

Like Craig Incorporated.

Okay. We can start populating this area

with products.

So, I'm going to uh X out the footer and

X out the header. We won't be working on

it anymore. That's just the graphic. And

we're going to focus in on the

index.html

file in the templates. We just have this

food product right here.

So we'll start with a

basic uh ginger 2 syntax. So you do

curly bracket and there's this percent

sign and then percent sign curly bracket

and here you can put some Python like

code like for I in range

five

and at the end of your for loop

you have to do a keyword and four and

within here you can do your

uh

the loop the actions of the loop. So

we'll set up a div and we'll start off

with

product.

So I'm doing curly bracket curly

bracket. It's different from this. This

the Python syntax ones are curly bracket

percentage but this one will just be a

variable and the variable is I. So that

eye and that eye are the same.

So it's a special Python variable,

right?

And we'll see what it looks like. So it

goes through the loop.

You can match a product with this and

it'll do it out here.

Okay. So let's make it just a little bit

nicer.

not not

anything too crazy here. So, let's go to

this div here which has the

um the product right now.

Press enter.

Let's set up a just some basic styling.

Background will be white. We'll have it

rounded

kind of a a larger round. Apply some

shadow. make it kind of on the larger

side and we'll apply some padding of

four. So P without uh specifically you

should put the padding on all four size

of it. So it's starting to get a little

bit of styling here.

Okay. So right where this for loop is

I'm going to put another div in here.

So div and I'll end the div after the

for loop.

So for this styling right there

class equals

grid

and then we'll do so by default it's the

mobile mobile mobile first view grid

columns one if it's on a mobile phone

like so kind of narrow if it's a medium

width web browser we'll two grids

and a large

grid will be

let's put it at three grid columns

three and we'll have a gap between the

grids of four.

The bigger the unit, the larger the gap.

Let's see how it looks. Okay, so there's

a four gap here. If I

make it more narrow is like two across

and continue to make it more narrow like

a mobile phone. It'll be one. So, we can

place the products right here.

Press command D. Opens up the side

panel. I'm going to collapse the

templates for now. Open up something

called models.py.

And there's a bunch of stuff in here.

I'm going to grab the

product

right there.

Pressed enter.

Pasted it. I have

duplicate prop. So I'm going to call 101

food

and

table name will be foods.

We'll keep the u uh uyu ID and the

uh this the same. So we now have a model

in this file called models.py and that

class is called food.

You don't need self id or self.name

because

it's extending the SQL model which is

handles it for you.

So this is imported from up there

and yes without SQL model

um being the superass you would have to

put self ID

we've covered templating so far that's

the HTML page uh we just started to

build one SQL model SQL model does have

the pyantic type checking in it and we

just have the basic model right Now in

the models file uh we have not covered

routes yet just to be clear models built

on paidantic. Paidantic does the type

checking and also the the IDE completion

and we'll show you what that means. So

let's go to the routes.

In the left hand bar, there is a folder

called routes. And in the folder called

routes, there is a file called pages.py.

So, let's click on that one.

And

right here on

75 is router.get

the slash. That's the home route. and it

says homepage right here. It if you

can't find it right there. So let's

first start off with a

foods

with the colon and I'll have to type

here

which will be a string a list of strings

and we'll have a list here and it will

be let's go like burrito

we'll have a pokey which is raw fish

over some usually poke ball for rice.

We'll have uh

steak

and we'll have um

just had a pretty big lunch, too. I had

a mahi sandwich for lunch. Little mahi

sandwich.

Wow.

Looking pretty nice.

Okay, so I have a list of foods which

are a string right now

and we're going to pass it over

here. I'll go

foods.

There's the handle and foods. A little

comma there. We'll change this title of

the homepage to

Craig store

specializ in selling food. I guess

in the

index.html

reason is this Python syntax. Well, I'll

go

for food. on the screen right now in

foods a variable that I just passed over

from the route. We're going to uh output

product will be food

and we'll see whether it comes out.

It does.

We can delete that product

and

do it like that. However, as this thing

gets more complex,

uh we don't want to

put the foods in a string and eventually

we actually want to have it in the

database.

So,

we're going to import the model.

It's called models.py. name of the file

and the model that we created is called

food. So at the top here in the import

statement is already from models import

user and we're going to put in the

class. Remember what it was? It was

called food

and

there's some llinter errors or llinter

warnings. Let's just ignore it for now.

Okay, let's go back to the home route.

And instead of a list of

foods with that string, we can now

specify the data type as a food. And

we can start instantiating

food.

Uh because we're using paidantic, we

know that the two things are uh name and

description.

So we'll go name a little colon there is

burrito

and the description is um

uh tasty food or something for now. Oh,

which is the description is

description

is tasty food.

And I think this should be equal signs.

Okay, start adding more food in here

pizza. And actually the cursor

tab thing is

great at making fake data. So let's just

unsnee it.

I don't know about tasty burrito.

That would be better than that.

Okay. Well,

guess it has

pretty weak description here,

but maybe it's good enough for testing

or we snooze it.

So you instantiate a

the the food object and let's just drop

it into the

so now it's a list of this class or

object food. So it's not just going to

be food, it'll be food

name.

We'll have another descript uh div for

the food.escription. description.

Okay.

And it should be within the card.

div

and

this one.

Okay, so there's an outer div which is a

card, right? So this this section here

is a card. Within the card, there's two

divs. Well, let's see whether it works

before I explain it. Okay. So, the first

one's the the title and then the second

one's a description.

We want to just add a little bit of

styling here.

Nothing too crazy.

Maybe font

bold. Maybe I'll make the the text uh

Excel

so it stands out a bit.

Looks okay.

Okay. Uh you can easily extend this with

the URL.

Oh, there's actually

in this class you can just there's an

example here which is just a string. So

you just put the string in for the

the food which is the one we're working

on and you can have a string here and

put an image there. You can have it be

aworked image initially and then we'll

show you how to store it to be a static.

So you can easily extend this with text

or images if you want and get more

comfortable with the model and the

styling.

In the future, we're going to put this

into the database with some additional

pictures.